5 e-shopů v 1: Jak jsme navrhovali B2B e-shop pro 5 typů zákazníků společnosti Activa

5 e-shopů v 1: Jak jsme navrhovali B2B e-shop pro 5 typů zákazníků společnosti Activa

Nejsilnější česká společnost v oboru kancelářských potřeb. Mezi hlavní konkurenční výhody patří velmi široké portfolio produktů, silné skladové zásoby a rychlé dodání vlastní dopravou až na stůl.
activa.cz

Uživatelský výzkum, Návrh nového webu, Grafický design

08/2017

datová analýza

08/2017

workshop s obchodníky Activa

08/2017

uživatelský výzkum a rozhovory se zákazníky napříč ČR

09/2017

příprava strategie a konceptů nového e-shopu

09-12/2017

návrh struktury, procesů a wireframů

01-02/2018

grafické návrhy šablon nového e-shopu

08/2017

datová analýza

08/2017

workshop s obchodníky Activa

08/2017

uživatelský výzkum a rozhovory se zákazníky napříč ČR

09/2017

příprava strategie a konceptů nového e-shopu

09-12/2017

návrh struktury, procesů a wireframů

01-02/2018

grafické návrhy šablon nového e-shopu

08/2017

datová analýza

08/2017

workshop s obchodníky Activa

08/2017

uživatelský výzkum a rozhovory se zákazníky napříč ČR

09/2017

příprava strategie a konceptů nového e-shopu

09-12/2017

návrh struktury, procesů a wireframů

01-02/2018

grafické návrhy šablon nového e-shopu

K redesignu robustní B2B objednávkové platformy se Activa odhodlávala nějakou dobu. Uvnitř firmy probíhala změna informačního systému dotýkající se i logistických procesů a zároveň bylo nutné si prakticky osahat všechny „nové trendy“ v e-commerce jako responzivitu a mnoho dalšího. Postupně jsme tedy Activě pomáhali s přípravou několika menších tematických e-shopů pro jejich koncové zákazníky a nakonec jsme se mohli pustit do velkoobchodu.

K redesignu robustní B2B objednávkové platformy se Activa odhodlávala nějakou dobu. Uvnitř firmy probíhala změna informačního systému dotýkající se i logistických procesů a zároveň bylo nutné si prakticky osahat všechny „nové trendy“ v e-commerce jako responzivitu a mnoho dalšího. Postupně jsme tedy Activě pomáhali s přípravou několika menších tematických e-shopů pro jejich koncové zákazníky a nakonec jsme se mohli pustit do velkoobchodu.

Výchozí situace

Výchozí situace

Velkoobchod je ale v e-commerce Activy tak trochu jiný sport než klasický eshop. Na klasické zobrazování výpisů a detailů produktů navazuje komplikovaná objednávací část s vrstevnatými schvalovacími procesy pro různé typy uživatelských účtů. Prakticky jde o několik e-shopů v jednom. Zatímco někteří zákazníci vyžadují dárky a věrnostní program, pro jiné je tento způsob ovlivňování jejich nákupčích nepřijatelný. Někteří zákazníci potřebují objednat na co nejmenší počet kliknutí, jiní vyžadují několikastupňové schvalování objednávek a specifický přístup k fakturaci. Někteří vyžadují nejširší možný sortiment, další mají z celého katalogu přístupné jen omezené části sekcí, o rozdílných cenových hladinách nemluvě. Počítat jsme museli také s potřebou mít možnost obarvit e-shop do barev velkého odběratele a jeho následné zobrazování přes firemní SAP. Co by se vše mělo měnit z hlediska UX? A budou naše změny odběratelům vyhovovat?.

