MediQueue Case Study

UX Dizajn mobilnej Aplikácie

Kategória: UX dizajn

Klient: Cvičný projekt, Google UX Certificate

Realizované: 30.05.2023 – 6.6.2023 / 63 hodín práce

Podstatou projektu bol návrh dizajnu natívnej mobilnej aplikácie, ktorá by mala slúžiť ako open-source riešenie virtuálnej čakárne pacientov. Tento scenár som doplnil o utopistickú ideu, že služba by mohla byť v ideálnom stave poskytovaná jednou zo štátnych zdravotníckych inštitúcii.

Problém

Skúsenosť pacienta s čakaním u lekára častokrát nie je práve ideálna. Každý z nás už istotne počul o tom ako niekto blízky bol nútený kvôli miestu v poradovníku osobne navštíviť ambulanciu a následne niekoľko hodín čakať na samotné vyšetrenie.

Problém je samozrejme omnoho komplexnejší – nedostatok lekárov, všeobecne nepriaznivá atmosféra v zdravotníctve, a mnoho iných… Aspoň čiastočnému riešeniu takýchto situácii a by však mohla prispieť aplikácia, ktorá pacientom uľahčí prístup do poradovníka, prípadne objednávanie sa na konkrétny termín z pohodlia domova.

Ciele

Cieľ #1

Nájsť rýchlo a intuitívne lekára

Cieľ #2

Možnosť objednať sa do poradovníka

Cieľ #3

Poskytnúť informácie o lekárovi
Customer Journey - frustrácia užívateľa čakaním

Aplikácia má slúžiť pre čo najširšiu skupinu ľudí, či už sa jedná o zaneprázdnenú 32 ročnú Sáru z Bratislavy alebo 55 ročného Dávida z Čičavy (áno, táto obec ozaj existuje :), ktorého trápi niekoľko chronických ochorení. Motivácie potencionálnych užívateľov môžu byť rôzne, či už ide o príležitostné využitie aplikácie kvôli šetreniu času, alebo uľahčenie si opakovanej rutiny. 

Cieľom je však vyvinúť dizajn aplikácie, z ktorého bude profitovať široké spektrum používateľov. Okrem iného chceme vyvinúť dizajn, ktorý myslí aj na to, že nie každý užívateľ ma high-end zariadenie a bude rozšíriteľný o ďalšie moduly a funkcionality.

Konkurencia

Na Slovensku pôsobia traja priami konkurenti, ktorý sa v kvalite užívateľskej skúsenosti a ponúkaných skúsenosti výrazne líšia. Hlavné rozdiely sú ilustrované v prehľadovej tabuľke. Každá z týchto služieb má svoje výhody aj nevýhody.

Našim cieľom je prísť s riešením virtuálnej čakárne ktorá vyrieši najväčší problém v čo najkratšom čase. Zároveň takým spôsobom, aby dizajn aplikácie ponúkal priestor na rozšírenie o ďalšie funkcie.

Tabuľka zobrazujúca konkurenciu

Prístup k dizajnu

Vzhľadom na opakujúcu sa formu obsahu aplikácie som sa snažil k dizajnovaniu pristupovať prostredníctvom opakovane použiteľných modulov s variabilnou obmenou obsahu. Ako dôležitý faktor som identifikoval aj držať maximálnu možnú jednoduchosť, vyhýbať sa „bohatým“ textovým a grafickým znázorneniam. A v neposlednom rade premýšľať nad tým, ktorý obsah prináša užívateľovi hodnotu.

Informačná architektúra vyhľadávania

Vyhľadávanie

Navrhnutá informačná štruktúra vyhľadávania ponúka užívateľovi možnosť voľby použiť jednoduché vyhľadávanie s jediným inputom, alebo použiť štruktúrované vyhľadávanie špecifických vyhľadávacích parametrov, ako je meno lekára, lokalita a v neposlednom rade jeho špecializácia.

Informačná architektúra​

Vzhľadom na záber aplikácie tvorí podstatnú časť informačnej architektúry databázový model, na základe ktorého je do predpripravených komponentov dodávaný obsah.

