Diners.hr: Kako je nastao najbolji website u Hrvatskoj

Kako je nastao najbolji website u Hrvatskoj

Nagrada za najbolju web stranicu u sklopu nagrada MIXX na festivalu Dani komunikacija ponovno je otišla u ruke agenciji Web Burza. Riječ je o stranici Diners.hr, a kako je ona nastala te koje je ciljeve postigla, otkrivamo.

U novom svijetu bankarstva i fintecha, web siteovi su odraz toga koliko je neka kompanija spremna nositi se s izazovima koje donosi sutra. S druge strane, na tržištu se ubrzano pojavljuju novi, mladi igrači kao što su Revolut ili N26, koji tjeraju industriju da se mijenja sve brže.

Iz Diners Cluba Hrvatska prepoznali su da je pravi trenutak za promjenu i obratili su nam se. Njihov tadašnji web bio je zatrpan, a proces naručivanja kartica kompliciran. Site je odavao dojam da takav jedan brend ne razumije svoje korisnike.

Par info

Diners je jedan od najprepoznatljivijih brendova u financijskom sektoru. Na webu svaki mjesec ostvaruje 90.000 posjeta. Danas financijske usluge moraju biti jasne svima, jednostavne i dostupne u tren. Pogotovo putem mobitela koji čini dvije trećine svih posjeta, a na kojem je ekran manji, internet sporiji, a pažnja korisnika kraća.

UX radionica za predjelo

UX radionice naš su recept za kvalitetan početak suradnje s novim klijentom. Recimo da je to neki naš spinoff na Google Ventureov Design Sprint. To vam je ono kad se zatvorimo 3-4 dana sa svim klijentovim “stejkholderima u sobu” i onda koristeći razne alate dolazimo do nekih zaključaka vezanih uz smjer kojim trebamo krenuti.

Prvo se dobro napijemo kave pa kad postanemo svi dovoljno agresivni, onda se svađamo. Zatim ide red upiranja prstom u veliku bijelu ploču, koje završava s lijepljenjem puno šarenih post-ita po zidovima. I tako u krug. 

Sad ozbiljno. UX radionice nama olakšavaju razumijevanje klijentovih potreba jer sva moguća pitanja možemo postaviti ljudima na licu mjesta, a klijentu olakšava razumijevanje potencijalnih problema i razloga zbog kojih trebamo odabrati neki smjer ili od njega odustati. I, što je najbitnije, olakšavaju nam proces definiranja mjerljivih ciljeva koje treba ostvariti i kojima je cijeli projekt podređen.

Radionica za Diners.hr odličan je primjer koliko UX radionice mogu olakšati cijeli daljnji proces. S klijentom smo analizirali posjećenost, sales funnel, tržište, organizaciju, kupce, proizvode i konkurencije. Izradili smo wireframeove i klikabilne prototipove, testirane na ciljanoj skupini kako bismo bili uspješniji i smanjili rizike. Preciznim planiranjem omogućili smo da ova faza bude jednostavna i da nema probijanja budžeta i rokova.

Za vrijeme radionice kreirali smo 5 smjerova tona glasa (od super ozbiljnog do super opuštenog) i na kraju se na temelju feedbacka s testiranja odlučili za srednju opciju koja kombinira ozbiljnost i opuštenost. Napravili smo i inventuru sadržaja kako bismo neke odluke lakše donijeli.

Jasni ciljevi

Nakon radionice, ciljevi i očekivanja oko redizajna su bili jasniji. Redizajn je primarno trebao bolje i jasnije predstaviti korisnicima Diners, njegove ponude i pogodnosti. Posljedično smo željeli postići bolje korisničko iskustvo i tako podići stopu konverzija za 100% (omjer posjeta koje rezultiraju ispunjenim zahtjevom za novu karticu).

Pristup

Odlučili smo prvo dekonstruirati, a onda rekonstruirati sve segmente weba kako bismo bolje i jednostavnije prenijeli poruke, olakšali razumijevanje i snalaženje. Tako smo smanjili kognitivni napor te u konačnici povećali udio onih koji se odlučuju za narudžbu kartice.

Ciljane skupine smo definirali prema namjerama u obliku persona. Primarni fokus bio je na privatne korisnike koji čine najveći udio posjetitelja Diners weba, a zatim na trgovce i poslovne korisnike kao sekundarne skupine.

