Redesign e-shopu Laskakit.cz: snížili jsme míru opuštění stránky o 20 %

Postup jsme pravidelně konzultovali s grafiky i klientem

S grafickým a kreativním studiem Smeczka a klientem jsme pravidelně řešili jednotlivé vývojové body celého redesignu a konzultovali výsledky dílčích činností:

• brief,
• logo,
• návrh wireframu (drátěného modelu),
• grafický návrh
• a kontroly na beta verzi.

Nešlo o naši první kooperaci se Smeczkou, takže všechny práce probíhaly hladce podle předem stanoveného plánu redesignu – viz níže.

Jak šel čas s logem Láskakit (dříve Laskarduino):

***optimio-slider:6***

Uděláme nové logo a poladíme web aneb jak jsme postupovali

S klientem jsme se původně domluvili na nové corporate identitě (firemního stylu) včetně nového loga, z čehož následně logicky vyplynul i redesign celého e-shopu.

Optimio je od svých počátků postavené na rozhodnutích podloženými daty. Proto jsme chtěli mít před možnými úpravami e-shopu jasno, co a jak změnit tak, abychom dosáhli nejlepšího výsledku. Postup naší práce byl následující:

1. Nejprve jsme provedli UX heuristickou analýzu

Na základě nejnovějších obecně platných pravidel použitelnosti byla identifikována problematická místa, která jsme řešili prioritně. Stanovené hypotézy jsme kvalitativně ověřili pomocí heatmap.

***optimio-figure:82***

2. Následně jsme pečlivě vyzpovídali klienta

Zajímaly nás informace ze zákaznické linky. Zpětná vazba uživatelů je vždy klíčová. Když něco nemůžou najít nebo mají s něčím problém, ozvou se právě na zákaznickou linku. Opakující se dotazy shromažďujeme jako podklady do budoucna. Zde jsme na základě častých žádostí o tipy na použití a návody pro Arduino začlenili do výpisu kategorie informační box s odkazy do blogu, který nabízí odpovídající obsah.

3. Ověřili jsme spokojenost uživatelů s blogem (online dotazník)

Kvantitativní formou dotazování (online dotazníkem) jsme ověřili spokojenost uživatelů s blogem. Zajímalo nás, jestli objevíme nové náměty ke tvorbě obsahu – chtěli jsme na maximum propojit články s produkty. Díky tématu „bastlení“ jde ve velké míře o rady a tipy jak používat produkty Láskakit při vytváření větších funkčních arduino projektů.

4. Tvorba funkčního drátěného modelu e-shopu (wireframe)

Na základě předchozích bodů jsme vytvořili funkční drátěný model (wireframe) pro celý e-shop včetně mobilní verze. Jednalo se o typové stránky: homepage, kategorie, detail produktu, celý checkout proces (neboli objednávkový proces), kontakt, o nás, registrace, zapomenuté heslo a stránku 404. S klientem jsme podrobně řešili a upravovali funkčnost prvků wireframu a logického toku informací v několika připomínkových kolech tak, až jsme se dostali k finální verzi wireframu.

5. Tvorba grafického návrhu

Podle drátěného modelu, který jsme dříve komunikovali i s kodérem, vytvořila Smeczka grafický návrh všech typových stránek e-shopu (mobilní a desktopové verze).

6. Kódování a nasazení šablon

Posledním krokem bylo kódování grafických šablon a nasazení na platformu pro e-shopy Shoptet.

***optimio-figure:75*** ***optimio-figure:76*** ***optimio-figure:77*** ***optimio-figure:78***

Získali jsme spokojenější uživatele a snížili míru opuštění o 20 %

Původní e-shop neměl problém s konverzním poměrem ani jinými metrikami výkonu, které by naznačovaly problematická místa. Od redesignu jsme proto v tomto směru neměli vysoká očekávání. Redesign přirozeně vyplynul při návrhu nového loga e-shopu.

I přesto jsme po redesignu dosáhli snížení míry opuštění e-shopu v průměru o 15 až 20 %:

• Ihned po spuštění nového designu bylo meziměsíční snížení o 25 %.
• Tři měsíce po spuštění opouštěli uživatelé stránky o 18 % méně.

Snížení míry opuštění se v naprosté většině týkalo URL kategorií, kde je nižší bounce rate žádoucí – chceme, aby z výpisů produktů uživatelé pokračovali dál buď na další stránku nebo do detailu produktu.

Jak si vysvětlujeme nižší bounce rate na kategoriích?

1. Přidali jsme nový informační box vedle popisu kategorií s odkazy na blog e-shopu (viz červená oblast na obrázku). Doplňuje informace ke kategorii a odkazy vedou do nového okna na konkrétní blogový článek.
   
   ***optimio-figure:79***
2. Přesunuli jsme filtraci z levého sloupce, kde byla hodně utopená, do horizontální polohy na místo pod popis kategorie a pod nejprodávanější produkty. Dle heatmap je využití filtrace na novém místě vyšší než na staré verzi e-shopu (viz obrázek níže)***optimio-figure:80*** ***optimio-figure:81***

Nutné zlo – museli jsme změnit doménu

Vše komplikovala změna názvu značky (z legislativních důvodů) a tím vyvstala i potřeba nové domény. O změně domény jsme naštěstí věděli s dostatečným předstihem a minimalizovali jsme škody při přechodu.

O poklesu organické návštěvnosti jsme klienta informovali předem. I když jsme všechny URL staré domény přesměrovali přes trvalé přesměrování Redirect 301, tak organic skutečně meziročně klesl o cca 40 %. Jde o velkou ztrátu, která je však logická.

***optimio-quote:36***

Při přechodu na novou doménu za ostrého provozu e-shopu je třeba kromě organicu pohlídat také ostatní kanály jako jsou Google Ads, Sklik, Facebook a srovnávače.

U téměř všech reklamních systémů při změně domény musíte upravit feedy a nastavení (viz níže uvedený checklist), které se může projevit zpožděnou reakcí systémů na úpravy. Jednoduše řečeno, několik dní trvá, než se chytnou nové feedy s novou doménou.

Proto jsme identifikovali období s nejnižším počtem objednávek v roce – konec července a týden po Vánocích. V prvním termínu proběhl celkový redesign a ve druhém, vánočním termínu, jsme přešli na novou doménu. Eliminovali jsme tak klientovu ztrátu z možného ušlého zisku placených kampaní, které nabíhaly několik dní do předchozích výkonů. Podrobně o přechodu na novou doménu píšeme v tomto článku.

Co pohlídat při přechodu na novou doménu – checklist

1. Přesměrování URL přes Redirect 301.
2. Úprava GTM a GA dle potřeb, kontrola cílů.
3. Nastavení nové Search Console a Webmaster Tools pro Seznam.cz.
4. Úprava Google MyBusiness záznamu.
5. Úprava Google Merchant center – zobrazení obchodního názvu, nastavení domény, ověření domény, změna URL feedu.
6. Google Ads / Sklik – doména v DSA, změnit URL v reklamách, kontrola měření konverzí.
7. Facebook, Instagram – přejmenování, úpravy linků, změna feedu v BM.
8. Heuréka, Zboží, Glami – výměna feedů, kontrola konverzí.

Co si z toho vzít za ponaučení?

1. UX – když dělat změny na webu, tak nikdy ne radikální. Ideálně měňte jak design tak funkčnost postupně na základě hypotéz podložených daty a každou změnu vyhodnocujte. Viz náš případ – i malá změna ve výpisu kategorie může snížit míru opuštění o 20 %, což zvyšuje šanci na proklik detailu produktu > přidání do košíku > možnou konverzi.
2. SEO – změna domény je spojena s očekávaným propadem organické návštěvnosti, který se dá pomocí SEO specialistů minimalizovat.
3. PPC – při změně domény e-shopu si připravte checklist co a kdy pohlídat (klidně použijte ten náš :)).

Přemýšlíte nad redesignem nebo řešíte přesun na novou doménu? Ozvěte se, rádi vám pomůžeme.