Prípadová štúdia: Ako sme IDS BK pomohli zjednodušiť každodenné cestovanie lepším dizajnom aplikácie.

Ondrej Kostolnak
Ondrej Kostolnak
AI a automatizácia
Redizajn aplikácie verejnej dopravy IDS BK

Navrhli sme aplikáciu, s ktorou sa cestuje jednoduchšie.

IDS BK je Integrovaný dopravný systém v Bratislavskom kraji. Spája rôznych dopravcov a druhy dopravy, aby cestujúci mohli využívať spoločný systém cestovných lístkov. Jeho aplikácia pomáha vyhľadať spojenia a kúpiť potrebné lístky.

Preskúmali sme, ako cestujúci aplikáciu používajú, a navrhli ju nanovo. Klientovi sme odovzdali výsledky výskumu, otestované postupy a kompletný dizajn na implementáciu. Najpoužívanejšie funkcie sme dali priamo na úvodnú obrazovku.

Opakovaný nákup lístka sme umožnili na dve klepnutia.

2 klepnutiaNákup lístka v redizajne
30Rozhovorov s cestujúcimi
500+Obrazoviek vo svetlom a tmavom režime

Nový nákupný postup umožňuje vracajúcemu sa cestujúcemu kúpiť lístok na dve klepnutia s použitím predchádzajúcej platobnej možnosti. Obľúbené trasy, uložené adresy a často kupované lístky uľahčujú opakované cesty. IDS BK získalo otestovaný návrh a spoločný dizajnový systém pripravený na implementáciu.

Obľúbené trasy a lístky hneď poruke.

Od prvého spustenia v roku 2018 pribúdali v aplikácii funkcie, no rozhranie s nimi nedržalo krok. Cestujúci si vedeli kúpiť lístok, ale užitočné možnosti sa ťažko objavovali. Samotná vizuálna úprava by problémy nevyriešila.

Preskúmali sme existujúcu aplikáciu, analytiku a klientove reporty, porovnali dopravné aplikácie a urobili rozhovory s príležitostnými aj pravidelnými cestujúcimi a ľuďmi, ktorí aplikáciu nepoužívali. Výskum zahŕňal široké vekové rozpätie od študentov po dôchodcov.

Výskum ukázal jasný vzorec: 85 % používateľov kupovalo opakovane rovnaký lístok. Cestujúci opisovali aj pravidelné cesty medzi známymi miestami. V návrhu sme preto uprednostnili skratky pre tieto bežné situácie.

Redizajnovaná úvodná obrazovka IDS BK na telefóne
Nová úvodná obrazovka dáva najčastejšie úlohy cestujúcich do popredia.

Lístky, trasy aj odchody sa hľadajú jednoduchšie.

  • Rýchlejšie opakované nákupy. Krátky nákupný postup ponúka obvyklý lístok a naposledy použitú platobnú metódu.
  • Plánovanie cesty na úvodnej obrazovke. Vyhľadávanie trás je vedľa nákupu lístkov, takže cestujúci nemusia skladať cestu vo viacerých aplikáciách.
  • Uložené adresy a obľúbené trasy. Z uložených adries a obľúbených trás sa cestujúci rýchlo dostanú k najbližším odchodom aj informáciám o obmedzeniach.
  • Menej prekážok pri skúšaní aplikácie. Návrh odstraňuje povinnú registráciu pri prvom použití a podľa potreby ponúka jednoduché prihlásenie.
  • Pomoc s výberom tarifných zón. Cestujúci zadajú nástupnú a cieľovú zastávku. Aplikácia im ukáže potrebné tarifné zóny.

Opakovaný nákup lístka sme obmedzili na nevyhnutné kroky.

Výskum ukázal, prečo záleží na rýchlosti: cestujúci často kupovali lístok až vtedy, keď už videli prichádzajúci autobus. Navrhli sme kompaktné nákupné okno, v ktorom vracajúci sa používateľ potvrdí nástupnú zastávku a použije naposledy použitú platobnú metódu. Zmena času aktivácie či nákup ďalších lístkov zostali dostupné v rozšírenom pohľade. Bežný nákup je krátky a menej časté potreby majú stále svoje miesto.

