01 Kontext projektu
Zastaralá identita v moderním prostředí
Původní web vznikal postupně během několika let a přestal odpovídat aktuálním potřebám kliniky. Informace byly roztříštěné, objednávací proces nepřehledný a komunikace značky nekonzistentní napříč digitálními i fyzickými touchpointy.
Součástí redesignu bylo proto nejen přepracování webu, ale také sjednocení celé komunikace značky napříč online i offline prostředím kliniky. Cílem bylo vytvořit důvěryhodnější, srozumitelnější a dlouhodobě udržitelný systém pro rodiče, děti i zdravotnický personál.
Klinika díky redesignu působila profesionálněji, konzistentněji a lépe komunikovala svou specializaci na dětské pacienty už při prvním kontaktu se značkou.
Audit původní identity a webu ukázal zásadní mezery v konzistenci a digitální funkčnosti.
02 Specifika oboru
Proč dětská optometrie vyžaduje jiný přístup
Ve zdravotnictví hraje důvěra zásadní roli už při prvním kontaktu se značkou. Design proto nebyl navrhován pouze esteticky, ale jako nástroj pro vytvoření pocitu bezpečí, klidu a odbornosti.
Ukázalo se, že právě emocionální stránka komunikace měla zásadní vliv na to, jak rodiče kliniku vnímali ještě před první návštěvou. Klidnější vizuální jazyk a jasnější komunikace pomohly snížit stres spojený s objednáním i samotným vyšetřením.
Rodiče přicházeli na web ve stresové situaci, kdy řešili zdravotní problém dítěte. Obsah i navigace proto byly navrženy tak, aby pomohly rodičům rychle pochopit další krok bez zbytečného zahlcení informacemi.
Tento kontext výrazně ovlivnil celý návrh identity i webu. Design musel vytvářet pocit důvěry a bezpečí pro děti i rodiče.
Prostředí kliniky a vyšetřovací pomůcky jako zdroj inspirace pro vizuální jazyk.
03 Corporate identity
Nové logo jako základ všeho
Logo bylo nejdůležitější částí celého redesignu, a proto vznikalo v několika iteracích. Cílem nebylo vytvořit pouze hravější vizuální styl, ale navrhnout identitu, která bude působit profesionálně, důvěryhodně a zároveň přívětivě pro dětské pacienty i jejich rodiče.
Velký důraz byl kladen i na funkčnost v malých velikostech a na mobilních zařízeních, protože většina rodičů přicházela na web právě přes telefon. Nové logo díky jednodušší konstrukci výrazně lépe fungovalo v navigaci, faviconách i sociálních sítích.
Vývoj loga od prvních skic přes testování variant až po finální podobu.
Finální logo čisté, flexibilní a funkční v digitálním i tiskovém prostředí.
04 Avataři a ilustrace
Vizuální jazyk inspirovaný dětským vyšetřením zraku
Součástí nové identity bylo vytvoření sady avatarů a ilustrací, které provázejí děti webem i prostředím kliniky. Inspirací se staly symboly používané při dětském vyšetření zraku jednoduché geometrické tvary, se kterými se děti setkávají už během prvních očních testů ještě předtím, než umí číst.
Vizuální jazyk tak nevznikal pouze dekorativně, ale přímo vycházel z reálného prostředí dětské oftalmologie. Díky tomu působí přirozeně, srozumitelně a pomáhá dětem vytvářet pocit familiarity už při prvním kontaktu s klinikou.
Každý avatar reprezentuje jednoduchý symbol známý z optotypů používaných při vyšetření zraku. Tyto tvary děti intuitivně rozpoznávají, což pomáhá vytvářet hravější a méně stresující prostředí během celé zkušenosti.
Animovaní avataři provázejí děti webem i prostředím kliniky.
Role ilustrací napříč digitálním a offline prostředím
Avataři nejsou pouze ilustrativním prvkem, ale aktivní součástí UX komunikace. Pomáhají rozdělovat obsah, orientovat děti během webové zkušenosti a propisují se do webu, objednávacího procesu, orientačních prvků i tiskových materiálů čímž vytvářejí jednotnější a zapamatovatelnější zkušenost napříč celou pacientskou cestou.
Velká část identity byla navržena s cílem snížit stres dětských pacientů během návštěvy kliniky. Hravější vizuální jazyk proto pomáhá změkčit jinak technické zdravotnické prostředí a vytváří přístupnější zkušenost pro děti i rodiče.
Klíčový poznatek
Animovaní avataři propojují digitální a fyzickou zkušenost se značkou a vytvářejí známé, konzistentní prostředí napříč jednotlivými místy kontaktu se značkou. Díky tomu se děti i rodiče snáze orientují v tom, co mohou očekávat, což pomáhá snižovat nejistotu a budovat důvěru ještě před samotnou návštěvou kliniky.
05 Barevný systém
Modernější paleta se zachováním kontinuity
Cílem nebylo kompletně změnit identitu značky, ale posunout původní růžovo-modrou paletu do modernější a funkčnější podoby. Nový barevný systém zachovává kontinuitu původní značky, funguje lépe v digitálním prostředí, vytváří přívětivější atmosféru a podporuje orientaci i práci s emocí.
#0A369D
R 10 · G 54 · B 157C 100 · M 92 · Y 0 · K 0
Egyptská modrá
Symbolizuje důvěru, stabilitu a profesionalitu. Hlavní akcentní barva.
#D6336C
R 214 · G 51 · B 108C 0 · M 76 · Y 50 · K 16
Malinová
Přátelská a přívětivá, dodává designu svěžest a moderní vzhled.
#3D78B5
R 61 · G 120 · B 181C 66 · M 34 · Y 0 · K 29
Ocelově modrá
Vyjadřuje péči, empatii a lidský přístup. Používá se pro zvýraznění důležitých prvků.
#FEFCFB
R 254 · G 252 · B 251C 0 · M 1 · Y 1 · K 0
Bílá krémová
Jemná a klidná, ideální pro pozadí nebo sekundární grafické prvky. Přináší harmonii.
#FFD4D4
R 255 · G 212 · B 212C 0 · M 20 · Y 8 · K 0
Čajová růže
Neutrální a jemná, vhodná pro pozadí nebo jako kontrastní prvek pro ostatní barvy.
#1A090D
R 26 · G 9 · B 13C 0 · M 20 · Y 0 · K 95
Lékořice
Stabilní a elegantní, používá se pro text a detaily, kde je vyžadována výborná čitelnost.
Barevný systém značky Kukátko konzistentní napříč všemi komunikačními materiály.
Srovnání původního a nového barevného systému
Technicky působící zdravotnické prostředí
Původní web pracoval převážně s výraznou modrou barevností a vysokým kontrastem bez výraznější hierarchie nebo emocionální práce s barvou. Výsledkem bylo prostředí, které působilo spíše technicky a administrativně než jako specializovaná dětská klinika.
Barevný systém zároveň nedokázal efektivně rozlišovat jednotlivé části uživatelské cesty ani podporovat orientaci během objednávacího procesu. Vizuální komunikace působila ploše a většina prvků měla podobnou vizuální prioritu.
Celkový vizuální jazyk připomínal spíše běžný zdravotnický systém než prostředí určené dětským pacientům a jejich rodičům chyběla výraznější emocionalita, práce s pocitem bezpečí i přívětivější tón komunikace. Vizuálně nebylo jasné, že jde o specializovanou pediatrickou péči.
Empatický systém s funkční hierarchií
Nová vizuální identita byla navržena s důrazem na kombinaci důvěryhodnosti zdravotnického prostředí a emocionality pediatrické péče. Hlavní modré tóny zachovaly pocit odbornosti a stability, zatímco růžové a krémové odstíny pomohly vytvořit klidnější a empatičtější prostředí.
Barevný systém získal jasnější funkční roli v rámci UI jednotlivé odstíny pomáhají rozlišovat důležité akce, informační bloky, upozornění i jednotlivé části objednávacího flow.
Jemnější neutrální pozadí a nižší vizuální agresivita pomohly vytvořit prostředí, které působí bezpečněji, přístupněji a více odpovídá emocionálním potřebám rodičů během řešení zdravotního problému dítěte.
Nový barevný systém zároveň výrazně lépe podporuje positioning kliniky jako specializovaného pracoviště zaměřeného na dětské pacienty, nikoliv pouze obecné zdravotnické služby.
Stejný vizuální jazyk se propisuje do webu, ilustrací, formulářů, tiskových materiálů i komunikace kliniky, což pomáhá vytvářet konzistentnější a důvěryhodnější zkušenost napříč celou pacientskou cestou.
Klíčový poznatek
Nový barevný systém nebyl navržen pouze jako estetická vrstva značky, ale jako aktivní součást uživatelské komunikace, která pomáhá snižovat stres rodičů, podporuje orientaci a buduje důvěru během celé zkušenosti pacienta.
06 Redesign webu
Web jako nástroj pro klidnější komunikaci
Před redesignem trávil personál značnou část času opakováním stejných informací po telefonu nebo e-mailem. Nová struktura obsahu a jasnější navigace pomohly přesunout část komunikace do digitálního prostředí, takže si rodiče dokázali sami dohledat průběh vyšetření, podmínky objednání i potřebné instrukce ještě před kontaktováním kliniky. Díky tomu se snížilo množství opakujících se dotazů a tlak na recepci.
Velká část redesignu byla zaměřena na zlepšení orientace rodičů během celé pacientské cesty od prvního kontaktu přes objednání až po přípravu dítěte na samotné vyšetření.
01 Nová informační architektura
Sitemap a obsahová strategie byly navrženy tak, aby rodiče rychle našli odpovědi na nejčastější otázky bez zbytečného procházení stránek nebo nutnosti kontaktovat recepci.
Obsah byl reorganizován podle reálných potřeb rodičů například podle věku dítěte, typu problému nebo fáze léčby což výrazně zlepšilo orientaci během objednávání i samotné návštěvy.
Velký důraz byl kladen také na nastavení očekávání. Web postupně vysvětluje průběh vyšetření, délku návštěvy, přípravu dítěte i další kroky léčby, aby rodiče přicházeli do procesu s realistickými očekáváními a větším pocitem jistoty.
02 Wireframy a vizuální design
Návrh vznikal od prvotních konceptů wireframů přes průchod až po finální UI systém pro desktop i mobilní zařízení.
Celý interface byl navržen mobile-first, protože většina rodičů přicházela na web z telefonu často během péče o dítě nebo ve stresové situaci.
UI design se zaměřoval především na srozumitelnost, vizuální klid a minimalizaci zahlcení informacemi. Důležitým cílem bylo vytvořit prostředí, které bude působit odborně, ale zároveň lidsky a přístupně.
Nový vizuální systém zároveň pomohl výrazně lépe propojit branding kliniky s digitální zkušeností a sjednotit komunikaci napříč všemi touchpointy.
03 Design systém
Součástí redesignu byl také návrh knihovny UI komponent a základního design systému pro konzistentní rozvoj webu a jednodušší správu obsahu do budoucna.
Sjednocený systém komponent vytvořil stabilnější vizuální hierarchii napříč webem a zároveň usnadnil budoucí rozšiřování obsahu bez narušení konzistence značky. Výsledkem je flexibilnější a dlouhodobě udržitelnější digitální prostředí, které dokáže lépe reagovat na budoucí potřeby kliniky i rodičů.
Design systém zároveň umožnil efektivněji pracovat s různými typy obsahu, formulářů, informačních bloků i systémových stavů během objednávacího procesu.
Finální web design klidný, přehledný a přívětivý pro rodiče i děti. Klikněte na náhled pro detailní zobrazení.
04 Srovnání: původní web vs. nový web
Původní web působil jako klasický zdravotnický portál z předchozí dekády obsahově rozsáhlý, ale vizuálně i strukturálně zastaralý. Redesign posunul web od informačního archivu k modernímu, důvěryhodnému a uživatelsky přívětivému nástroji.
Informační architektura
Vizuální styl
UX a použitelnost
Tón komunikace
SEO a struktura obsahu
Klíčový poznatek
Web dnes nefunguje pouze jako prezentační stránka kliniky, ale jako aktivní komunikační vrstva, která pomáhá snižovat nejistotu rodičů a zlepšovat průběh celé zkušenosti ještě před návštěvou ordinace.
07 Objednávací flow
Méně nejistoty, rychlejší cesta k termínu
Kontext
Původní objednávací proces byl příliš obecný a nepočítal s rozdílnými potřebami nových a stávajících pacientů. Rodiče často nevěděli, jaký typ vyšetření zvolit, a recepce následně musela řešit velké množství chybných nebo nekompletních objednávek.
Cílem redesignu nebylo pouze vytvořit nový formulář, ale navrhnout rozhodovací systém, který rodiče postupně naviguje podle věku dítěte, typu problému a stavu pacienta.
Hlavní UX problémy
Rodiče často přicházeli na web ve stresové situaci a potřebovali rychle pochopit další krok bez zbytečného zahlcení informacemi.
Klinika zároveň pracovala s omezenou kapacitou a specializovala se pouze na konkrétní skupinu pacientů. Formulář proto musel fungovat nejen jako objednávka, ale také jako nástroj pro filtrování relevantních pacientů.
Velká část komunikace před redesignem probíhala manuálně přes telefon nebo e-mail, což vytvářelo zbytečnou administrativní zátěž pro recepci.
Návrh řešení
Flow bylo rozděleno podle typu pacienta na nový a stávající, což umožnilo vytvořit přesnější logiku objednávání a zjednodušit jednotlivé scénáře použití.
Nový pacient procházel validací podle věku dítěte a typu problému. Systém tak dokázal lépe určit vhodný typ péče ještě před odesláním formuláře.
Součástí flow bylo také dynamické větvení podle odpovědí rodiče například zda dítě nosí brýle nebo má diagnostikované jiné oční onemocnění.
Důležitou součástí návrhu bylo i zobrazení dostupné kapacity kliniky a vysvětlení, kdy budou zveřejněny další termíny. Formulář tak pomáhal nastavovat realistická očekávání ještě před samotným objednáním.
Celý proces byl navržen mobile-first, protože většina rodičů přicházela na web z telefonu, často během péče o dítě nebo ve stresové situaci.
Úvod objednávky
Uživatel se seznámí s průběhem objednání před zahájením procesu.
- Průběh vyšetření
- Podmínky objednání
- Vnitřní řád
- Specializace kliniky
Rozhodovací bod
Typ pacienta?
Nový pacient
Validace věku dítěte
Uživatel zadá datum narození. Systém ověří, zda dítě splňuje podmínky kliniky.
Rozhodnutí
Spadá dítě do péče?
Doporučení na jiné pracoviště
Pokud dítě nespadá do péče, systém doporučí vhodné pracoviště. Tok zde končí.
Výběr typu vyšetření
Hlavní důvod objednání uživatel vybírá z variant.
Screening flow
Doplňující otázky pro upřesnění péče.
- Nosí dítě brýle? Ano / Ne
- Diagnostikované oční onemocnění? Ano / Ne
Vyhodnocení typu péče
Systém navrhne nejvhodnější typ péče na základě odpovědí.
Kontrola kapacity
Systém ověří dostupnost volných míst pro daný typ úkonu.
Informace o dostupnosti
Pokud nejsou volná místa kdy a kde hledat termíny.
- Nové termíny: 1. den následujícího měsíce
- Uvolněná místa průběžně na Facebooku
Vyplnění kontaktních údajů
Uživatel zadá údaje o dítěti a zákonném zástupci.
Odeslání formuláře
Strukturovaná data putují do systému recepce.
Recepce potvrzuje termín
Klinika kontaktuje uživatele s návrhem termínu vyšetření.
Stávající pacient
Výběr úkonu
Uživatel vybere důvod kontaktu pomáhá recepci připravit návštěvu předem.
Identifikační údaje
Údaje o dítěti a zákonném zástupci.
Preferovaný kontakt
Rodič volí, jakým způsobem chce být kontaktován.
Odeslání formuláře
Jednodušší a rychlejší proces rodiče vyplňují pouze relevantní informace.
Recepce potvrzuje termín
Klinika kontaktuje rodiče s návrhem termínu.
Proč výběr úkonu?
Výběr pomáhá recepci lépe připravit návštěvu a zrychlit komunikaci ještě před příchodem pacienta. Snižuje počet doplňujících telefonátů.
Přepracovaný objednávací proces krok za krokem, bez zbytečné zátěže pro rodiče.
Před a po
Jeden univerzální formulář
Původní objednávkový formulář fungoval jako jeden univerzální vstupní bod pro všechny typy pacientů i problémů. Flow neobsahovalo žádné větvení, validaci ani navigaci podle typu péče.
Rodiče museli sami rozhodnout, jaký typ vyšetření potřebují, bez dostatečného kontextu nebo vedení. To často vedlo k chybným objednávkám a dodatečné komunikaci s recepcí.
Systém zároveň nijak nereflektoval omezenou kapacitu kliniky ani její specializaci na konkrétní věkovou skupinu pacientů.
Velká část komunikace proto probíhala manuálně přes telefon nebo e-mail zejména při opravách objednávek, vysvětlování podmínek péče nebo přeobjednávání pacientů.
Objednávání, které vás vede krok za krokem
Nové flow bylo navrženo jako rozhodovací systém, který rodiče naviguje krok po kroku podle věku dítěte, typu problému a stavu pacienta.
Objednávací proces byl rozdělen na scénáře pro nové a stávající pacienty, což umožnilo vytvořit přesnější logiku formuláře a minimalizovat množství nerelevantních vstupů.
Dynamické větvení formuláře pomohlo lépe filtrovat pacienty mimo cílovou péči kliniky a zároveň odlehčilo recepci od manuální administrativy.
Součástí redesignu bylo také průběžné komunikování dostupné kapacity a termínů, díky čemuž formulář fungoval nejen jako objednávka, ale také jako nástroj pro expectation management.
Klíčový poznatek
Původní formulář fungoval primárně jako sběr dat. Nový systém byl navržen jako aktivní součást komunikace mezi klinikou, rodiči a zdravotnickým personálem.
Business a service design dopad
Nový systém výrazně snížil množství chybně vytvořených objednávek a odlehčil recepci od manuálního přeobjednávání nebo doplňujících telefonátů.
Flow zároveň pomohlo lépe filtrovat pacienty, kteří nespadali do cílové péče kliniky, což pomohlo efektivněji pracovat s omezenou kapacitou pracoviště.
Objednávací proces přestal fungovat pouze jako formulář a stal se aktivní součástí komunikace mezi klinikou, rodiči a zdravotnickým personálem.
Výsledky
- Jasnější cesta krok za krokem podle věku dítěte a typu problému
- Méně chybně vytvořených objednávek
- Nižší administrativní zátěž recepce
- Lepší nastavení očekávání díky komunikaci dostupnosti termínů
- Rychlejší orientace rodičů během objednávání
- Přesnější filtrování pacientů mimo cílovou péči kliniky
Redesign neřešil pouze vizuální vrstvu objednávky, ale transformoval celý způsob, jakým klinika pracovala s příjmem pacientů, omezenou kapacitou a komunikací očekávání před návštěvou.
08 Rozšíření identity
Flexibilní systém pro digitální i fyzický svět
Nová identita byla navržena jako flexibilní systém použitelný napříč digitálním i fyzickým prostředím kliniky. Vizuální jazyk se postupně propsal do komunikace na sociálních sítích, edukativních příspěvků, tiskovin, vizitek, pracovního oblečení i navigace v prostředí kliniky.
Jednotná identita napříč sociálními sítěmi Facebook i Instagram.
Ukázka edukativní carousel pro Instagram
Ukázka Reels / Stories série (9:16)
Edukace ve formátu Stories
Stejný vizuální jazyk přenesený do vertikálního 9:16 formátu krátké, listovatelné karty, které vysvětlí myopii rodičům během pár vteřin.
Maskoti (srdce a obrazovka) drží lehký, přátelský tón i u odborného tématu.
09 Výsledek a reflexe
Design jako nástroj důvěry
Výsledkem projektu je jednotný vizuální a digitální systém, který lépe reprezentuje odborné zaměření kliniky a zároveň pomáhá budovat větší důvěru už při prvním kontaktu se značkou.
Po spuštění redesignu klinika zaznamenala pozitivnější zpětnou vazbu od rodičů, plynulejší komunikaci během objednávání i návštěvy kliniky a menší administrativní zátěž personálu.
Přehled všech výstupů projektu od loga přes web až po fyzické aplikace značky.