Problém
Výběr kurzu neměl jasnou rozhodovací cestu
Student potřeboval rychle pochopit rozdíl mezi fakultami, kurzy, rozvrhem a cenou.
Vzdělávací platforma / Web design / UI UX
Dovira Education
Responzivní vzdělávací platforma pro přípravu na přijímací zkoušky, která studentům pomáhá porovnat kurzy a sebejistě zvolit další krok.
03
Klíčové produktové flow
02
Responzivní platformy
01
Škálovatelný design systém
01
Content-ready struktura
Logika případu
Řešení
Discovery postavené kolem potřeb studenta
Obsah jsme seřadili od fakulty a kurzu přes program a důležité informace až k přihlášení.
Proces
Obsah → architektura → flow → systém
Nejdříve jsme zjednodušili informační strukturu, potom ji převedli do responzivních obrazovek a komponent.
Výsledek
Platforma připravená na další obsah
Nové kurzy, fakulty a obsahové moduly lze přidávat do stejného strukturovaného systému.
Přehled
Rozsah projektu
Responzivní vzdělávací platforma s obsahovým homepage, katalogem kurzů, detailními stránkami kurzů a mobilními flow.
UX problém
Studenti potřebovali před výběrem porovnat fakulty, náplň kurzu, rozvrh, lektora a cenu.
Informační architektura
Struktura vede návštěvníka od fakulty a objevení kurzu přes program, rozvrh, lektora a cenu až k přihlášení.
Výstupy
Responzivní layouty, karty a filtry kurzů, moduly detailu, mobilní obrazovky a znovupoužitelné UI komponenty.
Design proces
Od struktury obsahu ke škálovatelné platformě kurzů.
01
Audit obsahu
Zmapovali jsme informace, které student potřebuje před výběrem kurzu.
02
Informační architektura
Propojili jsme fakulty, kurzy, rozvrhy, program a přihlášení do jasné hierarchie.
03
User flow
Zkrátili jsme cestu od objevení nabídky k relevantnímu detailu kurzu.
04
Responzivní UI
Převedli jsme hlavní zkušenost do desktopových i mobilních layoutů.
05
Design systém
Definovali jsme znovupoužitelnou typografii, spacing, karty, filtry a ovládací prvky.
Vizuální identita
Typografie
Elegantní sans-serif hierarchie s klidným rytmem čtení.
Barevná paleta
Teplé bílé plochy, jemné šedé tóny a decentní modré akcenty.
Komponenty
Karty, tlačítka a obsahové moduly navržené jako znovupoužitelné bloky.
Spacing systém
Velkorysý whitespace a konzistentní proporce layoutu.
Homepage
Homepage vytváří rozhodovací cestu: nejdříve ukáže cílové univerzity a fakulty, potom důvěru, kurzy a jasnou CTA pro přípravu.
Klíčové funkce
Objevování fakult a kurzů
Porovnání kurzů
Rozvrh a program
Informace o lektorovi
Cena a CTA k přihlášení
Responzivní mobilní flow
Responzivní design
UI ukázky
Seznam kurzů
Klidné procházení nabídky pomáhá studentům rychle porovnat možnosti.
Detail kurzu
Soustředěný detail ukazuje hodnotu lekce, kontext a další jasný krok.
Populární kurzy
Jednoduchá sekce pro objevování, zvýraznění a rychlé skenování obsahu.
Design highlights
Čisté UX
Soustředěné flow, méně rušivých prvků a čitelné obsahové bloky.
Přístupnost
Pohodlný kontrast, jasná hierarchie a předvídatelné ovládání.
Výkon
Lehké layouty připravené pro rychlé načítání a plynulé procházení.
Škálování
Znovupoužitelné sekce pro kurzy, lektory, moduly a aktuality.
Konzistence
Jednotný design systém napříč desktopem, tabletem a mobilem.
Finální výsledek
Škálovatelný základ pro další kurz i dalšího studenta.
Dovira Education má jasnou cestu od objevení kurzu k přihlášení, strukturovaný model detailu kurzu a znovupoužitelné responzivní komponenty pro nové kurzy, fakulty a obsah bez nutnosti stavět zkušenost znovu.
UI UXUser flowDesign systémResponsivePerformance
Dovira Education
Děkujeme
Case study prezentace od Loopvia