Egy sikeres webáruház sem maradhat örökké változatlan. Ahogy a vásárlói szokások, a technológia és a design trendek fejlődnek, úgy válik idővel láthatóvá, hogy ami néhány éve modernnek számított, ma már nem biztos, hogy ugyanazt a felhasználói élményt nyújtja.
Pont ezzel a helyzettel szembesült a Grandis Kft. is. A vállalat több mint két évtizede van jelen a hazai munkavédelmi piacon, prémium minőségű lábbelik, ruházatok és egyéni védőeszközök forgalmazójaként.
A webshop azonban egy másik korszakban született. A 2018-as design az évek múlásával egyre kevésbé felelt meg a mai vásárlói elvárásoknak, különösen annak fényében, hogy a látogatók több mint 80%-a mobilról érkezik. A felület nem volt elég intuitív mobilon, a vizuális megjelenés pedig már nem tükrözte azt a prémium pozíciót és professzionális márkaképet, amelyet a cég a piacon képvisel.
Eljött tehát a redesign ideje. A Grandis egy olyan letisztult, modern és mobilra optimalizált webáruházat szeretett volna, amely egyszerre erősíti a márkát, támogatja a vásárlói döntéseket, és gyors, súrlódásmentes felhasználói élményt nyújt. A megújulás eredményei pedig hamar megmutatkoztak.
Az élesítés utáni időszakban 38,2%-kal nőtt a webshopban leadott vásárlások száma (előző év azonos időszakához viszonyítva). A mobilról leadott rendeléseknél pedig még ennél is látványosabb, 47%-os javulást mértünk.
A bevétel is több mint 23%-kal emelkedett, miközben a vásárlói folyamat minden fontos lépése – a kosárba helyezéstől a vásárlásig – jelentősen javult.
De mi változott pontosan a webshopban, és milyen döntések vezettek ezekhez az eredményekhez? Ebben az esettanulmányban részletesen bemutatjuk a design megújításának folyamatát, a mögötte álló UX-szempontokat, valamint azt is, hogy milyen tanulságokat vihetsz ebből haza.
Előzmények
A grandis.hu webáruház hosszú évek óta a Shoprenter rendszerében működik, és a vállalat már a kezdetektől nagy hangsúlyt fektetett arra, hogy az online megjelenésük is tükrözze a márka professzionális karakterét. Ennek részeként korábban is egyedi design készült a webáruházhoz, amelyet szintén a mi csapatunk tervezett és valósított meg még 2018-ban.
Mivel a korábbi design is a mi munkánk volt, egyedülálló lehetőségünk nyílt arra, hogy objektíven összehasonlítsuk a régi és az új egyedi webshop design teljesítményét. Ritkán adódik olyan projekt, ahol ugyanannak a webáruháznak két különböző korszakát és két UX-megközelítést lehet egymással szembe állítani – ráadásul valós üzleti adatok alapján.
A redesign előkészítéseként ezért első lépésként egy részletes UX elemzést végeztünk, hogy valós adatokra és felhasználói viselkedésre építkezhessünk.
Így a Grandis megújítása nem pusztán esztétikai frissítés lett, hanem tudatosan felépített fejlesztési folyamat, amely a vásárlói élmény javítását és a konverzió növelését célozta.
Most ennek az elemzésnek a részleteibe adunk betekintést és elmondjuk azt is, hogy az adatokból mire következtettünk.
Átfogó UX audit – a konverziónövelő design alapja
A UX vagy más néven felhasználói élmény elemzés során több forrásból származó adatot vizsgáltunk:
- Google Analytics
A látogatói forgalom, a konverziós arányok, a forgalmi csatornák és az eszközhasználat elemzésével feltártuk, honnan érkeznek a vásárlók, milyen arányban vásárolnak, és mely csatornák hozzák a legértékesebb látogatókat. - Microsoft Clarity
Hőtérképek és felhasználói viselkedési minták segítségével vizsgáltuk, hogy a látogatók valójában hogyan használják az oldalt: hova kattintanak, meddig görgetnek, és mely felületi elemek vonzzák a figyelmet.
A két eszköz kombinációja lehetővé tette, hogy ne csak azt lássuk, mi történik a webshopban, hanem azt is, hogy miért történik.
Így pontosan azonosíthatóvá váltak azok a pontok a vásárlói folyamatban, ahol a felhasználói élmény fejlesztése valódi üzleti eredményeket hozhat.
A UX elemzés megállapításai és az ezekre épülő döntések
Az elemzés során több olyan használati mintát is azonosítottunk, amelyek segítettek pontosabban megérteni, hogyan használják a látogatók a webáruházat. Ezek nem feltétlen hibák voltak, inkább olyan területek, ahol a felület tovább egyszerűsíthető vagy hatékonyabbá tehető volt.
Egyszerűbb navigáció igénye
A hőtérképek és kattintási adatok alapján a látogatók a menü bizonyos elemeit nem használták – például a szöveges menüpontokra szint senki nem kattintott. Ez arra utalt, hogy érdemes a fejlécet letisztultabbá tenni, és a legfontosabb navigációs elemekre fókuszálni.
A keresőnek kiemelt szerepe van
Az elemzésből kiderült, hogy sok látogató közvetlenül a keresőfunkciót használja a termékek megtalálásához és kevesebben voltak azok akik a kategória menüben böngésztek. Ezért a redesign során a kereső használatát egyszerűbbé és mobilon is könnyebben elérhetővé tettük.
A webáruház egyébként használja a Rapid Search okoskeresőt is, ami még erősebb eszközzé teszi a keresés funkciót. Ez apróságnak tűnhet, de sokat hozzáad a felhasználói élményhez és a könnyű navigációhoz.
Az elsődleges eszköz a mobil
A forgalmi adatok alapján jól látszott, hogy a látogatók jelentős része mobilról érkezik, ezért a felhasználói élmény ezen az eszközön különösen fontos. Az audit során több olyan pont is azonosítható volt, ahol a mobilos használat még tovább finomítható: például egyes bannerek olvashatósága, bizonyos modulok érintéses használata vagy a kereső gyors elérhetősége.
A redesign során ezért mobilon több felületi elem átalakult:
- a vizuális elemek jobban olvashatóvá váltak,
- több modul swipe-alapú működést kapott,
- a kereső pedig ezen a felületen is könnyebben elérhető helyre került.
Ezek a változtatások azt a célt szolgálták, hogy a látogatók mobilon is gyorsan eligazodjanak az oldalon, és minél kevesebb lépésből jussanak el a keresett termékhez.
Felesleges modulok az oldalon
Az audit rámutatott arra is, hogy bizonyos modulok kevésbé járultak hozzá a vásárlási folyamathoz. Ezek egy részét eltávolítottuk vagy átszerveztük, így a felület letisztultabb és könnyebben áttekinthető lett.
Asztali nézet jobb kihasználhatósága
A látogatói adatok szerint sok felhasználó FullHD felbontású kijelzőn böngészi a webáruházat. Ezért a kategóriaoldal elrendezését úgy alakítottuk át, hogy egy sorban több termék is megjelenhessen, ami gyorsabb áttekintést tesz lehetővé.
Apróbb használhatósági problémák
Az audit során néhány kisebb használhatósági probléma is kirajzolódott.
- A termékajánló moduloknál például nem volt egyértelmű, amikor már nem lehet tovább lapozni, ami ismételt kattintásokat eredményezett.
- A mobil menü bezárása sem volt teljesen egyértelmű a felhasználók számára.
- A mennyiségválasztó kevésbé volt kényelmes nagyobb darabszám rendelésekor (ez a B2B esetében ugyanakkor fontos funkció).
A megújulás során ezek működését is tovább javítottuk.
Összességében a UX audit legfontosabb tanulsága az volt, hogy a webshop alapjai jól működtek, de több ponton felesleges komplexitás és használhatósági probléma lassította a vásárlási folyamatot.
A redesign ezért három fő célra fókuszált:
- az oldal tartalmának és a navigációjának az egyszerűsítése
- mobil használhatóság javítása
- gyorsabb termékmegtalálás és vásárlási folyamat
A következő részben megmutatjuk az elkészült designt valamint, hogy a fenti változtatások milyen hatással voltak a webshop teljesítményére, és milyen eredményeket hozott az új design.
Ilyen volt – ilyen lett
A Grandis korábbi egyedi designját még 2018-ban készítettük, ami abban az időben a versenytársak közül igencsak kiemelte őket. Ez így nézett ki:
Görgess az ablakban az oldalak áttekintéséhez:
Az adatalapú elemzés után elkészítettük a webáruház új drótvázait a legfontosabb oldalakra, majd ezek véglegesítését követően következtek a látványtervek.
A végeredményt megtekintheted a lent beágyazott ablakban, vagy ha meglátogatod a grandis.hu webshopját.
Görgess az ablakban az új design áttekintéséhez:
Az új egyedi design eredményei számokban
A UX audit és az új design bevezetése után a webshop teljesítményét a Google Analytics adatai alapján is megvizsgáltuk. Az összehasonlításban az élesítést követő két hónapot vizsgáltuk meg, az előző év azonos időszakához viszonyítva, így a szezonalitás hatása nem torzítja az eredményeket. (Élesítés utáni időszak: 2026.01.06. – 2026.03.06. VS. Élesítés előtti év ugyanazon időszaka: 2025.01.06. – 2025.03.06.)
Az adatok alapján egyértelműen látszik, hogy a redesign a teljes vásárlási folyamatban javulást hozott.
23,2%-kal több bevétel
Az egyik legfontosabb mutató a teljes bevétel alakulása volt. Pontos bevételi adatokat nem áll módunkban kiadni ezért ezeket kitakartuk, ugyanakkor azt elárulhatjuk, hogy az élesítést követő időszakban 23,2%-kal nőtt a webáruház bevétele az előző év azonos időszakához képest.
Ez azt mutatja, hogy az új design valós üzleti eredményeket is hozott.
Az is egyértelműen kiderül a GA4 vásárlási tölcsér adataiból, hogy több látogató jut el a termékoldalakig, többen tesznek terméket a kosárba, és többen fejezik be a vásárlást. Ez azt jelzi, hogy a UX audit alapján végrehajtott fejlesztések csökkentették a lemorzsolódást a folyamat több pontján is.
A GA4 funnel adatok alapján a teljes vásárlási útvonalon növekedés látható. Az előző évhez képest 33,9%-kal nőtt a kosárba helyezések száma és 41,8%-kal a vásárlásoké.
47,58%-kal több vásárlás mobilról
Az egyik leglátványosabb eredmény a mobilos vásárlásoknál jelentkezett. A redesign után a mobil vásárlások száma 47,58%-kal növekedett.
Ez különösen fontos, mert mint említettük a webshop látogatóinak jelentős része mobilról érkezik. Az audit során azonosított mobil UX javítások tehát közvetlenül hozzájárultak a vásárlások növekedéséhez.
Emellett az asztali gépen is jelentős növekedés történt: 33,49%-kal több vásárlást realizált a webshop ezen a nézeten, ami azt mutatja, hogy az új design nem csak mobilon működik jobban, hanem általánosságban is hatékonyabb lett a webshop.
Mit jelentenek ezek az eredmények?
A webshop teljesítményének javulása nem egyetlen változtatásnak köszönhető, hanem annak, hogy a design átalakítása adatokra és valós felhasználói viselkedésre épült.
Mit gondolnak az új megjelenésről az oldal látogatói?
Mint említettük, a Grandis-nál jelentős a visszatérő látogatók aránya. Éppen ezért fontos volt számunkra az is, hogy ne csak az analitikai adatok alapján értékeljük a redesign eredményét, hanem közvetlen visszajelzést kérjünk a felhasználóktól is.
Ehhez egy OptiMonk popup segítségével kértünk visszajelzést az oldal látogatóitól két egyszerű kérdéssel:
- Hogyan értékelik az új megjelenést egy 1-5 skálán?
- A régi vagy az új megjelenés tetszik-e nekik jobban?
Az eredmények kifejezetten pozitív képet mutatnak:
A válaszadók 91%-a 4-es vagy 5-ös értékeléssel minősítette az új design-t, ami kifejezetten erős felhasználói elégedettséget jelez.
A második kérdés még egyértelműbb eredményt hozott. A válaszadók 72%-a az új megjelenést választotta, tehát a látogatók többsége nemcsak elfogadta a változást, hanem egyértelműen jobbnak is tartja az új webshop megjelenést.
Konklúzió
A Grandis esete jól mutatja, hogy egy webáruház designja nem örökérvényű. Ami néhány éve modernnek és hatékonynak számított, az idővel eléri azt a pontot, amikor már érdemes újragondolni. Különösen akkor, ha közben a felhasználói szokások, az eszközhasználat és a technológiai lehetőségek is változnak.
A projekt során nem csak egy új külsőt szerettünk volna adni a webshopnak, hanem megvizsgáltuk hogyan használják valójában a látogatók az oldalt, és hogyan lehetne ezt az élményt még gördülékenyebbé tenni. A UX audit, a hőtérképes elemzések és a használati adatok alapján több kisebb-nagyobb finomhangolás született. Ezek összessége hozta meg a fent prezentált látványos eredményeket.
A számok végül visszaigazolták a döntéseinket, hiszen:
- javultak az üzleti mutatók (bevétel, vásárlások),
- nőtt a mobilos vásárlások száma, ami egy fontos célja volt a projektnek,
- valamint a látogatók visszajelzései is kifejezetten pozitívak.
A tanulság egyszerű: egy webshop sikere ritkán múlik egyetlen nagy változtatáson. Sokkal inkább azon, hogy mennyire figyelünk a felhasználók valós viselkedésére, és mennyire merünk ezek alapján változtatni.
Te is szeretnél ilyen tudatosan belevágni a webáruházad megújításába? Keresd bizalommal a csapatunkat!
A szerzőről:
