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.

☝️ Tento článek jsem sepsal hlavně pro ty, kdo se chystají na redesign a chtějí se vyhnout průšvihu – redesign může zvednout konverze, ale pokud se udělá špatně, dokáže je i potopit. A taky pro ty, kteří chtějí nahlédnout pod pokličku práce UX designéra.

☝️Než se pustíte to čtení

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.

Obsah:

1. Revoluce nebo evoluce?

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.

Redesign je riskantní krok. Na e‑shopu proběhne spousta změn a není snadné poznat, co pomohlo a co uškodilo. Pokud to jde, je lepší volit postupnou optimalizaci. Ale někdy se tomu vyhnout nedá – jako v případě Helveti.

Výběr platformy a výběrové řízení

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.

2. Pochopení byznysu a souvislostí

Než se pustím do návrhu řešení, potřebuji nejdřív pochopit klientovo podnikání a jeho souvislosti. Samotný e-shop je jen jeden dílek ve větší skládačce celkového uživatelského zážitku. Společně procházíme desítky otázek o zákaznících, konkurenci, produktech, pozici značky, slabých místech i příležitostech. Zajímá mě také retence, nejprodávanější produkty, kategorie a marže. Potřebuju vědět, kde firmu skutečně pálí bota.

Zkrátka musím přesně pochopit, komu prodáváte, co prodáváte, proč si to lidé kupují právě u vás – a kde v tom celém vyděláváte peníze.

Bez toho střílíme naslepo. Žijeme v suboptimálním světě s nekonečným množstvím možností – a proto musíme řešit to, co je opravdu podstatné. Na e‑shopu mohu najít stovky příležitostí pro zlepšení – ale bez kontextu nepoznám, které z nich opravdu stojí za to řešit.

Jirka_podpis — Jirka se upisuje "dábelskému plánu" :)

V případě Helveti jsem nejdřív zasypal Jirku a jeho tým téměř 60 otázkami. Následovala série menších workshopů, kde jsme šli víc do hloubky. Společný brainstorming přinesl spoustu odpovědí – ale zároveň ukázal, kolik toho ještě nevíme.

Na povrch vypluly desítky neznámých a hypotéz, které bylo potřeba ověřit. A tím jsme se přirozeně posunuli k další klíčové fázi redesignu – uživatelskému výzkumu.

3. Uživatelský výzkum a analýza dat

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:

Interní průzkum ve firmě
Webová analytika a analýza dat
Dotazníkové šetření se zákazníky
Hloubkové rozhovory
Uživatelské testování
Analýza konkurence

Tyto kroky často neprobíhají striktně za sebou. Vzájemně se prolínají a čerpají jeden z druhého.

1. Interní průzkum ve firmě

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?

Od skladníků: vadí jim zdlouhavý proces expedice a zdůrazňovali, jak je důležité hodinky správně zabalit, aby se při přepravě nepoškodily.
Od lidí na prodejně: podle čeho zákazníci vybírají hodinky a na co se nejčastěji ptají.
Od zákaznické podpory: jaké problémy a dotazy řeší nejčastěji.

2. Zákaznická a webová analytika

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:

Transakční data

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

Prodejnost, marže a obchodní význam jednotlivých kategorií, značek a produktů.
Data o retenci – jak často se zákazníci vracejí a kolik procent z nich nakupuje opakovaně.
Typická objednávka – kolik položek lidé obvykle nakupují a jaká je průměrná hodnota objednávky.

Pocetnakupu — Kolik procent nakupuje opakovaně

Data z Google Analytics

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.

Kde lidé nakupují – objednávají spíš z výpisů produktů, detailu produktu, nebo odjinud?
Vstupní stránky – pokud 80 % uživatelů začíná na detailu produktu, víme, kam zaměřit pozornost.
Blog – má obrovskou návštěvnost, ale přináší objednávky, nebo lidé jen přijdou a hned odejdou?

Contentgroup1 — Návštěvnost jednotlivých sekcí e-shopu

