Bevételnövelés Design Esettanulmány Konverzióoptimalizálás

+12% konverzió mobilon – ennyit számít egy modern design

8 perc olvasási idő

Ma már számos eszköz a rendelkezésünkre áll, hogy több szemszögből is feltérképezzük a webáruházunk fejlesztendő pontjait és azok kijavításával növeljünk a hatékonyságon. 

Gyarmati László az Aranyshop.hu webáruház tulajdonosa előszeretettel alkalmazza ezeket, folyamatosan figyelemmel követi webáruháza teljesítményét és alapvető teendőként tekint a folyamatos fejlesztésekre.

Már a  2015-ös induláskor is fontosnak tartották, hogy ne sablonos megoldásokkal vágjanak bele az online értékesítésbe, azonban szerettek volna egy biztos rendszert a webáruházuk mögé. Így esett a választásuk a Shoprenterre az akkori egyedi design szolgáltatásunkkal karöltve. Csapatunk pár hét leforgása alatt elkészítette a teljesen egyedi kinézetű webáruházat, mellyel hatalmas elégedettséggel indulhattak el és szerezhették meg első vevőiket.

“Így visszagondolva nyugodt szívvel elmondhatom, hogy nekünk viszonylag zökkenőmentesnek mondható volt az indulás. Köszönhető volt ez mindannak a sok segítségnek, amit tőletek kaptunk és annak döntésnek, hogy már induláskor igénybe vettük a Shoprenter egyedi design szolgáltatását. Mint utólag kiderült, ez volt az egyik legjobb döntés, amit meghoztunk, ugyanis így nem kellet bajlódjunk a beállításokkal, kinézettel, stb., hiszen profi kézbe került a dolog.” – Gyarmati László (Aranyshop.hu)

Eltelt azóta 7 év, ami az online világban hatalmas időtávot jelent. A trendek és a vásárlói szokások rohamosan változnak, sokan pedig nem tudnak ezekkel lépés tartani. Lászlóék csapata minden erőfeszítést megtett, azonban az elmúlt években 3 problémával találták szemben magukat:

  1. Az oldal már nem felelt meg a mai trend követelményeinek.
  2. Az online vásárlási szokások megváltoztak: Nőtt a mobilos forgalom, azonban nem volt olyan arányú a konverzió, mint ami elvárható.
  3. Az információs oldal nem volt megfelelően felhasználóbarát, ami abból látszott, hogy az ügyfélszolgálatra nagyon sok olyan kérdés futott be, amelyre a webáruház Gyakori Kérdések oldalán megtalálható volt a válasz.

Ezekre a problémákra nyújtottunk megoldást az egyedi design szolgáltatásunkkal. Az Aranyshop webáruházzal folytatott közös munkáról és annak eredményeiről olvashatsz most bővebben.

Korszerű, modern webáruház design

A 2015-ben tervezett téma már nem szolgálta ki megfelelően a mai felhasználói szokásokat, ezért szerették volna megújítani. Tervező csapatunk feltérképezte az oldalt és összegyűjtötte a változtatási javaslatokat.

A megoldás

Úgy láttuk, hogy amellett, hogy az egész oldalnak modernebb és letisztultabb kinézetet készítünk, fontos lenne olyan átalakításokat is eszközölni, melyekkel biztosítani tudjuk a megfelelő felhasználói élményt. Célunk az volt, hogy ezekkel a módosításokkal növelhetjük a webáruház konverziós arányát.

Az eredmény: egy letisztult, modern, felhasználóbarát webáruház

Teljes ráncfelvarráson esett át az oldal, azonban a fő ismertető jegyeket, színeket megtartottuk, hogy a visszatérő látogatóknak se legyen idegen a felület. 

  • Megújult a menü és a fő termékkategóriák könnyebben áttekinthetővé váltak.
  • Átalakult a főoldal, amely már jól szemlélteti az egyes kategóriákat és azokat az információkat, amelyek segítik a vásárlót az információgyűjtésben.
  • A betűtípus váltás és a betűk méretének növelése olvashatóbbá és átláthatóbbá tették az oldalt. A webáruház logója ennek megfelelően egy modern formát kapott. 
  • A fő célcsoportokat célzottan szólítjuk meg a webáruház főoldalán, melyre külön szekciót szenteltünk.

