Jak na redesign e-shopu, když si nemůžete dovolit udělat chybu

Helveti je specializovaný e‑shop s hodinkami, za kterým stojí tým nadšenců. Od roku 2010 ho buduje Jirka Štencek a dnes má obrat přes 100 milionů korun.

S růstem přišla potřeba e‑shop zásadně posunout. To, co dříve fungovalo, už nestačilo — konkurence nespí a Helveti začaly brzdit vážné UX nedostatky i technologický dluh. Rozhodli jsme se proto pro kompletní redesign.

Detailní postup redesignu e-shopu by vydal spíše na knihu. Už tak je článek dlouhý, ale i tak je case study zjednodušená a nějaké činnosti jsem záměrně vypustil. Chci vám přiblížit, jak UX designér pracuje – často znáte až finální výstup, tedy wireframy, ale málokdo ví, co jim vlastně předchází.

Postup prosím neberte dogmaticky. Každý projekt vyžaduje postup ušitý na míru a kroky u Helveti nemusí dávat smysl pro každou firmu.

Na e‑shopu bylo spoustu UX nedostatků, které šlo snadno vyřešit – nefunkční vyhledávání, komplikovaný objednávkový proces, tristní rychlost načítání a řada dalších rychlých výher. Postupná evoluce projektu bývá většinou bezpečnější než pouštět se do velkých změn.

Brzy jsme ale narazili. Technologický dluh byl tak velký, že i drobné úpravy byly pro vývojáře problém. Ukázalo se, že bez změny e‑shopové platformy (CMS) se nepohneme dál.

Po dlouhém rozmýšlení jsme se rozhodli, že změna platformy je jediná možnost jak si nenechat ujet vlak a spolu s tím provedeme redesign e-shopu, kterým opravíme všechny stávající UX problémy a přidáme další vychytávky.

Ač byl e‑shop na první pohled zastaralý, na pozadí šlo o složitý systém – plný napojení, automatizací a interních procesů. Bylo nám jasné, že nás čeká spousta práce. Než jsme se do ní pustili, chtěli jsme si ověřit proveditelnost projektu – tedy jestli je taková změna vůbec v našich finančních možnostech.

Kterou e-shopovou platformu zvolit? Do open source řešení jsme kvůli stabilitě a dlouhodobému rozvoji jít znovu nechtěli. Krabicová řešení jako Shoptet nebo Shopify tehdy nenabízela tolik možností jako dnes (v roce 2025 je situace už jiná). Rozhodli jsme se proto pro cestu vývoje na míru – oslovit firmu, která má vlastní e‑shopovou platformu a dokáže ji přizpůsobit našim potřebám.

Chtěli jsme mít aspoň orientační cenový rámec, sepsali jsme poptávku a oslovili několik firem. Nešlo o finální zadání – spíš o přehled požadavků, které jsme v té době znali. Zahrnovala napojení na ERP, dopravce, platební metody a dodavatele, integrace nástrojů třetích stran (e‑mailing, analytika, marketing), odhad reakčních dob vývojáře, zhodnocení technického SEO – a desítky dalších funkcí.

Po menším výběrovém řízení jsme předvybrali 3 relevantní firmy. Domluvili jsme se, že se ozveme, až budeme mít hotové zadání. Věděli jsme, že projekt je realizovatelný – a mohli jsme se pustit do práce.

K redesignu musíme přistupovat opatrně. Pokud nevycházíme z dat a nezohledníme chování stávajících zákazníků, může po spuštění přijít pláč a propad v objednávkách. O to důležitější je výzkum u fungujících byznysů – tam, kde už je co ztratit.

U Helveti jsme se věnovali primárně těmto 6 oblastem:

Potřeboval jsem získat informace od všech, kdo se na projektu podílejí. Postupně jsem si sednul se všemi zaměstnanci, zajímalo mě, co je trápí, jak vnímají zákazníky a poslouchal jejich podněty. Co jsem se třeba dozvěděl?

Kvalitativních dat jsme shromáždili poměrně dost. Jenže z odpovědí několika jednotlivců nelze dělat velké závěry – proto je důležité zapojit i tvrdá data a čísla. Tato část je poměrně rozsáhlá, ale přiblížím aspoň několik oblastí, které nás u e-shopu zajímaly nejvíc:

Neocenitelná data, které jsou snadno na dosah, typicky v ERP firmy. Co mě zajímá?

