Applicant Tracking System

Mark je informačný systém určený pre personálne oddelenia na správu uchádzačov a výberových konaní.
Cieľom aplikácie je uľahčiť proces výberu nových zamestnancov a odbremeniť personalistov od administratívy, ktorá s týmto procesom súvisí.

Moja rola

Výskum, Analýza, UX design, UI design, Dokumentácie, Branding

Tím

Product manager
Product designer
3 x Developer
Support specialist

Rok

2017 - 2019

Výzva

Prvá verzia Marku bola spustená v roku pána 2011. Od tohoto momentu prešiel systém 2-krát facelift-om a jedným zásadnejším redesignom.
Žiadna z týchto zmien však produkt nenastavila tak, aby bol zabezpečený plynulý vývoj systému do budúcnosti bez zásadnejších úprav UX resp. UI.

Mojou najvačšou výzvou na tomto projekte bolo skĺbiť všetky požiadavky a navrhnúť systém, ktorý bude po architektonickej aj vizuálnej stránke udržateľný a nadčasový.

1. Research

Tabuľka porovnania konkurenčných produktov. Informácie sú získané z produktových stránok, blogov a webinárov konkurenčných produktov.

1.3 User personas

Produkt ma veľmi špecifickú oblasť zamerania. Tento fakt jasne definoval skupiny používateľov, pre ktorých je produkt určený.
Čo však absentovalo, boli charakteristiky jednotllivých skupín používateľov. Vlastnosti a skúsenosti daného používateľa sú jedným zo základných aspektov, ktoré vplývajú na schopnosť používať produkt alebo službu. Bolo teda potrebné zistiť podrobné charakteristiky jednotlivých používateľských skupín. Mojou ďalšou úlohou bolo zadefinovať používateľské persony. Ide o fiktívne modely používateľov, ktoré ale zobrazujú ciele, schopnosti, preferencie, spôsob uvažovania reálnych ľudí.

Vzhľadom k nedostatku času som zvolil možno trošku neštandardný zdroj informácií - LinkedIn. Keďže som poznal pracovné zaradenie cieľových používateľov, bolo vcelku jednoduché sa dopracovať k veľkému množstvu verejne dostupných dát od reálnych ludí. Najviac som sa zaujímal o:
- vzdelanie
- vek
- lokalita
- dĺžka praxe
- skúsenosti a zručnosti
- podľa aktivít v profile sa dala odhadnuť napr. schopnosť využívať potenciál socialnych sietí
- pri hlbšej analýze popisu, ktorý používatelia udávali pri svojich pozíciách, bolo možné celkom jednoducho zistiť, aké majú zodpovednosti a s akými problémami sa v práci stretávajú

Samozrejme, otázka je, do akej miery ľudia vypĺňajú svoje profily na LinkedIn pravdivo. Ľudia sa zvyknú často precenovať, hlavne pri sebahodnotení. No vzhľadom k účelu použitia bolo toto riziko pre nás úplne akceptovateľné.

Používateľské persóny.

2. Analysis

2.1 Experience maps

Bez pochopenia používateľa nie je možné navrhnúť systém, ktorý bude plnohodnotne uspokojovať jeho potreby. Zostavenie Experience mapy je pre tento účel ideálny spôsob ako získať úplný prehľad o všetkých problémoch, ktoré používateľ musí pri svojej práci riešiť. Ak potom následne zistíte, že váš nástroj ponúka riešenie na každý z týchto problémov, máte vyhraté.

Pri tejto metóde je obzvlásť dôležitá úroveň vašej empatie a schopnosť vžiť sa do kože predstaviteľa každej z klúčových používatelských rolí.

Zmapovaná cesta jednotlivých používateľských persón v procese výberu nového zamestnanca.

2.2 User stories

V tomto momente sme mali zozbieraných a uprataných dostatok informácií o používateľoch, ich práci a problémoch, s ktorými sa stretávajú v procese výberu nového zamestnanca. Celkom jasne sme preto vedeli sformulovať jednotlivé používateľské príbehy (user stories).

User stories sme následne rozkategorizovali podľa komponentov, resp. podľa častí systému, v ktorých ich bude používateľ vykonávať.

User stories boli vo finále štrukturované podľa časti systému, ktorej sa týkajú. Celkový počet user stories sa zastavil na čísle 425.

3. Product ideation

3.1 Procesné diagramy

Použitie procesných diagramov v procese návrhu informačného systému je z môjho pohľadu nevyhnutná metóda. Za ich najväčší benefit by som označil celkový nadhľad, ktorý nám v danom kontexte poskytujú. Zároveň pomocou nich vieme podchytiť aj naozaj špecifické situácie, ktoré môžu nastať a ktoré by sme za iných okolností vedeli veľmi ľahko prehliadnuť.

Activity diagram v úvodnej fáze.

Procesný diagram znázorňujúci kanály, cez ktoré môže náborový pracovník publikovať pracovnú ponuku a následne spôsob práce uchádzača s ponukou v jednotlivých kanáloch.

Informačná architektúra Marku.

3.3 Interakčný design

Základným kameňom pri návrhu interakcií je poznať štruktúru aplikácie.

