Jak jsme v Notinu navrhovali vánoční množstevní slevu

Ve spolupráci s partnery (dodavateli) jsme na Vánoce (2020) připravovali kampaň “Nakup dárky pro celou rodinu”. Součástí kampaně byla mimo jiné i akce, kdy u vybraných produktů zákazník dostane množstevní slevu - čím více produktů nakoupí, tím větší slevu dostane. Na našem designerském týmu pak bylo navrhnout, jak tuto akci budeme komunikovat na webu a v aplikaci.

Zadání

V tomto případě jsme dostali poměrně jasné zadání. U vybraných produktů budou platit následující pravidla: V případě, že zákazník koupí 2 kusy, má slevu 3% na dané produkty. V případě 3 kusů je sleva 5%, v případě 4 a více kusů je sleva 10%.

Tato množstevní sleva se bude vztahovat na 400–500 nejprodávanějších produktů napříč kategoriemi. Cílem je, aby zákazník nakoupil více položek než obvykle.

*nakonec se ta procenta ještě měnila, takže ani v návrhu to úplně nesedí

Koncepty

V době návrhu jsme ještě neměli pojmenování pro celou akci, pracovně jsme ji tedy nazvali “zlaté prasátko”. Padaly tehdy i divočejší názvy, ale postupem času se tento název uchytil. Dodnes když se řekne “zlaté prase”, spousta kolegů ve firmě ví, co to znamená :)

Na řadu přišly první koncepty, kreslené většinou pouze na papír. Často v této fázi děláme, že každý designér navrhuje řešení samostatně. Nebylo tomu jinak i v tomto případě.

Cílem je rychle získat vícero konceptů a zároveň se vzájemně v rámci návrhu neovlivňovat.

Bohužel jsem dohledal pouze jeden z konceptů. Ten, který nám po diskuzích nakonec přišel jako nejlepší, a chtěli jsme ho dále rozvíjet.

Ukázka náčrtků vítězného konceptu

Návrh

Poté co jsme se shodli na konceptu, přišel na řadu již návrh ve Sketchy. S pomocí naší UI knihovny prvků již poměrně rychle vznikly jednotlivé obrazovky.

Jako spojovací vizuální prvek jsme použili ikonu “zlatého prasátka” po vzoru pracovního názvu. Věděli jsme, že finální vizuál bude jiný, ale pro potřeby navržení flow a testování naprosto postačil. A my jsme tak nemuseli zbytečně ztrácet čas finální grafikou, kdyby se pak například ukázalo, že celkový koncept nefunguje.

produkty umožňující množstevní slevu jsou označeny ikonou

na produktovém detailu je opět stejná ikona

kliknutí na odkaz “Nakup víc a ušetři” vyvolá modální okno s vysvětlením celé akce

landing page která vysvětluje celou akci

zobrazení množstevní slevy v košíku

Testování

Jednotlivé obrazovky jsme propojili pomocí Invision do “klikacího” prototypu. Prototyp jsme pak testovali pomocí klasického uživatelského testování.

Ještě při návrhu jsme dělali “rychlo test”, kdy jsme kolegům (kteří o projektu nic nevěděli) ukazovali tento obrázek, zda pochopí, jak celá akce funguje. Výsledky nám potvrdili, že jdeme správným směrem.

Finální vizuál

Uživatelské testování dopadlo výborně, takže jsme mohli přistoupit k poslednímu bodu “návrhu”, a tím byla finální grafika. V tomto případě nám pomohlo naše grafické oddělení.

Pro celou akci bylo důležité, aby byl vizuál konzistentní napříč bannery, e-mailovou komunikací, webem i video reklamou. Grafické oddělení má u nás na starost vizuál v ostatních kanálech, dávalo tedy smysl, aby vytvořili i finální vizuál na webu.

Tento způsob práce, kdy designeři vymyslí a navrhnou mechaniku a grafici to pak “obarví”, se nám hodně osvědčila.

Můžete posoudit sami, jak vypadá finální vizuál oproti našim původním “wireframům”.

Díky Štěpán Rybníček, Petra Smiga, Vlastimil Svoboda, Patricie Šimáková