Necelých 8 měsíců provozu nového e-shopu stačilo k zaplacení 7 000 hodin naší práce

E‑shop Nazuby.cz se před redesignem řadil k 20 % nejvýkonnějších e‑shopů na světě podle ukazatelů publikovaných společností Wordstream.com. Bylo proto zcela zásadní eliminovat rizika spojená s nahrazením starého webu novým. Výsledky analýz, výzkumů a více než 30 kol uživatelského testování mluví za vše: Návratnost investice do 7 000 hodin práce za méně jak 8 měsíců a zvýšení zisku e‑shopu o 24 %.

Největší specializovaný obchod s dentální hygienou v Česku a Slovensku.

Vítězný projekt kategorie Nejefektivnější rozvoj webu 2020 v soutěži WebTop100

Pusťte si rozhovor se spoluzakladatelem Nazuby.cz Janem Stejskalem, lead designerem projektu Janem Junkem a jednatelem Proof & Reason Tomášem Izákem.

5 e-shopů. Jedna platforma

Předmětem celého projektu byl redesign rodiny e‑shopů se zaměřením na dentální hygienu a holení a (d)epilaci. V tuto chvíli má rodina 5 obchodů:

  • Nazuby.cz
  • Nazuby.eu
  • Holime.cz
  • Holime.eu
  • Dentmania.de

Klíčovým a zároveň také nejstarším e‑shopem je Nazuby.cz, ostatní obchody však rozhodně nejsou jen do počtu. Nazuby.cz a Nazuby.eu se vypracovaly na pozici největšího specializovaného obchodu s dentální hygienou v České, respektive Slovenské republice.

Všechny e‑shopy využívají designově i technicky stejný web, který se v závislosti na sortimentu a cílové zemi liší pouze obsahem. Projekt tedy řešil návrh a realizaci této e‑commerce platformy, kterou postupně přebírají všechny e‑shopy v rodině.

Redesignem k technicky udržitelnému řešení

Původní web procházel v předchozích letech dílčími úpravami, které postupně navyšovaly ukazatele jako rychlost, konverzní výkon či návštěvnost. Byl ale vytvořen v době, kdy mobilní zařízení nehrála významnou roli. Využíval fixní layout „optimalizovaný“ pro viewporty široké 1024 px a mimo jiné se stal nevyhovujícím i z pohledu technologií.

Výchozí stav

Po úvodních analýzách s klientem jsme s ohledem na výchozí stav definovali několik složitých problémů, které jsme při realizaci museli řešit:

  • Pokud neproběhne velmi brzy přechod na responzivní web, výkon webu začne stagnovat a časem i klesat.
  • Front-end původního webu byl sice velmi kvalitní a rychlý, ale po prvotních analýzách bylo zřejmé, že jej nepůjde efektivně použít pro potřeby responzivního webu.
  • Sortiment e‑shopů klienta prodává obrovská paleta obchodů (od lékáren po drogerie) a zároveň je samotná šíře produktové nabídky pro laika neuchopitelná. Jeden příklad za všechny – elektrický kartáček od běžných značek může stát 100 Kč i 11 000 Kč.
  • Relevantním zákazníkem může být prakticky kdokoliv, kdo je připojený k internetu, což je jen v České republice přes 80 % populace. Pokud chceme být specifičtější, pak cílovou skupinu e‑shopů Nazuby i Holíme můžeme popsat následovně:
    • Jsou to lidé, kteří už jsou zvyklí nakupovat online a v oblasti dentální hygieny, resp. holení, upřednostňují spíše kvalitu před cenou.
    • Mezi uživateli dlouhodobě převažují ženy (cca 66 %), ale mužská část publika o něco více utrácí.
    • Ve věkovém složení dominuje skupina 25–45 let (tvoří více než polovinu publika), kterou početností následují spíše starší uživatelé (45+).
Cíle projektu

Na základě motivací klienta a výchozího stavu jsme určili hlavní cíle projektu:

  • zlepšit výkon webu (prodejní ukazatele), a to hlavně na mobilních zařízeních,
  • přinést responzivní verzi webu a zlepšit user experience na všech zařízeních,
  • připravit prostředí pro lepší práci s obsahem a lepší cílení marketingové komunikace,
  • vytvořit technologicky udržitelnou platformu, která bude připravená na jednodušší rozvoj celé rodiny e‑shopů.
„Obavy jsme měli nejen z toho, že se web lidem nebude líbit nebo že ho nebudou umět používat. Obavy jsme měli i z technologického přechodu – že nás přestane mít rád Google.“

Řešení s minimálním rizikem

Motivace a cíle jsme s klientem určili při úvodních analýzách. Dalším úkolem bylo zjistit, jak cílů dosáhnout a co vytvořit. Limitem výsledného řešení bylo pouze to, že řešením musel být opět web/e‑shop, protože je primárním a jediným prodejním kanálem klienta.

„Více jak 30 kol kvantitativních testů a 5 dotazníkových výzkumů na více než 1200 respondentech“

