Knihy Dobrovský

O projektu

Knihy Dobrovský jsou rodinná firma, která prodává knihy, e-knihy, audioknihy a hry online i v desítkách kamenných prodejen. Na e-shopu a v jeho okolí řeším jednotlivé produktové úkoly. Mobilní aplikace KDčko je zpracovaná zvlášť.

Moje role

Na e-shopu pracuji jako Senior Product Designer od roku 2023. Jako product designer a UX/UI designer vedu úkoly od rozboru problému přes návrh obrazovek až po předání do vývoje. Níže je výběr úkolů, na kterých je nejlépe vidět, jak přemýšlím.

Úkol: nové mobilní menu

Mobilní menu mělo sloužit jako rozcestník pro celý web, ne jen jako strom kategorií. Cílem bylo dostat zákazníka jedním klepnutím tam, kam míří: do konkrétní kategorie, k akcím a slevám, do klubu, na blog, do prodejen nebo do svého účtu. A zároveň ho motivovat ke vstupu do klubu.

První úroveň nabízí sortiment (Knihy, E-knihy, Audioknihy, Dárky, Hry, Hračky, Papírnictví) a pod ním oddělenou skupinu věcí, kvůli kterým se zákazníci na web vracejí: Akce a slevy, Vše důležité, Klub, Blog a Prodejny. Dole je nabídka vstupu do klubu s odměnou za první nákup.

Druhá úroveň přidává u sortimentu blok „Mohlo by vás zajímat“ s autory, sériemi, tématy a doporučenou knihou, takže menu slouží i k objevování. Kategorie se rozbalují přímo v seznamu, zákazník vidí podkategorie a neopouští menu.

Header reaguje na scroll: při scrollu dolů ustupuje, při scrollu nahoru se vrací a vyhledávání má vlastní aktivní stav, aby bylo vždy po ruce.

Co se změnilo v chování zákazníků

Po nasazení jsem sledoval, jak se změnila cesta zákazníků webem. Změna byla vidět hned: zákazníci méně bloudili obecnými kategoriemi a častěji šli rovnou na bestsellery a akce nebo do osobních částí webu, tedy do účtu, knihovny a na prodejny.

Úkol: přehrávač audioknih a cesta do aplikace KDčko

V aplikaci KDčko vznikl nový přehrávač, který jsem navrhoval taky já. Chtěli jsme, aby zákazníci audioknihy po koupi poslouchali právě tam, a nevzít jim přitom, na co jsou zvyklí: stáhnout si je, nebo je poslouchat ve webové e-knihovně.

Zadání znělo: po koupi audioknihy vyzvat zákazníka k přehrání v aplikaci KDčko. Hlavním prvkem je pop-up, vstupními body jsou děkovací stránka a e-knihovna.

Objednávka může obsahovat audioknihy i e-knihy najednou, proto jsem návrh stavěl na úrovni jednotlivé položky. U audioknihy je hlavním tlačítkem Přehrát a v nabídce tří teček zůstává zkratka Stáhnout z e-knihovny, takže původní cesta se zákazníkům neztratila.

Tlačítko Přehrát otevře pop-up s výzvou přejít do aplikace. Pop-up pozná, jestli zákazník sedí u desktopu, nebo na mobilu či tabletu, a podle toho ukáže jiný obsah. Na desktopu se aplikace otevřít nedá, proto tam jsou odkazy do Google Play a App Store. Na mobilu a tabletu je rovnou tlačítko Přehrát v aplikaci KDčko, které se pokusí otevřít aplikaci přímo na audioknize (u balíčku v audioknihovně). Pop-up ale neví, jestli má zákazník aplikaci nainstalovanou. Pokud ano, aplikace se otevře a zákazník může rovnou poslouchat. Pokud ne, otevře se obchod s detailem KDčka a může si ji stáhnout.

Zadání šlo do vývoje jako požadavek s vysokou prioritou: s uživatelským příběhem, technickým scénářem detekce zařízení a odkazem na návrh ve Figmě, takže měl vývoj k dispozici jak chování, tak vzhled.

Úkol: redesign stránky prodejen

Stránka prodejen vznikla jako přehled fotografií a příběh firmy. Zákazníci s ní ale řeší konkrétní věc: kde je nejbližší prodejna, jestli je otevřeno a kde si vyzvednou objednávku. Začal jsem proto rozborem problému.

Rozbor ukázal, že stránka není postavená na hledání podle polohy a že obsahuje spoustu věcí, které odvádějí pozornost (kolik máme prodejen, jak jsme začínali, pracovní místa). Mapa slouží spíš jako přehled. Největší váhu mají fotky prodejen, které mají nejmenší informační hodnotu. A tlačítko otevírací doby nedělalo to, co by člověk čekal.