Izradili smo smjernice za implementaciju Google Analyticsa, radi uvida u ponašanje posjetitelja i performanse weba (dubina scrollanja, segmentirani klik eventi, goal funneli).

Koristeći inventuru sadržaja koju smo na UX radionici napravili, presložili smo informacijsku arhitekturu.

Od nemani do prijatelja

Nakon što je informacijska arhitektura bila pred nama, prvi zadatak bio je pročišćavanje sadržaja i pisanje novog copyja. Na UX radionici definirali smo da pričamo iz perspektive korisnika (npr. “živim jednostavno”) i obraćamo im se na “ti”. Koristimo kratke, direktne poruke koje korisniku odmah jasno komuniciraju što može očekivati i kako. Tako smo uklonili strah od “financijske nemani”.

Fleksibilna kartica, fleksibilan dizajn

U vizualnom smo se dijelu riješili svih nepotrebnih elemenata kako bismo postigli veću preglednost. U skladu s krovnom komunikacijskom strategijom i dizajn je, kao i copy, čist, jasan i pregledan, dok su bitne informacije uvijek na servirane na dlanu. Grupirali smo kontekstualno povezan sadržaj i uklonili suvišne stranice. Diners.hr sad ima samo tri stavke u navigaciji.

Fleksibilnost Dinersovih kartica nešto je što je obavezno trebalo prožeti cijelim siteom. Pa je tako i sam dizajn sitea fleksibilan, modularan. Trenutni dizajn bez problema u sebe može ukomponirati vizuale iz budućih kampanja.

Vizualnu konzistenciju osigurali smo velikim D okvirom za fotografije koji smo provukli kroz cijeli site.

I dok je prijašnji site krasila nepregledna lista kartica i proizvoda, mi smo ih grupirali po personama, a u središte pozornosti postavili glavni proizvod – osnovnu Diners karticu.

A ispod haube…

Web smo implementirali kao Single Page Application. SPA pruža iskustvo kao desktop aplikacija. Ubrzali smo interakciju s dijelovima weba (npr. otvaranje izbornika, odabir stranice) i izbjegli osvježavanje stranica. Dinamički učitavamo samo one komponente koje korisnik trenutno vidi na ekranu (lazy loading i code splitting). Rezultat je brža aplikacija i bolje korisničko iskustvo. Sve su komponente neovisne i mogu se presložiti. Za izvrsne rezultate na tražilicama, napravili smo i SEO optimizaciju. Koristili smo tehnologije Vue, Webpack, Node.js i Puppeteer.

Rezultati…

…su bili spektakularni. Ubrzali smo učitavanje stranica. Lighthouse mjeri performance 100/100 i za desktop, i za mobile, a bounce rate je manji za 40%. Ovo govori da korisnici lakše navigiraju kroz sadržaj te u cijelosti imaju bolje korisničko iskustvo. Prije redizajna, stopa konverzije je bila 0,75%, a nakon redizajna, porasla je na 3,5% (35 od 1000 posjeta zatraže karticu). Redizajnom smo unaprijedili stopu konverzije za 362%. Tako smo omogućili veliko povećanje ROAS-a kroz oglašivačke kampanje.

Malo hrabrosti i malo pameti

Lekcija koju klijenti mogu naučiti iz ovoga je da nekad uz malo hrabrosti poslovni rezultati mogu biti vrhunski. Dinersovcima sigurno nije bilo lako kad smo im “sjekirom” srezali više od polovice informacija koje su imali na siteu, ali su shvatili da su neke teške odluke potrebne kako bi se rezultati postigli.

S druge strane, mi u agencijama trebamo više učiti o poslovanju naših klijenata, jer jedino tada možemo imati argumente za poteze koji će od klijenta zahtijevati teške odluke.

Svašta mi je prošlo kroz glavu, ali da ćemo s ovim projektom osvajati nagrade nije mi bilo ni na kraj pameti. Ne zato što nisam vjerovala u projekt, nego zato što su mi cijelo vrijeme i fokusu bile neke druge, bitnije stvari – kako bolje razumjeti klijenta, njegove poslovne procese i vrijednosti te potrebe korisnika njihovih kreditnih kartica.

Vjerujem da to i je tajna našeg uspjeha kroz sve ove godine. Ako želiš osvajati nagrade, nemoj raditi projekte kako bi osvojio nagrade. Radi projekte kako bi krajnjim korisnicima olakšao život jer takvi projekti postižu poslovne rezultate. A takvi projekti bit će prepoznati.

ponuda

Komentari

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Startupi i poslovanje

MVT Solutions iz Pisarovine osigurao 100.000 od 300.000 eura vrijedne runde investicije za brži i jeftiniji razvoj IoT-ja

Ovaj domaći startup u tri je godine, bez ikakve vanjske investicije, razvio IoTaaP, alat koji može uvelike olakšati razvoj IoT proizvoda različitim klijentima. Osim hardvera, njihov poslovni model se skalira kroz softver i cloud, a koliko uspješno su se rješenjem i radom potvrdili do sada, najbolje govori i vijest o prvoj investicijskoj rundi predvođenoj domaćim investitorom.

Video

Što se dogodi kada ekstremnom trolu oduzmete megafon, odnosno društvene mreže?

Počne skapavati od gladi, sudeći prema uvijek dramatičnom istaknutom pripadniku 'alt right' pokreta, Milu Yiannopoulosu iliti Neru iliti Milu Andreasu Wagneru iliti Milu Hanrahanu, što je zapravo njegovo pravo ime.

Internet marketing

Hrvatski brendovi boje se zauzeti stav u marketingu (i upravo time gube!)

U najnovijoj epizodi Netokracija podcasta bavimo se brendovima koji se ne boje zauzeti stav. Takvih je u hrvatskoj vrlo malo, rijetki se odluče na taj rizik, a ne shvaćaju da je zapravo upravo to najriskantniji potez.

Što ste propustili

Kultura 2.0

Gen Ashley i Christina Richter na 8. #LadiesZG: bez uzora i edukacije nema jednakosti u tehnološkoj industriji

Kako bismo privukli više žena u tehnologiju trebamo podržati i trenutne žene u industriji koje će svojim primjerom pokazati da ovaj sektor nije "muški svijet".

Startupi i poslovanje

Hrvatski SysKit: Za 90% funkcionalnosti inspirirali su ih njihovi korisnici, među kojima je i američka vlada

Hrvatska softverska tvrtka SysKit već 10 godina pomaže sistemašima i administratorima u više od 3000 tvrtki diljem svijeta. Njezin suosnivač Frane Borozan otkrio mi je strategiju koja im je omogućila kompetitivnost na svjetskoj razini i približila ih ostvarenju želje da postanu jedan od najvećih proizvođača softvera u Hrvatskoj.

Startupi i poslovanje

Indienogo – kako će izuzimanje Hrvatske s ove platforme utjecati na domaće projekte?

Indiegogo više nije službeno podržan u Hrvatskoj, što znači da ne možete više na njega postavljati kampanje ako ste tvrtka registrirana u Lijepoj našoj. Istražili smo kako je do toga došlo, a i kako će to utjecati na domaće projekte koji platformu aktivno koriste.

Najava

Ulazite li u digitalnu industriju, krenite s razvojem digitalnih proizvoda

Nekada smo u digitalnoj industriji radili isključivo na tuđim projektima, jer nismo mogli birati. Danas možete razvijati vlastite digitalne proizvode i raditi na svim njihovim aspektima. Počnite s besplatnom radionicom Netokracije i Raiffeisen banke o tome kako krenuti u 'product'!

Startupi i poslovanje

Realno stanje startupa iliti kako mi je u dva tjedna američka tech scena skinula ružičaste naočale osnivača

Što vas može naučiti samo nekoliko dana u Seattleu, jednom od najpoznatijih startup i tech gradova na svijetu? Možda kako ste na svoje poslovanje do sada gledali malo previše "romantično".

Startupi i poslovanje

Rukoplastika, gaming kontroler za osobe s fizičkim invaliditetom, pobjednik je Good Game Liftoffa!

Startup Rukoplastika, koji nastoji razviti personalizirane igraće kontrolere i sustave za osobe s fizičkim nedostacima i invalidnostima pobjednik je Good Game Liftoffa 2019.