Íme pár képernyőkép, amely szemlélteti a változásokat:

Régi főoldal asztali nézeten
Új főoldal asztali nézeten
Régi lenyíló menü asztali nézetben
Új lenyíló menü asztali nézetben, ahol a kép változik az ékszerek tulajdonságainak megfelelően (pl. arany, ezüst)

Ha szeretnél teljes képernyő nagyságban megtekinteni a két design közötti eltéréseket, ezeken a linkeken megteheted:

A régi oldal egy archív változata

Az új oldal teljes pompájában

Az eredmények számszerűsítve

A fenti módosítások azzal a céllal történtek, hogy 

  1. növeljük a webáruház e-kereskedelmi korverziós arányát
  2. csökkentsük a látogatók visszafordulási arányát

Az eredmények szemléltetése érdekében összevetettük a webáruház megújulást megelőző 60 napjának, és az élesítést követő 60 napjának adatait. Íme az eredmények:

✅ Növeljük a webáruház e-kereskedelmi korverziós arányát – ezt az elvárást teljesítettük, hiszen sikerült 5,9%-os növekedést elérni.

✅ Növeljük a webáruház organikus forrásból származó konverziós arányát – Az organikus forgalom konverzióit azért vizsgáltuk meg külön, mert a teljes e-kereskedelmi konverziós aránnyal ellentétben (ahol egy kampány erősen befolyásolhatja az eredményeket) az organikus konverziós arány teljes egészében az áruház teljesítményén múlik, melyben nagy szerepet játszik a webshop designja és felépítése is.

Az eredmények ezt alá is támasztják, hiszen 9,73%-al nőtt a webáruház konverziós aránya az organikus forrást tekintve a változtatásokat követő vizsgált időszakban.

✅ Csökkentsük a látogatók visszafordulási arányát
Végül pedig a siker a visszafordulási arányt vizsgálva sem maradt el, 14,33%-al jobban teljesít az új oldal, köszönhetően a felhasználóbarátabb megjelenésnek és a könnyű navigációnak.

Mobilról érkező konverzió növelése

Ha megnéznénk bármely régóta működő webshop látogatottságát, eszközönként több évre visszamenőleg, nagy valószínűleg azt látnánk, hogy a mobilos felhasználók száma folyamatos növekedést mutatott, míg az asztali számítógépről böngészők csökkent. 

Gyakori trend az is, hogy a magas mobilos látogatottság ellenére a konverziók száma viszont már jelentősen elmarad ezen az eszközön és továbbra is az asztali nézet dominál. Ekkor merülnek fel jogosan azok a kérdések egy webáruház tulajdonosban, hogy:

  • Miért nem veszik meg a terméket mobilról?
  • Hogyan tudnék javítani a mobilos konverziókon?
  • Valami meggátolja a látogatóimat abban, hogy befejezzék a vásárlást mobilon?
  • Nem eléggé áttekinthető az oldalam a kisebb képernyőkön?

A megoldás

Megvizsgálva az Aranyshop mobilos kinézetét és használhatóságát megállapítottuk, hogy:

  • A menü nehezen áttekinthető és nem a webáruház termékkategóriáit tartalmazza lista nézetben.
  • A főoldal nem informálja megfelelően a látogatókat a webáruházban fellelhető termékkategóriákról.
  • A túl apró betűméret nehezen olvashatóvá teszi az információkat.
  • Általánosságban az áruház reszponzív, ugyanakkor nem mobilra optimalizált.
  • Egyéb konverzió romboló elemek is jelen vannak a checkout folyamatban.