Za hlavní úkoly zákazníka jsem určil: najít nejbližší prodejnu, rychle poznat, jestli je otevřeno a jak je daleko, a rozhodnout se, kterou navštívit. Velikost prodejny je pro rozhodnutí důležitá, protože velké prodejny mají i neknižní sortiment, kam zákazník zajde třeba pro dárek. Inspiraci jsem hledal v mapách výdejních míst, například u Zásilkovny a PPL.

Filtry a řazení jsem navrhl jako rozhodovací nástroj, ne jako katalog. Hned vidět je Nyní otevřeno, typ služeb (výdej objednávek, vrácení, reklamace) a velikost prodejny. Situace, které řeší menšina zákazníků (bezbariérový přístup, parkování, nákupní centrum), jsou schované pod Filtrem. Výchozí řazení je podle vzdálenosti od polohy zákazníka, protože odpovídá mapě a snižuje kognitivní zátěž.

Seznam ukazuje vzdálenost a stav (Nyní otevřeno, Brzy zavírá, Zavřeno), mapa rozlišuje piny. Po výběru se vedle mapy otevře detail s otevírací dobou, velikostí prodejny, možnostmi platby, bezbariérovým přístupem, čtenářským koutkem a navigací, dole jsou další prodejny v okolí.

Na mobilu je seznam v dolním panelu nad mapou a detail prodejny se otevírá jako samostatná obrazovka. Samotný detail prodejny jsem v této fázi záměrně nechal mimo rozsah.

Úkol: Klub Knihy Dobrovský a body v košíku

Klub je věrnostní program Knihy Dobrovský. Úkolem bylo dostat ho z účtu tam, kde se zákazník rozhoduje: do košíku a do objednávky.

Stránka klubu v účtu ukazuje stav bodů, poukázky na prodejnu i do e-shopu a historii transakcí. Klubovou kartu si zákazník přidá do Apple nebo Google Peněženky, aby ji měl na prodejně vždy po ruce.

V košíku člen klubu vidí svůj zůstatek, kolik bodů z objednávky získá a kolik jich využije. Nečlenovi se místo toho nabídne vstup do klubu a ukáže se, co tím získá.

Dobrovská nabídka v košíku umožňuje vybrat si v konkrétní prodejně knihu, kterou lze koupit za peníze nebo uhradit klubovými body. Informace o knize se ukážou v náhledu přímo v košíku, takže zákazník nemusí z objednávky odcházet.

Úkol: nový vzhled vstupenek

Pro akce Knihy Dobrovský jsem navrhl nový vzhled vstupenek, který funguje na mobilu i v tisku. Původní tištěná vstupenka nesla jen logo, cenu, krátký pokyn a kód s QR.

Nová mobilní e-vstupenka drží všechno podstatné na jednom místě: název akce, místo, datum a čas, cenu, typ vstupu, kód a QR. Barevné pruhy značky ji spojují s identitou Knihy Dobrovský a partner akce je v záhlaví. Tisková varianta existuje v barevné i černobílé verzi.

Návrh jsem předal v pracovním boardu, aby bylo vidět, jak jsem uvažoval a co jsem při návrhu upřednostnil. Mobilní verze byla hotová, tiskovou jsem ještě dolaďoval. Týmu jsem nechal dvě otevřené otázky: jak se bude e-vstupenka zákazníkovi doručovat (PDF, nebo přes službu) a jak se na ní mění údaje včetně QR kódu. Návrh počítá se všemi variantami.

Další úkoly

E-knihovna a dárek pro členy klubu. Členové klubu si v e-knihovně každý měsíc vyzvednou e-knihu zdarma. Navrhl jsem celý tok od výběru dárku z nabídky přes stav, kdy už je dárek vybraný, až po potvrzení a upozornění, že nabídka platí jen do konce měsíce.

Rozdělení zásilek. Obsahuje-li objednávka zboží skladem i předobjednávku, zákazník si zvolí, jestli chce zásilky poslat postupně, nebo počkat a dostat vše najednou. Doprava a platba se pak vybírá zvlášť pro každou zásilku.

A/B test přihlášení. Navrhl jsem dvě varianty přihlašovacího okna. Jedna je stručná, druhá vedle formuláře vysvětluje, proč se přihlásit.

Hodnocení a recenze. Hodnocení zákazníků je přímo ve výpisu produktů a řeším i situaci, kdy kniha zatím žádné hodnocení nemá.

Blog. Nový výpis článků má tipy redakce, nejčtenější články roku, filtry podle typu (články, recenze, podcasty), hledání a stránkování.