Orlen
No items found.
Návrh a design mobilní aplikace největší sítě čerpacích stanic v ČR
Chci na vejšku
Výzva
SCIO je značka, kterou zná skoro každý český středoškolák. Každý rok u nich přes 36 tisíc uchazečů skládá Národní srovnávací zkoušky (Scio.cz, 2025). Chci na vejšku je jejich projekt, který řeší úplně jiný problém: správný výběr vysoké školy samotné.
Ten problém je vážnější, než by se zdálo. Skoro 60 % pokusů o bakalářský titul v Česku skončí bez dokončení, na některých technických fakultách je to až 90 % (iROZHLAS, 2018). Hlavní důvod není nedostatek schopností, ale rozpor mezi tím, co si student pod oborem představoval, a tím, co obor reálně obnáší. Cílem Chci na vejšku je pomoct zájemcům o studium zorientovat se ve stovkách škol a oborů a najít to, co pro ně dává smysl, dříve než tenhle rozpor přijde na řadu.
Klient za námi přišel s rozpracovaným designem nového portálu, který sami nepovažovali za hotový, a potřeboval na něj druhý pohled: okomentovat, co v něm funguje a co ne, a přijít s návrhem, jak ho dopracovat do finální podoby. Cílem bylo dostat produkt na 100 %, do stavu, kdy je hotový, konzistentní a připravený jít mezi skutečné uživatele.
Proces
Prošli jsme s klientem to, co měli, dali mu k tomu konkrétní zpětnou vazbu a společně jsme zhodnotili, kam projekt dál posunout. Shodli jsme se, že nejlepší cesta je vzít portál od začátku: postavit ho na nové interní UX analýze a hlavně na reálném uživatelském testování, s novým návrhem wireframů a navazujícím designem.
Aby proces nebyl jen teoretický, navrhli jsme rovnou první verzi wireframů, se kterými jsme mohli jít do pre-testu s uživateli. Shadcn komponenty přišly na řadu až později, ve fázi finálního designu.
S prvními wireframy jsme udělali pre-test s první sadou respondentů, spojený zároveň s uživatelským rozhovorem. Ten měl potvrdit nebo vyvrátit frustrace a problémy, které jsme u cílovky předpokládali. Tohle malé, rychlé kolo bylo pro ověření konceptu nakonec důležitější než pozdější velký test: potvrdilo směr (výpis škol a programů dává smysl) a zároveň ukázalo, jaké funkce budou pro uživatele nejdůležitější a proč by se vůbec registrovali. Testujeme totiž i v rané fázi projektu, abychom rychle ověřili možné směry, než se do nich zainvestuje víc práce. Bylo to hodně hurá akce v dobrém slova smyslu: ve středu jsme se domluvili na termínech, další týden se testovalo prakticky denně do devíti večer, protože středoškoláci mají čas až po škole, a náš UX designér Jakub zrovna v té době seděl v Nairobi, takže celé kolo proběhlo online. Zúčastnilo se šest respondentů napříč ročníky a zaměřeními, průměrně 45 minut na osobu.
Závěry z pre-testu jsme zapracovali do wireframu a navázalo na ně finální kolo testů, tentokrát přímo s devíti až deseti potenciálními zájemci o studium (hodinové sezení na respondenta, testováno na mobilu včetně nahrávání pohybu palce po obrazovce). Ověřilo to orientaci na webu i to, jestli se chování portálu shoduje s tím, jak si ho uživatelé sami představují – a právě tady se ukázalo, že u tlačítka „Hledat“ čekali zaškrtávací seznam oborů, ne textové pole. Dává to smysl: středoškolák často nezná akademický název toho, co ho zajímá. Ví, že ho baví stavět počítače, ale netuší, že se tomu na vysoké škole říká „Kybernetika a robotika“, takže by správný výraz do vyhledávače ani nezadal. Vyhledávání jsme proto propojili se strukturovaným výběrem zaměření, aby uživatel nezůstal stát před prázdným polem.
Design samotný jsme nestavěli jen na výchozím vzhledu shadcn komponent. Kompletně jsme je přebarvili a upravili do vlastního vizuálního jazyka a co v knihovně chybělo, jsme dodělali na míru. Vznikla svěží barevnost postavená na jedné výrazné mátové barvě, k tomu jasné černobílé kontrasty, které drží celý web přehledný a čitelný i s tak velkým množstvím obsahu: tmavá navigace a hlavička, černé karty u referencí, krémové pozadí sekcí. Doplnili jsme to ručně kreslenými ilustračními prvky (podtržení, šipky, čmáranice) a fotkami mířenými přesně na cílovku – žádné šablonovité stock fotky dospělých v kancelářích, ale skuteční středoškoláci.
Přes 36 tisíc uchazečů ročně u NSZ, teď i portál na výběr školy
Dvě kola uživatelského testování přímo se středoškoláky a studenty
Rozsáhlý portál: AI poradce, účty, přehledy škol, pokročilé vyhledávání
Řešení
Testování potvrdilo, že zvolený směr designu funguje. Respondenti prošli základními flows bez zásadních zádrhelů, a podle jejich chování jsme pak doladili drobné detaily napříč portálem. Dvoukartový rozcestník na homepage – „Tuším, co chci studovat nebo dělat“ (mátová karta) a „Ještě nevím, co je pro mě ideál“ (druhá karta v teplé broskvové barvě) – fungoval bezchybně u všech respondentů bez jediného zaváhání, takže jsme ho v designu záměrně nechali dominantní.
Podobně jsme museli přepracovat rychlý kvíz „Co mě baví“. Binární ano/ne u školních předmětů respondenty nutilo hádat u všeho, k čemu měli ambivalentní vztah, a zkreslovalo by to doporučení. Nahradili jsme ho čtyřstupňovou škálou – nebaví a nechci, nebaví ale zvládnu, baví ale nejde, baví a jde mi – která dala mnohem přesnější podklad pro to, co portál uživateli doporučí.
Nejvíc energie ale testování ukázalo kolem dvou konkrétních částí produktu. První je databáze profesí, kde u každé pozice najdete vedle orientační mzdy i „riziko AI“ (odhad, jak moc ji ovlivní automatizace). Respondenti si tenhle detail sami aktivně rozklikávali a informace o platu byla natolik silná, že se nad registrací vážně zamysleli i uživatelé, kteří k ní byli zpočátku skeptičtí. Druhá je AI poradce. Testy ukázaly jasnou otázku, kterou si uživatelé kladli: „Proč bych se měl radit tady, když si stejnou věc zadarmo zeptám v ChatGPT?“ Ukázalo se, že nálepka „AI“ sama o sobě dneska nikoho nepřesvědčí: poradce musí obhájit, v čem je jiný (zná český systém přijímaček, termíny dnů otevřených dveří, konkrétní obory), a to potřebuje vlastní srozumitelnou stránku, ne jen ikonku v menu.
Vývoj portálu jsme nedělali. Naše práce končila u hotového, uživatelsky otestovaného designu a systému komponent, na kterém mohl klientův tým dál stavět. I tak jde o jeden z rozsahově největších design produktů, které jsme dělali: celý digitální produkt s vlastní logikou, jazykem a systémem, který musí obstát při každé návštěvě, a který jsme si reálně ověřili na lidech, pro které je určený.
U našich klientů máme parádní výsledky
Mrkněte na ukázky
Chcete na něčem makat s námi?