Velkoobchod je ale v e-commerce Activy tak trochu jiný sport než klasický eshop. Na klasické zobrazování výpisů a detailů produktů navazuje komplikovaná objednávací část s vrstevnatými schvalovacími procesy pro různé typy uživatelských účtů. Prakticky jde o několik e-shopů v jednom. Zatímco někteří zákazníci vyžadují dárky a věrnostní program, pro jiné je tento způsob ovlivňování jejich nákupčích nepřijatelný. Někteří zákazníci potřebují objednat na co nejmenší počet kliknutí, jiní vyžadují několikastupňové schvalování objednávek a specifický přístup k fakturaci. Někteří vyžadují nejširší možný sortiment, další mají z celého katalogu přístupné jen omezené části sekcí, o rozdílných cenových hladinách nemluvě. Počítat jsme museli také s potřebou mít možnost obarvit e-shop do barev velkého odběratele a jeho následné zobrazování přes firemní SAP. Co by se vše mělo měnit z hlediska UX? A budou naše změny odběratelům vyhovovat?.

Titulní stránka webu před redesignem.

Průběh práce

Průběh práce

Klíčový byl v úvodní fázi výzkum. Provedli jsme rozsáhlou datovou analýzu, na ni navazoval workshop s obchodními zástupci, kteří jsou se zákazníky v denním kontaktu, a nakonec jsme se vydali do terénu, udělat uživatelský výzkum a hloubkové rozhovory přímo s vybranými středními i velkými odběrateli kancelářských potřeb z Activy.

Návrh jednotlivých stránek a stavů v responsivních pohledech pro mobil, tablet, malý a velký desktop jsou náš denní chleba. Tady to ale přeci jenom bylo jiné, a to zejména rozsahem. Celkem jsme nakreslili pro tyto čtyři viewporty 75 stránek a stavů, a to řadu z nich v několika postupových krocích. V součtu to bylo více než 400 nakreslených a komentovaných obrazovek.

Čas vložený do podrobného výzkumu se vyplatil. Dozvěděli jsme se například, že není třeba investovat do tvorby mobilní aplikace, protože zákazníci ji nechtějí a nevyužívali by ji. Promyšleně připravená responsivní verze webu jim bude úplně stačit. Dále jsme si srovnali priority v pohledu na  využívanost jednotlivých částí a funkcionalit uživatelského rozhraní a díky tomu mohli při návrhu věnovat čas prvkům, jejichž zlepšení zákazníci nejvíce ocení. Ověřili jsme si také některé hypotézy ohledně toho, jak zákazníci vybírají zboží, jak a podle čeho se rozhodují, co nakoupí, a jak u nich probíhá schvalování těchto nákupů. Nákup totiž často řeší office manažerky, které ale o budgetu firmy na kancelářské potřeby nerozhodují. Pro návrh bylo nezbytné pečlivě zmapovat veškeré uživatelské scénáře, které mohou nastávat pro různé uživatelské role.

Návrh jednotlivých stránek a stavů v responsivních pohledech pro mobil, tablet, malý a velký desktop jsou náš denní chleba. Tady to ale přeci jenom bylo jiné, a to zejména rozsahem. Celkem jsme nakreslili pro tyto čtyři viewporty 75 stránek a stavů, a to řadu z nich v několika postupových krocích. V součtu to bylo více než 400 nakreslených a komentovaných obrazovek.

Wireframe různých stavů pro zadávání dodacích údajů.

Pak už stačilo „jen“ navrhnout wireframy pro několik desítek stránek, kromě responzivního layoutu a rozmístění prvků se při tom soustředit na logiku komponent a zobrazování všech možných nabývaných stavů pro řadu uživatelských situací. Požadovanou funkčnost z hlediska UX a SEO pak sepsat do  projektové dokumentace a na závěr připravit grafický kabátek.

Návrh jednotlivých stránek a stavů v responsivních pohledech pro mobil, tablet, malý a velký desktop jsou náš denní chleba. Tady to ale přeci jenom bylo jiné, a to zejména rozsahem. Celkem jsme nakreslili pro tyto čtyři viewporty 75 stránek a stavů, a to řadu z nich v několika postupových krocích. V součtu to bylo více než 400 nakreslených a komentovaných obrazovek.

Grafický návrh různých typů produktových karet.

Grafický návrh různých stavů CTA bloku.

