Případová studie: Jak jsme dvakrát redesignovali COFFEESPOT a pokaždé výrazně zvýšili výkon

Tuto studii jsem sepsal jako inspiraci pro všechny, kdo přemýšlí na redesignem nebo optimalizací svého webu / e-shopu a zvažují, jakou cestou se vydat.

Také ukazuje, že ne vždy je nutné jít hned cestou e-shopového řešení na míru (což bývá většinou nejdražší a nejsložitější cesta), aby jste dokázali dosáhnout svých vizí a cílů.

Více o tomto tématu jsme probírali v podcastu zde. Doporučuji poslechnout — podcast je plný praktických příkladů a může vám pomoci najít správný směr.

Dostal jsem důvěru zapojit se do redesignu e-shopu přední české pražírny kávy, která ročně vypraží více než sto tun kávy.

Povedlo se. A to dokonce 2x.

Společně jsme vytvořili 📈 dva kompletní redesigny e-shopu – každý s jiným cílem, technologií, týmem i majiteli. V této případové studii vás provedu oběma.

O COFFEESPOT

COFFEESPOT je pražírna výběrové kávy z Moravy. Najdete ji v obci Babice v malebném kraji moravského Slovácka. Od roku 2011 působí na českém trhu nejen jako pražírna kávy s kamennou prodejnou, ale spustili i svůj e-shop.

Jsou super. A jsou to neuvěřitelní dříči. Nestojí za nimi žádný investor. Vše, co dělají získali na základě svých vlastních zkušeností i chyb. Moc hezky to popsal na svém Facebooku Lukáš Hejlík.

Svou kávu pravidelně dodávají např. do sítě prodejen Sklizeno nebo do Levandulové farmy. Jsou součástí komunity nejznámějších foodblogerů v ČR - Gastrokroužek.

Před navázáním spolupráce klient řešil technické problémy s e-shopem a poptával možnost jeho celkové optimalizace. Kontaktoval mě na doporučení.

Pražírna kávy COFFEESPOT
Původní tým pražírny kávy COFFEESPOT

Jak jsem postupoval

Jak správně provést redesign e-shopu? Neexistuje univerzální odpověď. Každý projekt má jiné cíle a svá časová, finanční nebo technická omezení.

Design není to samé jako grafická podoba. Design řeší, jak věci fungují.

Designové myšlení
Můj designový proces

Moje role na projektu

🥷 Na tomto prvním redesignu jsem sehrál roli tzv. „one-man show“. Vzhledem k okolnostem poptávky jsem osobně navrhoval a realizoval téměř celý projekt – od výzkumu, přes návrh UX a grafiky, až po kódování, copywriting a implementaci finálního řešení. Díky tomu jsem měl ale naprostou kontrolu nad celým procesem a mohl jsem rychle iterovat a reagovat na zpětnou vazbu. I když to byla náročná výzva (netvrdím, že optimální), výsledek stál za to.

Uživatelský výzkum Zjištění reálných obav, potřeb a přání zákazníků.

Branding Budování, řízení a rozvoj značky COFFEESPOT.

UI / UX návrh Návrh wireframů klíčových stránek a funkcí e-shopu.

Grafický design Návrh designu e-shopu se zaměřením na jednoduchost, výkon a uživatelský prožitek.

Kódování Implementace designu na míru a překonávání technických limitů e-shopu.

Marketing Návrh a realizace marketingové komunikace (e-mailing, SEO, sociální sítě...).

Copywriting Otextování všech klíčových částí webu a komunikace.

Optimalizace Kontinuální zlepšování, testování a rozvoj e-shopu.

All in one package Od publikování článků po realizaci newsletterů. 🦸🏻‍♂️


Krok #1 - Poznávání klienta

Ptám se. Hodně se ptám a zjišťuji. Pro zvolení optimálního řešení nejprve potřebuji pochopit a poznat:

  • Klientovo podnikání (pozice na trhu, cílová skupina, konkurence, marketingové kanály)
  • Sortiment (zboží, marže, co se prodává, co se neprodává)
  • Současný stav (data z analytiky, chování návštěvníků webu, rozhodovací proces)
  • Slabé a silné stránky (na čem můžeme stavět)
  • Konkurenční výhody (čím se odlišíme od ostatních)
  • Procesy ve firmě (komunikace, kompetence, vytíženost)

Používám speciální vstupní dotazník, sady otázek a procesů. Samozřejmě jsem udělal zkušební objednávku a kávu ochutnal. Hned na začátku mě COFFEESPOT náležitě vybavil a spolupráce mohla začít.

Instagram Lukáš Dubina
Instagram - zásilka z e-shopu dorazila, jde se testovat

Krok #2 - Vize, byznys cíle

E-shop chceme efektivně rozvíjet i do budoucna. Proto jsme si stanovili vizi a cíle, kam se chceme dostat v časovém horizontu. Vize vás neustále nutí se posunovat vpřed. Cíle slouží k tomu, aby konkrétně a měřitelně splnily vizi.