V Google Analytics najdeme desítky užitečných reportů. Pro moji práci jsou ale klíčové dvě oblasti, které v základu chybí a je potřeba je dodatečně nastavit – seskupení obsahu a vlastní události.Seskupení obsahu

Seskupení obsahu (content grouping) – e‑shop může mít desítky tisíc URL adres, ale analyzovat jednotlivé stránky zvlášť obvykle moc nepomůže. Pomocí content groupingu získáme přehledná data napříč sekcemi webu – například souhrnně pro detail produktu, kategorie nebo blog.

Vlastní události – Základní reporty ukážou jen část reality. Pokud chceme porozumět chování konkrétních uživatelů, je potřeba nasadit vlastní události – díky nim sledujeme i drobné interakce. Typicky se zaměřujeme na:

Nástroje jako Hotjar, Smartlook nebo Clarity zobrazují teplotní mapy kliknutí a umožňují přehrát videonahrávky průchodů uživatelů e‑shopem.

Jsou spíš užitečným doplňkem, ale je potřeba je používat cíleně. Dobře rozšiřují pohled, který získáme z jiných zdrojů dat. Například pokud z Google Analytics zjistíme, že druhý krok v košíku opouští velké procento uživatelů, můžeme se pomocí nahrávek podívat, kde může být problém.

Chtěli jsme ověřit hypotézy o zákaznících na větším vzorku dat, a tak jsme rozeslali dva typy dotazníků. Jeden cílil na stávající zákaznickou základnu, druhý na návštěvníky e‑shopu, které jsme oslovovali upoutávkou v hlavičce webu.

Ptali jsme se na věci, které nám pomohly lépe pochopit, kdo jsou naši zákazníci. Například:

Samotný dotazník nám příliš nepomůže dostat se do hlavy uživatelů a pochopit jejich chování. Má omezené možnosti a slouží spíš k ověření hypotéz na velkém vzorku.

Pokud ale chceme získat hlubší vhledy, často je lepší nejdřív mluvit se zákazníky v rámci individuálních rozhovorů – a dotazník navrhnout až posléze.

Do rozhovorů jsme zapojili 6 našich zákazníků a dalších 6 lidí z cílové skupiny, kteří zatím zákazníky nejsou. Každý rozhovor trval zhruba 30 minut a vedl jsem ho podle předem připravených otázek zaměřených na motivace, obavy, nákupní chování a celkový vztah k hodinkám.

Některé hypotézy jsme potřebovali ověřit přímo na e‑shopu, proto jsme sáhli po uživatelském testování. Testující dostane konkrétní úkoly, které se snaží splnit na e-shopu. U toho nahlas komentuje, co ho napadá, a my sledujeme, kde naráží na problémy.

V našem případě nemělo smysl testovat starý e‑shop, proto jsme se zaměřili na konkurenční e-shopy. Uživatelské testování lze navíc dobře propojit s hloubkovým rozhovorem – na konci nebo začátku testu.

Detailní průzkum konkurence v oblasti hodinek přinesl zásadní zjištění – většina e‑shopů drží stejné ceny. Pokud jsou produkty i ceny totožné, nezbývá než se odlišit službami – a právě v nich probíhá největší boj o zákazníka.

Intuitivní struktura e‑shopu je klíčová k tomu, aby uživatel rychle našel, co potřebuje. Stejně jako v supermarketu – i tady dáváme produkty do oddělení, která dávají smysl a usnadňují orientaci.

Struktura e‑shopu by měla být přehledná, snadno prohledatelná a logicky uspořádaná. Zároveň ale musí respektovat obchodní cíle. Základním vstupem bývá například analýza klíčových slov, ale rozhodně nejde o jediný faktor. Co všechno má do návrhu struktury vstupovat?

SEO bylo u Helveti velké téma. Struktura e‑shopu by ideálně měla vycházet z analýzy klíčových slov a pro každé relevantní klíčové slovo by měla vzniknout odpovídající vstupní stránka. Vstupní stránky lze vyřešit tvorbou nových kategorií, nebo přes indexovatelné kombinace filtrů. Díky tomu vznikly tisíce nových vstupních stránek, které dříve vůbec neexistovaly.

V neposlední řadě musí být ve struktuře zachyceno, s jakým budeme pracovat obsahem. Budeme mít blog, slovník pojmů či nákupní rádce? A samozřejmě, jak tyto stránky budou provázané s kategoriemi a produkty.