Návrh konfiguračného nástroja pre online objednávku odvozu odpadu a dovozu materiálu. Existujúci konfigurátor fungoval cez sériu dropdownov na jednej stránke, na mobile prakticky nepoužiteľný. Cieľom bolo prepracovať celý flow do mobile-first logiky, ktorá sa správa ako appka, nie formulár.
Metrák je česká online platforma prepájajúca zákazníkov s lokálnymi dodávateľmi kontajnerovej dopravy po celej ČR. Napriek silnej sieťi overených dodávateľov mal konfigurátor zásadný UX problém: všetky voľby boli nahromadené v jednom kroku cez dropdowny, bez vizuálnej hierarchie, bez spätnej väzby a na mobile nefunkčné.
Zadanie bolo jasné: rozbiť jednorazový formulár na sled jednoduchých krokov, nakresliť to mobile-first ako konfiguráciu objednávky, nie ako vyplňovanie formulára a zabezpečiť, že developer dostane čistý, implementovateľný podklad na Reacte.
Od externej agentúry som prevzala existujúce wireframy. Aby som si mohla reálne prejsť celým tokom a overiť edge cases, preniesla som podklady z Mira do Figmy, prekreslila ich a naprototypovala, takto som odhalila miesta, ktoré potrebovali doriešiť pred samotným dizajnom.
Flow som rozdelila do samostatných krokov: výber typu služby, druh odpadu alebo materiálu, objem kontajnera, adresa, termín a záverečné zhrnutie s platbou. Každý krok má vlastnú obrazovku - užívateľ sa sústredí vždy len na jednu vec.
Ako základ sme použili Material UI kit zakúpený vo Figme, ktorý mal developer priamo v Reacte. Na ňom som definovala vizuálne štýly odvodené z existujúceho webu Metrák - farebnú paletu, typografiu a stavy komponentov. Výsledok vyzerá ako appka, nie ako webový formulár.
Navrhovala som primárne pre mobil, desktop ako rozšírenie. Kľúčové obrazovky: výber druhu odpadu/materiálu s vizuálnymi kartami, výber objemu kontajnera, zadanie adresy s mapovým náhľadom, výber termínu, zhrnutie objednávky s pevnou cenou a platobný krok. Každá obrazovka prešla revíziou s ohľadom na technickú realizovateľnosť.
Prebraté UX podklady
Wireframy bolo potrebné preniesť do Figmy. Prekresliť, overiť edge cases a naprototypovať, aby bolo možné vôbec overiť, či flow dáva zmysel.
Konfigurátor pre mobil
Pôvodné riešenie stálo na dropdownoch v jednom kroku, kognitívne preťažujúce. Riešením bolo rozbiť ho na sekvenčné kroky s jednou akciou na obrazovku.
Material UI
Developer pracoval s React + Material UI kitom. Dizajn musel byť vymyslený tak, aby ho bolo možné reálne zostaviť z existujúceho kitu.
Sada obrazoviek konfigurátora, mobile-first, krokovane, s vizuálnymi kartami namiesto dropdownov. Užívateľ vie v každom momente kde je, čo si vybral a koľko zaplatí — bez zbytočných otázok, bez scrollovania, bez zmätku.
Developer dostal Figma podklady postavené priamo na Material UI kite, ktorý má v projekte, žiadne improvizované komponenty, žiadne otázniky pri implementácii.
Metrák získal konfigurátor, ktorý skutočne funguje tam, kde zákazníci najčastejšie objednávajú, na mobile.
