01 Kontext
Samostatný produkt, ne lokalizace
FertiCare je klinika reprodukční medicíny působící pod hlavičkou mezinárodní skupiny Ginefiv. Skupina má vlastní globální vizuální identitu, ale český trh má odlišné potřeby, jiné pacientské publikum, jiný obsah i jinou rozhodovací cestu.
Zadáním proto nebyl překlad existujícího webu Ginefiv, ale návrh samostatného webu s vlastní informační architekturou, UX a UI, při zachování zděděné barevnosti, typografie a tónu značky, které budují důvěru v citlivém oboru.
Homepage
Homepage rámuje celou pacientskou cestu, emocionální hero s broskvovým pozadím, přehled služeb (léčba, spendeprogram, gentest), reference, představení kliniky, řádek benefitů a přehled poboček. Struktura vede pacienta klidně od prvního dojmu až k výzvě k objednání.
02 Výzva
Lokální produkt na globálních základech
Hlavní výzvou bylo najít rovnováhu: zůstat věrná globální značce Ginefiv tam, kde to buduje důvěru, ale postavit vlastní produkt tam, kde na tom záleží českému pacientovi.
- Zdědit vizuální identitu značky bez kopírování webu skupiny
- Navrhnout vlastní informační architekturu pro české publikum
- Zpřehlednit nejobsáhlejší sekci, metody léčby
- Provést pacienta citlivým tématem klidně a důvěryhodně
- Sjednotit desktop i mobilní zkušenost
Největší výzva
Navrhnout samostatný produkt s vlastní pacientskou cestou nad zděděným vizuálním jazykem globální značky, aby web působil lokálně relevantně a zároveň konzistentně se skupinou Ginefiv.
Komplexita projektu
Výzva nebyla v jednotlivých obrazovkách, ale v množství požadavků, které musel jeden web sladit současně.
Problém
Web Ginefiv nešlo jen lokalizovat, český trh měl jiné potřeby, obsah i pacientskou cestu.
Rozhodnutí
Navrhnout samostatný produkt s vlastní informační architekturou nad zděděným vizuálním jazykem značky.
Proč
Lokální relevance a důvěra pacientů při zachování konzistence s globální značkou.
03 Analýza a architektura
Mapa webu a pacientské cesty
Než vznikl první wireframe, zmapovala jsem celý produkt, hlavní sekce webu, jejich vzájemné propojení a cesty, kterými se pacient dostává od homepage až k objednání. Diagram slouží jako sdílený podklad pro vývoj: ukazuje navigační vazby, detailní stránky i doplňkový obsah.
- Hlavní linka, homepage → detail kliniky → detail léčby → spendeprogram → genetika → přehled poboček s rezervačním formulářem
- Detailní stránky, detail lékaře a ceník dostupné z příslušných hlavních stránek
- Doplňkový obsah, úspěšnost, reference, videa a další podstránky sekce „O nás“
- Rozcestník, sitemap a blog/News jako samostatná content větev
04 Brand & barevná paleta
Zeleň jako základ značky
Paleta vychází z oficiálního brandového manuálu skupiny GeneraLife („Clinics Rebranding“) a je celá postavená na zeleni, barvě důvěryhodnosti a odbornosti. Primární rodinu tvoří sytá tmavá zeleň, tyrkysové akcenty a světlé mátové a krémové odstíny pro emocionální plochy.
#063328
RGB 6/51/40Pantone 567 C
Primary / Ink
Nadpisy, primární tlačítka, patička webu
#2D564C
RGB 45/86/76Pantone 569 C
Deep green
Tmavé plochy, hloubka a kontrast
#438C89
RGB 67/140/137Pantone 3272 C
Accent teal
Odkazy, aktivní tab, sekundární tlačítko
#48A8A4
RGB 72/168/164Pantone 3252 C
Light teal
Interaktivní akcenty, ikony, hover stavy
#F4EAE3
RGB 244/234/227Pantone 5025 C
Warm cream
Pozadí hero sekcí, emocionální plochy, benefity
#C6FDCF
RGB 205/225/200Pantone 2412 C
Mint
Světlé zvýraznění, karty, potvrzující akce
Sekundární neutrály z brandového manuálu. Primární zeleň má navíc plnou škálu odstínů (tinty) pro adaptabilitu napříč médii, hodnoty přebrány z oficiálních color specifications GeneraLife (Digital Wolves).
05 Typografie
Elegantní serif pro nadpisy, čistý sans pro obsah
Nadpisy stojí na elegantním serifovém řezu, který dodává značce klid a odbornost. Tělo textu, navigace i UI prvky používají čistý bezpatkový font dobře čitelný i v menších velikostech.
Cesta k vašemu miminku
Reprodukční medicína
Metody léčby neplodnosti
Individuální a citlivý přístup ke každému páru na cestě za vysněným dítětem od první konzultace až po úspěšnou léčbu.
Popisek pod obrázkem · doplňková informace
Poznámka pro vývoj
Serifový nadpisový font odpovídá vizuálně stylu Playfair Display / Lora. Přesný název a licenci doporučuji ověřit ve Figma souboru nebo u vývojového týmu před dalším vývojem.
06 UX Challenge #1 · Informační architektura
Jak zpřehlednit nejobsáhlejší sekci webu
Sekce léčby (léčba neplodnosti) je nejobsáhlejší částí webu, zahrnuje desítky metod od vyšetření přes hlavní léčbu až po doplňkové metody a spendeprogram. Plochý seznam by pacienta okamžitě zahltil.
UX cíl: umožnit rychlou orientaci v metodách a přímý vstup ke konkrétní léčbě bez zbytečného proklikávání.
Klíčová rozhodnutí
- Rozdělení metod do logických skupin (hlavní / doplňkové / spendeprogram)
- Vícepatrové mega menu na desktopu, akordeon na mobilu
- Přímý vstup ke konkrétní metodě z libovolné stránky
- Konzistentní struktura sdílená napříč pobočkami
Problém
Desítky metod léčby v jedné sekci, plochý seznam by pacienta zahltil a ztížil orientaci.
Rozhodnutí
Vícepatrové mega menu dělící metody do skupin s jasnou hierarchií a přímými vstupy.
Proč
Rychlá orientace a kratší cesta ke konkrétní léčbě, kterou pacient hledá.
07 UX Challenge #2 · Rezervační formulář
Objednání na jedné obrazovce
Objednání je nejkritičtější akcí celého webu. U citlivého tématu by rozdělení do mnoha kroků zvyšovalo tření a nejistotu. Formulář jsem proto navrhla na jedné obrazovce s jasně seskupenými volbami a okamžitou inline validací.
Objednávka · mobil, jednosloupcové rozložení, stejné pořadí polí
Klíčová rozhodnutí
- Volby seskupené do bloků, pobočka, způsob konzultace, typ léčby, kontakt
- Okamžitá inline validace (např. kontrola formátu telefonu)
- Jednosloupcové mobilní rozložení se stejným pořadím polí
- Potvrzující tlačítko Odeslat v mátové barvě na tmavém pozadí
Zvažované varianty
Vícekrokový průvodce jsem zavrhla, u citlivého objednání zvyšuje nejistotu a schovává celkový rozsah. Jedna obrazovka dává pacientovi přehled o celé objednávce najednou a inline validace umožní opravit chybu okamžitě pod polem, ne až po odeslání.
08 Přehled stránek
Opakovatelné šablony napříč webem
Web stojí na několika opakovatelných šablonách, které umožňují snadno přidávat nový obsah, detail pobočky a lékaře, detail léčby i sdílený rozcestník pro blog a další sekce.
09 Responzivita
Responsive by Design
Každá klíčová obrazovka vznikala pro desktop i mobil zároveň, ne jako dodatečná adaptace. Mega menu se na mobilu mění na vertikální akordeon, vícesloupcové karty se skládají do jednoho sloupce a rezervační formulář zůstává jednosloupcový se zachovaným pořadím polí.
Objednávka · mobil, celý formulář v jednom scrollu, řádek benefitů a patička pod ním
UX principy
- Zachování priorit obsahu i v omezeném prostoru
- Mega menu → vertikální rozbalovací akordeon
- Vícesloupcové karty → jeden sloupec
- Formuláře optimalizované pro mobilní zadávání
10 Design systém
Komponentová knihovna
Design systém pokrývá opakovaně používané komponenty, díky kterým web roste konzistentně a rychle, bez toho, aby každá nová stránka vznikala od nuly.
- Navigace, horní lišta + vícepatrové mega menu (desktop) / akordeon (mobil)
- Hero sekce, fotografie, nadpis a CTA na broskvovém pozadí
- Karty léčby a karty poboček
- Rezervační formulář s inline validací
- FAQ akordeon
- Tab / akordeon pro přepínání mezi pobočkami
- Patička (footer)
11 Výsledek
Nasazený produkt s vlastní identitou
Jedna značka. Vlastní lokální produkt. Reálné nasazení. Z globální identity Ginefiv vznikl samostatný český web FertiCare s vlastní informační architekturou, UX, UI a design systémem, nasazený na produkčním webu ferticare.cz.
- Samostatný produkt na základech globální značky, konzistentní, ale lokálně relevantní
- Vlastní informační architektura pro české pacienty
- Mega menu zpřehledňující nejobsáhlejší sekci léčby
- Rezervační formulář na jedné obrazovce s inline validací
- Design systém a opakovatelné šablony pro růst obsahu
- Handoff dokumentace pro navazující práci na projektu
Co zbývá dořešit
V rámci handoffu jsem otevřeně zdokumentovala body k dořešení: definitivní copy místo placeholderů na rozcestníku a přehledu poboček, ověření názvu a licence nadpisového fontu, doplnění potvrzovací obrazovky a chybových/prázdných stavů, sjednocení ikon v řádku benefitů a kontrolu kontrastu na broskvovém pozadí (WCAG AA).
12 Reflexe
Co mi projekt přinesl
FertiCare byl projekt, ve kterém jsem navrhovala samostatný produkt nad existující globální značkou. Naučil mě rozlišovat, kde být věrná zděděnému systému a kde naopak postavit vlastní řešení podle potřeb lokálního pacienta.
Navrhnout lokální produkt na globální značce mě naučilo, kde být věrná systému, a kde lokálnímu pacientovi.
Co si z projektu odnáším
- Práce se zděděnou brand identitou při návrhu vlastního produktu
- Návrh informační architektury pro citlivé, emočně náročné téma
- Předání práce formou přehledné handoff dokumentace pro vývojáře