Zabalit jako dárek | UX/UI case study

Určitě to znáte taky. Chcete objednat dárek pro někoho blízkého, potom vám přijde domů hnědá krabice, kde se v bublinkové fólii krčí zamotaný produkt… Pokud ho chcete někomu dát, tak ho musíte rozbalit a pak znovu zabalit ideálně tak, abyste se při předávání nemuseli stydět. Obzvlášť pro nás chlapy je to docela složitá věc.

Může se to zdát úplně jednoduché a asi si říkáte něco jako “Prostě si na webu zaškrtnu dárkové balení a je hotovo”. V měřítku tak velkého e-shopu jako je Notino je to však mnohem složitější a pro nás designery rozhodně zábavnější.

Takhle to teď funguje… ale vezmu to popořadě.

UX cíl

Umožnit zákazníkům zabalit vybrané produkty do jedné nebo více dárkových krabic.

Již nějakou dobu jsme nabízeli možnost “Zabalit celou objednávku jako dárek”. To fungovalo relativně dobře, ale naráželi jsme na různé nedostatky, které jsme chtěli v nové verzi vyřešit.

• Chci jeden parfém pro maminku a druhý pro babičku… jak to mám sakra zabalit?
• K parfému chci ještě kartáček na zuby, ale nechci ho zabalit jako dárek. Rrrrr!
• Dostal jsem k nákupu dárek… bude taky v dárkovém balení?

Business cíl

Tady je to jednoduché. Cílem je prodat více krabic.

Nový projekt dostal pracovní název Gift packaging 2.0 — jdeme na to!

Research

Na začátku jsme si udělali rešerši — tzn. zkusíme se mrknout jak to dělá kokurence a okopírovat… tedy inspirovat se jejich řešením. 😊

Spousta e-shopů řeší dárkové balení stejným způsobem jako my v první verzi, ale nikde jsme nenašli možnost zvolit si produkty, které chci zabalit a mít možnost vybrat více krabic. Nezbývá nám nic jiného, než to vymyslet… 😁

Naše práce začíná v košíku

Samozřejmě na projektu již pracujeme na všech frontách. Musí se vyřešit fungování skladu, propagace na marketingu, IT oddělení řeší integraci do našich skladových, účetních a dalších systémů… No a náš UX team už začíná přemýšlet jak to celé navrhnout na webu.

Už před začátkem navrhování jsme věděli, že musíme vyřeštit základní body.

• V košíku dobře zviditelnit možnost dárkového balení.
• Umožnit uživatelům vložit produkty do více krabic.
• Možnost zvolit barvu dárkové krabice.
• Jednoduše odstranit jednotlivou krabici, nebo zrušit celé dárkové balení.

Postupně jsme přicházeli na další problémy, které bylo třeba v návrhu vyřešit. Ale o tom až později…

Design

Začali jsme formou Design studio, což zjednodušeně znamená, že každý z týmu samostatně vytvoří jednoduchý návrh — skica, wireframe, prototyp… Cílem je získat více možných řešení, které nejsou ovlivněné prací v týmu. Výsledek může být takový, že z každého návrhu společně vybereme nějakou část a vznikne jeden návrh.

Nápadů máme dost… snažíme se vybrat to nejlepší.

Pár úprav v košíku
Checkbox “Zabalit jako dárek” jsme již měli z první verze dárkového balení. Je tedy třeba “pouze” vymyslet jakým způsobem komunikovat, že nově umíme zabalit objednávku do více krabic a můžete si vybrat jaké produkty si zabalíte.

Checkbox pro výběr dárkového balení v košíku

Co se stane po kliknutí na “Zabalit jako dárek”?
Všichni jsme se shodli, že celý proces výběru dárkového balení nechceme dávat přímo do košíku. Tlačítko “objednat” by se posunulo o kus dolů a celkově by bylo kolem výběru balení příliš rušivých elementů, které uživatele v danou chvíli nezajímají. Jako nejlepší varianta se tedy nabízí modální okno, díky kterému máme více místa a taky větší fokus na výběr dárkového balení.

