ProSpánek SE je společnost, která ve střední Evropě systematicky rozvíjí síť prodejen zaměřených na zdravý a komfortní spánek. Jejím cílem je zlepšovat kvalitu života zákazníků prostřednictvím široké nabídky kvalitních produktů pro spánek.Důraz klade nejen na samotné produkty, ale i na celkový zážitek z návštěvy prodejny. ProSpánek vytváří prostředí, ve kterém se zákazníci cítí příjemně a uvolněně, téměř jako doma. Nedílnou součástí konceptu je osobní a vstřícný přístup vyškolených prodejců, specialistů na zdravý spánek, kteří pomáhají zákazníkům najít řešení odpovídající jejich individuálním potřebám.
Kamenné pobočky mají zkrátka v Prospánku v malíčku. Bylo ale jasné, že pokud chce klient růst, nemůže vše stát na bedrech kamenných poboček. Online prodej je totiž levnější, škálovatelnější a lépe měřitelný. A právě proto chtěl Prospánek online prodej posílit. Cítili ale, že původní web naráží na své limity a nedokáže z dostupného trafficu vytěžit maximum. A tak bylo potřeba se podívat na zoubek konverznímu poměru.
Zároveň jsme ale nechtěli odříznout kamenné prodejny, které mají vyšší konverzi a zůstávají klíčovým místem rozhodování.
Proto dalším cílem bylo:
Kamenné pobočky mají zkrátka v Prospánku v malíčku. Bylo ale jasné, že pokud chce klient růst, nemůže vše stát na bedrech kamenných poboček. Online prodej je totiž levnější, škálovatelnější a lépe měřitelný. A právě proto chtěl Prospánek online prodej posílit. Cítili ale, že původní web naráží na své limity a nedokáže z dostupného trafficu vytěžit maximum. A tak bylo potřeba se podívat na zoubek konverznímu poměru.
Ze všeho nejdřív ale bylo potřeba pochopit, co se vlastně děje. A tak jsme spolupráci otevřeli UX auditem, který měl odpovědět na jednu zásadní otázku:
👉 Kde přesně web v nákupním procesu zbytečně brzdí prodejní potenciál?
V UX auditu jsme nešli po dojmech, ale po datech. Zkoumali jsme:
Aby čísla nezůstala bez kontextu, doplnili jsme je dotazníkovým šetřením. Více než 500 odpovědí pomohlo pochopit, co lidé řeší v hlavě ve chvíli, kdy se rozhodují.
Audit neodhalil jednu „kritickou chybu“, která by všechno objasňovala. Společně s klientem jsme si naopak potvrdili, že jde o síť menších třecích míst, která samostatně nevypadají fatálně, ale dohromady systematicky brzdí výkon.
Klíčové proto nebylo vypsat co nejvíc problémů, ale umožnit správné společné rozhodnutí o tom, co řešit dřív. Jednotlivá zjištění jsme proto převedli do prioritizační matice, se kterou bylo možné dál pracovat a plánovat další kroky.
Každý bod dostal jasný kontext:
Díky tomu si Prospánek nemusel lámat hlavu s tím, co vlastně řešit, ale mohl se soustředit na to, co dávalo největší smysl řešit právě teď. Audit se tak nestal reportem, který klient zase založí v šuplíku, ale rozhodovacím nástrojem, podle kterého bylo možné plánovat další kroky.
A právě tahle fáze otevřela cestu k dalšímu kroku: cíleným úpravám klíčových částí webu, které měly největší konverzní potenciál.
Místo kompletní přestavby jsme zvolili jiný přístup:
Prošli jsme pět hlavních bodů:
Každá změna měla jasný účel. A výsledek na sebe nenechal dlouho čekat. I když se celkový počet uživatelů zvýšil jen mírně, ostatní metriky vyrostly výrazně.
Jedna z nejzásadnějších změn se netýkala jen homepage, ale celého webu. Rozšířili jsme šablonu tak, aby se obsahová plocha na největším rozlišení zastavovala až kolem 1550 px.
Díky širšímu layoutu konečně vynikly fotky, materiály a emoce, které jsou u produktů Prospánku klíčové. Web působí vzdušněji, prémiověji a dává produktům prostor, který si zaslouží.
Samotná homepage pak prošla kompletním redesignem. A výsledek?
Heatmapa ukázala, že hlavní přehled kategorií dříve sbíral méně pozornosti, než je u e-shopů běžné. Po úpravách se to změnilo: proklikovost do kategorií vzrostla o 11 %.
Nechceme ale vše barvit na růžovo. Konverzní poměr homepage jako přistávací stránky naopak klesl o 24,16 %. Jinými slovy: více lidí pokračuje dál, ale méně z nich se rozhodne nakoupit přímo z první stránky. A přesně s takovými zjištěními pracujeme dál. Nebereme je jako chybu, ale jako vodítko, kam se podívat příště.
Kategorie původně obsahovala zbytečně moc textu v klíčové části viewportu. Filtr se otevíral na netradičním místě, a tak místo plynulého průchodu vznikalo zbytečné váhání. Bylo proto jasné, že i tady má smysl do designu zasáhnout.
Audit ukázal, že textový rozcestník kategorií je bez vizuální opory hůř skenovatelný a uživatele při výběru zpomaluje. V redesignu jsme proto do výpisu kategorií přidali obrázky a zároveň zkrátili popisky, aby nezabíraly zbytečně místo.
Výsledkem je vyšší proklikovost v rámci kategorií a plynulejší pohyb uživatelů dál po webu.
Audit ukázal, že textové popisky ve výpisu produktů výběr spíš komplikovaly. Často jen opakovaly názvy, zabíraly místo a na mobilu odsouvaly cenu mimo viewport. V redesignu jsme je proto úplně odstranili a nahradili infografikou, která umožňuje rychlé porovnání klíčových vlastností.
Audit ukázal, že se mobilní filtr otevíral na nelogickém místě dole na obrazovce. V redesignu jsme proto zcela změnili jeho podobu, aby se otevíral přirozeně přes celou obrazovku a v jasném kontextu výběru. Zároveň jsme přeskupili jednotlivé parametry podle toho, jak je lidé reálně používají — ty nejdůležitější jsou dnes na prvních místech. Díky tomu filtr lépe zapadá do celého flow.
Produktový detail je klíčové místo každého e-shopu. U Prospánku se ukázalo, že problém nebyl v nabídce, ale v tom, jak složité bylo se v detailu zorientovat. A tak jsme se zaměřili na to nejdůležitější: aby bylo na první pohled jasné, co vybírám, jak produkt vypadá a kde je k dispozici.
Výběr variant byl nepřehledný hlavně v tom, že nebylo jasné, co je právě vybrané a co je jen aktivní prvek. Styl vybraného políčka se pletl s interakcí a část informací byla navíc schovaná v nepřehledném pop-upu. Člověk si tak musel hlídat, co vlastně vybírá a jestli kliknul správně.
V redesignu jsme proto výpis variant výrazně zpřehlednili a přenesli všechny typy barev přímo do výběru varianty. Zatímco dříve byly například barvy čalounění vidět až dole na stránce, teď jsou součástí výběru. Díky tomu je jasnější, co která varianta znamená, bez dohledávání a přeskakování po stránce.
Heatmapy ukázaly, že lidé si chtěli produkty prohlížet víc do detailu. Často si sami proklikávali další obrázky ve slideru. Místo carousel galerie jsme proto fotky rovnou umístili do prodejního panelu. Produkt je tak lépe vidět hned od začátku, působí živěji a emocionálněji. Jednoduše: lidé si ho dokážou lépe představit, a to je u výběru za desítky tisíc klíčové.
U přehledu skladovosti na prodejnách bylo potřeba hlavně zpřesnit interpretaci informací. Ve starém řešení sice platilo, že pokud se prodejna v seznamu objevila, produkt tam byl k dispozici, ale tahle logika nebyla na první pohled zřejmá.
V redesignu jsme proto celý přehled zpřehlednili a udělali ho jednoznačně čitelný. Prodejny jsou seřazené abecedně a informace o dostupnosti je teď explicitní.
V košíku měla tlačítka stejnou vizuální váhu, takže nebylo jasné, jestli je lepší pokračovat k objednávce, nebo se vrátit zpět do obchodu. Zároveň byl nepřehledný i mezisoučtový panel: řádky měly různý proklad, chybělo jasné oddělení a celková cena splývala se zbytkem informací.
V redesignu jsme proto jasně nastavili hierarchii akcí a srovnali souhrn tak, aby bylo na první pohled vidět to nejdůležitější: kolik zaplatím a kam mám pokračovat dál.
Menu obsahovalo mnoho položek, některé se významově překrývaly a celý dropdown působil těžkopádněji, než bylo nutné. V redesignu jsme se proto zaměřili na zpřehlednění struktury, jasnější hierarchii a lepší práci s obsahem.
Menu zbytečně pracovalo s velkým množstvím položek, které se významově překrývaly, a celý dropdown tak zbytečně uživatele zahlcoval. V redesignu jsme proto nejdřív upravili textaci a strukturu nadpoložek, aby bylo na první pohled jasné, jaké typy produktů kam patří. Zároveň jsme menu přeuspořádali podle toho, co lidé skutečně nejčastěji hledají. Klíčové kategorie zůstaly viditelné, méně používané jsme schovali pod „zobrazit více“.
Znalostní odkazy v menu sice existovaly, ale byly snadno přehlédnutelné. Měly odlišnou barvu textu, byly schované v okraji menu a působily spíš jako servisní doplněk než jako obsah, který může pomoci s výběrem. Uživatel tak často vůbec nezaregistroval, že má po ruce články nebo průvodce, které by mu mohly rozhodování ulehčit.
Detail článku svou formou čtenáře zbytečně zatěžoval. Texty byly často dlouhé, kompaktní a bez vizuálních záchytných bodů, takže se v nich hůř orientovalo a článek působil jako jednolitý blok informací. Chyběla práce s rytmem - odlehčení pomocí obrázků, výpisů nebo konkrétních produktů navázaných na téma.
V redesignu jsme proto článek rozčlenili, proložili vizuálními prvky a doplnili relevantní produkty přímo do toku obsahu. Zároveň jsme posílili úvod a přidali jasné navazující kroky na konci článku — doporučené související články nebo tematické přehledy. Článek tak lépe drží pozornost, snáz se čte a přirozeně vede čtenáře dál.
V další fázi přijde na řadu redesign celého magazínu.
Redesign klíčových částí byl důležitý krok, ale rozhodně ne konec spolupráce. Velký podíl na výsledcích má i přístup klienta, který je otevřený systematické práci a dlouhodobému zlepšování, ne jen rychlým opravám. Optimalizace e-shopu totiž není jednorázový projekt, ale postupný proces malých, cílených kroků. Místo velkých skoků dává větší smysl jít po částech – ověřovat, upravovat a znovu ladit.
Nesnažte se zlepšovat všechno najednou. Podívejte se na celou nákupní cestu v datech: do analytik, heatmap a záznamů chování. Hledejte místo, kde se lidé nejčastěji vrací zpět nebo odcházejí. V tomhle bodě má UX audit nebo externí pohled největší hodnotu: pomůže vám tenhle moment správně pojmenovat a určit, kde má smysl začít.
Čísla vám řeknou kde je problém, ale málokdy proč. Jakmile víte, kde se lidé zastavují, zkuste si to dát do kontextu s pohledem skutečných uživatelů. Můžete na web např. umístit krátký dotazník nebo se osobně zeptat pěti zákazníků, co jim při výběru nebylo jasné. Často zjistíte věci, které v datech vůbec vidět nejsou. Právě kombinace dat a lidského pohledu dělá rozdíl mezi dojmologií a změnami, které mají dopad.
Kompletní redesign není vždy nutný a často ani žádoucí. Mnohem lépe fungují menší změny, které můžete sledovat a případně upravit. Jakmile něco změníte, sledujte, co to udělalo. A když to nefunguje, vraťte se o krok zpět a iterujte.