Grafický návrh stránky Detail Produktu (sloupec vpravo je plovoucí - sticky).

Výsledky

Výsledky

Redesign nepřinesl jen změnu vizuálu webu a možnost plnohodnotného používání v mobilech. Lepší použitelnosti napomáhají například i nová parametrická filtrace, vyhledávací našeptávač nebo práce s oblíbenými a opakovaně nakupovanými produkty.

Návrh jednotlivých stránek a stavů v responsivních pohledech pro mobil, tablet, malý a velký desktop jsou náš denní chleba. Tady to ale přeci jenom bylo jiné, a to zejména rozsahem. Celkem jsme nakreslili pro tyto čtyři viewporty 75 stránek a stavů, a to řadu z nich v několika postupových krocích. V součtu to bylo více než 400 nakreslených a komentovaných obrazovek.

Na otázky dojmu ze spolupráce nám odpověděl Čeněk Vedral, eBusiness manager z Activy:

Jak vnímáte práci Picards?

Pracím na hlavním e-shopu předcházely redesigny menších koncových e-shopů, na kterých jsme měli možnost si spolupráci se společností Picards vyzkoušet. Bez obav jsme si ji vybrali i pro redesign našeho největšího e-shopu. Hned v počátku se ukázalo, že tento projekt bude daleko náročnější, než byly předchozí, a to hlavně z důvodů velké variability našeho řešení a tudíž velkého množství objednacích scénářů. Pan Michal Mrskoč ale všechny informace dokázal „nasát“ a vytvořit takové wireframy, které zefektivnily nakupování kancelářských potřeb pro všechny naše zákazníky.

Splnil výsledek vaše očekávání?

Ano, splnil. A to jak z pohledu čísel, tak z pohledu uživatelské spokojenosti. Hlavní cíle z pohledu čísel byly dva: 1) Zvyšování průměrné hodnoty objednávky a 2) Zmenšování počtu dodacích listů, což ve svém důsledku znamená menší zátěž skladu. Několik měsíců po spuštění nové verze vidíme stále pravidelný nárůst průměrné hodnoty objednávky v řádu vyšších jednotek procent. Oproti tomu počet dodacích listů o jednotky procent klesá. Obě čísla se tedy vyvíjí požadovaným způsobem. Při velikosti Activy jde o velmi hezké výsledky. Čísla jsou samozřejmě důležitá, ale v projektu nám šlo i o zefektivnění nákupního chování zákazníků. Kancelářské potřeby jsou komodita, která představuje zboží pro denní chod kanceláře a u které chce zákazník strávit s jejím objednáním co nejméně času. Kromě sledování čísel v GA jsme si po nějakém čase od spuštění udělali workshopy, kde jsme rozebírali zkušenosti zákazníků a obchodníků s novou verzí. Ohlasy byly převážně pozitivní a nejvíc kladně byly hodnoceny funkce jako vyhledavač/našeptavač, zbožové filtry, personalizační funkce, rychlost dokončení objednávky a responzivita. Tedy věci, na které jsme se v rámci návrhu hlavně zaměřovali.

A doporučení pro váhavé klienty?

Se společností Picards spolupracujeme dlouhodobě a s výsledky jejich práce jsme nad míru spokojeni. Budou naší první volbou i v příštích webových projektech.

+420 777 140 423

Pod Školou 6
150 00 Praha 5

© 2023 Picards

Prohlížením tohoto webu souhlasíte s tím, že se do vašeho prohlížeče ukládají cookies. Více v Zásadách používání cookies 

+420 777 140 423

Pod Školou 6
150 00 Praha 5

© 2023 Picards

Prohlížením tohoto webu souhlasíte s tím, že se do vašeho prohlížeče ukládají cookies. Více v Zásadách používání cookies 

+420 777 140 423

Pod Školou 6
150 00 Praha 5

© 2023 Picards

Prohlížením tohoto webu souhlasíte s tím, že se do vašeho prohlížeče ukládají cookies. Více v Zásadách používání cookies