Content_group2 — Kde uživatelé přidávají do košíku

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:

Filtrování produktů – kolik lidí filtraci využívá a jaké hodnoty vybírají.
Využívání funkcí – přidávání do oblíbených, porovnávání, řazení.
Interakce s obsahem – kliky na bannery, příslušenství a další mikrointerakce.

Videonahrávky a teplotní mapy

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.

3. Dotazníkové šetření

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:

Kupují hodinky pro sebe, nebo jako dárek?
Kolikatery hodinky vlastní? Jak jsou zastoupení nadšenci do hodinek?
Jaké parametry jsou při výběru důležité?

Dotaznikh_1 — Kupují se hodinky jako dárek?

Dotaznikh_2 — Kolikatery hodinky uživatelé vlastní?

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.

4. Hloubkové rozhovory

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.

5. Uživatelské testování

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.

6. Analýza konkurence

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.

Cenystejne — Všichni mají stejný produkt

4. Závěry a akční kroky

Shromáždili jsme spoustu podnětů a nápadů – z rozhovorů, testování, analytiky, dotazníků i od interního týmu. Super. Ale co teď s tím? V datech je potřeba najít vzorce, zformulovat závěry a určit priority, které má smysl dál řešit.

Existuje několik frameworků, které s tím pomáhají. Níže popíšu jeden z nich – jednoduchý, ale šikovný nástroj, který pomáhá ujasnit si pohled na zákazníka a jeho potřeby.

Value Proposition Canvas (VPC)

Na projektech často narážím na persony plné vymyšlených nebo nepodstatných informací bez vazby na realitu. Například: „Muž, 50 let, zahradník, vysokoškolák.“ – jak nám tohle reálně pomůže?

Užitečné persony vyžadují dostatek dat, což nemá smysl pro každou firmu. Pokud data chybí, má větší smysl sáhnout po Value Proposition Canvas (VPC) – nástroji, který rychle a konkrétně pomůže popsat zákazníka a jeho potřeby. A hlavně na ně návázat akční kroky.

Tento framework se snaží na jedné straně popsat zákazníky, na druhé následně hledat řešení. Začínáme vždy od detailního popisu zákazníka:

Potřeby (Jobs) – co chtějí zákazníci zvládnout nebo vyřešit
Problémy (Pains) – co je štve, brzdí nebo čeho se bojí
Touhy (Gains) – co by je potěšilo nebo jim udělalo radost

Tento popis děláme ideálně zvlášť pro každou cílovou skupinu. Jakmile máme jasno, co zákazníky trápí a co očekávají, můžeme přejít ke straně produktu a vymyslet konkrétní řešení – jak jim pomoci splnit úkoly, zmírnit obavy a nabídnout něco navíc.

Vpc — Value Proposition Canvas (zdroj: interaction-design.org)

Value Proposition Canvas (zdroj: interaction-design.org)

Zajímavá zjištění, co musíme vyřešit

Pár zajímavých problémů a příležitostí, které musíme v designu vyřešit:

Značka hraje velkou roli v rozhodovacím procesu.
Lidé mají obavu, že se hodinky při přepravě rozbijí.
Často si nejsou jistí originalitou – „Nekupuju náhodou padělek?“
Data ukazují, že se uživatelé příliš nevracejí a většina kupuje hodinky s velkým odstupem.
Většina lidí kupuje jen jeden produkt – doporučovat další hodinky do košíku nedává moc smysl.
Uživatelé vybírají primárně podle vzhledu a značky.

5. Struktura a obsah

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.

Jak navrhnout strukturu e-shopu?

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?

Marže, prodejnost a celkové obchodní cíle
Potřeby cílové skupiny
Požadavky z pohledu SEO a marketingu
Data z Google Analytics o aktuálním chování uživatelů
Výsledky analýzy konkurence

Helveti-ia — Informační architektura e-shopu

S jakým budeme pracovat obsahem?

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.

