Facelift objednávkového procesu Notino — UI case study

Pokud jste před rokem nebo ještě dříve navštívili web Notina, tak jste si mohli všimnout, že objednávkový proces vizuálně neladí se zbytkem e-shopu. Proč tomu tak bylo, a jak jsme se s tím vypořádali? Přesně o tom je tento článek.

Problémy aktuálního řešení

Tak velký e-shop, jako je Notino, nikdy není možné upravit najednou. Stejně tak, jako se postupně rebrandovalo Parfums na Notino, jsme podobným způsobem přistupovali k vizuálním úpravám webu. Po úpravách produktového detailu, homepage a ostatních stránek, logicky přišel na řadu i objednávkový proces, kterým denně projde až 100K objednávek.

• nejednotný vizuální styl se zbytkem webu
• prvky neodpovídající styleguide
• složité navrhování drobných úpravy
• nekonzistentní typografie
• špatná použitelnost na mobilu

Čeho jsme chtěli dosáhnout?

Je to poměrně jednoduché. Faceliftovat celý objednávkový proces tak, aby zapadal do vizuálního stylu Notina a odpovídal našemu styleguide. Cílem není něco zásadně změnit. Spíše naopak. Pokud si nikdo ničeho nevšimne, tak je to vlastně v pohodě. Pojďme si říct proč.

Facelift vs. Redesign

Jednoho krásného dne se vzbudit a redesignovat (změnit i chování) nákupního procesu tak velkého e-shopu určitě není dobrý nápad. Nové funkce, rozšíření a úpravy je určitě lepší dělat jednotlivě, jednu po druhé. V ideálním případě každou změnu otestovat a vyhodnotit, jaký měla na objednávkový proces vliv. Překopat vše najednou je taková loterie, která vás může stát hodně peněz. Hledat chybu, kdyby se změnilo úplně všechno, by nebylo vůbec jednoduché, pravděpodobně byste stejně museli jednotlivé funkce postupně upravovat a testovat. A to nechcete…

Hádanka 👀
Který velký e-shop se kolem roku 2014 výrazně spálil redesignem celého webu?

- zc.llam

Proces

Rozhodli jsme se, že půjdeme postupně a začneme tam, kde nás nejvíce pálí bota, tedy přímo v košíku. Potřebovali jsme přidávat nové funkce, a nechtěli jsme je implementovat do “starého” designu a následně předělávat.

Pořadí bylo následující:

1. košík

2. upsell

3. doprava a platba

4. adresa dodání

5. thank you page

Teď si asi říkáte co je tak složitého na tom vizuálně upravit 5 stránek?Poladíme pár css stylů a za jedno odpoledne je hotovo. Ale to není tak jednoduché…

Notino je ve 24 zemích, což je v podstatě 24 různých objednávkových procesů. Na první pohled jsou si podobné, ale když jdeme trochu do hloubky, tak zjistíme, že v Bulharsku se úplně jinak zadává adresa, v Německu je platební brána integrovaná přímo u výběru platby a třeba v Anglii je možné celý proces udělat přes PayPal. Na všechny tyto odlišnosti je při faceliftu třeba myslet.

Když už to děláme…

Pokud vidíme, že je někde opravdu viditelná chyba, tak ji samozřejmě opravíme. Příkladem může být třeba sjednocení dvou stejných hodnot - 0 Kč a zdarma. Dále také úprava selectboxu se 100+ položkami za našeptávací imput. Takových drobností jsme při faceliftu pár našli a určitě by byla škoda je přehlížet.

One team show!

Když se podíváme přibližně rok a půl zpět, tak u nás implementace vizuálních změn probíhala asi takto:

1. navrhli jsme vizuální úpravu (např. změna barvy tlačítka),
2. vytvořili jsme task pro vývojáře,
3. vývojový tým si ho zaplánoval. Samozřejmě s nízkou prioritou,
4. na úpravu, která trvala klidně jen 10 minut, jsme čekali i několik týdnů.

Je pochopitelné, že vývojáři mají často důležitější úkoly, než se vrtat ve stylech a ladit pixel perfect návrhy. Začali jsme tedy přemýšet, jak se tohoto zdlouhavého procesu zbavit.

Tohle je Matúš. Je součástí našeho UX týmu, ale není tak úplně UXák. Matúš je frontend kodér, a díky němu jsme schopni obejít vývojové implementační kolečko a vizuální úpravy zvládáme nasazovat v podstatě okamžitě. Facelift objednávkového procesu tak byl kompletně v režii UX týmu.

Nečekejte zázrak

Zdroj: Google, Need for speed research

Obecně asi žádné vizuální úpravy výrazně nezlepší konverzní poměr ani nevydělají fůru peněz. Je spousta důležitějších faktorů, ale pokud chceme mít pomyslnou pyramidu kompletní, tak i vzhled a atraktivita webu hraje svoji roli. Já věřím, že z dlouhodobého hlediska se investice do vzhledu určitě vyplatí, ať už ke vztahu k použitelnosti, důvěře, nebo brandingu.

Nikdo přece nechce chodit na ošklivý web. 😊 Díky!