Redesign webu Sicily Café podle toho, na co se host skutečně ptá

Sicily Café je kavárna na Senovážném náměstí v Praze 1. Vaří z bio surovin pinsu a domácí jídla pro masožravce i vegany, peče dezerty a mele italské espresso. A o tom, jestli je otevřeno a co se dnes vaří, rozhodoval web.

Tento projekt byl redesignem právě toho webu. Chtěl jsem, aby přestal jen vypisovat všechno, co kavárna dělá, a začal hostovi odpovídat na otázky, které si klade dřív, než vejde dovnitř. Původní web najdete na sicilycafe.cz, nový návrh je v celé šíři níž.

Problém

Starý web byl uspořádaný podle toho, co kavárna má: E-shop, poukazy, víno, dezerty, kávu. Host nejdřív viděl lištu s cookies, pak navigaci o jedenácti položkách, bitmapové logo přes fotku a slider. Dnešní menu ani rezervaci tam nehledal nikdo rád.

Prošel jsem úvodní stránku očima hosta na počítači a zapsal si sedm věcí, které mě zdržely:

sicilycafe.cz/index.php/cz

• Cookies jsou první, co uvidím. Lišta zabírá celý horní řádek a mluví o personalizaci reklam. Dřív než kavárnu mi web ukáže upozornění.
• Jedenáct položek v jedné řádce. Domů, E-shop, Rezervace, Poukazy, Káva, Jídlo, Dezerty, Víno, O nás, DIY a Přidej se k nám. Nic nemá větší váhu, takže nic nevyniká, a přepínač jazyka spadl o řádek níž.
• Logo jako nalepená bitmapa. Nápis z kávových zrn leží v bílém čtverci přes fotku a na nic jiného na stránce nenavazuje.
• Slider, který nic neříká. Fotky se střídají, ale žádná nevysvětluje, co kavárna nabízí. První věta s popisem přijde až pod nimi.
• Dnešní nabídka se schovává, bannery křičí. Specialita dne je ukrytá v podmenu Jídlo. Na úvodní stránce místo ní visí obrázkové letáky s akcemi, text je přímo v obrázku a alt popisky zní AKCE1 a AKCE2.
• Rezervace je odkaz mezi řádky. Hlavní věc, kvůli které host přichází, nemá tlačítko. Online rezervace je jen odkaz pod kontakty, otevírací dobou a logy platebních karet. Leží níž na stránce.
• Hlavička stránky nic neříká. Titulek i popis zní jen Sicily Café, autor je Super User a v adrese zůstalo index.php. Vidět je to jen v kódu a ve vyhledávání.

Cíl

Vytvořit web, který hned řekne, jestli je otevřeno, co se dnes vaří a jak si zarezervovat stůl, a přitom nechá prostor pro to, v čem je kavárna dobrá: domácí kuchyni, kávu a dezerty.

Moje role a přístup

Navrhl jsem strukturu úvodní stránky, pořadí sekcí i vzhled komponent a výsledek postavil jako funkční prototyp v nástroji Lovable, česky i anglicky. Práci jsem opřel o tři otázky hosta:

• Je otevřeno? – chci vědět, jestli má smysl vyrazit.
• Co se dnes vaří? – hledám denní menu, ne celý jídelní lístek.
• Jak si zarezervuju stůl? – chci to udělat na jedno kliknutí.

Každá sekce úvodní stránky musela odpovídat alespoň na jednu z nich.

Celý návrh na jednom místě

Takhle vypadá celá úvodní stránka od shora dolů. Posouvá se sama, zastavíte ji kolečkem nebo dotykem a můžete skočit rovnou do sekce.

Klíčová designová rozhodnutí

1. Otevřeno, nebo zavřeno? Řeknu to hned

Na starém webu jsem hodiny našel až dole mezi kontakty. Vytáhl jsem je nahoru do štítku v první obrazovce a celý týden nechal v patičce. Karta níž počítá stav podle pražského času.

2. Dnes na stole, hned pod úvodem

Denní menu má vlastní sekci se záložkami dnů. Otevře se na dnešku, minulé dny jsem zeslabil a dnešek značí červená tečka. Nikdo by neměl lovit v podmenu, co se dnes vaří.

3. Vegan není vedlejší větev

Na starém webu se o vegetariánech a veganech na úvodce nepíše vůbec, přitom mají na stálém menu třináct jídel. Dal jsem jim stejnou váhu jako masu. Přepínač Vegan & veg / S masem ukáže u každé větve fotku, ceník a značky VEG, VEGAN a GF.

4. Sedm gramů, které si host zapamatuje

Obecný text o dobré kávě nikoho nezastaví. Sedm gramů zrna na jedno espresso, mleté na každý shot zvlášť, už je věta, kterou člověk řekne dál. Dal jsem jí celou šířku stránky a razítko s 800+ vůněmi.

5. Pomůžu i těm, kdo Prahu neznají

Kavárna je pár minut pěšky od nádraží i od Václavského náměstí, jenže starý web to neříká. Napsal jsem to přímo, v minutách chůze, a menu mám česky i anglicky.

Před a po

• Navigace. 11 položek v jedné řádce, jazyk pod nimi → 7 položek včetně E-shopu a přepínač CS / EN v hlavičce.
• První obrazovka. Slider fotek, bitmapové logo a leták → jedna věta, popis, tlačítko Rezervovat stůl a fotka interiéru.
• Rezervace. Odkaz v textu pod kontakty → primární tlačítko v první obrazovce.
• Dnešní nabídka. Podmenu Jídlo, Specialita dne → sekce Dnes na stole se záložkami dnů.
• Vegetariánská a veganská nabídka. Na úvodní stránce se nezmiňuje → samostatná sekce a štítky VEG, VEGAN a GF v ceníku.
• Hlavička stránky. Titulek a popis Sicily Café, autor Super User → titulek a popis, které říkají, co kavárna nabízí.

Vizuální systém

Barvy a písmo jsem přečetl z hotového návrhu. Pohybu je na webu záměrně málo, tři jemné animace si můžete pustit rovnou tady.

Konverze a validace

U kavárny konverze neznamená jediný klik. Host zjistí, jestli je otevřeno, podívá se na menu, ověří si cestu a nakonec zarezervuje nebo prostě přijde. Redesign bere úvodní stránku jako místo, kde se tohle rozhodnutí dělá snadno, ne jako místo, kde se něco prodává.

Nemám data z provozu nového webu, takže tato případová studie netvrdí žádný konkrétní nárůst. K vyhodnocení návrhu bych sledoval:

• Rezervace: kolik hostů klikne na Rezervovat stůl, oproti odkazu Online rezervace na starém webu.
• Denní menu: kolik lidí otevře sekci Dnes na stole a jak často přepnou na jiný den.
• Orientace: krátké testy na mobilu, ve kterých host bez nápovědy najde dnešní menu a zarezervuje stůl.

Před spuštěním si ještě projdu starý web a ověřím, že nábor, platební metody a stravenky mají v novém návrhu své místo.

Výsledek

Nový web je postavený na třech otázkách, které si host klade. Dnešní menu a rezervace jsou v první obrazovce místo v podmenu, vegani mají stejnou váhu jako maso a káva i informace pro návštěvníky mají vlastní sekce.

Úvodní stránka se čte shora dolů a každá sekce má jeden úkol. Denní menu se mění každý den, zbytek stránky zůstává stabilní.