V týmu se velmi dobře doplňujeme, takže já se pouštím do návrhu ve Sketchi, Dejv ho později rozhýbe pomocí HTML a Peťka pomalu chystá scénáře pro uživatelské testování.

Prototypování

Jak jsem již naznačil výše, tak tentokrát jsme zvolili formu HTML prototypu. Je to sice trochu náročnější na realizaci, ale pro uživatelské testování je to super. Testovaný uživatel často vůbec nepozná, že se jedná pouze o prototyp. Navíc Davidovi jde kódování skvěle od ruky, takže HTML prototyp máme hotový velmi rychle.

Uživatelské testování

Tady musím za celý náš tým vzdát hold Peťce, která si vzala celé uživatelské testování na starost. Z výstupů jsme získali skvělé podněty a na základě nich jsme mohli prototyp upravit a vylepšit.

Cíl:
Základním cílem bylo otestovat, zda uživatel dokáže zabalit produkty do jedné či více krabic a objednat si tak dárkové balení.

Hypotéza:
Když….., potom,…. protože

• Když uživatel chce zabalit produkty jako dárek, potom zaškrtne checkbox “Zabalit jako dárek jednotlivé produkty nebo celou objednávku”.
• Když chce uživatel změnit barvu krabice, potom v modálním okně klikne na color picker pod fotkou.
• Když chce uživatel zabalit produkty jako dárek, potom zaškrtne checkboxem produkty, které mají v dárku být.

Vyhodnocení:
Červených míst (problémů) je stále dost. Víme však na čem pracovat, takže bolavá místa uděláme znovu a lépe. 💪

Vyhodnocení uživatelského testování… rozmazané je to schválně :)

Ještě tohle a ještě tohle…

Základní body máme již splněné a otestované. To důležité uživatelé zvládnou.

Na řadu přichází edge cases…​​​​​​

• Produkt se nevejde do dárkové krabičky.

• Dva stejné parfémy, ale jeden má vygravírovaný text.

• Do jedné krabice se vejde jen omezené množství produktů.

• Místo parfému si do dárkové krabice vloží dárek… např. 1,2 ml vzorek.

• Dárkové balení k určitému produktu zcela zdarma.

• Došly dárkové krabice na skladu.

• Vánoční dárkové balení.

Vše máme vyřešeno! Kolegyně Zuzka už programuje jako o život a Honza připravuje frontend.

Spouštíme!

Vše je připravené a otestované, můžeme spouštět. Začínáme v Česku a pokud půjde vše bez problémů, tak budeme pokračovat i v dalších zemích.

Pár čísel pro lepší představu

Ve špičce sezóny očekáváme až 100 000 objednávek denně. Pokud by jen pár procent zákazníků využilo službu dárkového balení, tak si určitě dovedete představit, kolik je to dárkových balení… fakt hodně. V číslech to vypadá asi takhle.

• ve špičce zabalíme až 5000 dárkových balení za den
• max. 3 produkty v jedné krabici
• 5–6 minut průměrně trvá nachystání jedné dárkové krabice
• ve špičce až 26 lidí pracuje pouze na balení dárkových krabic

Jak to vlastně funguje?

Nové dárkové balení už nějaký čas běží a při trafficu, který byl před Vánoci na Notinu můžeme říct, zda to funguje, nebo ne… a funguje to dobře! 🎉🍻

Data o prodejích dárkového balení máme přímo v databázi, kterou bereme jako “source of truth”. Pro měření a sledování uživatelů napříč celým webem používáme klasicky Google Analytics, Hotjar a Exponeu. Jak si vedeme celkově sledujeme pomocí nástroje Google Data Studio o kterém napsal supr článek náš team leader Peťa.

Závěrem

Až budete na Notinu objednávat dárkové balení, tak si na nás můžete vzpomenout. Snad si u toho nebudete říkat, kdo tohle vymyslel … 😁

Za každý feeback na článek i na dárkové balení budu moc rád!