Vize

Jasnou vizí COFFEESPOT je zaměření na pražení té nejlepší výběrové kávy. Vysokou kvalitu si udržet a neustále zlepšovat. Kávu nabízet zákazníkům primárně na e-shopu (B2C). To vše za přijatelnou cenu a pro VŠECHNY (i pro úplné laiky a začátečníky → tedy nehonestujeme lidi, že mají rádi rozpustnou kávu s mékem nebo českého "turka").

Od úplného začátku se snažíme o to, aby kvalitní káva nebyla jen sváteční záležitostí. Většina lidí si kvalitní produkty spojuje s výjimečnými příležitostmi, ale my chceme, aby byla kvalitní káva přirozenou součástí běžného dne co největšího počtu lidí.

Jiří Plšek, COFFEESPOT
Pražírna kávy COFFEESPOT
Vize COFFEESPOT - pražit tu nejlepší výběrovou kávu v ČR

Většina konkurence sází na nízkou cenu nebo prodej příslušenství pro přípravu kávy. Doplňky jako mlýnky na kávu, moka konvičky, french press nebo filtry jsou velmi vyhledávané a poptávané zboží. Mohly by být zdrojem zisku a nových zákazníků.

Teoreticky by nám mohli fungovat tyto 3 hypotézy:

  • Díky SEO bychom mohli získávat zákazníky přirozeným způsobem
  • Zbožové srovnávače (např. Heureka, Zbozi.cz) - levný a rychlý způsob, jak dostat zákazníky na web, konverzní poměr vysoký. Čerstvě pražená káva se ale na zbožových srovnávačích prodávat moc nedá (s čím byste ji chtěli objektivně srovnávat, když je to originální výrobek?), a tak by zase došlo na prodej příslušenství.
  • Cross-selling - pomocí křížového prodeje nabízet zákazníkům další produkty. Např. Pepa má v košíku kávu na filtr, a tak mu nabídneme ještě mlýnek, aeropress a náhradní filtry.

Touto cestou však jít nechceme, přestože na e-shopu několik drobných doplňků nabízíme (jsou to ale spíše doprodeje). Pokud si zákazník koupí mlýnek na kávu, pravděpodobně se z něj nestane věrný a dlouhodobý zákazník. A až se mu utrhne u mlýnku klička (vím, o čem mluvím), budeme řešit reklamace. Za mlýnek však ale pražírna kávy nemůže a vznikají zbytečně negativní emoce a časové nároky spojené s rychlým vyřízením reklamace.

Vizí COFFEESPOT není ani účast na různých akcích, jako jsou festivaly nebo konference, přestože je to v současnosti velmi žádané a může to být dobrá příležitost, jak “být viděn”. COFFEESPOT má sice k dispozici vlastní “mobilní kavárnu”, ale raději s klidným svědomím doporučí konkurenci, která se na toto zaměřuje (👏 zdravím Laura Coffee).

Cíle

Hlavním cílem bylo samozřejmě zvýšení obratu, ale společně s tím i zlepšení procesů a minimalizace času, který musí COFFEESPOT věnovat provozu e-shopu (protože mnohem raději se věnují tomu, v čem jsou nejlepší - pražení kávy). Společně s tím jsme ale stanovili i dílčí cíle, které jsou spojeny s marketingem a uživatelskou přívětivostí e-shopu.

Jako např:

  • změna informační architektury e-shopu
  • zvýšení konverzního poměru e-shopu
  • zvýšení počtu organických návštěv z vyhledávačů
  • zvýšení povědomí o značce

K utřídění myšlenek jsme provedli SWOT analýzu.

Identifikovali jsme:
  • silné stránky (co nám pomáhá růst)
  • slabé stránky (kde jsme na tom hůře než konkurence)
  • příležitosti (např. nenaplněné potřeby zákazníků)
  • hrozby (např. co může snížit poptávku)

SWOT analýza pomůže definovat, na čem můžete při redesignu stavět a co nás může naopak poškodit.

Krok #3 - Výzkum

Abychom mohli efektivně začít plnit naši vizi, bylo třeba zanalyzovat stávající stav.

S analytikou se doposud moc nepracovalo, ale já jsem chtěl nový e-shopu jako obvykle stavět na základě dat, nikoliv domněnek. Díky výzkumu získám data, o která se mohu opřít a dál s nimi pracovat. Nespoléhám se pouze na jeden zdroj. Kombinuji více metod, abych měl relevantní data pro další kroky.

Začal jsem kvantitativním průzkumem.

Lukáš Dubina - UX designer
Ponořil jsem se do zkoumání analytiky

Google Analytics

Základní kvantitativní metoda výzkumu webových stránek, která umožňuje sledování a analýzu dat o návštěvnosti a chování uživatelů na webu 📈.

Mouse tracking

Mousetracking na webu sleduje pohyb kurzoru uživatelů 🔥, jejich kliknutí a interakce s obsahem, což nám umožňuje detailně analyzovat, jak návštěvníci web používají.

Identifikovali jsme problematická místa, kde uživatelé tápou, neefektivní prvky, které nezaujmou, nebo překážky bránící konverzím.

Analýza zákaznické podpory

Zaměřuje se na porozumění tomu, s jakými otázkami a problémy se zákazníci nejčastěji obracejí na podporu.

Pomáhá identifikovat nejčastější překážky v nákupním procesu, opakující se dotazy či obavy 🙋🏻.

Dotazník

Díky sociologickému dotazníku dokážeme v krátké době shromáždit velké množství hodnotných dat o zákaznickém chování a preferencích.

Pro získání zpětné vazby jsme využili kombinaci 📩 e-mailových dotazníků a pop-up formulářů na webu, které umožňují sbírat okamžité reakce přímo od návštěvníků.

Co jsme např. zjistili kvalitativním výzkumem:

  • 82 % zákazníků nakupuje opakovaně
  • Lidé chtějí platbu kartou online
  • Zákazníkům chybí doplňkové zboží a příslušenství k přípravě kávy
  • Lidé chtějí uvést stupnici kyselosti kávy
  • Lidí chtějí info o stupni pražení káv
  • E-shop je extrémně pomalý
  • další desítky problémů, které zde nebudu kvůli konkurenci rozepisovat 😇

Následoval kvalitativní průzkum - ten odhalí skryté překážky, motivace a zvyky uživatelů, které z dat neuvidíme. Pomůže pochopit PROČ lidé neklikají, tápou nebo nedokončují objednávku.

Uživatelské testování

Uživatelské testování je kvalitativní metoda výzkumu, která umožňuje sledovat přímou interakci uživatele s webem a zároveň se ptát na jeho myšlenkové procesy, chování a emoce 🧐.

Tímto způsobem lze efektivně identifikovat slabá místa a přizpůsobit web tak, aby lépe odpovídal potřebám uživatelů. 🚀

Máme data. Co dál? 👀

Interpretací dat existuje X variant, já nejčastěji používám na projektech framework Value Proposition Canvas (VPC).

Jedná se o nástroj, který pomáhá sladit potřeby zákazníků s tím, co jim značka nebo e-shop nabízí.

Lukáš Dubina - Value Proposition Canvas ukázka / příklad
Designování reálných potřeb zákazníků (Value Proposition Canvas)

V rámci výzkumu a návrhu mi VPC pomohl:

  • Zmapovat motivace, potřeby a problémy zákazníků při nákupu kávy online
  • Upřesnit, jaké benefity a funkce má e-shop komunikovat, aby odpovídal očekáváním zákazníků
  • Strukturovat výstupy z výzkumu do konkrétního rámce
  • Navrhnout obsah, filtry a produktové prvky, které reflektují to, co zákazníci skutečně hledají
  • Ladit UX a mikrotexty tak, aby podporovaly hlavní „jobs to be done“ uživatelů
  • Identifikovat rozdíly mezi tím, co si značka myslí, že nabízí, a tím, co zákazník skutečně vnímá

Krok #4 - Analýza klíčových slov, informační architektura

Analýzu klíčových slov využívám ve většině případů a bývá hlavním stavebním kamenem při optimalizaci nebo redesignu webu.

Díky ní zjistíme např.:

  • přehled o dotazech, které uživatel zadává, když hledá určitý produkt či službu
  • jaké parametry a varianty produktů jsou pro uživatele důležité
  • jaká témata spojená s naším oborem uživatele zajímají a na jaké otázky se snaží najít odpovědi (to můžeme použít pro budoucí obsahovou strategii)

Pro mě jako UX designera je analýza klíčových slov důležitá pro návrh informační struktury webu. Dokážu podle ní lépe určit, jak by měla vypadat:

  • navigace
  • název a design kategorie
  • varianty produktů
  • filtrace produktů
  • název a design vstupní stránky
návrh informační architektury e-shopu
Ukázka návrhu informační architektury e-shopu COFFEESPOT

Pokud tvořím informační architekturu na základě dat, dokážu lépe zajistit, aby na konkrétní hledané klíčové slovo vznikla vhodná vstupní stránka na webu. Tím se zlepší pozice ve vyhledávačích a přivedeme návštěvníky na web.

Analýza klíčových slov
Z analýzy klíčových slov např. vyplynulo, že nám chybí na Seznamu 80% vstupních stránek

Krok #5 - Analýza konkurence

U analýzy konkurence existují různé přístupy. Někdo analýzu konkurence podceňuje a nepovažuje ji za potřebnou. Jiní analýze konkurence naopak věnují až přehnané množství času a úsilí.

Zanalyzoval jsem cca 20 konkurentů. Přímých i nepřímých. Je to málo? Hodně?

Prozkoumal jsem jejich weby, e-shopy, nabídku, reference, důvěryhodnost, cenotvorbu, marketingové aktivity, zákaznickou podporu, technologie a postupy.