Štruktúra aplikácie plní dve základné úlohy:
1. Jasne definuje hranice a udržuje konzistenciu systému
2. Pomáha pri vytváraní jednotného a pochopiteľného interface-u z pohľadu používateľa

Tu som sa rozhodol pristúpiť k návrhu trošku neštandardne a možno aj trošku odvážne. Začal som pracovať s myšlienkou single page aplikácie. Technologicky som mal v tomto smere zelenú, lebo rozhodnutie pri výbere technolólie padlo na REACT.
Z prieskumu konkurencie vyšlo, že ak chceme vyčnievať z radu konkurenčných ATS systémov, jednou z oblastí v ktorej musíme dominovať je práve inovatívnosť a interaktivita. To ma ešte viac utvrdilo, že ideme správnym smerom.

Hierarchia aplikačnej štruktúry.

Animácia prechodu medzi vrstvami systemu - flat transitions.

Animácia prechodu medzi vrstvami systému - drilldown trancitions.

Wireframes

Z informačnej architektúry som vedel vyčítať, aké informácie musí systém v jednotlivých častiach zobrazovať a aké funkcie ponúkať. 
Z aplikačnej štruktúry som poznal vzťahy medzi jednotlivými vrstvami systemu a ich hierarchiu. Takže už to stačilo "len" poskladať.

Verifikácia návrhov

Od tohoto momentu mali validácie návrhov s produktovým tímom o dosť konkretnejšiu formu. 

Osvečil sa mi spôsob validácie návrhov, keď je celý systém dostupný na stene meeting roomu. Veľmi to pomáha pri udržiavaní účastníkov prezentácie v kontexte celej aplikácie, čo má veľmi pozitívny dopad na konštruktívnosť a vecnosť diskusií.

Sticky notes - ideálny pomocník pre rýchle dokumentovanie feedbacku na validačných meetingoch.

3.4 Prototyp

S navrhovaným riešením sme boli všetci spokojní, no to ale samozrejme nič neznamenalo. Aby sme sa vedeli uistiť, že s riešením budú spokojní aj naši používatelia, pripravil som klikateľný prototyp, ktorý sa následne testoval na reálnych používateľoch. Akcie dostupné v prototype sme zredukovali len na tie, ktoré boli pre prácu personalistu v procese prescreeningu nových uchádzačov klúčové. Cieľ testovania bol jasný, verifikovať, či je použivateľ schopný vykonáť klúčové úlohy v nástroji samostatne, bez pomoci okolia. Vysledok nás všetkých veľmi milo prekvapil, používatelia nenarazili pri práci s nástrojom na žiadne zásadné prekážky, ktoré by im bránili dokončit testované úlohy. Samozrejme, dozvedeli sme sa zopár dôležitých insight-ov, ktoré sme následne zapracovali do návrhu.

4. User Interface Design

V procese návrhu UI som ako prvé zadefinoval základné atributy systému ako Farby, Typografiu, Spacing, Motion, Ikonografiu a štýl Ilustrácií.

Už pri navrhovaní wireframov sa vždy snažím dávať prvkom na obrazovke určité črtky. Neskôr tieto črty výrazne uľahčuju tvorbu GUI, kedže už vo fáze wireframov sú nositeľmi informácii o dôležitosti, charaktere, afordancii a pod.

4.1 Farby

4.2 Spacing

Veľmi dôležitý krok pri navrhovaní GUI je hneď na začiatku nastaviť pravidlá pre definovanie veľkostí objektov a následne ich umiestnovanie na obrazovke.

Pre dodržanie vizuálneho rytmu sa mi osvečila grida založená na 4 bodoch. Následne je z tejto hodnoty odvodená základna mierka pre horizontálny spacing 8 bodov a pre vertikálny spacing 12 bodov.

4.3 Ikonografia

Dôležitou a často podceňovanoou oblasťou je konzistencia vizuálnych prvkov systému. Práve konzistencia má v tejto oblasti zásadný dopad na celkové vnímanie produktu a aj z hľadiska príslušnosti k značke.

Anatómia ilustrácii slúži ako quideline na tvorbu vizuálov pre produkt.

Príklad vytvorených ilustrácií podla guideline.

4.4 Interface Aplikácie

Základom celého používateľského rozhrania je Adam. Je to design systém, ktorý som vytvoril pre Mark.
Je založený na princípe atomického designu, ktorý som prispôsobil našim potrebám. Skladá sa z troch elementov:
- Foundations (základné stavebné prvy systému ako Farby, Ikony a Typografia) 
- Components (jednoduché funkčné prvky používateľského rozhrania)
- Patterns (components skladané do logických celkov s konkrétnym použitím)

Štruktúra Adama

Ukážka štruktúry Card componenty.

Ukážka štruktúry EmailForm patternu.

Určite sa nedá povedať, že by písane špecifikácií patrilo medzi moje najobľúbenejšie činnosti, no neviem si bez nich predstaviť fungovanie, hlavne trasfer požiadaviek na vývojový tím. Nesmiete písať málo, lebo máte problém a nesmiete pisať veľa, lebo to nikto nebude čítať. Ideálne písať čo najvecnejšie a hlavne z pohľadu systému. 

Príklad funkčnej špecifikácie.

Výsledok