Strategii, jak dosáhnout cílů projektu s minimálním rizikem, jsme postavili na:

  1. Důkladné analýze dosavadních dat – na analýzách konkurence, klíčových slov, heatmap a scrollmap z Hotjaru, uživatelských dat z Google Analytics a obchodních dat z databází e‑shopů.
  2. Širokém uživatelském výzkumu – v první fázi proběhl kvalitativní výzkum formou hloubkových rozhovorů, díky kterému jsme získali designové hypotézy (například jak lidé vybírají produkty dentální hygieny). Ty jsme následně se socioložkou z Masarykovy univerzity ověřili 5 kvantitativními dotazníkovými výzkumy na více než 1200 respondentech.
  3. Intenzivním testování ve všech fázích návrhu a realizace – testovali jsme opakovaně informační architekturu (zejména produktových kategorií), skici a prototypy; emočními testy jsme ověřovali vizuální styl a preferenční, pětisekundové a question testy jsme použili pro testování grafických návrhů. Testovali jsme také grafický prototyp s reálným obsahem a také hotový web před samotným spuštěním. Celkem proběhlo více než 30 kol kvantitativních testů.
Emoční testování barev vizuálního stylu
Emoční testování barev vizuálního stylu
Návrh řešení

Na základě datové analýzy a uživatelského výzkumu jsme dospěli k několika základním zjištěním, na nichž jsme stavěli návrhová rozhodnutí.

Layout klíčových stránek (kategorie, produkt, nákupní proces) jsme optimalizovali tak, aby klíčové prvky byly pro 80–90 % uživatelů nad ohybem stránky nebo tak, aby layout nevytvářel tzv. zdání úplnosti.

Uživatelé jsou ovlivněni významnou výběrovou paralýzou ve většině produktových kategorií. V novém návrhu jsme se na její eliminaci intenzivně zaměřili na úrovni:

  • obsahové strategie (redakční recenze, videonávody, články typu jak vybrat XY apod.),
  • informační architektury (struktura a názvosloví kategorií, krátké vysvětlení jednotlivých kategorií v rozcestnících),
  • ověřených tipů pro ty, kdo nechtějí vybírat (užitečnost těchto produktových tipů se nám potvrzuje při každém uživatelském testování i v datech z kampaní),
  • a nástrojů pro zúžení výběru (rozsáhlé možnosti filtrování, porovnání produktů, alternativní dělení u některých hlavních kategorií).
Rozcestníky, filtrování a porovnání produktů
Rozcestníky, filtrování a porovnání produktů

Uživatelé jsou velmi konzervativní ohledně layoutu a obsahu typických stránek e‑shopu. Například data z heatmap i Google Analytics na homepage naznačovala, že banner s kampaní pod hlavičkou je prvek, který je prakticky nepotřebný. Ve fázi prototypování jsme tedy testovali pomocí pětisekundového testu variantu homepage, kde pod hlavičkou byl přímo rozcestník, ale tato varianta při testování selhala – lidé nepochopili, že jsou na homepage e‑shopu, protože neodpovídala jejich očekáváním. Podobných případů jsme našli více – výsledkem toho je, že layout a obsah jsou v zásadě velmi konzervativní.

A/B testování variant banneru na homepage spuštěného webu - varianta A A/B testování variant banneru na homepage spuštěného webu - varianta B
A/B testování variant banneru na homepage spuštěného webu

Uživatelé jsou citliví na velikost a kontrast prvků a písma nejen na mobilu, ale i na desktopu. Kontrastnější a pocitově větší verze grafického designu působily při kvantitativních testech přehledněji a důvěryhodněji a tyto závěry potvrzují i uživatelská testování běžícího webu. Paradoxní (nebo alespoň překvapivé) je, že tento pohled nemají jen starší uživatelé (45+), ale i mladší uživatelé ve věku 25–35 let.

Písmo

Po konzultaci s klientem došlo ke změně front-endové technologie na React.js a Next.js. Bylo potřeba zvolit takové technologie, které budou moderní a dlouhodobě udržitelné, a to jak z pohledu eliminace technologického dluhu, tak z pohledu týmu, který bude projekt vyvíjet. Vývojářů v Reactu je na trhu zkrátka a dobře více.

Výsledky? Zvýšení konverzního poměru, obratu, zisku a návratnost v měsících

„Kvalitního výsledku nejde dosáhnout ze dne na den. Práce na návrhu webu trvala dlouho, ale vyplatilo se to. Výsledek stojí za to.“

Srovnáváme skutečná prodejní data z interní databáze e‑shopu a data z Google Analytics (nepočítáme DPH, dopravu ani doplňkové služby) z webů Nazuby.cz, Nazuby.eu, Holime.cz a Holime.eu za období:

  • před redesignem – listopad–květen, 2018/2019
  • po redesignu – listopad–květen, 2019/2020

Srovnáváme celé týdny od pondělí do neděle.

33% zvýšení průměrného konverzního poměru

+32 % na mobilu
+38 % na desktopu

27% zvýšení obratu

+37 % na Nazuby.cz a +49 % na Nazuby.eu

40% zvýšení zisku

z toho 24 % jen díky redesignu samotnému po očištění o přirozený růst a jiné faktory

Návratnost investice 7 000 hodin je méně jak 8 měsíců

při zohlednění přirozeného růstu zisku

Jan Junek
„Kompletní redesign bych těm, kdo ho dělat nemusejí, nikdy nedoporučil. Ale v případě, kdy je to nevyhnutelné a jediné řešení, dá se udělat opravdu řízeně, dobře, kvalitně a se špičkovou návratností.“

Chcete i vy výkonnější e-shop?

Ozvěte se Tomášovi nebo nám na sebe nechte kontakt, do dne zavoláme zpátky.

Ing. Tomáš Izák

Ing. Tomáš Izák jednatel Proof & Reason

+420 604 122 182 tomas.izak@proofreason.com