TIP: Na analýzu konkurence doporučuji nástroje: Alexa, Similarweb, Majestic, SEMrush, Visualping, Archive.org, Mentions, Ghostery, nástroje od Google a Seznam.cz, lidský faktor.

Analýza konkurence
Ukázka analyzovaného konkurenta - z jakých zdrojů získává návštěvnost a jak se web vyvíjí v čase

Krok #6 - Redesign vs. optimalizace

Redesign webu je zásadní krok a skládá se z mnoha částí. Ne vždy je však potřeba. Často je efektivnější a levnější jít cestou optimalizace. Častá chyba e-shopařů je, že se jim líbí web konkurence, a považují tak změnu grafiky za redesign. Věří, že hezčí e-shop jim zvýší výkonnost.

Redesign se ale netýká jen grafiky. Úprava grafického designu je jen jeden z dílčích kroků. Dokonce není vždy nutné při redesignu měnit grafiku.

V našem případě jsme potřebovali změnit více částí zároveň. Redesign dával smysl.

Redesign vs. optimalizace webu
Pokud není redesign nezbytně nutný, proveďte raději optimalizaci webu

Důvody

📉 Použitá šablona byla zastaralá a pomalá. Tu bylo třeba kompletně vyměnit a předělat. Přemýšleli jsme i o změně celého technického řešení, ale nakonec jsme se rozhodli zůstat u Eshop-rychle.cz a technické limity krabicového systému obejít (pokud to bude možné). Bylo by moc náročné zaškolit personál a předělat firemní procesy na novou platformu. Víme, že se tomu ale výhledově nevyhneme (viz. redesign č.2).

📱 Mobilní verze webu obsahovala chyby, byla pomalá a špatně ovladatelná, opravit ji by bylo velmi složité.

🧩 Nekonzistentnost značky. E-shop komunikoval jinak než sociální sítě, e-mail nebo kamenná prodejna. A to jak vizuálně, tak i technicky.

🖌️ Design

  • e-shop neukazoval silné stránky
  • špatný grafický design
  • unikala spousta SEO příležitostí, např. nepracovalo se s technickým SEO, blog byl na externím webu se špatně zapamatovatelnou doménou a negeneroval e-shopu žádné návštěvy ani objednávky (přestože sám blog návštěvnost měl)

Optimalizace

Přestože jsem se rozhodli pro redesign, na začátku jsme šli cestou optimalizace stávajícího e-shopu. Provedl jsem dílčí úpravy vedoucí k vylepšení a odstranění největšího problému. A to byla rychlost načítání.

Rychlost načítání webu
Původní doba načítání - "...když jsou weby pomalý, nikoho to nebaví..."
  1. Odebral jsem přebytečné skripty, které zpomalovaly načítání a na e-shopu byly spíše historicky
  2. Nastavil jsem asynchronní načítání must-have skriptů
  3. Odebral jsem video, které brzdilo vykreslování stránky
  4. Grafická a datová úprava obrázků - zmenšil jsem velikost grafiky. Některé obrázky byly v nevhodném formátu PNG a v tiskové grafice. Obrázky jsem předělal a datově zmenšil o desítky procent. Používám na to např. TinyPNG nebo Kraken.io
Rychlost načítání webu
Doba načítání e-shopu po optimalizaci - zkrácení doby načítání o 100 %

Krok #7 - Tvorba prototypu

Po ukončení všech analýz nastává proces, který dokáže prezentovat něco hmatatelného - definice rozmístění funkčních prvků na stránce. Odborně se tomu říká wireframe (neboli drátěný model webu).

Wireframe nám umožňuje minimalizovat rozdíl mezi zadáním a výsledným řešením. Nejedná se o grafický návrh, protože neobsahuje žádné obrázky a je černobílý.

Díky wireframu prezentujeme, jak bude výsledný web vypadat, jak se bude ovládat a jak bude komunikovat.

Wireframe eshopu
ukázka wireframu

Vzhledem k tomu, že e-shop poběží na krabicovém řešení a rozmístění prvků na stránce (částečně i obsah a textace) je striktně určeno šablonou, nemusí se kreslit desítky až stovky wireframů jako u e-shopu na míru.

Klikací wireframe se dá také testovat na uživatelích (jako funkční prototyp webu) a případné chyby opravit včas a levně. To jsem zde přesně udělal.

“Prototypy nám umožní vidět věci, které nefungují, a věci, které je třeba, aby fungovaly. Proto vždy testujte.”

Krok #8 - Grafický design

Po dokončení všech předchozích kroků nastává nejoblíbenější část všech zadavatelů a majitelů webů a e-shopů - GRAFICKÝ DESIGN.

Díky předchozím krokům vzniká na pevných základech.

Grafický design e-shopu navrhuji tak, aby:

  • byl nástrojem pro podporu obchodní výkonnosti webu
  • byl jednoduchý, čistý, zaměřený na výkon
  • splňoval pravidla použitelnosti
  • vedl k požadované konverzi
  • obsah byl čitelný a dal se “scanovat”
  • rychle se načítal

