{"id":24154,"date":"2026-03-17T07:00:29","date_gmt":"2026-03-17T07:00:29","guid":{"rendered":"https:\/\/www.shoprenter.hu\/blog\/?p=24154"},"modified":"2026-03-17T07:56:40","modified_gmt":"2026-03-17T07:56:40","slug":"adatokra-epitett-webshop-design","status":"publish","type":"post","link":"https:\/\/www.shoprenter.hu\/blog\/adatokra-epitett-webshop-design","title":{"rendered":"Adatokra \u00e9p\u00edtett webshop design: +38% v\u00e1s\u00e1rl\u00e1s a Grandis-n\u00e1l"},"content":{"rendered":"\n

Egy sikeres web\u00e1ruh\u00e1z sem maradhat \u00f6r\u00f6kk\u00e9 v\u00e1ltozatlan. Ahogy a v\u00e1s\u00e1rl\u00f3i szok\u00e1sok, a technol\u00f3gia \u00e9s a design trendek fejl\u0151dnek, \u00fagy v\u00e1lik id\u0151vel l\u00e1that\u00f3v\u00e1, hogy ami n\u00e9h\u00e1ny \u00e9ve modernnek sz\u00e1m\u00edtott, ma m\u00e1r nem biztos, hogy ugyanazt a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt ny\u00fajtja.<\/p>\n\n\n\n

Pont ezzel a helyzettel szembes\u00fclt a Grandis Kft. is. A v\u00e1llalat t\u00f6bb mint k\u00e9t \u00e9vtizede van jelen a hazai munkav\u00e9delmi piacon, pr\u00e9mium min\u0151s\u00e9g\u0171 l\u00e1bbelik, ruh\u00e1zatok \u00e9s egy\u00e9ni v\u00e9d\u0151eszk\u00f6z\u00f6k forgalmaz\u00f3jak\u00e9nt.<\/p>\n\n\n\n

A webshop azonban egy m\u00e1sik korszakban sz\u00fcletett. A 2018-as design az \u00e9vek m\u00fal\u00e1s\u00e1val egyre kev\u00e9sb\u00e9 felelt meg a mai v\u00e1s\u00e1rl\u00f3i elv\u00e1r\u00e1soknak, k\u00fcl\u00f6n\u00f6sen annak f\u00e9ny\u00e9ben, hogy a l\u00e1togat\u00f3k t\u00f6bb mint 80%-a mobilr\u00f3l \u00e9rkezik. A fel\u00fclet nem volt el\u00e9g intuit\u00edv mobilon, a vizu\u00e1lis megjelen\u00e9s pedig m\u00e1r nem t\u00fckr\u00f6zte azt a pr\u00e9mium poz\u00edci\u00f3t \u00e9s professzion\u00e1lis m\u00e1rkak\u00e9pet, amelyet a c\u00e9g a piacon k\u00e9pvisel.<\/p>\n\n\n\n

Elj\u00f6tt teh\u00e1t a redesign ideje. A Grandis egy olyan letisztult, modern \u00e9s mobilra optimaliz\u00e1lt web\u00e1ruh\u00e1zat szeretett volna, amely egyszerre er\u0151s\u00edti a m\u00e1rk\u00e1t, t\u00e1mogatja a v\u00e1s\u00e1rl\u00f3i d\u00f6nt\u00e9seket, \u00e9s gyors, s\u00farl\u00f3d\u00e1smentes felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt ny\u00fajt. A meg\u00fajul\u00e1s eredm\u00e9nyei pedig hamar megmutatkoztak. <\/p>\n\n\n\n

Az \u00e9les\u00edt\u00e9s ut\u00e1ni id\u0151szakban<\/strong> 38,2%-kal n\u0151tt a webshopban leadott v\u00e1s\u00e1rl\u00e1sok sz\u00e1ma (el\u0151z\u0151 \u00e9v azonos id\u0151szak\u00e1hoz viszony\u00edtva). A mobilr\u00f3l leadott rendel\u00e9sekn\u00e9l pedig m\u00e9g enn\u00e9l is l\u00e1tv\u00e1nyosabb, 47%-os javul\u00e1st m\u00e9rt\u00fcnk.\u00a0<\/strong><\/p>\n\n\n\n

A bev\u00e9tel is t\u00f6bb mint 23%-kal emelkedett, mik\u00f6zben a v\u00e1s\u00e1rl\u00f3i folyamat minden fontos l\u00e9p\u00e9se – a kos\u00e1rba helyez\u00e9st\u0151l a v\u00e1s\u00e1rl\u00e1sig – jelent\u0151sen javult.<\/p>\n\n\n\n

De mi v\u00e1ltozott pontosan a webshopban, \u00e9s milyen d\u00f6nt\u00e9sek vezettek ezekhez az eredm\u00e9nyekhez? Ebben az esettanulm\u00e1nyban r\u00e9szletesen bemutatjuk a design meg\u00faj\u00edt\u00e1s\u00e1nak folyamat\u00e1t, a m\u00f6g\u00f6tte \u00e1ll\u00f3 UX-szempontokat, valamint azt is, hogy milyen tanuls\u00e1gokat vihetsz ebb\u0151l haza.<\/p>\n\n\n\n

El\u0151zm\u00e9nyek<\/h2>\n\n\n\n

A grandis.hu<\/a> web\u00e1ruh\u00e1z hossz\u00fa \u00e9vek \u00f3ta a Shoprenter rendszer\u00e9ben m\u0171k\u00f6dik, \u00e9s a v\u00e1llalat m\u00e1r a kezdetekt\u0151l nagy hangs\u00falyt fektetett arra, hogy az online megjelen\u00e9s\u00fck is t\u00fckr\u00f6zze a m\u00e1rka professzion\u00e1lis karakter\u00e9t. Ennek r\u00e9szek\u00e9nt kor\u00e1bban is egyedi design<\/a> k\u00e9sz\u00fclt a web\u00e1ruh\u00e1zhoz, amelyet szint\u00e9n a mi csapatunk tervezett \u00e9s val\u00f3s\u00edtott meg m\u00e9g 2018-ban.<\/p>\n\n\n\n

Mivel a kor\u00e1bbi design is a mi munk\u00e1nk volt, egyed\u00fcl\u00e1ll\u00f3 lehet\u0151s\u00e9g\u00fcnk ny\u00edlt arra, hogy objekt\u00edven \u00f6sszehasonl\u00edtsuk a r\u00e9gi \u00e9s az \u00faj egyedi webshop design teljes\u00edtm\u00e9ny\u00e9t. Ritk\u00e1n ad\u00f3dik olyan projekt, ahol ugyanannak a web\u00e1ruh\u00e1znak k\u00e9t k\u00fcl\u00f6nb\u00f6z\u0151 korszak\u00e1t \u00e9s k\u00e9t UX-megk\u00f6zel\u00edt\u00e9st lehet egym\u00e1ssal szembe \u00e1ll\u00edtani – r\u00e1ad\u00e1sul val\u00f3s \u00fczleti adatok alapj\u00e1n.<\/p>\n\n\n\n

A redesign el\u0151k\u00e9sz\u00edt\u00e9sek\u00e9nt ez\u00e9rt els\u0151 l\u00e9p\u00e9sk\u00e9nt egy<\/strong> r\u00e9szletes UX elemz\u00e9st v\u00e9gezt\u00fcnk, hogy val\u00f3s adatokra \u00e9s felhaszn\u00e1l\u00f3i viselked\u00e9sre \u00e9p\u00edtkezhess\u00fcnk.<\/strong> <\/p>\n\n\n\n

\u00cdgy a Grandis meg\u00faj\u00edt\u00e1sa nem puszt\u00e1n eszt\u00e9tikai friss\u00edt\u00e9s lett, hanem tudatosan fel\u00e9p\u00edtett fejleszt\u00e9si folyamat, amely a v\u00e1s\u00e1rl\u00f3i \u00e9lm\u00e9ny jav\u00edt\u00e1s\u00e1t \u00e9s a konverzi\u00f3 n\u00f6vel\u00e9s\u00e9t c\u00e9lozta.<\/p>\n\n\n\n

Most ennek az elemz\u00e9snek a r\u00e9szleteibe adunk betekint\u00e9st \u00e9s elmondjuk azt is, hogy az adatokb\u00f3l mire k\u00f6vetkeztett\u00fcnk.<\/p>\n\n\n\n

\u00c1tfog\u00f3 UX audit – a konverzi\u00f3n\u00f6vel\u0151 design alapja<\/h2>\n\n\n\n

A UX vagy m\u00e1s n\u00e9ven felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny elemz\u00e9s sor\u00e1n t\u00f6bb forr\u00e1sb\u00f3l sz\u00e1rmaz\u00f3 adatot vizsg\u00e1ltunk:<\/p>\n\n\n\n

    \n
  • Google Analytics<\/strong>
    <\/strong>A l\u00e1togat\u00f3i forgalom, a konverzi\u00f3s ar\u00e1nyok, a forgalmi csatorn\u00e1k \u00e9s az eszk\u00f6zhaszn\u00e1lat elemz\u00e9s\u00e9vel felt\u00e1rtuk, honnan \u00e9rkeznek a v\u00e1s\u00e1rl\u00f3k, milyen ar\u00e1nyban v\u00e1s\u00e1rolnak, \u00e9s mely csatorn\u00e1k hozz\u00e1k a leg\u00e9rt\u00e9kesebb l\u00e1togat\u00f3kat.
    <\/li>\n\n\n\n
  • Microsoft Clarity<\/strong>
    <\/strong>H\u0151t\u00e9rk\u00e9pek \u00e9s felhaszn\u00e1l\u00f3i viselked\u00e9si mint\u00e1k seg\u00edts\u00e9g\u00e9vel vizsg\u00e1ltuk, hogy a l\u00e1togat\u00f3k val\u00f3j\u00e1ban hogyan haszn\u00e1lj\u00e1k az oldalt: hova kattintanak, meddig g\u00f6rgetnek, \u00e9s mely fel\u00fcleti elemek vonzz\u00e1k a figyelmet. <\/li>\n<\/ul>\n\n\n\n

    A k\u00e9t eszk\u00f6z kombin\u00e1ci\u00f3ja lehet\u0151v\u00e9 tette, hogy ne csak azt l\u00e1ssuk, mi t\u00f6rt\u00e9nik a webshopban, hanem azt is, hogy mi\u00e9rt t\u00f6rt\u00e9nik. <\/strong><\/p>\n\n\n\n

    \u00cdgy pontosan azonos\u00edthat\u00f3v\u00e1 v\u00e1ltak azok a pontok a v\u00e1s\u00e1rl\u00f3i folyamatban, ahol a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny fejleszt\u00e9se val\u00f3di \u00fczleti eredm\u00e9nyeket hozhat.<\/p>\n\n\n\n

    A UX elemz\u00e9s meg\u00e1llap\u00edt\u00e1sai \u00e9s az ezekre \u00e9p\u00fcl\u0151 d\u00f6nt\u00e9sek<\/h2>\n\n\n\n

    Az elemz\u00e9s sor\u00e1n t\u00f6bb olyan haszn\u00e1lati mint\u00e1t is azonos\u00edtottunk, amelyek seg\u00edtettek pontosabban meg\u00e9rteni, hogyan haszn\u00e1lj\u00e1k a l\u00e1togat\u00f3k a web\u00e1ruh\u00e1zat. Ezek nem felt\u00e9tlen hib\u00e1k voltak, ink\u00e1bb olyan ter\u00fcletek, ahol a fel\u00fclet tov\u00e1bb egyszer\u0171s\u00edthet\u0151 vagy hat\u00e9konyabb\u00e1 tehet\u0151 volt.<\/p>\n\n\n\n

    Egyszer\u0171bb navig\u00e1ci\u00f3 ig\u00e9nye<\/strong>
    A h\u0151t\u00e9rk\u00e9pek \u00e9s kattint\u00e1si adatok alapj\u00e1n a l\u00e1togat\u00f3k a men\u00fc bizonyos elemeit nem haszn\u00e1lt\u00e1k – p\u00e9ld\u00e1ul a sz\u00f6veges men\u00fcpontokra szint senki nem kattintott. Ez arra utalt, hogy \u00e9rdemes a fejl\u00e9cet letisztultabb\u00e1 tenni, \u00e9s a legfontosabb navig\u00e1ci\u00f3s elemekre f\u00f3kusz\u00e1lni.<\/p>\n\n\n\n

    A keres\u0151nek kiemelt szerepe van<\/strong>
    Az elemz\u00e9sb\u0151l kider\u00fclt, hogy sok l\u00e1togat\u00f3 k\u00f6zvetlen\u00fcl a keres\u0151funkci\u00f3t haszn\u00e1lja a term\u00e9kek megtal\u00e1l\u00e1s\u00e1hoz \u00e9s kevesebben voltak azok akik a kateg\u00f3ria men\u00fcben b\u00f6ng\u00e9sztek. Ez\u00e9rt a redesign sor\u00e1n a keres\u0151 haszn\u00e1lat\u00e1t egyszer\u0171bb\u00e9 \u00e9s mobilon is k\u00f6nnyebben el\u00e9rhet\u0151v\u00e9 tett\u00fck.<\/p>\n\n\n

    \n
    \"kattint\u00e1si<\/figure><\/div>\n\n\n

    <\/p>\n\n\n\n

    A web\u00e1ruh\u00e1z egy\u00e9bk\u00e9nt haszn\u00e1lja a Rapid Search okoskeres\u0151t is, ami m\u00e9g er\u0151sebb eszk\u00f6zz\u00e9 teszi a keres\u00e9s funkci\u00f3t. Ez apr\u00f3s\u00e1gnak t\u0171nhet, de sokat hozz\u00e1ad a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyhez \u00e9s a k\u00f6nny\u0171 navig\u00e1ci\u00f3hoz.<\/p>\n\n\n\n

    Az els\u0151dleges eszk\u00f6z a mobil<\/strong>
    A forgalmi adatok alapj\u00e1n j\u00f3l l\u00e1tszott, hogy a l\u00e1togat\u00f3k jelent\u0151s r\u00e9sze mobilr\u00f3l \u00e9rkezik, ez\u00e9rt a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny ezen az eszk\u00f6z\u00f6n k\u00fcl\u00f6n\u00f6sen fontos. Az audit sor\u00e1n t\u00f6bb olyan pont is azonos\u00edthat\u00f3 volt, ahol a mobilos haszn\u00e1lat m\u00e9g tov\u00e1bb finom\u00edthat\u00f3: p\u00e9ld\u00e1ul egyes bannerek olvashat\u00f3s\u00e1ga, bizonyos modulok \u00e9rint\u00e9ses haszn\u00e1lata vagy a keres\u0151 gyors el\u00e9rhet\u0151s\u00e9ge.<\/p>\n\n\n

    \n
    \"a<\/figure><\/div>\n\n\n

    <\/p>\n\n\n\n

    A redesign sor\u00e1n ez\u00e9rt mobilon t\u00f6bb fel\u00fcleti elem \u00e1talakult: <\/p>\n\n\n\n

      \n
    • a vizu\u00e1lis elemek jobban olvashat\u00f3v\u00e1 v\u00e1ltak, <\/li>\n\n\n\n
    • t\u00f6bb modul swipe-alap\u00fa m\u0171k\u00f6d\u00e9st kapott, <\/li>\n\n\n\n
    • a keres\u0151 pedig ezen a fel\u00fcleten is k\u00f6nnyebben el\u00e9rhet\u0151 helyre ker\u00fclt. <\/li>\n<\/ul>\n\n\n\n

      Ezek a v\u00e1ltoztat\u00e1sok azt a c\u00e9lt szolg\u00e1lt\u00e1k, hogy a l\u00e1togat\u00f3k mobilon is gyorsan eligazodjanak az oldalon, \u00e9s min\u00e9l kevesebb l\u00e9p\u00e9sb\u0151l jussanak el a keresett term\u00e9khez.<\/p>\n\n\n\n

      Felesleges modulok az oldalon<\/strong>
      Az audit r\u00e1mutatott arra is, hogy bizonyos modulok kev\u00e9sb\u00e9 j\u00e1rultak hozz\u00e1 a v\u00e1s\u00e1rl\u00e1si folyamathoz. Ezek egy r\u00e9sz\u00e9t elt\u00e1vol\u00edtottuk vagy \u00e1tszervezt\u00fck, \u00edgy a fel\u00fclet letisztultabb \u00e9s k\u00f6nnyebben \u00e1ttekinthet\u0151 lett.<\/p>\n\n\n

      \n
      \"h\u0151t\u00e9rk\u00e9p\"<\/figure><\/div>\n\n\n

      <\/p>\n\n\n\n

      Asztali n\u00e9zet jobb kihaszn\u00e1lhat\u00f3s\u00e1ga<\/strong>
      A l\u00e1togat\u00f3i adatok szerint sok felhaszn\u00e1l\u00f3 FullHD felbont\u00e1s\u00fa kijelz\u0151n b\u00f6ng\u00e9szi a web\u00e1ruh\u00e1zat. Ez\u00e9rt a kateg\u00f3riaoldal elrendez\u00e9s\u00e9t \u00fagy alak\u00edtottuk \u00e1t, hogy egy sorban t\u00f6bb term\u00e9k is megjelenhessen, ami gyorsabb \u00e1ttekint\u00e9st tesz lehet\u0151v\u00e9.<\/p>\n\n\n\n

      Apr\u00f3bb haszn\u00e1lhat\u00f3s\u00e1gi probl\u00e9m\u00e1k<\/strong>
      Az audit sor\u00e1n n\u00e9h\u00e1ny kisebb haszn\u00e1lhat\u00f3s\u00e1gi probl\u00e9ma is kirajzol\u00f3dott. <\/p>\n\n\n\n

        \n
      • A term\u00e9kaj\u00e1nl\u00f3 modulokn\u00e1l p\u00e9ld\u00e1ul nem volt egy\u00e9rtelm\u0171, amikor m\u00e1r nem lehet tov\u00e1bb lapozni, ami ism\u00e9telt kattint\u00e1sokat eredm\u00e9nyezett. <\/li>\n\n\n\n
      • A mobil men\u00fc bez\u00e1r\u00e1sa sem volt teljesen egy\u00e9rtelm\u0171 a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra. <\/li>\n\n\n\n
      • A mennyis\u00e9gv\u00e1laszt\u00f3 kev\u00e9sb\u00e9 volt k\u00e9nyelmes nagyobb darabsz\u00e1m rendel\u00e9sekor (ez a B2B eset\u00e9ben ugyanakkor fontos funkci\u00f3).<\/li>\n<\/ul>\n\n\n\n

        A meg\u00fajul\u00e1s sor\u00e1n ezek m\u0171k\u00f6d\u00e9s\u00e9t is tov\u00e1bb jav\u00edtottuk.<\/p>\n\n\n\n

        \u00d6sszess\u00e9g\u00e9ben a UX audit legfontosabb tanuls\u00e1ga az volt, hogy a webshop alapjai j\u00f3l m\u0171k\u00f6dtek, de t\u00f6bb ponton felesleges komplexit\u00e1s \u00e9s haszn\u00e1lhat\u00f3s\u00e1gi probl\u00e9ma lass\u00edtotta a v\u00e1s\u00e1rl\u00e1si folyamatot.<\/strong><\/p>\n\n\n\n

        A redesign ez\u00e9rt h\u00e1rom f\u0151 c\u00e9lra f\u00f3kusz\u00e1lt:<\/strong><\/p>\n\n\n\n

          \n
        1. az oldal tartalm\u00e1nak \u00e9s a navig\u00e1ci\u00f3j\u00e1nak az egyszer\u0171s\u00edt\u00e9se<\/strong><\/li>\n\n\n\n
        2. mobil haszn\u00e1lhat\u00f3s\u00e1g jav\u00edt\u00e1sa<\/strong><\/li>\n\n\n\n
        3. gyorsabb term\u00e9kmegtal\u00e1l\u00e1s \u00e9s v\u00e1s\u00e1rl\u00e1si folyamat<\/strong><\/li>\n<\/ol>\n\n\n\n

          A k\u00f6vetkez\u0151 r\u00e9szben megmutatjuk az elk\u00e9sz\u00fclt designt valamint, hogy a fenti v\u00e1ltoztat\u00e1sok milyen hat\u00e1ssal voltak a webshop teljes\u00edtm\u00e9ny\u00e9re, \u00e9s milyen eredm\u00e9nyeket hozott az \u00faj design.<\/p>\n\n\n\n

          Ilyen volt – ilyen lett<\/h2>\n\n\n\n

          A Grandis kor\u00e1bbi egyedi designj\u00e1t m\u00e9g 2018-ban k\u00e9sz\u00edtett\u00fck, ami abban az id\u0151ben a versenyt\u00e1rsak k\u00f6z\u00fcl igencsak kiemelte \u0151ket. Ez \u00edgy n\u00e9zett ki:<\/p>\n\n\n\n

          G\u00f6rgess az ablakban az oldalak \u00e1ttekint\u00e9s\u00e9hez:<\/em><\/p>\n\n\n\n