Aplikácia okrem spomínaného vyhľadávania ponúka ďalšie dve primárne sekcie – čakaciu miestnosť (zoznam zúčastnených poradovníkov) a zoznam „moji lekári“ (užívateľom tvorený zoznam lekárov dostupných priamo bez vyhľadávania).

Drôtené modely / Wireframes

Wireframes / Drôtené modely

Tvorba wireframov je nezanedbateľná fáza, pri ktorej som v rýchlosti skúmal možnosti layoutu a informačnej štruktúry. Rýchle iterácie wireframov dávajú preskúmať množstvo návrhov v pomerne krátkom čase.

Štýly, farebnosť, typografia

Štylizácia

Pri štylizovaní aplikácie mi výrazne pomohol dizajnový systém Material Design 3, vďaka ktorému som mal možnosť v rýchlosti generovať, farebnú schému a čerpať z množstva predpripravených komponentov. Použitím dizajnového systému som tak ušetril množstvo času, ktorý som mohol alokovať na samotné riešenie dizajnového problému.

Voľba farebnej škály taktiež nebola náhodná – zelená farba, ktorá pôsobí harmonicky a často v kombinácii so zdravotníctvom. Okrem toho bolo myslené aj na zachovanie kontrastu – s týmto faktorom mi pomohol nástroj Material Theme Builder, ktorý bol schopný na základe môjho inputu vygenerovať komplexnú farebnú paletu so zachovaním farebných princípov a kritérií prístupnosti.

Dizajn komponentov, UI, User interface

UI komponenty

Pri štylizovaní aplikácie mi výrazne pomohol dizajnový systém Material Design 3, vďaka ktorému som mal možnosť v rýchlosti generovať, farebnú schému a čerpať z množstva predpripravených komponentov. Použitím dizajnového systému som tak ušetril množstvo času, ktorý som mohol alokovať na samotné riešenie dizajnového problému.

Voľba farebnej škály taktiež nebola náhodná – zelená farba, ktorá pôsobí harmonicky a často v kombinácii so zdravotníctvom. Okrem toho bolo myslené aj na zachovanie kontrastu – s týmto faktorom mi pomohol nástroj Material Theme Builder, ktorý bol schopný na základe môjho inputu vygenerovať komplexnú farebnú paletu so zachovaním farebných princípov a kritérií prístupnosti.

Finalizácia

Po 63 hodinách práce, stovkách iterácii dizajnu a niekoľkých dávkach feedbacku uzrel svetlo sveta dizajn aplikácie, ktorá má potenciál uspieť aj v reálnom svete. Dizajnové riešenie je pripravené na agregovanie veľkého množstva obsahu a schopné tento obsah predostrieť užívateľovi prijateľnou formou.

Nespomenutým cieľom bolo najme získanie cenných skúseností pri príprave UX dizajnového riešenia, osvojenie si práce so softvérom Figma od prvotných wireframov po tvorbu high-fidelity prototypov. Tento projekt bol zároveň aj mojím finálnym zadaním v kurze Google UX Design Professional Certificate, ktorý som týmto úpšpešne absolvoval.

Okrem iného som prvý krát výraznejšie pri práci využil umelú inteligenciu ako pomoc pri rešeršovaní a tiež aj na tvorbu „placeholder“ obsahu. Oproti klasickému „lorem ipsum….“ použitie takto generovaného textu znamená značnú výhodu vo viacerých rovinách (hodnovernosť textov, ilustrácia reálnych use-casov, potencionálne aj lepší dojem pri prezentácii dizajnov klientovi).

Samozrejme, ak by táto aplikácia šla do vývoja nejednalo by sa o absolútne finálne riešenie všetkých problémov. Bolo by potrebné absolvovať UX štúdie, ktoré by potvrdili alebo vyvrátili predpoklady aplikované pri dizajnovými. Z feedbacku by som však definoval niekoľko bodov, pri ktorých by bola potrebná revízia. Najmä jednoznačnosť zobrazenia čísel v čakárni a aplikovanie pop-up okien pri dôležitých akciách…