Az online tér és az e-kereskedelem egyik legnagyobb előnye az, hogy nagyon dinamikusan fejlődik. Folyamatosan jönnek ki az újdonságok és jelennek meg friss trendek, amelyek mind a fogyasztói igényeknek magasabb szintű kielégítését célozzák meg.
Ugyanúgy, mint más területeken, a webdesign-ban is évről-évre vannak újdonságok, amelyek arra hivatottak, hogy a felhasználói élményt magasabb szintre emeljék. Sok esetben ez a gyors ütemű fejlődés viszont egyfajta hátrányt is hordozhat magában, hiszen elég pár évnek eltelnie ahhoz, hogy a webáruházunk megjelenése elavultnak minősüljön.
A Velekey Ékszervilág webáruház gyökérproblémája is az volt, hogy eljárt felette az idő. Az oldal kinézete a régi design trendeket követte, ezért szerettek volna egy új, korszerűbb arculatot – ilyen téren is felvéve a konkurensekkel a versenyt.
Ebben a cikkben elmeséljük, hogy milyen munkafolyamatok mentén alkottuk meg a Velekey Ékszervilág webáruház egyedi megjelenését a Shoprenter rendszerében.
Kihívások
Egy projekt sem izgalmas kihívások nélkül, melyek azokról az ügyfélproblémákról szólnak, melyeket a design-nal kell orvosolni. Jelen esetben a problémák az alábbiak voltak:
- Elavult design, amely nem követi le a mai design trendeket, emiatt elveszíti azt a letisztultságot és eleganciát, amit a célcsoport elvár.
- A boltban nem volt lehetőség kiemelni egy-egy partnert, fontos vagy népszerű márkát (mint pl.: a Pandora).
- Mindemellett fontos igény volt, hogy az új oldalon bemutatásra kerüljenek az üzletek / bemutatótermek a látogatók számára, hogy tudják személyesen is meg lehet tekinteni a webáruházban értékesített termékeket.
Azt már a projekt elején tudtuk, hogy az új látványban, a régi kinézet és a brand színvilágától nem szeretnénk eltérni. Ezért különösen nagy kihívás volt a csapatnak az, hogy alkossunk valami újat, úgy, hogy az ne csak egy “ráncfelvarrás” legyen.
Adatokra alapozott tervezés
Egy webáruház megjelenésének a tervezésekor ma már korántsem elegendő az, ha csak a szépérzékünkre és a szakértelmünkre hagyatkozunk. Elengedhetetlen, hogy a tervezést megelőzze egy olyan átfogó kutatás, amely abban fog segíteni, hogy a megtervezett design ne csak esztétikus legyen, hanem reflektáljon a felhasználók viselkedésére és az ügyfél igényeire egyaránt.
A felhasználók elvárják, hogy egy webáruház könnyen átlátható és navigálható legyen. Ezen kutatások segítségével megérthetjük, hogy a felhasználók miként lépnek interakcióba az oldallal, és ezáltal optimalizálhatjuk a felhasználói élményt.
A felhasználók viselkedésének jobb megismerésére a Hotjar és a Google Analytics volt a segítségünkre.
Első lépésként integráltuk a Hotjar-t a meglévő webshopba, hogy a különböző hőtérképek segítségével jobban megismerjük a webshop látogatóinak viselkedését és feltárjuk a legfontosabb optimalizálandó pontokat. A vásárlói viselkedést ellenőriztük mobilon és desktopon is, hogy pontos képet kapjunk mindkét platform látogatóiról.
Mit tudtunk meg a Hotjar hőtérképekből?
A régi kinézetben a főoldalon volt egy “Márkáink” szekció, ahol szinte az összes forgalmazott márka logója megjelent kattintható formában. A kattintás térkép egyértelműen megmutatta, hogy a rengeteg felsorolt márkából, négyre kattint a látogatók nagy része.
Ebből született is egy döntés, miszerint az új látványterven ezeket a márkákat ki kell emelni a főoldalon, hiszen a felhasználók nagy része ezeket keresi. Ha kiemeljük, megkönnyítjük számukra a navigációt.
A görgetés térképek azt mutatták, hogy a látogatók főként csak az oldal felső harmadát nézték át. Így a csapatunk már a drótváz kialakításakor úgy építette fel a webshop elemeinek hierarchiáját, hogy a látogatók döntő többsége legalább az oldal közepéig eljusson, hogy még több releváns információt találjon a webshopról, boltokról és a vásárolni kívánt termékekről.
A Hotjarból kinyert adatok azt is világossá tették számunkra, hogy melyek azok a termékkategóriák, amelyek a leginkább érdeklik a látogatókat. Ezért az ügyféllel közösen ezeket átbeszéltük és kategóriákat vontunk össze, helyeztünk át, a logikusabb menü elrendezés kialakítása és a navigáció megkönnyítése érdekében.
Google Analytics, mint fontos információforrás
A felhasználói élmény kutatás során megvizsgáltuk az áruház Google Analytics fiókjában lévő adatokat is, hogy még átfogóbb képet kapjunk a bolt működéséről és a célközönségről.
Összegyűjtöttük a látogatók demográfiai adatait, megvizsgáltuk, hogy az egyes eszközök milyen szerepet töltenek be a webshop életében.
Mint látjuk, a vásárlók többsége a 35 – 54 közötti korosztályba sorolható és főként nő. Elmondható továbbá, hogy a célközönség elsődlegesen a mobilján böngészi a webáruházat, Android és iOS eszközről.
Design szempontból ezek az adatok több fontos információt is hordoznak:
- Egyértelműen látszik, hogy képek, a formák és az alkalmazott betűtípusok esetén érdemes lesz a nőiesebb vonalat képviseltetni az oldalon.
- A látogatók korosztályából és a webáruház termékeinek árkategóriájából ítélve, azt is megtudhattuk, hogy a webáruház vásárlói főként azok a nők, akik jövedelmüket tekintve a közép vagy felső osztályba tartoznak, stílusban pedig a modern, exkluzív és letisztult vonalat képviselik.
Ezeket az adatokat összevetettük a Hotjar-ban szerzett tapasztalatokkal a konverzió minimalizálása érdekében, és ezek fényében indult el a drótváz és a látványterv kialakítása.
Drótváz (wireframe)
A látványterv készítése előtt a drótváz létrehozásával kezdtünk. A drótváz megrajzolásánál figyelembe vettük a Hotjar hő- és klikktérképek eredményeit, a Google Analytics adatokat, valamint a projektindító megbeszélésen feljegyzett ügyféligényeket is.
A webáruház drótvázát elkészítettük a főoldalra, a kategória oldalra, a termékoldalra, valamint a Rólunk oldalra is, mert ebben az esetben ez is egy fontos szerepet betöltő oldal volt.
Miután az ügyfél is átnézte és jóváhagyta a webáruház drótvázon ábrázolt tartalmát, a designer kollégánk megkezdte a látványterv kialakítását.
Látványterv
Mielőtt bemutatnánk a végeredményt, érdemes a régi designra is vetni egy pillantást, hogy könnyebben meg tudjuk állapítani a változásokat:
A Velekey Ékszervilág régi megjelenése
Görgess az ablakban, hogy a teljes oldalt áttekinthesd!
A legnagyobb nehézséget a projekt során a látvány kialakítása jelentette. Mivel az új látványban, a régi kinézet és a brand színvilágától nem szerettünk volna eltérni, nagy kihívást jelentett számunkra, hogy alkossunk valami újat, úgy, hogy az ne csak egy “ráncfelvarrás” legyen.
A tervezés során szem előtt tartottuk azokat a következtetéseket is, amelyeket előzőleg a Google Analytics adatokból kiderítettünk a célcsoportról.
A látványtervet szintén négy oldal esetén készítettük el:
- Főoldal
- Kategória oldal
- Termékoldal
- Rólunk oldal
Ebben a cikkben csak a főoldalt és a termékoldalt mutatjuk be, ugyanakkor ha szeretnéd a teljes webáruház új megjelenését megnézni, látogass el a velekey-ekszervilag.hu oldalra és böngéssz kedvedre.
Új főoldal
Görgess az ablakban, hogy a teljes oldalt áttekinthesd!
Új termékoldal
Görgess az ablakban, hogy a teljes oldalt áttekinthesd!
Az új megjelenéssel eleget tettünk az ügyféligényeknek és elhárítottuk az említett problémákat:
✅ Az elavult design már a múlt, a webáruház a mai UX trendeket követi.
✅ A webáruház főoldalán kiemelésre kerültek a fontosabb partnerek, népszerű márkák.
✅ Feltüntettük a bemutatótermeket is, hogy a látogatók tudják, hol tekinthetik meg személyesen is a termékeket.
Konverziónövelő elemek
A látvány mellett fontos volt, hogy az új webáruház funkcionalitásban is alkalmazkodjon a mai UX trendekhez, ezzel is javítva a felhasználói élményt és növelve a konverziós arányt.
Ennek érdekében több konverzió növelő funkció is beépítésre került:
- Egyedi lenyíló menü, vagy megamenü
- Rögzített kosárba gomb a termékoldalon
- Lenyíló mini-kosár
- Animációk, hoover effektek
A következő pontokban részletesebben is kitérünk arra, hogy ezeknek mi az előnye egy webáruház számára, és hogyan járulnak hozzá a konverzió növekedéséhez.
A navigáció kialakítására külön figyelmet fordítottunk, ezért az új webshop kapott egy egyedi legördülő menüt, más néven megamenüt. A lenyíló menü segítségével a felhasználók gyorsan és könnyen hozzáférnek a különböző termékkategóriákhoz, amely növelheti az oldalon eltöltött időt és az oldalon végzett tevékenységeket. Ezáltal egy jól kialakított menü hozzájárulhat a konverziók optimalizálásához.
Rögzített kosárba gomb a termékoldalon
Ez a funkció ahhoz járul hozzá, hogy a hosszabb termékoldalak esetén a felhasználónak ne kelljen felgörgeti a Kosárba gombhoz, ha eldöntötte vásárlási szándékát. A tapasztalataink azt mutatják, hogy ez a funkció jelentősen támogatja a termék kosárba helyezését, hiszen ha a termékleírás egy adott mondata meggyőzi a látogatót, görgetés nélkül kosárba teheti azt, majd zavartalanul olvashatja tovább a termék részleteit.
Lenyíló mini-kosár
Lehetővé teszi a vásárlók számára, hogy könnyen ellenőrizzék a kosaruk tartalmát anélkül, hogy elnavigálnának az oldalról. Ez javítja a felhasználói élményt, mivel nem szükséges a vásárlóknak oda-vissza kattintani a Kosár oldal és egyéb más oldal között, ha több terméket is vásárolni szeretne. A lenyíló mini-kosárban a vásárlók módosíthatják is a kosár tartalmát.
Animációk, hoover effektek
A webáruházban több olyan animáció is található, melyeket a felhasználó aktivál, mikor interakcióba lép az adott elemmel.
Az animált hover effektek vonzzák a figyelmet és interaktívabbá teszik az oldalt. Amikor egy felhasználó egy gomb vagy kép fölé viszi az egérmutatót, az animáció (legtöbb esetben szín változás) segít abban, hogy érezze, valóban interakcióba lépett az elemmel.
Ezek mind-mind olyan elemek a webáruházban, amelyek – amellett, hogy profibb megjelenést adnak egy oldalnak – segítik a navigációt, növelhetik az elköteleződést és a bizalom kialakítását, könnyítik a döntéshozatalt és ezáltal növelhetik a konverziót.
Elképesztő eredmény: 23% konverziós arány növekedés ?
Az új megjelenést 2023. november 20-án élesítettük, melyet az elmúlt napokban monitoroztunk, hogy az eredményekről beszámolhassunk.
A legtöbb esteben két összehasonlítást szoktunk ilyenkor végezni a Google Analytics segítségével.
Elsőként az új design élesítése előtti 60 napot szoktuk összevetni az élesítést követő 60 nap adataival, ahol fő mutatóként a konverziós arányt (Tranzakciók / Munkamenetek x 100) vizsgáljuk.
Ugyanakkor a Velekey Ékszervilág esetében ezt az elemzést kénytelenek voltunk kihagyni, ugyanis az élesítés pont egy erőteljes, év végi kampányidőszak (Black Friday és Karácsony) előtti héten ment végbe. Így nem volt meglepetés a jelentős konverzió növekedés a következő 60 napban, ami nem a mi érdemünk, azaz elsődlegesen nem a design megújulásnak tulajdonítható.
Az ilyen esetekben csak a második összehasonlítás tud mérvadó lenni, amikor az élesítést követő 60 napot az előző év azonos időszakával vetjük össze (2022.november 20. – 2023. január 20. és 2023. november 20. – 2024. január 20.). Így a szezonalitást is ki tudjuk zárni.
Az adatok elemzését követően megállapítottuk, hogy az adat alapú tervezés ismételten bizonyította hatékonyságát, ugyanis a konverziós arány 23%-kal nőtt az új egyedi design időszakában.
Konverziós arány változása = 1 – (1,88 / 2,44) = 23
A fent bemutatott konverzió növelő elemek és az adatokra alapozva megtervezett egyedi design jelentősen hozzájárult a webáruház eredményességéhez.
Ezúton is köszönjük a bizalmat a Velekey Ékszervilág csapatának! A közös munka rendkívül gördülékeny volt és mérhetetlen boldogsággal tölt el minket, hogy hozzájárulhattunk a webáruház sikerességéhez.
Ha Te is szeretnél javítani webáruházad megjelenésén és hasonló eredményeket elérni, csapatunk segítségére bármikor számíthatsz. Egyedi design szolgáltatásunk iránt ezen az oldalon tudsz érdeklődni.
A szerzőről:
