Začiatkom januára 2015 sme začali vylepšovať použiteľnosť a zvyšovať predaj jedného z najväčších eshopov v oblasti predaja kníh a učebníc na Slovensku Preškoly.sk.

Naša práca spočívala v spracovaní podrobného auditu použiteľnosti a následne v pripravovaní návrhov, či už na zmenu grafických prvkov alebo štruktúry, alebo doplnenie prvkov, ktoré mali potenciál zvýšiť predaj. Na zapracovanie viacerých odporúčaní bolo potrebné zrealizovať AB testing, aby sme mali istotu, či náš návrh bude skutočne úspešný. Niekedy však bola zmena zapracovaná aj bez testovania, a to z dôvodu, že jej potreba bola úplne zjavná.

Prvým krokom bol audit použiteľnosti, v rámci ktorého sme pristúpili k analýze a spísaniu jednotlivých odporúčaní, ktoré bolo vhodné na webstránku implementovať.

Cieľom bolo, aby návštevníci tejto webstránky jednoduchšie pochopili postup pre splnenie dopredu stanoveného cieľa. Súčasne sme sa zamerali na percentuálny nárast konverzií, teda na to, aby z návštevnosti ľudia vo veľkej miery konvertovali.
 

Prvý AB testing

Jednou z prvých zmien, ktoré sme potrebovali otestovať, boli farby cien a tlačidiel (CTA) „Do Košíka“. Takto prebiehal prvý AB testing:

Druhý AB testing

Následne sme navrhli zmenu hlavičky. Tá spočívala najmä v rozmiestnení vyhľadávania, registrácie a záložiek. Potom sme pristúpili aj k zmene pozadia webstránky.

Takto prebiehal druhý AB testing:

Zmena košíka

Ďalším z našich hlavných návrhov bola zmena štruktúry a dizajnu košíka. Klientovi sme síce navrhli jeden z najkontroverznejších typov nákupného košíka, avšak po jeho otestovaní sa táto voľba ukázala byť veľmi úspešná.

Priebeh tvorby nového košíka: Prvým krokom bola analýza starého košíka a spísanie obsahových požiadaviek a predstáv klienta.

Náhľad starého košíku
 

Po analýze starého košíka sme navrhli zmeniť nákupný proces v košíku z jednokrokového na trojkrokový, ktorý pozostával z:

1. prehľadu košíka, dopravy a spôsobu platby
2. dodacích údajov
3. zhrnutia objednávky

Hneď ako sme sa pustili do vytvárania košíka, pristúpili sme k vytvoreniu wireframov (skíc webu), aby sme si zadefinovali všetky prvky, ktoré má nákupný košík obsahovať, ale aj to, kde presne sa majú nachádzať.
 

Pre lepšiu predstavivosť o pojme wireframe pripájame aj krátke vysvetlenie:
Wireframy ("drôtené modely") stránok veľkou mierou pomáhajú pri návrhu dizajnu, obsahu i funkcií webových stránok. Bývajú jedným z prvých výstupov, ktoré sa prezentujú klientovi, aby pochopil rozmiestneniu a forme projektu stránky. Wireframe definuje textový aj grafický obsah, rozmiestnenie funkčných prvkov, ale aj navigáciu a znenie nadpisov, kľúčových textov či tlačidiel. Wireframe nie je grafickým návrhom, neobsahuje obrázky a je tvorený len pomocou čiar a textu.

Po zadefinovaní štruktúry sme sa pustili do vytvorenia nového trojkrokového dizajnu košíka.

Náhľad nového košíku
 

×

Náhľad nového košíku

Dôležitými atribútmi, na ktoré sme pri vytváraní košíka stále mysleli, boli jednoduchosť, rýchlosť a zrozumiteľnosť.

1. Jednoduchosť
● Dosiahli sme ju tým, že zákazník pri nákupe vždy vedel, kde sa nachádza, a to vďaka označeniu jednotlivých krokov číslami 1,2,3. Hneď pod jednotlivými krokmi sme zároveň umiestnili nápovedu, akým spôsobom má zákazník pokračovať
 

2. Rýchlosť
● Ako súčasť košíka sme využili možnosť zrýchlenej registrácie, ktorá výrazne zjednodušila nákupný proces. Stačí totiž, ak zákazník vyplní len svoj e-mail a telefónne číslo

● Hneď v prvom kroku sa dozvie, aká je výsledná cena za objednávku, pretože vyplní nielen spôsob dopravy, ale aj spôsob platby

● Zákazník dostal možnosť zaregistrovať sa aj pomocou sociálnych sietí (Facebook, Google+)

● Pri možnej chybovosti údajov sa zákazník môže rýchlo vrátiť na predchádzajúci krok a údaje jednoducho zmeniť

● Všetky údaje sa spracovávajú na pozadí, vďaka čomu návštevník nie je rušený zdĺhavým prechodom medzi podstránkami

3. Zrozumiteľnosť
● Vertikálna štruktúra dáva návštevníkovi jasne najavo, že ak chce ísť ďalej, stačí stránku scrollovať nižšie a stlačiť tlačidlo

● Zákazník má zároveň stále na očiach informáciu o doprave zadarmo pre prípad, ak by si uvedomil, že mu stačí doobjednať tovar len za malú sumu a nebude musieť platiť za dopravu vôbec
 

Aké výsledky sme dosiahli?

Údaje pred nahodením košíka bez zapracovania AB testingov:

● testovanie v marci 2015 – konverzia 7,02 %, testovaných 32 800 návštevníkov

● testovanie v júny 2015 – konverzia 5,98 %, testovaných 10 000 návštevníkov

Po nahodení košíka bez zapracovania predošlých AB testingov:

● nárast konverzie približne o 100 %, približne o 9 % v závislosti od obdobia

● testovanie v novembri 2015 – konverzia 14,39 %, testovaných 14 000 návštevníkov

● testovanie v december 2015 – konverzia 19,32 %, testovaných 66 804 návštevníkov

● testovanie v marci 2016 (na porovnanie s minulým rokom) – konverzia 17,40 %, testovaných 133 345 návštevníkov

Konečný výsledok

 

Návštevníkom, ktorí nemajú radi zmeny, sme však naďalej nechali možnosť výberu medzi novým a starým nákupným košíkom. Nákup cez starý košík však v súčasnosti využije zo 14-tisíc návštevníkov len mizivé percento, a to konkrétne 0,2 %.