Tuto studii jsem sepsal jako inspiraci pro všechny, kdo přemýšlí na redesignem nebo optimalizací svého webu / e-shopu a zvažují, jakou cestou se vydat.
Také ukazuje, že ne vždy je nutné jít hned cestou e-shopového řešení na míru (což bývá většinou nejdražší a nejsložitější cesta), aby jste dokázali dosáhnout svých vizí a cílů.
Více o tomto tématu jsme probírali v podcastu zde. Doporučuji poslechnout — podcast je plný praktických příkladů a může vám pomoci najít správný směr.
A a nyní už k tématu článku.
Dostal jsem důvěru zapojit se do redesignu e-shopu přední české pražírny kávy, která ročně vypraží více než sto tun kávy. Povedlo se. Zatím se stále rozjíždíme, ale už teď jsme dílčí cíle několikanásobně překonali.
COFFEESPOT je rodinná pražírna kávy. Najdete ji v obci Babice v malebném kraji moravského Slovácka. Od roku 2011 působí na českém trhu nejen jako pražírna kávy s kamennou prodejnou, ale spustili i svůj e-shop.
Jsou super. A jsou to neuvěřitelní dříči. Nestojí za nimi žádný investor. Vše, co dělají získali na základě svých vlastních zkušeností i chyb. Moc hezky to popsal na svém Facebooku Lukáš Hejlík.
Svou kávu pravidelně dodávají např. do sítě prodejen Sklizeno nebo do Levandulové farmy. Jsou součástí komunity nejznámějších foodblogerů v ČR - Gastrokroužek.
Před navázáním spolupráce klient řešil technické problémy s e-shopem a poptával možnost jeho celkové optimalizace. Kontaktoval mě na doporučení.
Jak správně provést redesign e-shopu? Neexistuje univerzální odpověď. Každý projekt má jiné cíle a svá časová, finanční nebo technická omezení.
Design není to samé jako grafická podoba. Design řeší, jak věci fungují.
Ptám se. Hodně se ptám a zjišťuji. Pro zvolení optimálního řešení jsem nejprve potřeboval poznat:
Používám speciální vstupní dotazník, sady otázek a procesů. Samozřejmě jsem udělal zkušební objednávku a kávu ochutnal. Hned na začátku mě COFFEESPOT náležitě vybavil a spolupráce mohla začít.
E-shop chceme efektivně rozvíjet i do budoucna. Proto jsme si stanovili vizi a cíle, kam se chceme dostat v časovém horizontu. Vize vás neustále nutí se posunovat vpřed. Cíle slouží k tomu, aby konkrétně a měřitelně splnily vizi.
Jasnou vizí COFFEESPOT je zaměření na pražení té nejlepší výběrové kávy. Vysokou kvalitu si udržet a neustále zlepšovat. Kávu nabízet zákazníkům primárně na e-shopu 🛒, dále v nové pražírně a také na pobočkách v Praze (nejsou ve vlastnictví COFFEESPOTU, nemusíme řešit provozní náležitosti). To vše za přijatelnou cenu.
Od úplného začátku se snažíme o to, aby kvalitní káva nebyla jen sváteční záležitostí. Většina lidí si kvalitní produkty spojuje s výjimečnými příležitostmi, ale my chceme, aby byla kvalitní káva přirozenou součástí běžného dne co největšího počtu lidí.
Jiří Plšek, COFFEESPOT
Většina konkurence vsází na nízkou cenu nebo prodej příslušenství pro přípravu kávy. Doplňky jako mlýnky na kávu, moka konvičky, french press nebo filtry jsou velmi vyhledávané a poptávané zboží. Mohly by být zdrojem zisku a nových zákazníků.
Teroreticky by nám mohly fungovat tyto 3 hypotézy:
Touto cestou však jít nechceme, přestože na e-shopu několik drobných doplňků nabízíme (jsou to ale spíše doprodeje). Pokud si zákazník koupí mlýnek na kávu, pravděpodobně se z něj nestane věrný a dlouhodobý zákazník. A až se mu utrhne u mlýnku klička (vím, o čem mluvím), budeme řešit reklamace. Za mlýnek však ale pražírna kávy nemůže a vznikají zbytečně negativní emoce a časové nároky spojené s rychlým vyřízením reklamace.
Vizí COFFEESPOT není ani účast na různých akcích, jako jsou festivaly nebo konference, přestože je to v současnosti velmi žádané a může to být dobrá příležitost, jak “být viděn”. COFFEESPOT má sice k dispozici vlastní “mobilní kavárnu”, ale raději s klidným svědomím doporučí konkurenci, která se na toto zaměřuje (👏 zdravím Laura Coffee).
Hlavním cílem bylo samozřejmě zvýšení obratu, ale společně s tím i zlepšení procesů a minimalizace času, který musí COFFEESPOT věnovat provozu e-shopu (protože mnohem raději se věnují tomu, v čem jsou nejlepší - pražení kávy). Společně s tím jsme ale stanovili i dílčí cíle, které jsou spojeny s marketingem a uživatelskou přívětivostí e-shopu.
Jako např:
K utřídění myšlenek jsme provedli SWOT analýzu.
Identifikovali jsme:SWOT analýza pomůže definovat, na čem můžete při redesignu stavět a co nás může naopak poškodit.
Abychom mohli efektivně začít plnit naši vizi, bylo třeba zanalyzovat stávající stav.
Začal jsem kvantitativním průzkumem - analýzou chování lidí na webu.S analytikou se doposud moc nepracovalo, proto jsem už na počátku spolupráce nasadil nové analytické nástroje a přenastavil ty stávající, aby nám poskytly přesnější data o tom, z jakých zdrojů k nám lidé chodí, které stránky se podílí na konverzích, co lidi zajímá, co hledají na e-shopu nebo kde se ztrácejí.
Jedno ze zajímavých zjištění bylo, že uživatelé na webu často využívají:
Velmi často bylo používáno i vyhledávání, přestože bylo defaultně schované. Po napojení vyhledávání na Google Analytics mi data z vyhledávání pomohla při návrhu nového e-shopu i obsahu. Další (užitečnější) data zde nemohu kvůli případné konkurenci publikovat.
Tvořím pro lidi, a proto je vhodné vše ověřit. Po úvodní analýze a stanovení hypotéz následovalo dotazníkové šetření. Sestavil jsem sociologický dotazník, který jsme rozeslali stávajícím zákazníkům.
Získali jsme stovky unikátních odpovědí. Skvělé poznatky zahájení prací na novém e-shopu.
Co jsme např. zjistili:
Následoval kvalitativní průzkum - rozhovory s lidmi a Guerilla uživatelské testování - to není tak přesné jako standardní uživatelské testování, ale je rychlejší, levnější a i přes jeho limity poskytlo zajímavé pohledy. Vzhledem k tématu probíhalo nejčastěji v kavárně.
Závěry z výzkumu jsme porovnali s naší vizí. I přesto, že jsme dostali jasnou zpětnou vazbu, co lidem chybí, rozhodli jsme, že některé poznatky nebudeme realizovat.
Např.:
Z výzkumu jsme si také ověřili, kdo je naším potencionálním zákazníkem, jak máme komunikovat a tvořit obsah.
Analýzu klíčových slov využívám ve většině případů a bývá hlavním stavebním kamenem při optimalizaci nebo redesignu webu. Díky ní zjistíme např.:
Pro mě jako UX designera je analýza klíčových slov důležitá pro návrh informační struktury webu. Dokážu podle ní lépe určit, jak by měla vypadat:
Pokud tvořím informační architekturu na základě dat, dokážu lépe zajistit, aby na konkrétní hledané klíčové slovo vznikla vhodná vstupní stránka na webu. Tím se zlepší pozice ve vyhledávačích a přivedeme návštěvníky na web.
Pro SEO u klientských e-shopů využívám spolupráce se skvělými kolegy. V tomto případě se o analýzu, technické nastavení a zapracování on-page faktorů postaral Pepa Kroupa.
U analýzy konkurence existují různé přístupy. Někdo analýzu konkurence podceňuje a nepovažuje ji za potřebnou. Jiní analýze konkurence naopak věnují až přehnané množství času a úsilí.
Zanalyzoval jsem cca 20 konkurentů. Přímých i nepřímých. Je to málo? Hodně?
Prozkoumal jsem jejich weby, e-shopy, nabídku, reference, důvěryhodnost, cenotvorbu, marketingové aktivity, zákaznickou podporu, technologie a postupy.
TIP: Na analýzu konkurence doporučuji nástroje: Alexa, Similarweb, Majestic, SEMrush, Visualping, Archive.org, Mentions, Ghostery, nástroje od Google a Seznam.cz, lidský faktor.
Redesign webu je zásadní krok a skládá se z mnoha částí. Ne vždy je však potřeba. Často je efektivnější a levnější jít cestou optimalizace. Častá chyba e-shopařů je, že se jim líbí web konkurence, a považují tak změnu grafiky za redesign. Věří, že hezčí e-shop jim zvýší výkonnost.
Redesign se ale netýká jen grafiky. Úprava grafického designu je jen jeden z dílčích kroků. Dokonce není vždy nutné při redesignu měnit grafiku.
V našem případě jsme potřebovali změnit více částí zároveň. Redesign dával smysl.
Technologický dluh. E-shop běží na krabicovém řešení. Přemýšleli jsme o vytvoření e-shopu na míru, ale nakonec jsme se rozhodli zůstat u Eshop-rychle.cz a technické limity systému obejít (pokud to bude možné). Bylo by moc náročné zaškolit personál a předělat firemní procesy na novou platformu. Víme, že se tomu ale výhledově nevyhneme.
Použitá šablona byla zastaralá a pomalá. Rychlost webu je v dnešní době důležitá a je zároveň signálem pro vyhledávače. Tento problém byl naprosto zásadní a bylo nutní rychle ho řešit.
Mobilní verze webu obsahovala chyby, byla pomalá a špatně ovladatelná, přesto podíl mobilních uživatelů přesáhl 40 %.
Nekonzistentnost značky. E-shop komunikoval jinak než sociální sítě, e-mail nebo kamenná prodejna. A to jak vizuálně, tak i technicky.
Design
Přestože jsem se rozhodli pro redesign, na začátku jsme šli cestou optimalizace stávajícího e-shopu. Provedl jsem dílčí úpravy vedoucí k vylepšení a odstranění největšího problému. A to byla rychlost načítání.
Po ukončení všech analýz nastává proces, který dokáže prezentovat něco hmatatelného - definice rozmístění funkčních prvků na stránce. Odborně se tomu říká wireframe (neboli drátěný model webu). Nejedná se o grafický návrh, protože neobsahuje žádné obrázky.
Wireframe nám umožňuje minimalizovat rozdíl mezi zadáním a výsledným řešením. Lépe pochopíme, jak bude výsledný web vypadat, jak se bude ovládat a jak bude komunikovat.
Vzhledem k tomu, že e-shop běží na krabicovém řešení a rozmístění prvků na stránce (částečně i obsah a textace) je striktně určeno šablonou, nedá se vymýšlet nekonečné množství wireframů jako u e-shopu na míru. Nebo je pro redesign krabicového řešení wireframe zbytečný?
Přesto však wireframes kreslím alespoň u klíčových stránek. Klientovi pomohou představit si finální podobu e-shopu (která se u redesignu může zásadně lišit) a mně pomohou při tvorbě grafického designu. Součástí wireframu by měl být i obsah (nikoliv jen výplňkový text typu lorem ipsum).
Díky tomu můžeme už klikací wireframe testovat na uživatelích (jako funkční prototyp webu) a případné chyby opravit včas a levně. To jsem zde přesně udělal. Tímto děkuji všem, kteří se testování účastnili (např. moje skvělá kolegyně Pavla Simonsen).
“Prototypy nám umožní vidět věci, které nefungují, a věci, které je třeba, aby fungovaly. Proto vždy testujte.”
Po dokončení všech předchozích kroků nastává nejoblíbenější část všech zadavatelů a majitelů webů a e-shopů - GRAFICKÝ DESIGN.
Díky předchozím krokům vzniká na pevných základech.
Grafický design e-shopu navrhuji tak, aby:
Při návrhu grafického designu (a celkově u návrhu e-shopu) mi moc pomohla např. i kniha, kterou COFFEESPOT napsal a vydal pod hlavičkou Computer Press - Lexikon kávy.
Uživatelé si nekupují kávu kvůli grafice e-shopu. Grafický design, který jsem navrhl u e-shopu COFFEESPOT proto není žádné kreativní veledílo. Je zaměřený na výkon, funguje.
"Uživatelské rozhraní je jako vtip. Když musíte lidem vysvětlit, jak funguje, není dobré."
Říká se, že „obsah je král“. Něco na tom bude. Lidé nenavštěvují weby kvůli vzhledu. S větší pravděpodobností k vám přijdou proto, že máte skvělý obsah. Přesto obsah většina e-shopařů neřeší a považují ho za něco “navíc”.
COFFEESPOT má neuvěřitelné know-how a zkušenosti. E-shop to ale bohužel dostatečně obsahově nesděloval, což byla velká škoda. To jsme museli napravit.
Obsahu ve statických sekcích bylo poměrně dost, ale působil nekonzistentně oproti komunikaci např. na sociálních sítích nebo blogu.
Zapracovali jsme na novém obsahu pro:
Textový obsah jsme tvořili společně. COFFEESPOT se vyznačuje výborným osobním přístupem a toto jsme chtěli promítnout i do obsahu. Skvělé texty do statických kategorií nám pomohla usměrnit Maruška Fišerová, která se podílela i na korekci.
Na mikrotexty jsem se zaměřili nejvíce. Nejen proto, že já osobně na nich “ujíždím” a považuji je za velmi důležité, ale i samotné téma je velmi kreativní a často jednou krátkou větou dokážete vyjádřit spoustu emocí a vysvětlit danou situaci lépe než dlouhým odstavcem textu.
Implementace bývá občas trochu oříšek. Člověk se pohybuje na velmi tenkém ledě a občas dopředu na 100% neví, co půjde a nepůjde zapracovat.
Při práci mě trochu “brzdilo” krabicové řešení Eshop-rychle, které neumožňuje některé systémové prvky e-shopu upravit, přemístit či přepsat obsahově. Je to logické. Systém a jeho šablony jsou univerzální. Pokud by se na jedné šabloně kvůli jednomu e-shopu něco změnilo, úprava se promítne dalším tisícům e-shopařů.
Přesto jsem nechtěl měnit techické řešení. Celý proces by se protáhl o několik měsíců a byl by násobně dražší bez záruky lepších výsledků. Uvidíme časem, až ověříme hypotézy a zapracujeme všechny návrhy.
O nevýhodě krabicových řešení jsem ale už psal samostatný článek a počítal jsem s tím. Většina prvků lze tedy měnit jen v kombinaci s vlastním HTML, CSS a JS. Musel jsem oprášit své "kódérské triky" z dob, kdy jsem ještě denně kódoval a programoval webové stránky na WordPressu (5 let jsem působil jako webový grafik a kodér).
Systém Eshop-rychle znám velmi dobře, protože se poslední 3 roky podílím na jeho vývoji. 80% úprav se mi podařilo nakonec zapracovat.
Ty největší úpravy jsou vidět na první pohled - celková změna designu použité šablony PORTO. (momentálně už jsme provedli upgrade na šablonu New York, kterou jsem mohl pro Eshop-rychle od základu navrhnout).
Nejvíce daly zabrat změny v detailu produktu:
Další méně viditelné ale důležité části, které většina e-shopových řešení nemá správně zapracované a dají se lehce upravit jsou např:
Při redesignu je vždy třeba dát pozor na propady ve vyhledávání. Změnou informační architektury, domény (z www.kavaprazena.cz na www.coffeespot.cz) i změnou technického řešení (u nás. např. blogu) může e-shop přijít o velké množství vstupních stránek a návštěvníků. Přesměrování url i změnu domény jsme ohlídali:
Nasadili jsme i pokročilejší marketingová "udělátka", jako např. remarketing a personalizaci e-shopu, kdy se každému uživateli upravuje výpis produktů na základě jeho chování.
Problém, který jsem zde řešil poprvé, byla HEUREKA. Protože u e-shopu došlo ke změně domény, bylo třeba vše změnit i v nastavení Heureky.
Heureka by mohla působit nekonzistentně, protože e-shop byl před redesignem pojmenován jako “kavaprazena” a dotazník spokojenosti obsahoval nesprávné logo. Toto by zákazníky mohlo hodně zmást a odradit je od vyplnění zpětné vazby.
Telefonický kontakt na Heureku jsem nikde nedohledal, poslal jsem tedy naivně tento email:
Po několika vyměněných konverzacích jsem zjistil, že Heureka bohužel tento krok neumožňuje a je třeba založit nový profil. Tím ale dojde ke ztrátě historie, certifikace a všech hodnocení. Měli jsme přes 900 recenzí.
To nechceš…
Telefon byl v zaslaném e-mailu, tak jsem se pustil do telefonického vyjednávání. Paní na technické podpoře byla moc milá a celkově mě postavení Heureky k této záležitosti velmi pozitivně překvapilo.
Po několika dnech komunikace (a snad i hodinách strávených na telefonu) celá záležitost skončila takto:
Kladné body pro Heureku. Technickou podporu mají skvělou a umí se zachovat lidsky.
Přestože došlo ke kompletní změně domény (z pohledu vyhledávače = nový web), po spuštění redesignu nedochází k očekávanému (krátkodobému) propadu. Naopak, již po 2 měsících od spuštění redesignu:
Na předchozí verzi e-shopu návštěvníci často používali vyhledávání. To bylo technicky nevhodně zpracované. Po redesignu se počet návštěvníků, kteří použili vyhledávání a odešli z webu (bez změny nabídky zboží), snížil o 77%.
Už se těším, až Eshop-rychle nasadí mojí přepracovanou verzi.
Citlivější data zde již nebudu prezentovat, ale zmíním:
Pokud mám zmínit i nějaká negativní čísla, určitě je to snížení celkového konverzního poměru e-shopu (kolik procent návštěvníků zakončí svou návštěvu objednávkou). To však není špatně. Toto číslo vám na první pohled stejně nic reálného neukáže. Se zvýšením návštěvnosti logicky upadá kvalita návštěv.
Pořád si rozumíme. Viděli jsme se fyzicky zatím jen 1x. Navíc na klientovo doporučení jsem dostal důvěru provést redesign a rebranding skvělé české čokoládovny JANEK.
Začali jsme v říjnu 2017 a nový e-shop jsme spustili na konci ledna 2018. Všechna data a výsledky z počátku spolupráce jsou tedy porovnávána s nejsilnější částí roku - s Vánoční sezonou.
Proces redesignu zabral:
"Skoro dva roky jsme věděli, že e-shop není designově a funkčně zcela v pořádku. Báli jsme se ale jakékoliv změny, aby to negativně neovlivnilo celou firmu. Lukáše jsme našli díky výborným referencím. Chvíli nám trvalo pochopit, že je opravdový profesionál a přesně ví, co dělá. Bylo to hlavně díky našim negativním zkušenostem s různými agenturami, kdy spolupráce končily zklamáním a zbytečnými výdaji. Během pár měsíců jsme si poradili s celkovým redesignem e-shopu. Mysleli jsme si, že redesignem spolupráce skončí, ale Lukášovy zkušenosti nás i nadále posunují ve všech směrech neskutečně dopředu. I díky tomu máme více času na rozvoj firmy a naše zákazníky, kteří všechny změny vítají s nadšením."
Co plánujeme:
PPC - PPC neodmyslitelně patří do marketingové strategie každého e-shopu. Doposud e-shop s PPC pracoval, ale správa nebyla efektivní. Např. Sklik spravoval samotný Seznam.cz (markeťáci vědí, jak to Seznam spravuje 
). Chceme snižovat náklady na prokliky z placené reklamy a přivádět více zákazníků přirozeně. Na to jsem se domluvil se skvělou Jarkou Turkovou. Máme za sebou spoustu společné práce na jiných projektech (např. u Eshop-rychle, 3D FITNESS) a vím, že je to bude mít "drive".
Facebook Ads - Sociální sítě jsou jako stvořené pro toto téma. Budeme pracovat na brand buildingu a vzdělávat všechny příznivce dobré kávy.
Blog - S bodem výše úzce souvisí i blog. Základem úspěchu je vytvořit z návštěvníků zákazníky a ze zákazníků fanoušky. Věrní fanoušci si o pražírně kávy COFFEESPOT budou číst a doporučovat dále přátelům. Máme připravenou obsahovou strategii. Také jsme spočítali životní cyklus jednoho aktivního zákazníka a blog by ho mohl pomoci prodloužit.
Technické řešení - zde víme, že jsme na technickém limitu, ale přejít na e-shop na míru hned na načátku spolupráce by nebyl vhodný krok. Je ale otázkou času, kdy COFFEESPOT výrazně přeroste současné technické řešení. V rovnici cena / výkon / kompromis můžeme s vlastními úpravami ještě nějaký čas fungovat.
Líbil se vám postup? Sdílejte ho s přáteli.
let zkušeností
v oblasti e-commerce
dokončených velkých
i malých projektů
návštěvníků měsíčně
mých vlastních projektů
nekonečno
kreativních nápadů
Potřebujete navrhnout nový projekt nebo zlepšit ten stávající?
Pojďme si promluvit o možném řešení.
