Plant Care App
Studijní UX/UI projekt zaměřený na vytvoření klidného a přístupného mobilního rozhraní pro péči o rostliny – pomocí struktury, konzistence a základní logiky design systému pro snížení tření a kognitivního přetížení.
#hero —
#nav-trigger-1 —
Tento projekt byl studijní.
Žádný klient, žádné KPI, žádný brand kit – jen jeden cíl:
vytvořit něco strukturovaného od nuly
a konečně pochopit, co znamená „design systém“.
Zvolila jsem aplikaci na péči o rostliny, protože téma bylo blízké – a je to přesně ten typ prvního projektu, který si většina lidí vybere. Něco, co vás už trochu zajímá, ale zároveň vám dává důvod udělat to pořádně.
Planty se pro mě stalo cvičištěm pro systémové myšlení – chtěla jsem projít celý proces, od výzkumu až po prototyp. A hlavně:
přestat hádat, co vlastně dělá rozhraní konzistentním.
#context —
Dělala jsem všechno, co má správný UX student dělat:
dvě persony, mapu cesty, konkurenční analýzu, IA, storyboardy, frameworky.
Ten výzkum nebyl zbytečný – ale od začátku mi bylo jasné, že žádná matice nepomůže, pokud rozhraní samo nedává smysl.
Nepotřebovala jsem tím validovat featury – ale vymezit hranice.
UX mi nedalo odpovědi – dalo mi limity. A právě z nich vznikla struktura.
#research —
První iterace: kde se to rozpadlo
První verze byla přesně to, co čekáte od někoho, kdo se právě naučil pojmy jako UX: chaotická, bez rytmu, vizuálně nevyvážená.
Testovala jsem rané lo-fi obrazovky na reálných uživatelích přes Useberry – poprvé jsem sbírala zpětnou vazbu a vůbec jsem nevěděla, na co se vlastně ptám.
Až tehdy mi došlo, jak málo toho člověk na začátku ví o tom, jak funguje porozumění v produktu. A že „UX výzkum“ v této fázi je hlavně proces poznání, kde všude se mýlíš.
Tak jsem udělala to jediné rozumné:
Všechno smazala a začala znova.
Druhá iterace: struktura začíná mluvit
Tentokrát jsem se soustředila na rytmus a limity. Každá obrazovka měla méně prvků. Akce měly čitelnější vzorce.
Ještě jsem nestavěla komponenty –
ale začala se formovat struktura, která uživatelům říká, co je důležité, dřív než vůbec začnou číst.
#structure —
Design systém... nebo aspoň pokus o něj
Kompletní mobilní tok navržený tak, aby zůstal jednoduchý, čitelný a konzistentní – od úvodní obrazovky po plánování a detail rostliny.
Každá obrazovka staví na stejné struktuře, což pomáhá udržet rozhraní klidné a propojené.
Výsledek: kompaktní, ale ucelený prototyp s dvanácti přehlednými obrazovkami.
#system —
#form —
Nakonec jsem postavila klikací mobilní prototyp ve Figmě se 12 klíčovými obrazovkami.
UI bylo místy pořád trochu „měkké“. Ale drželo – strukturálně, vizuálně i funkčně.
👉 Přejít na prototyp
Použití omezení jako nástroj pro rozhodování (hlavně při plánování funkcí)
Upřednostnění přístupnosti před vizuální složitostí
Včasné zavedení komponentového myšlení (inspirace Fluent 2)
Žádné stíny — to bylo naposledy, co jsem je použila v mobilním rozhraní.
Příliš mnoho barev na počátečních obrazovkách — narazilo to na cíle srozumitelnosti a přístupnosti.
Přehlížení základní struktury — ztížilo to prototypování víc, než bylo nutné.
Zjednodušte vizuály od začátku.
Strávte méně času šablonami, více skutečným výzkumem.
Budujte s jasným systémem stavů, rozložení a tokenů.
Přidejte lepší onboarding pro nové uživatele.
#context —
#reflections —