Praktickým cieľom zlepšovania zlej zákazníckej skúsenosti je odstrániť prácu, ktorú ľudia nemajú musieť robiť len preto, aby dokončili bežnú úlohu.

Nové rozhranie uprednostňuje známe cesty a nákup lístkov.

Nejasný výber lístkov sme vyriešili pred implementáciou.

Dôležité postupy sme otestovali vo wireframoch ešte pred dokončením dizajnu. Jeden poznatok bol zvlášť užitočný: polovica účastníkov chápala doplnkové lístky pre spolucestujúcich, batožinu alebo zvieratá ako lístky na neskôr. V skutočnosti platili pre tú istú cestu a čas. Pridali sme výrazné vysvetlenie a upravený návrh znova otestovali.

Ďalší problém spôsoboval QR kód na aktívnom lístku. Niektorí návštevníci Bratislavy nevedeli, či ho majú naskenovať, ukázať vodičovi alebo urobiť niečo iné. Krátky popis, že slúži na kontrolu, objasnil očakávané použitie.

Testovanie spochybnilo aj naše predpoklady o známych rozloženiach. Pri detailoch trasy sme použili vzory z Google Maps, pretože cestujúci tento produkt poznajú. Účastníci si však stále zamieňali názvy zastávok, liniek a ulíc. Informácie sme preusporiadali, aby boli rozdiely jasnejšie. Známy vizuál bol dobrý začiatok, no až pozorovanie ľudí ukázalo, kde nestačí.

Overili sme aj prihlasovanie cez e-mailový odkaz bez hesla, a to so staršími cestujúcimi aj ďalšími skupinami. Starší účastníci mu rozumeli a ocenili, že si nemusia pamätať ďalšie heslo. Návrh jednoduchšieho prihlásenia sme tak mohli oprieť o výsledky testovania.

Pri výbere zón sme našli jednoduchšie riešenie. Interaktívna mapa vyzerala sľubne, no zvyšovala náklady aj zložitosť bez toho, aby cestujúcemu pomohla rozhodnúť sa. Upravený návrh sa opýta na začiatok a cieľ cesty a zobrazí potrebné zóny. Cestujúci tak dostane odpoveď bez toho, aby sa musel učiť pracovať s ďalšou mapou.

Jedna úprava dizajnu sa prenesie na viac než 500 obrazoviek.

Po overení hlavných postupov sme rozpracovali vizuálny smer a opakovane použiteľný dizajnový systém. Spoločné farby, typografia, rozostupy a komponenty podporovali svetlý aj tmavý režim. Implementačnému tímu zároveň poskytli jednotnú sadu vzorov.

Spoločné dizajnové hodnoty sme definovali ako tokeny: opakovane použiteľné nastavenia farieb, rozostupov či písma. Zmena sa tak preniesla celým návrhom namiesto opakovania na každej obrazovke. Svetlá aj tmavá téma používali rovnakú základnú štruktúru a dali IDS BK ľahšie spravovateľný základ pre budúce zmeny.

Navrhli sme aj prázdne obrazovky, chybové hlásenia, používanie bez internetu, formuláre a oznamy o údržbe. Vlastné ilustrácie a Lottie animácie dodávajú aplikácii hravosť a zároveň nechávajú vyniknúť dôležité informácie.

Obrazovky aplikácie IDS BK so spoločným vizuálnym dizajnom
Spoločné vzory preniesli otestované postupy do celého rozhrania.

IDS BK získalo jasný, otestovaný smer pre svoju aplikáciu pre cestujúcich s nejasnými krokmi vyriešenými ešte pred implementáciou. Zároveň je to príklad, ako podporiť prijatie softvéru používateľmi praktickou použiteľnosťou, nielen pridávaním funkcií.

Pozrite si vizuálnu prípadovú štúdiu alebo si prečítajte pôvodné články, ktoré podrobnejšie približujú výskum, testovanie použiteľnosti a dizajn.

Zdieľať na

Spýtajte sa Outloud

Čo práve
riešite?

Preberme váš projekt, problém vo firme alebo niečo, čo by ste si radi uľahčili.

Odpovede pripravuje AI od OpenAI. Rozhovory môžeme poslať nášmu tímu e-mailom na kontrolu. Ochrana súkromia