GymBeam checkout: UX audit a návrh kontroly objednávky
Ako som z UX auditu checkoutu vybral dve priority, pripravil zadania pre vývoj a s AI vytvoril lokálny prototyp kontroly objednávky.
V tomto článku
V testovanej nákupnej ceste GymBeam.cz sa dali produkty skontrolovať návratom do predchádzajúceho kroku. Priamo v Platbe však konkrétne produkty a kontakt chýbali. Navrhol som preto kontrolu objednávky v mieste, kde ju zákazník potvrdzuje. Výsledkom práce bolo 12 tém na ďalší rozvoj, dve rozpracované priority a funkčný lokálny prototyp.
Čo z UX auditu rozpracovať ako prvé
Zadanie žiadalo návrhy rozvoja košíka a nákupného procesu, ich poradie, dve detailné zadania pre vývoj a konkrétnu ukážku práce s AI. Potreboval som teda rozlíšiť, ktoré pozorovania už stačia na návrh zmeny a ktoré potrebujú ďalší výskum.
S AI sme prešli hosťovský nákup a vybrané situácie opakovane overili. Väčšina kontroly prebehla v desktopovom prehliadači vrátane zúženého zobrazenia. Moja vlastná kontrola na mobile a video tvorili samostatný dôkaz. Bez prístupu k analytike a produkčnému kódu sa rozhodovanie opieralo o pozorované správanie a silu dôkazov.
Produkty boli dostupné o krok skôr
Tvrdenie o chýbajúcej rekapitulácii som spochybnil: na snímkach som produkty videl. Bolo potrebné presne rozlíšiť Doručenie a Platbu.
V Doručení existoval rozbaliteľný prehľad produktov s variantmi a množstvom. V doloženej Platbe zostával počet položiek a cenový súhrn. Produktové riadky a kontakt chýbali; pri skúšanom kuriérskom doručení aj adresa. Pri výdajnom mieste PPL sa vybraná pobočka zobrazovala. Návrat fungoval a konečný súčet bol správny.
Zobraziť celý krok Platba
Zostávala otázka, či ďalšia rekapitulácia nepríde po stlačení potvrdzovacieho tlačidla. Dodal som preto vlastné mobilné video. V zaznamenanej vetve sa otvorilo Apple Pay bez ďalšej produktovej rekapitulácie. Platbu som nevykonal; vznik prípadnej nezaplatenej objednávky ani správanie po úhrade sme neoverili.
Záver sa tým spresnil: kontrola produktov bola možná, vyžadovala však opustiť Platbu. Návrh mal umožniť kontrolu a opravu priamo pred potvrdením, pri zachovaní existujúceho toku.
Dve priority z dvanástich tém
Poradie som určoval podľa významu pre úlohu zákazníka, sily dôkazu a možnosti zotaviť sa z problému. Aj funkčný návrat je podstatný: mení závažnosť nálezu aj spôsob jeho riešenia.
- Kontrola objednávky v Platbe. Rozpracovať ako prvú. Kontrola produktov a kontaktu vyžadovala návrat z posledného kroku.
- Pomenovanie ovládania pre čítačku. Rozpracovať ako druhú. Retest doložil konkrétne prázdne alebo nevýstižné názvy.
Neprijatá úprava kontaktu zostala na neskôr: retest potvrdil zachovanie platných zmien a zúžil problém na neplatnú úpravu. Ďalšie témy potrebovali potvrdiť obchodné pravidlo alebo používateľský výskum.
Desať tém tak zostalo vedome odložených. Orientačné veľkosti zmien potrebovali technické posúdenie; bez znalosti systému by nebolo poctivé premeniť ich na dni alebo rozpočet.
Kontrola objednávky musí ukazovať prijaté údaje
Navrhol som pred potvrdenie doplniť produkty s variantmi, množstvom a cenou, prijatý kontakt, doručenie a úplný cenový súhrn. Z každej časti sa zákazník môže dostať k úprave a vrátiť sa k aktualizovanému prehľadu. Počet krokov zostáva rovnaký.
Vývojové zadanie určovalo aj to, podľa čoho zmenu prevziať:
- Súhrn zobrazuje údaje, ktoré nákupný proces skutočne prijal.
- Po platnej úprave ukáže nové údaje. Rozpracovanú alebo odmietnutú zmenu nevydáva za uloženú.
- Otvorenie kontroly ani úprava samy nevytvoria objednávku a nespustia platbu.
Na prototype možno napríklad zvýšiť množstvo arašidového masla a po prijatí zmeny skontrolovať nové množstvo aj celkovú cenu. Pôvodných 407 Kč vychádza z doloženej historickej vetvy; po zvýšení množstva vznikne v simulácii 556 Kč. Prepočty riadi pevná logika programu. Prototyp nemá backend ani platobnú službu.
Zobraziť celý mobilný návrh
Prístupnosť košíka: čo samotná ikona nepovie
Druhá priorita riešila ovládanie košíka a formulárov. V reteste mali tlačidlá na zmenu množstva, odstránenie produktu aj pole množstva prázdne prístupné názvy. Ďalšie nedostatky sa týkali pomenovania polí a súhlasov či prepojenia chyby e-mailu s poľom.
Pomenovanie má vysvetliť akciu aj produkt, ku ktorému patrí. Pre české rozhranie som napríklad navrhol:
- Plus pri produkte: „Zvýšit množství: Arašídové máslo, 1000 g, jemné“ namiesto prázdneho názvu.
- Odstránenie produktu: „Odstranit: Arašídové máslo, 1000 g, jemné“ namiesto prázdneho názvu.
Praktický priechod čítačkou však zostal otvorený. Technický výpis potvrdzuje nedostatok názvu; sám neukazuje, ako zákazník zvládne celý nákup.
AI vytvorila prototyp aj chybu, ktorú bolo treba opraviť
Moja úloha spočívala v otázkach, oponentúre, vlastnej mobilnej kontrole a spresnení zadania. Vyžiadal som aj nezávislé posúdenie záverov a ich porovnanie s pôvodnými dôkazmi. AI vykonala porovnania a retesty a pripravila implementáciu prototypu, testovacie údaje aj kontroly. Počas používania prototyp žiadny jazykový model nevolá.
Pri vlastnom teste agent našiel konkrétnu chybu: zmenené množstvo prenieslo sumu 556 Kč aj do pohľadu označeného ako historická rekonštrukcia. Tá mala zostať pevným porovnaním s pozorovaným stavom. Agent preto oddelil historický základ 407 Kč od meniteľných údajov návrhu. Túto chybu našiel a opravil agent; nešlo o môj dodatočný zásah ani zámerne pripravený experiment.
Neskoršie posúdenie viedlo aj k oprave kontrastu drobných oranžových textov. Hlavné snímky návrhu v tomto článku zachytávajú už opravený vzhľad. Prínosom AI sú tu kontrolovateľné výstupy a doložené opravy. Úsporu času sme nemerali.
Čo by nasledovalo pred nasadením
S vlastníkom nákupného procesu by som najprv potvrdil zdroje prijatých údajov, okamih vzniku objednávky a správanie podporovaných platieb. Vývoj by následne posúdil rozsah a napojenie na existujúce komponenty.
Súčasťou prípravy na nasadenie by bolo aj právne preverenie rozsahu informácií pri objednaní a označenia záväznej akcie.
Používateľské overenie by sledovalo, či človek samostatne nájde a opraví nesúlad a či zrozumiteľne prejde aj objednávkou bez chyby. Potrebné by bolo praktické testovanie čítačkou, na fyzickom mobile a s natívnym zväčšením prehliadača.
Táto práca priniesla priority, vývojové zadania a lokálny prototyp. Rast konverzie alebo pokles chýb sa nemerali. Obchodný dopad by sa vyhodnocoval až po implementácii s dostupnou analytikou a vopred určeným spôsobom merania.
Čo má zmysel zmeniť vo vašom e-shope
Vo vors.studio môžeme prejsť konkrétnu nákupnú cestu, oddeliť doložené problémy od hypotéz a pripraviť priority aj zadanie pre váš tím alebo dodávateľa. Takúto spoluprácu môžeme začať Diagnostikou.