Ako sme redesignovali trading platformu
Na jeseň 2018 sa nám v Blockchain štúdiu TopMonks dostal pod ruky zaujímavý projekt. Jedna spoločnosť sa rozhodla redizajnovať svoju platformu pre obchodovanie s binárnymi opciami. A ako sme v TopMonks k redizajnu pristúpili?
Úvod do projektu
Ide o crypto platformu na trading binárnych opcií, ktorej vývoj začal v roku 2016. Počas dvoch rokov vývoja sa jej venoval iba jeden náš vývojár. Platforma sa vyvíjala bez produktového tímu, čo sa odrazilo na jej celkovej použiteľnosti a užívateľskej skúsenosti.
Tri mesiace pred plánovaným vypustením aplikácie sme sa rozhodli povedať “Dosť!”. Vytvorili sme nový štvorčlenný produktový tím — ja ako ux dizajnér, Lea ako projekťák a developerské duo Jirka a Vašek.
Zadanie
Zlepšite užívateľskú skúsenosť a dôveryhodnosť aplikácie.
Cieľovou skupinou projektu mali byť menej skúsení obchodníci, avšak z užívateľských testov vyplynulo, že je na nich platforma príliš komplikovaná. Informačná architektúra bola postavená na vode, bez hlbšej logiky a bez toho, aby niekto myslel pár krokov dopredu.
Množstvo podstatných funkcií bolo skrytých a pre užívateľa prakticky neviditeľných. Samotný vzhľad rozhrania pôsobil nedôveryhodne, nedokončene a zastarale.
Cieľ celého projektu bol na prvý pohľad jednoduchý — zlepšiť užívateľskú skúsenosť. Mali sme za úlohu zistiť, čo skutočne nefunguje a čo treba upraviť.
Potrebovali sme refreshnúť užívateľské rozhranie, informačnú a dátovú architektúru a fúru ďalších vecí. Museli sme však myslieť na to, aby všetko pôsobilo seriózne a dôveryhodne. Žiadne predizajnové čačky-mačky.
Redizajn na tri fázy
K celému redesignu platformy sme pristúpili ako k začiatku nového projektu s jediným rozdielom — rešpektovali sme to, čo nefunguje a poučili sme sa.
Redesign sme rozdelili do troch fáz:
- Research
- Redesign a vizuál
- Testovanie a implementácia
Research
S odstupom času hodnotím research fázu ako najhodnotnejšiu. V jej tesnom závese bolo záverečné testovanie. Research som poskladal z niekoľkých úloh, ktoré na seba logicky naväzovali.
Prvým krokom bola heuristická analýza — dal som dokopy súbor bodov, ktoré sme chceli v tíme zhodnotiť. Vychádzal som z desiatich heuristík pre návrh rozhraní od NN Group a tiež z vlastných skúseností. Tento set mi neskôr poslúžil aj pri návrhu heuristík pre audity webov a aplikácií.
Druhým krokom bola analýza záznamov a heatmáp z HotJaru. Pohrabať som sa musel aj v Google Analytics. Po preklikaní analytických toolov som sa vrhol na konkurenciu. Musím predsa vedieť, čo robí konkurencia správne, alebo ešte lepšie — nesprávne. Pri výskume som sa tváril nejak takto…
Výstup z heuristiky, analytických toolov a analýzy konkurencie mi pomohol dať dokopy tasky na užívateľské testovanie. Úlohy pre užívateľov som rozdelil na logické celky podľa toho, či išlo o testovanie obsahu hlavnej stránky, logiky obchodovania alebo ostatných funkcionalít platformy.
Pri tvorbe užívateľských úloh som sa sústredil na kontext, očakávania užívateľov a použiteľnosť. Úlohy zneli jednoducho, napr.:
- Nájdite na stránke základné informácie o binárnych opciách.
- Nahrajte do aplikácie vaše osobné doklady.
- Otvorte Quick Option v hodnote 100€ pre pár ZEC/BTC s 30 sekundovou dobou expirácie SMEROM DOLU.
Tip: Viac o tom, ako robíme užívateľské testy si môžete prečítať v mojom článku Testovanie použiteľnosti v skratke.
Výstupom testovania s užívateľmi a heuristickej evaluácie bolo ohromné množstvo úloh pre naše vývojárske duo. Opravovali sme hlavne “low hanging fruits”, aby sme odstránili aspoň tie základné a najvýraznejšie chyby v použiteľnosti a funkcionalite platformy.
Redesign a vizuál
Ako to už u mňa býva zvykom, redesign som opäť rozdelil do niekoľkých logických krokov. Ak si odmyslím vizuál, ktorý mal na funkčnosť najmenší vplyv, tak najzásadnejšou zmenou prešla informačná architektúra.
S Vaškem a Jiřím sme museli prerobiť mnoho podstránok a celkovo logiku užívateľského profilu, prehľadu transakcií a financií užívateľa.
Kompletne sme prekopali logiku správy financií, transakcií a správy užívateľského účtu. Namiesto toho, aby aplikácia ping-pongovala užívateľa medzi piatimi podstránkami, sme implementovali mikrointerakcie, tooltipy, modálne okná…
Druhým krokom redesignu bolo prerobenie celého registračného procesu a onboardingu. Dramaticky sme ho zjednodušili, vyhodili sme informačný balast a zbytočnosti.
Formuláre sme prerobili do single-column dizajnu a ich obsah sme rozdelili do logických celkov. Pridali sme tiež napr. ukazateľ postupu a malý prvok dôveryhodnosti. Registračný proces si môžete pozrieť vo Figma súbore.
Po tom, čo som konečne vychytal logiku a všetky mikrointerakcie, posunul som sa na vizuálny dizajn. Začal som tvoriť súbor komponentov, ktoré som v systéme neskôr využíval. Spolu s komponentami postupne vznikal aj styleguide. Definovaním farebnej schémy a typografickej škály dopredu som si ušetril kopu času pri samotnom dizajne.
K vizuálom viac dodávať netreba. Teda vlastne jo, treba. S tímom sme pripravili aj dark-mode pre všetkých traderov, ktorí preferujú prácu v noci. Pripravil som pre vás Figma súbor, kde môžete vidieť časť designu pred a po.
Testovanie a implementácia
Aký by to bol redesign, keby sme efektivitu našich zmien netestovali? Skôr než sme všetky zmeny implementovali, vytvoril som klikateľný prototyp vo Figme, ktorý som následne použil pri druhom kole užívateľského testovania.
Prototyp sa hodil aj vývojárom, ktorí videli jednotlivé interakcie tak, ako sa majú správať v reálnej appke. Určite im to pomohlo pri implementácii zmien.
Úlohy pre užívateľov v druhej fáze testovania boli rovnaké ako pri úvodných testoch a to z jednoduchého dôvodu — chcel som výsledky porovnať. Časť užívateľov v druhej fáze bola rovnaká a časť iná. Získal som tak dva rôzne pohľady na aplikáciu, ktoré mi pomohli zapracovať pár zmien v konečnom dizajne.
Samotná implementácia potom znamenala už len niekoľko týždňov programovania a kóderiny, ktorú si odkrútil Vašek a Jirka. Ja a Lea sme im do toho občas kecali tak, aby appka v produkcii vyzerala ako tá, ktorú som navrhol počas redizajnu.
A výsledok…?
To je jednoduché. Spokojný zákazník.
Tomáš Paulus, UX designer from TopMonks, really knows what he’s doing. Based on his research, he adapted the platform into a usable form with a professional design. We certainly recommend him further.