Při návrhu grafického designu (a celkově u návrhu e-shopu) mi moc pomohla např. i kniha, kterou COFFEESPOT napsal a vydal pod hlavičkou Computer Press - Lexikon kávy.

kniha Lexikon kávy
Kniha Lexikon kávy

Uživatelé si nekupují kávu kvůli grafice e-shopu. Grafický design, který jsem navrhl u e-shopu COFFEESPOT proto není žádné kreativní veledílo. Je zaměřený na výkon, funguje.

Grafický design e-shopu
Kreativní tvoření - můj proces návrhu grafického designu
"Uživatelské rozhraní je jako vtip. Když musíte lidem vysvětlit, jak funguje, není dobré."

Krok #9 - Tvorba obsahu

Říká se, že „obsah je král“. Něco na tom bude. Lidé nenavštěvují weby kvůli vzhledu. S větší pravděpodobností k vám přijdou proto, že máte skvělý obsah. Přesto obsah většina e-shopařů neřeší a považují ho za něco “navíc”.

COFFEESPOT má neuvěřitelné know-how a zkušenosti. E-shop to ale bohužel dostatečně obsahově nesděloval, což byla velká škoda. To jsme museli napravit.

Obsahu ve statických sekcích bylo poměrně dost, ale působil nekonzistentně oproti komunikaci např. na sociálních sítích nebo blogu.

Zapracovali jsme na novém obsahu pro:

  • Kategorie a detaily produktů
  • Statické stránky (Homepage, O nás, Pražírna…)
  • Transakční e-maily
  • Benefity a konkurenční výhody e-shopu
  • Mikrotexty
  • Nákupního rádce
  • Nové články na blogu
  • Nafotili jsme nové fotografie produktů
Focení produktů na e-shop
Focení produktů na e-shop

Textový obsah jsme tvořili společně. COFFEESPOT se vyznačuje výborným osobním přístupem a toto jsme chtěli promítnout i do obsahu.

Na mikrotexty jsem se zaměřili nejvíce. Nejen proto, že já osobně na nich “ujíždím” a považuji je za velmi důležité, ale i samotné téma je velmi kreativní a často jednou krátkou větou dokážete vyjádřit spoustu emocí a vysvětlit danou situaci lépe než dlouhým odstavcem textu.

Ukázka mikrotextu - microcopy
Na e-shopu jsme např. potřebovali vhodně odprezentovat preferovanou formu kontaktu

Krok #10 - Implementace

Při kódování šablony a nasazování designu a všech funkcí na míru mě trochu “brzdilo” krabicové řešení Eshop-rychle, které neumožňuje některé systémové prvky e-shopu upravit, přemístit či přepsat obsahově.

Přesto jsem v dané fázi nechtěl (ani nemohl) měnit technické řešení.

Možná to může působit netradičně – UX designer, který zároveň kóduje a programuje? 👨🏻‍💻 V mém případě je to však přirozené pokračování předchozí praxe, kdy jsem působil řadu let jako HTML/CSS kodér a grafik. Díky tomu dokážu navrhovat řešení, která jsou technicky funkční, realizovatelná a přizpůsobená možnostem konkrétní platformy. A když je třeba, nebojím se dodnes vrátit zpět ke kódu a dotáhnout projekt až do posledního detailu.

Jak zvýšit viditelnost e-shopu
Kódování je dřina, ale výsledek stojí za to

Překážky a řešení

Technické změny

Při redesignu je vždy třeba dát pozor na propady ve vyhledávání. Změnou informační architektury, domény (z www.kavaprazena.cz na www.coffeespot.cz) i změnou technického řešení (u nás. např. blogu) může e-shop přijít o velké množství vstupních stránek a návštěvníků. Přesměrování url i změnu domény jsme ohlídali:

Google Search Console
Informace z Google Search Console po spuštění redesignu

Heureka

Problém, který jsem zde řešil poprvé, byla HEUREKA. Protože u e-shopu došlo ke změně domény, bylo třeba vše změnit i v nastavení Heureky.

Heureka by mohla působit nekonzistentně, protože e-shop byl před redesignem pojmenován jako “kavaprazena” a dotazník spokojenosti obsahoval nesprávné logo. Toto by zákazníky mohlo hodně zmást a odradit je od vyplnění zpětné vazby.

Telefonický kontakt na Heureku jsem nikde nedohledal, poslal jsem tedy naivně tento email:

Heureka hodnocení e-shopu
Žádost o změnu domény

Po několika vyměněných konverzacích jsem zjistil, že Heureka bohužel tento krok neumožňuje a je třeba založit nový profil. Tím ale dojde ke ztrátě historie, certifikace a všech hodnocení. Měli jsme přes 900 recenzí.

To nechceš…

Telefon byl v zaslaném e-mailu, tak jsem se pustil do telefonického vyjednávání. Paní na technické podpoře byla moc milá a celkově mě postavení Heureky k této záležitosti velmi pozitivně překvapilo.