6. Design a tvorba prototypu

Udělali jsme dost práce a až nyní začínám s tvorbou wireframů – drátěného návrhu webu, kde reflektuji všechna předchozí zjištění. Wireframe zachycuje detailní kostru webu, měl by být poměrně přesný, reflektovat strukturu i konkrétní texty.

Wireframe neřeší barvy ani grafiku, ale funkčnost. Výstup je záměrně černobílý, umožní nám debatovat nad reálnou podstatou a obsahem.

Pro celý e-shop vzniklo přes 100 wireframů. Zadání u e-shopu musí být velice detailní, například jenom objednávkový proces, který pokryje všechny možné varianty a interakce, má kolem 25 návrhů.

Helveti-homepage — Příklad wireframu úvodní strany webu

Helveti-wireframe-all — Všechny wireframy

Řešení potřeb zákazníků

Už jsem popisoval obavy a potřeby zákazníků, které nám pomohl odhalit výzkum. Pro názornost ukazuji pár praktických funkcí, které tyto potřeby a obavy pomáhají rozptýlit.

Nevím, jak budou vypadat na ruce

Z online produktové fotky si lidi nedokáží představit, jak jsou hodinky velké a jak vypadají na ruce. Začali jsme dělat svoje vlastní fotky na rukou a dali k dispozici tiskutelnou šablonu, kterou po vystřižení můžete přiložit na ruku. Zamýšleli jsme i rozšířenou realitu přes telefon.

Obava ohledně originality

Uživatelé měli obavy, zda jsou hodinky originální. Nejde o padělek? Dostanu k nim český návod? Kupuju od seriózního prodejce? Na víc místech e‑shopu tuto obavu cíleně rozptylujeme.

Baleni2 — Certifikáty oficiálního distributora

Obava ohledně poškození při přepravě

U produktu, který stojí desítky tisíc, se uživatelé oprávněně obávají, jestli je přepravce nerozbije a jak se bude řešit případná reklamace. Na e-shopu komunikujeme, jak hodiny pečlivě balíme, že jsou pojištěné a případná škoda jde na naše bedra.

Hodinky uživatelé vybírají primárně vizuálně

U sortimentu, který uživatelé vybírají primárně dle vzhledu, je potřeba přizpůsobit detail produktu. Na desktopu zobrazujeme vedle hlavní fotky i doplňující obrázky, které jsou vždy vidět bez nutnosti scrollování.

Zároveň víme, že většina uživatelů přijde jako první na detail produktu. Pokud vzhled produktu nesplní očekávání, potřebujeme mít možnost uživatelům rychle ukázat podobně vypadající kusy, proto pod fotku generujeme podobné hodinky podle vzhledu a parametrů.

Komunikace konkurenčních výhod

Jak jsem již popisoval v analýze konkurence, většina prodejců na trhu drží stejné ceny a e-shopy často soupeří, kdo nabídne lepší benefity k produktu. Tyto výhody potřebujeme uživatelům ukázat – nejlepší místo je v detailu produktu a objednávkovém procesu.

Technické zadání

Wireframy jsou výborným nástrojem, ale samotné nedokáží plně zachytit veškerou funkčnost a chování, kterou e-shop vyžaduje. Wireframy doprovází podrobná dokumentace, která přesně popisuje chování a funkčnost, která není na první pohled vidět. Tímto snižujeme rizika, že vývojář nepochopí naše zadání, a předcházíme možným sporům.

Výběr developera a prioritizace

Nyní máme kompletní zadání a je čas na oživení výběrového řízení. Rozesíláme kompletní zadání včetně wireframe, dostáváme nabídky a finálně jsme si plácli s vývojářem Simplia.

Do finalizace wireframe by měl zasahovat také vývojář. V designu jsme si mohli vymyslet funkce, které nemusí být příliš důležité, ale pro vývojáře by daná funkčnost byla dost technicky náročná. Proto se s developerem ještě návrhy finalizují a upravují drobnosti.