Már az új design kialakításánál is gondoltunk a mobilos nézetre, hiszen ezeket a problémákat ismertük. Így a fenti pontok jelentős része együtt változott az asztali nézeten is fellelhető elemekkel, olyan kisebb módosításokat eszközölve mobilon, amely felhasználói szempontból könnyebben használhatóvá teszi az oldal böngészését. 

A legszembetűnőbb változtatás mobil nézetben az volt, hogy a menübe az információs oldalak helyett most már a termékkategóriák érhetők el, ezzel segítve a gyorsabb navigációt. 

Így nézett ki a régi menü és jobb oldalon pedig már a megújult verzió látható:

Régi menü
Új menü

Az eredmény: 12,66%-os konverzió növekedés mobil eszközön

A mobil nézet megújításához azt a célt tűztük ki, hogy növeljük a mobilos konverziók arányát. A fenti elemzéshez hasonlóan itt is a változás megelőző 60 nap és az élesítést követő 60 nap adatait vetettük össze.

Ezt az elvárást is teljesítettük, hiszen már a változást követő két hónapban 12,66%-al nagyobb konverziós arányt könyvelhettünk el a mobilról.

Átlátható és informatív Gyakori Kérdések oldal

Mivel a webáruház arany és ezüst ékszereket forgalmaz, a termékek sajátossága, hogy az érdeklődőkben gyakran merültek fel további kérdések vásárlás előtt, melyeket inkább telefonon és/vagy e-mailben tettek fel az ügyfélszolgálat felé. 

Emellett gyakori a termékek cseréje, javítása és visszaküldése is, melyek menedzselését szintén az ügyfélszolgálat végzi, így a sok beérkező ismétlődő kérdés jelentősen nagy terhet rótt az ott dolgozókra nap, mint nap.

Az indulástól kezdve volt egy Gyakori Kérdések oldal, amely összegyűjtötte a legtöbbet felmerülő kérdés-válaszokat, azonban ezek listája hosszú és több témára kiterjedő volt, melyek egy oldalra voltak ömlesztve. Emiatt az oldal nehezen átlátható volt és a látogatók elvesztek a sok információ között. A könnyebb megoldást keresve, a látogatók inkább telefonáltak. Az ügyfélszolgálat erőforrásai viszont korlátozottak, így megoldást kellett találni erre a problémára.

A megoldás

A megoldást egyértelműen egy jól strukturált, könnyedén átlátható oldalban látták, így a kérés is az volt, hogy a Gyakori Kérdések oldalt tegyük átláthatóbbá és a felhasználók számára könnyebben használhatóvá, azt remélve, hogy ezzel csökken az ügyfélszolgálat leterheltsége és a telefonhívások száma. 

Az eredmények

Csapatunk egy teljesen új szöveges oldalt tervezett, melyen

  • kategória választókkal, egymástól jobban elkülöníthetővé tettük a kérdésköröket,
  • egyedi űrlapokat üzemeltünk be minden kategória alá, ösztönözve a látogatókat az üzenet írására, telefonhívás helyett, valamint
  • vizuális elemekkel könnyebben átláthatóvá és felhasználóbarátabbá tettük az oldalt.
  • minden oldalon elhelyeztünk egy-egy belépési pontot ott, ahol vélhetően kérdés merül fel a látogatóban, így könnyedén megtalálhatják.

Ilyen volt a Gyakori Kérdések oldal:

Teljes oldal nézetért kattints a képre

Ilyen lett az átalakítás után:

A Gyakori Kérdések menüre kattintva a felhasználó elsőként a fő kérdés kategóriákkal találkozik csak:

Választást követően pedig az adott kategória kérdései válnak láthatóvá az oldalon. A kategóriák ekkor átkerülnek a kérdések felett lévő menübe, így könnyítve a navigálást a kérdéskörök között:

Pár hónap távlatából kijelenthetjük, hogy az átalakítás meghozta a gyümölcsét. A visszajelzések alapján felhasználóknak tetszik az új szekció és azóta a telefonhívások is csökkentek. Az ügyfélszolgálat munkáját az is könnyíti, hogy a weboldalról beérkező üzenetek tárgyában egyből látják, milyen témakörben érkezett a kérdés.

Az adat alapú tervezés bizonyított

A fenti eredmények szolgáljanak bizonyítékként a design fontosságáról. A tanulmánnyal reméljük sikerült rávilágítanunk, hogy webáruházad asztali eszközökön való megjelenése mellett érdemes kiemelt figyelmet szentelned a mobilos megjelenésnek is, hiszen értékes vásárlókat veszíthetsz, ha nem megfelelően mobilra optimalizált az oldalad.

Ma azonban a “mobira optimalizált” kifejezés már nem összekeverendő a reszponzivitással, vagyis azzal, hogy az oldal elemei megfelelően jelennek meg kis képernyőn is. Ez csupán az első lépése a mobiloptimalizációnak! Érdemes a mobil eszközre egy külön felületként tekinteni és megvizsgálni, hogy:

  • Mely elemek szorulnak átalakításra ezen a felületen?
  • Minden elem a megfelelő pozícióban helyezkedik-e el az oldalon?
  • Mennyire könnyű az oldalon a navigáció?
  • Megfelelően tagoltak-e a tartalmak és könnyen átlátható-e a webáruház?
  • Vannak-e olyan elemek, amelyek hátráltatják a látogatót a vásárlási folyamatban?

Ahhoz tehát, hogy egy webáruház elérje a hozzá fűzött konverziós célokat, fontos megvizsgálni azt felhasználói szemszögből is és megkeresni azokat a pontokat, amelyek tipikusan konverzió romboló tulajdonságokkal bírnak. Te tudod, hogy melyek ezek a webáruházadban?

A felhasználó élmény kutatásnak az a célja, hogy feltárjuk webáruházad gyenge pontjait és segítsünk megérteni látogatóid viselkedését. Ezen adatok ismeretében olyan egyedi designt tudunk tervezni és készíteni, amely kutatásokra építve, kimutathatóan növeli bevételeidet.

Tudj meg többet egyedi design szolgáltatásunkról!

Összegzés

Jelen esettanulmány tökéletesen szemlélteti, hogy egy webáruház soha nincs kész. Mindig van hova fejlődni és változtatni, főként az e-kereskedelemben és az online világban. 

Ehhez elengedhetetlen viszont a folyamatos fejlődni akarás, amely Lászlóban a kezdetektől megvolt és számunkra külön öröm, hogy az évek alatt ez cseppet sem csökkent. Ennek köszönheti webáruháza sikerét.

“Visszagondolva, nem csinálnánk semmit sem másképp, mert a ti segítségetekkel nem tudtunk olyan hibákat elkövetni, amiért valamit másképpen kellene csinálni. Profi támogatást kaptunk tőletek mindenben. Köszönet érte!”

Megtisztelő, hogy a kezdetektől megbízott a Shoprenter csapatának szakértelmében, amit ezúton is köszönünk!

A szerzőről:

Boros Norbert
Boros Norbert
Design fejlesztési projekt menedzser – Shoprenter
Több éves webfejlesztői és project menedzsment tapasztalattal, rengeteg elkészített weboldallal és webes fejlesztéssel a háta mögött segíti a webáruházad egyedi kinézetének elkészültét. Tudja, hogy milyen fontos az igényeidnek megfelelő kinézetű és funkcionalitású webshop, ezért mindent meg is tesz a célod elérése érdekében. Egyedi arculattervezésért kattints ide!
 

Legfrissebb bejegyzések

Előző bejegyzés:
facebook conversion api a shoprenterben
Facebook Conversion API beállítása a Shoprenterben

Ha Te is azon webáruház tulajdonosok közé tartozol, akik aktívan használják a Facebook hirdetéseket, ...Elolvasom

Close