Po několika dnech komunikace (a snad i hodinách strávených na telefonu) celá záležitost skončila takto:

Heureka certifikace e-shopu
Konec dobrý, všechno dobré

Kladné body pro Heureku. Technickou podporu mají skvělou a umí se zachovat lidsky.

📈 Výsledky spolupráce po 2 měsících

Přestože došlo ke kompletní změně domény (z pohledu vyhledávače = nový web), po spuštění redesignu nedochází k očekávanému (krátkodobému) propadu. Naopak, již po 2 měsících od spuštění redesignu:

  • na web přichází o 22% více nových uživatelů
  • navýšení tržeb o 11%
  • průměrná hodnota objednávky + 8%
Výsledky optimalizace webu
Krátce po redesignu

Na předchozí verzi e-shopu návštěvníci často používali vyhledávání. To bylo technicky nevhodně zpracované. Po redesignu se počet návštěvníků, kteří použili vyhledávání a odešli z webu (bez změny nabídky zboží), snížil o 77%.

Už se těším, až Eshop-rychle nasadí mojí přepracovanou verzi.

Výsledky optimalizace webu
Výsledky po úpravě vyhledávání

📈 Výsledky spolupráce po 6 měsících

Citlivější data zde již nebudu prezentovat, ale zmíním:

  • celkové zvýšení návštěvnosti + 123%
  • hledanost značky COFFEESPOT + 267%
  • tržby z organického (neplaceného) vyhledávání + 197%
  • celkové tržby + 48%
Případová studie e-shop
Nárůst návštěvnosti v čase

📈 Výsledky spolupráce po 24 měsících

Pořád si rozumíme. Viděli jsme se fyzicky zatím jen 1x. Navíc na klientovo doporučení jsem dostal důvěru provést rebranding a postavit e-shop pro 🍫 Čokoládovnu JANEK.

  • celkové tržby + 153%
  • další výsledky: průběžně vyhodnocujeme data, ale publikovat je bohužel nemohu
Případová studie e-shop
Nárůst návštěvnosti v čase
Případová studie e-shop
Tržby - jedeme tak na 50%, abychom stíhali. Cílem není nově růst, ale optimalizace firmy.

Spolupracujeme, optimalizujeme....

  • Je to JÍZDA! — ale jedeme dál...
Pražírna kávy COFFEESPOT
Tak už jsme i ve Forbes

A pak se to stalo...

2 moji klienti, kterým řeším e-shop a marketing, se spojili 🙌.

Čokoládovnu JANEK jsem "vystřělil" 🚀 z offline prostředí do e-commerce návrhem a realizací e-shopu - (ukázka naší spolupráce)

Pražírna kávy COFFEESPOT
Vyrostli jsme a tohle se stalo

Zhodnocení redesignu č.1 z klienta

"Skoro dva roky jsme věděli, že e-shop není designově a funkčně zcela v pořádku. Báli jsme se ale jakékoliv změny, aby to negativně neovlivnilo celou firmu. Lukáše jsme našli díky výborným referencím. Chvíli nám trvalo pochopit, že je opravdový profesionál a přesně ví, co dělá. Bylo to hlavně díky našim negativním zkušenostem s různými agenturami, kdy spolupráce končily zklamáním a zbytečnými výdaji. Během pár měsíců jsme si poradili s celkovým redesignem e-shopu. Mysleli jsme si, že redesignem spolupráce skončí, ale Lukášovy zkušenosti nás i nadále posunují ve všech směrech neskutečně dopředu. I díky tomu máme více času na rozvoj firmy a naše zákazníky, kteří všechny změny vítají s nadšením."

Jiří Plšek

Jiří Plšek
zakladatel pražírny COFFEESPOT
www.coffeespot.cz

Za celou dobu spolupráce jsme se fyzicky neviděli a nepotkali (jsme od sebe vzdáleni 232 km). Vše jsme v pohodě zvládli po telefonu, po e-mailu a projektovým řízením přes Freelo. COFFEESPOT mi věřil a veškeré procesy nechal na mně. Ale už bychom se fakt chtěli potkat... (edit 4.4. 2018 - potkali jsme se, poprvé a zatím naposledy - i obchodní vztahy mohou fungovat na dálku, když si lidé věří a funguje chemie, občas i telepatie...) smile

Komunikace
Taková naše průměrná doba telefonického hovoru (když se chcete na něco zeptat) smile

Redesign č.2: 📈 Měníme vize, cíle a technické řešení

Po 4 letech od prvního redesignu došlo v roce 2022 k zásadní změně – tím, jak se pražírna COFFEESPOT spojila s Čokoládovnou JANEK, přišla s novými majiteli i nová vize a nové byznys cíle.

Zatímco do té doby byl poslední 2 roky hlavní důraz kladen spíše na stabilizaci firmy a postupný růst, nová strategie cílila mnohem ambiciózněji:

  • ekonomický růst
  • rozšiřování sortimentu
  • zefektivnění procesů
  • důraz na výkonnostní marketing

Technické řešení e-shopu však začalo tyto plány brzdit.

Migrujeme na Shoptet

Při plánování druhého redesignu jsme se rozhodli pro kompletní změnu technického řešení a přechod na platformu Shoptet. Důvodů bylo hned několik – původní systém narážel na své limity a přestával odpovídat potřebám růstu značky.

🔑 Klíčové důvody přechodu byly:

  • Technologický dluh – původní řešení nepodporovalo další růst ani napojení na externí ERP systémy přes API
  • SEO a marketing – chyběla flexibilita s napojením na marketingové nástroje
  • UX limity – stávající šablony nebylo možné dále upravovat, což brzdilo rozvoj uživatelského rozhraní (např. filtrace, varianty, výběr produktů)
  • Firemní procesy – potřebovali jsme zrychlit a zpřehlednit vyřizování objednávek
  • Napojení na účetní systém – původní řešení neumožňovalo rychlou a bezproblémovou integraci
  • Parametrické kategorie – pro lepší SEO a vyšší relevanci ve vyhledávačích jsme potřebovali pokročilou kategorizaci produktů
  • Synergie s čokoládovnou JANEK – tým JANKA už měl se Shoptetem zkušenosti a dokázal s ním efektivně pracovat, což zjednodušilo spolupráci a správu
Plánovaný redesign přinesl potřebu technicky i koncepčně pokročilejšího řešení.

Platforma Eshop-rychle nám po několik let skvěle sloužila. Poskytovala stabilní základ pro růst podnikání, umožnila vybudovat úspěšný a ziskový e-shop a díky ní jsme mohli realizovat první redesign s výbornými výsledky.

Co jsme navrhli jinak

Nový výzkum

Přestože byl stanovený termín spuštění velmi "brutální" (měli jsme 2,5 měsíce na návrh, realizaci a migraci), i u druhého redesignu jsme začali výzkumem. Kromě běžných zákazníků jsme se zaměřili i na nové segmenty, které byly pro další růst klíčové:

  • firemní klientelu
  • kavárny
  • zákazníky nakupující dárky

Výsledky výzkumu jsme promítli do struktury e-shopu, navigace, obsahu i celkového ovládání webu.

Ukázka dotazníkového výzkumu s reálnými zákazníky

Nebudu zde detailně rozepisovat všechny výzkumné metody ani jednotlivé kroky, které jsme v této fázi podnikli – náš postup byl velmi podobný jako při prvním redesignu. Opět jsme vycházeli z dat, zpětné vazby reálných zákazníků a výzkumu. Rovnou se zaměřím na ukázku několika změn, které jsme se rozhodli realizovat – a to zejména v porovnání s předchozím technickým řešením.

Změna #1 - Pokročilá filtrace

Jednou z nejviditelnějších novinek je pokročilý systém filtrování, který výrazně zlepšil orientaci zákazníků. Umožňuje vybrat si kávu podle parametrů, které mají pro konkrétní cílovou skupinu význam:

  • země původu,
  • chuťový profil a acidita,
  • způsob přípravy (espresso, filtr, moka atd.),
  • typ zrna a metoda zpracování.

Tato filtrace pomáhá nejen s výběrem, ale má i silný SEO efekt – každá kombinace parametrů tvoří unikátní vstupní stránku, kterou lze optimalizovat pro vyhledávače. Tím jsme vytvořili desítky nových příležitostí pro organickou návštěvnost.

Filtrace je základním uživatelským a výkonnostním prvkem e-shopu.

Změna #2 - Úprava designu detailu produktu a košíku

Detail produktu jsme kompletně přepracovali s důrazem na uživatelské pohodlí a zvýšení průměrné hodnoty objednávky. Nově si zákazník může:

  • vybrat požadovanou hrubost mletí kávy,
  • přehledně volit varianty balení (např. 250 g / 1 kg),
  • přidávat příplatkové služby nebo dárkové balení,
  • využít doporučené kombinace a upsell prvky navržené na míru.

Tento krok měl nejen pozitivní dopad na UX, ale i na obchodní výsledky 📈.

UX design e-shopu
Zákazníci mohou zvolit větší balení, příplatkové služby nebo přidat další produkty do košíku

Změna #3 - Nový grafický design a sjednocený branding

Důležitou součástí druhého redesignu byla také vizuální proměna e-shopu. Zároveň jsme se výrazně zaměřili na branding a konzistenci napříč všemi touchpointy. Původní obalový design a vizuální prvky nebyly sladěné a komplikovaly komunikaci i rychlost výroby. To se nejvíce projevovalo u sezónních kampaní a produktů. V takovém tempu nebylo možné rychle reagovat a držet kvalitu i styl.

Proto jsme sjednotili vizuální identitu značky – od obalů a štítků produktů, přes e-mailing, až po e-shop. Výsledkem je značka, která působí profesionálně, zapamatovatelně a důvěryhodně v každém bodě kontaktu se zákazníkem.

