Modelová case study: redesign zaměřený na konverzní poměr
Redesign, který má zvednout konverze, nezačíná novou grafikou, ale daty. Na modelovém příkladu ukazujeme postup od auditu přes hypotézy až po A/B test a vyhodnocení, kterému se dá věřit.
Majitel e-shopu obvykle přijde s větou „potřebujeme nový design, ten starý už neprodává“. Někdy je to pravda. Často ale e-shop neprodává kvůli několika konkrétním místům: nepřehledné dopravě, slabému detailu produktu nebo pokladně, která na mobilu zlobí. Nová grafika tyhle problémy nevyřeší, pokud o nich nevíte. A redesign udělaný podle vkusu místo dat může konverze i snížit.
Proto stavíme redesign jako řadu ověřitelných kroků. Níže je modelový scénář, jak takový projekt probíhá: od auditu přes hypotézy a prototyp až po A/B test a vyhodnocení, které obstojí i před skeptickým finančním ředitelem.
Výchozí situace modelového e-shopu
Pro model volíme typický profil středního českého e-shopu:
- zhruba 100 000 návštěv měsíčně, z toho většina z mobilu,
- konverzní poměr kolem 2 %, na mobilu výrazně nižší než na desktopu,
- šablona starší několik let, postupně doplňovaná bez jednotného vzhledu,
- vysoký podíl odchodů mezi košíkem a dokončením objednávky,
- funkční napojení na sklad a účetnictví, které se měnit nemá.
Cíl projektu je formulovaný měřitelně: zvýšit podíl návštěv, které skončí objednávkou, a neztratit přitom návštěvnost z vyhledávání. Ne „mít moderní web“.
Krok 1: audit místo dojmů
Redesign začíná UX auditem. V modelovém projektu kombinuje tři zdroje:
- Analytika. Trychtýř od vstupu přes kategorii, detail produktu a košík po objednávku. Rozpad podle zařízení, zdroje návštěvy a typu stránky. Hledáme krok, kde odpadá nejvíc lidí.
- Heuristická analýza. Průchod webem podle zavedených zásad použitelnosti: srozumitelnost navigace, informace o dopravě, formuláře, chybové stavy, důvěryhodnost.
- Kvalitativní data. Nahrávky relací, dotazy na zákaznické podpoře, recenze. Co zákazníci opakovaně nechápou nebo hledají.
Součástí auditu je i technika. Pomalý web ztrácí zákazníky bez ohledu na design, proto kontrolujeme Core Web Vitals hlavních šablon.
Výstupem není seznam sto připomínek, ale krátký seznam problémů seřazený podle dopadu na tržby a náročnosti opravy.
Krok 2: hypotézy, ne přání
Z každého zásadního problému vzniká hypotéza ve tvaru: „Protože vidíme X, předpokládáme, že změna Y povede k Z, což poznáme podle metriky M.“
Modelové hypotézy mohou vypadat takto:
| Zjištění z auditu | Změna | Očekávaný efekt | Metrika |
|---|---|---|---|
| Cena dopravy se zobrazí až v pokladně | Doprava a odpočet do dopravy zdarma už v košíku | Méně odchodů z košíku | Podíl košíků, které přejdou do pokladny |
| Na mobilu je tlačítko „Do košíku“ pod ohybem | Přilepené tlačítko na detailu produktu | Víc přidání do košíku | Přidání do košíku na návštěvu detailu |
| Filtry v kategorii jsou na mobilu schované | Viditelné hlavní filtry nad výpisem | Rychlejší cesta k produktu | Přechod z kategorie na detail |
| Formulář pokladny má zbytečná pole | Zkrácení formuláře, nákup bez registrace jako hlavní volba | Víc dokončených objednávek | Dokončení pokladny |
Každá hypotéza má jednu hlavní metriku. Hlavní metrikou celého testu zůstává konverzní poměr a tržba na návštěvu, dílčí metriky vysvětlují, proč se změnil.
Krok 3: prototyp a test s uživateli
Hypotézy se převedou do prototypu. Než se cokoliv naprogramuje, projde prototyp testem s pěti až osmi lidmi z cílové skupiny. Ten neodpoví, o kolik vzroste konverze, ale odhalí, kde se lidé v novém návrhu ztrácejí. Postup popisujeme v článku Figma prototypy před vývojem.
Nový vzhled stavíme rovnou jako design systém z komponent. Díky tomu se úspěšné změny z testu dají později rychle rozšířit na celý web a neúspěšné bez velkých nákladů vrátit.
Krok 4: A/B test a výpočet velikosti vzorku
Nový design nejde rovnou na celý web. Návštěvnost se náhodně rozdělí na dvě skupiny: polovina vidí původní verzi, polovina novou. Obě skupiny běží ve stejném čase, takže sezóna, kampaně ani počasí výsledek nezkreslí.
Před spuštěním se spočítá, kolik návštěv test potřebuje. Vstupem je výchozí konverzní poměr, nejmenší rozdíl, který chceme spolehlivě zachytit, hladina významnosti (obvykle 5 %) a síla testu (obvykle 80 %). Modelový výpočet pro výchozí konverzi 2 %:
| Nejmenší zachytitelný rozdíl (relativně) | Cílová konverze varianty | Potřebné návštěvy na variantu |
|---|---|---|
| +20 % | 2,4 % | zhruba 21 000 |
| +15 % | 2,3 % | zhruba 37 000 |
| +10 % | 2,2 % | zhruba 81 000 |
Při 100 000 návštěvách měsíčně rozdělených na dvě poloviny znamená zachycení rozdílu 15 % zhruba tři týdny provozu. Menší rozdíly už by vyžadovaly měsíce. Proto se u středních e-shopů testují spíš výraznější změny než odstín tlačítka.
Test musí respektovat i SEO. Google Search Central doporučuje neukazovat vyhledávacím robotům jiný obsah než lidem, u testovacích URL použít canonical na původní stránku, pro přesměrování na variantu použít dočasný 302 redirect a po skončení test uklidit.
Krok 5: vyhodnocení, kterému se dá věřit
Nejčastější chyby, kvůli kterým A/B test ukáže úspěch, který neexistuje:
- Předčasné ukončení. Kdo se na výsledky dívá každý den a test zastaví ve chvíli, kdy vypadá dobře, výrazně zvyšuje riziko falešně pozitivního výsledku. Test běží do předem spočítaného vzorku a aspoň celé týdny.
- Nerovnoměrné rozdělení návštěv. Pokud mají varianty výrazně jiný počet návštěv, než odpovídá nastavení, je chyba v měření a výsledek nelze použít.
- Příliš mnoho metrik. Když sledujete dvacet ukazatelů, některý vyjde „významně“ náhodou. Hlavní metrika se určí před spuštěním.
- Jen průměr. Výsledek rozpadáme podle zařízení a nových a vracejících se zákazníků. Nový design může pomoci na mobilu a uškodit na desktopu.
Statistická významnost říká jen to, že rozdíl pravděpodobně není náhoda. Jak velký rozdíl je, ukazuje interval spolehlivosti. Pro rozhodnutí proto reportujeme obojí a přepočet na tržby.
Jaký výsledek modelový projekt přinese, předem nevíme. Může to být zlepšení, žádný měřitelný rozdíl, nebo zhoršení. I neúspěšný test má hodnotu: zabránil nasazení změny, která by tržby snížila.
Krok 6: nasazení a sledování po spuštění
Vítězná varianta se nasadí na celý web a výsledky sledujeme dál. Efekt novosti, kdy vracející se zákazníci nový vzhled chvíli zkoumají, časem mizí. Proto po nasazení kontrolujeme konverzi, rychlost webu i organickou návštěvnost ještě několik týdnů. Další hypotézy z auditu se pak testují postupně, ne všechny najednou.
Jak na to prakticky: checklist redesignu řízeného daty
- Máte měřitelný cíl redesignu, ne jen „modernější vzhled“?
- Víte z dat, ve kterém kroku nákupu ztrácíte nejvíc zákazníků?
- Má každá změna hypotézu a jednu hlavní metriku?
- Prošel nový návrh testem s uživateli ještě v prototypu?
- Spočítali jste velikost vzorku před spuštěním A/B testu?
- Je test nastavený v souladu s doporučeními Googlu pro SEO?
- Víte předem, kdy test ukončíte a podle čeho rozhodnete?
- Sledujete výsledky i týdny po nasazení?
Kompletní redesign e-shopu u nás obvykle trvá 6–10 týdnů, menší úpravy řádově týdny. Na co si při něm dát pozor, aby nepoškodil stávající tržby, rozebíráme v článku Redesign e-shopu, který nezabije konverze. Pro průběžné testování dalších hypotéz po spuštění slouží program Conversion Lab.
Potřebujete s tím pomoct?