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

5 minut čtení

K budování brandu vede trnitá cesta, proto potřebujete dobré parťáky, kteří vám hlídají záda. Společně s klientem Láskakit (dříve Laskarduino) a grafickým studiem Smeczka jsme vytvořili nový vizuální styl celého e-shopu a snížili míru opuštění o 20 %. Jak se nám to povedlo?

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):

2016

Vznik e-shopu laskarduino.cz

2018

Rozšiřování skladů, start online marketingu s Optimiem

2021

Redesign e-shopu, nová doména a komunikace

1 / 3

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.

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.

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.
   
   

   

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)

   

   

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á.

Důležitý tip: Pro větší změny na e-shopu v řádu dní vyberte období s nejnižším počtem objednávek.

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.