Každá značka má svou identitu, kterou se odlišuje od ostatních.
Grafický design e-shopu se zaměřením na výkon a jednoduchost.

Změna #4 - Interaktivní průvodce výběrem kávy

Abychom výběr ještě více zpříjemnili, navrhl jsem interaktivního průvodce, který zákazníka provede výběrem kávy podle jeho chutí, zkušeností a preferovaného způsobu přípravy. Výsledkem je doporučení konkrétní kávy.

Tento nástroj si zákazníci rychle oblíbili a stal se jedním z nejpoužívanějších prvků na webu. Dokonce inspiroval i další konkurenční e-shopy, které podobné řešení začaly implementovat po svém (některé i doslovně okopírovaly copywriting) 😀

Coffeespot průvodce kávou
Interaktivní průvodce, který doporučí vhodnou kávu dle preferencí uživatele.
Coffeespot průvodce kávou
Zdařilé kopie našeho průvodce výběrem.

Změna #5 - Ještě větší důraz na obsah

Obsah je jedním z pilířů úspěšného e-shopu – obzvlášť v oblasti výběrové kávy, kde zákazníci často hledají informace, doporučení nebo inspiraci. Proto jsme se v rámci druhého redesignu zaměřili i na kompletní revizi a rozvoj obsahu – jak z hlediska kvality, tak z pohledu struktury a SEO 🔎.

obsahová marketing pro e-shopy
U nás naleznete obsah pro začátečníky i zkušené baristy

Dovolím si tvrdit, že COFFEESPOT dnes nabízí jeden z nejhodnotnějších a nejprofesionálnějších obsahů v oblasti výběrové kávy. Nezaměřujeme se pouze na běžné zákazníky, ale vytváříme také materiály pro profesionály – provozovatele kaváren, baristy, restaurace i firemní partnery. Velkou výhodou je, že za obsahem stojí tým lidí, kteří kávou žijí – naši zaměstnanci a spolupracovníci jsou často majitelé vlastních kaváren, pražiči nebo špičkoví baristé s 🏆 oceněními z oborových soutěží. Obsah tak vzniká na základě reálné praxe, zkušeností a každodenní práce s kávou. To nás odlišuje od dnešních AI generovaných článků ve stylu "5 tipů jak..."

Na co jsme se při tvorbě obsahu zaměřili:

  • edukativní blogové články s praktickými tipy a vysvětlením pro začátečníky i pokročilé,
  • odborné materiály pro B2B klientelu a kavárny,
  • průvodce přípravou kávy podle jednotlivých metod,
  • podrobný popis chuťových profilů, zpracování a původu kávy,
  • autentické příběhy z pražírny, z cest za kávou a rozhovory s baristy.

Obsah se tak stal nejen nástrojem pro SEO, ale i silným kanálem pro budování důvěry, loajality a vztahu se zákazníky.

Závěrem

Možná čekáte, že teď přijdou tvrdá data. Tentokrát je ale zveřejňovat nebudu.

Výsledky druhého redesignu COFFEESPOTu jsou skvělé a už jsem o nich několikrát mluvil na přednáškách či v rozhovorech – ale jsou zároveň zásluhou celého týmu lidí, kteří se na projektu podíleli. Od interního týmu klienta, přes vývojáře, SEO specialistu, grafika až po kolegy, kteří se starají o zákaznickou péči.

Často narážím na povedené kopie našeho e-shopu a jeho UX prvky se začaly objevovat dokonce i v zadáních veřejných poptávek na redesign různých pražíren. I to ale vlastně považuji za důkaz, že naše práce má smysl.

Děkuji jim všem za důvěru a za to, že jsme společně mohli posunout značku o kus dál.

obsahový marketing pro e-shopy
JAK a PROČ upravit Shoptet + další praktické vychytávky na zvýšení výkonu e-shopu jsem přednášel např. v rámci Shoptet UX Meetupu.

Děkuji vám, že jste dočetli až sem. Je vidět, že svůj e-shop i podnikání berete vážně.

🎯 Pojďme společně posunout váš e-shop o kus dál

Možná právě teď přemýšlíte, jak posunout svůj byznys. Pokud vás moje práce zaujala, pojďme se spojit. Rád se podívám na váš projekt a navrhnu konkrétní kroky, jak zlepšit výkonnost, konverze i zákaznickou zkušenost.

Co mám za sebou?

15+

let zkušeností
v oblasti e-commerce

100+

dokončených velkých
i malých projektů

100 000+

návštěvníků měsíčně
mých vlastních projektů

Nekonečno

nekonečno
kreativních nápadů

Kontakt

Potřebujete navrhnout nový projekt nebo zlepšit ten stávající?
Pojďme si promluvit o možném řešení.

Lukáš Dubina

+420 724 146 006 info@lukasdubina.cz
  • Linkedin
  • Twitter
  • Instagram
  • Facebook
IČ: 76165701
DIČ: CZ8403280589 (plátce DPH)