V této fázi si také určujeme priority jednotlivých funkcí – pokud víme cenu na vývoj, můžeme definovat funkce, které potřebujeme ke spuštění, které spustíme v druhé fázi a také ty, co nebudeme realizovat vůbec.

7. Grafika a implementace

Nyní gró mojí práce na chvilku končí. Do práce se dává grafický designér, copywriter a vývojář. U projektu ale zůstávám až do konce – dozoruji implementaci. Připomínkuji výstup grafika, kontroluji výstup vývojáře a dohlížím na bezproblémový přechod.

Facelift grafiky

Helveti mělo grafiku z roku 2014 a zasloužila si facelift. Vizuální styl už nevyhovoval potřebám, Helveti urazilo za ty roky kus cesty a potřebovali jsme značku celkově postaršit a zeserióznět. Zároveň jsme nechtěli dělat žádnou revoluci, ale spíše drobný facelift, změnit typografii či upravit odstíny barev. Nejvíce nás oslovil výstup od Víti Války, který zpracoval grafiku pro celý e-shop.

Vývoj a spuštění

Migrace e-shopu vyžaduje značné množství činností, které je třeba dělat současně. Během vytváření grafiky se dalo do pohybu několik paralelních činností. Vývojář Simplia měl na sobě nejvíce práce s programováním a kódováním, nicméně nesmíme zapomenout na migraci dat, učení se s novým systémem, tvorbu obsahu, správné přesměrování URL adres a desítky dalších aktivit.

Podobný projekt si nedovedu představit bez správného projektového řízení. Bohužel se to často podceňuje a opakovaně vidím v projektech zbytečné prodlení. V uKočírování celého přechodu nám pomohl nástroj na projektové řízení Asana.

Gantt asana 4 — Příklad Gantového diagramu v Asaně

8. Výsledky

Čísla říkají, že přechod na nové e-shopové řešení se povedl. Zásluhu má bezesporu celý tým. Meziročně se zvýšil konverzní poměr o 34% a Helveti obratově vyrostlo o 60%.

Cleanshot 2023-01-19 at 10.02.16@2x — Metriky při meziročním srovnáním

Výsledky zní dobře, ale vyhodnocovat úspěšnost přechodu na jiné technické řešení pouze optikou konverzního poměru není ideální. Řešení od Simplia pomohlo Helveti v mnoha dalších oblastech:

Efektivnější proces expedice a práce s objednávkou
Automatizace a zlepšení interních procesů
Zlepšení „technického SEO“ a marketingových možností
Pohodlnější práce s obsahem
Lepší možnosti pro následující rozvoj a optimalizaci
Vstup do zahraničí
Snadná integrace služeb 3. stran

Spuštěním to nekončí

E-shop je živý organismus, jeho rozvoj by neměl spuštěním umřít. Měl by se neustále vyvíjet spolu s firmou, nechceme ho nechat roky zastarávat a za pár let udělat zase větší redesign. Po spuštění je ideální opět vyhodnocovat, reagovat na změny a chování zákazníků.

Závěr

Pokud jste dočetli až sem, máte můj obdiv. Doufám, že máte nyní alespoň rámcovou představu, jak pracuje UX designér a jak může probíhat proces redesignu e-shopu.

Líbí se vám, jak pracuji? Potřebujete pomoci s vaším e-shopem? Napište mi na info@davidkoci.cz nebo mě můžete sledovat na Linkedinu.

Jak klient hodnotí spolupráci

Davidovi vděčím za vedení projektu redesignu e-shopu Helveti.cz a přechodu na zcela nový systém. I díky němu nyní rosteme rychlejším tempem (v obratu cca 60 % meziročně, zvýšil se nám konverzní poměr o 34 % a zefektivnila práce se systémem jako takovým). Čeká nás ale spousta práce a doufám, že David toho bude nadále součástí. Spolupráci s ním vřele doporučuji!

Jirka Štencek
Jednatel Helveti.cz

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