Köszönjük feliratkozását!

Hamarosan megkapja heti webáruházas tippjeit.

Egy webáruháznak a legjobb arcát kell mutatnia a látogatói felé, ha hosszú távon az élvonalban akar maradni. A színvonalas design nem csak jó benyomást kelt a látogatóban, de megkönnyíti számára a böngészést, a termékválasztást és a rendelést is.

Hogyan ért el egy webáruház 48%-os konverziónövekedést a design megújításával?

Ezt ismerte fel a Diétás Termékek Webshop csapata, mikor úgy döntöttek megújítják a webáruházukat. Az eredmények pedig őket igazolják.

Az új designnal 36 %-os konverziónövekedést értek el.

Nézzük meg, hogyan csinálták!

1. A webáruházról

A Diétás Termékek Webshop szénhidrát csökkentett, szénhidrát szegény, paleo és ételallergiásoknak készült termékek széles választékát kínálja. Termékpalettájukból fogyni vágyók, cukorbetegek, glutén vagy laktóz érzékenyek, speciális diétát vagy étkezésmódot követő látogatók is megtalálják étkezéseikhez a megfelelő alapanyagokat.

A webáruház nem áll meg a termékek értékesítésénél. Blogot vezetnek, ahol diétás tanácsokat osztanak meg az érdeklődőkkel, ezen kívül Youtube főzőtanfolyammal és folyamatosan frissülő Facebook tartalmakkal segítik a diétázókat.

Ez a szakértelem, szenvedély és elhivatottság tette sikeressé a webáruházukat. Egy idő után azonban elérkezett az a pont, amikor a design már nem tudott lépést tartani a csapat és a látogatók igényeivel.

Ekkor döntöttek úgy, hogy gyökeresen átalakítják webáruházuk addigi megjelenését, hogy az tökéletesen szolgálhassa a víziójukat.

2. Tervezés

A tervezési fázis során felmérték azokat a pontokat és elemeket, amelyekben problémákat és hiányosságokat fedeztek fel, majd ezek megoldására koncentráltak.

A weboldal alapos és részletes tanulmányozását követően az alábbi területeket emelték ki:

  • Elavult külső: látványosabb, modernebb megjelenést szerettek volna tervezni az áruházhoz, amely igazán kellemes első benyomást kelt a látogatókban.
  • Zsúfolt szerkezet: a három oszlopos, 980px széles oldaltörzs miatt a webáruházban rengeteg információ torlódott össze, kevés helyen. Letisztultabb, szellősebb, jobban átlátható struktúrára volt szükség.
  • Zavaros navigáció: a látogatók sokat panaszkodtak, hogy nehezen találják meg a termékeket. Szükség volt egy egyértelmű, világos navigációs pont kialakítására.
  • Hiányzó reszponzivitás: a hibrid mobil nézet helyett reszponzív designt terveztek az áruháznak, ami a jobb helykihasználás miatt nagyobb felhasználói élményt nyújt nem csak az okostelefonokon és táblagépeken, de laptopokon és asztali gépeken is.

3. Megvalósítás

A megvalósítási fázisban, annak érdekében, hogy a tervezés során meghatározott megoldásokat integrálhassák, úgy határoztak, hogy az alapoktól kezdik meg a design újratervezését és teljesen átalakítják a webáruház szerkezetét.

Az eredményt a következőkben bemutatott „előtte és utána” képek szemléltetik, melyeken jól láthatóak a különbségek.

A webáruház designja desktopon még az átalakítás előtt:

Régi desktop nézet

A webshop régi designja tablet kijelzőn:

Régi tablet nézet

Az okostelefonokon pedig így jelent meg az áruház:

Régi mobil nézet

 

Az új webáruház design desktopon:

Új desktop nézet

Tableten:

Új tablet nézet

Okostelefonon:

Új mobil nézet

 

Most nézzük meg, milyen változások történtek a design terén.

3.1. Letisztultság, áttekinthetőség:

A legmarkánsabb változás talán a főoldalon látható. A cél az volt, hogy áttekinthető és letisztult szerkezetet alakítsanak ki, ezért az egy oszlopos elrendezés mellett döntöttek.

Ez azzal járt, hogy az amúgy remek tartalmak egy részét, fel kellett áldozniuk és eltávolítaniuk a főoldalról. Ez alapvetően egy fájdalmas folyamat, hiszen sokszor értékes szekciókat is ki kell gyomlálni, ugyanakkor segít a fókuszt a vásárlói élményen és a használhatóságon tartani.

Az eredmény: kevesebb, de célzottabb tartalom a főoldalon, illetve belső oldalakon a látványvonal fölött.

A két szélső oszlop elhagyása és a reszponzív design lehetővé tette, hogy a banner slidert teljes szélességűre nyújtsák, ami így a legmeghatározóbb design elem lett a főoldalon, ezáltal sokat tesz hozzá a kellemes első benyomás kialakításához.

Szintén ezt a célt szolgálta a színvilág “megreformálása”. A fő színeket meghagyták, de következetesebben használták, hogy jobban tagolják az áruház oldalait. Nem szabad elfelejteni, hogy a színek nem csak öncélú díszítőelemek, hanem a struktúra részei, és sokat tesznek hozzá ahhoz, hogy a látogató eligazodjon a webáruházban.

A szerkezet átalakítása után lehetőségük nyílt arra, hogy több terméket helyezzenek el egy sorban, még úgy is, hogy a termékkártyák méretét megnövelték.

Ezzel párhuzamosan, a rövid leírást eltávolították a főoldali termékkártyákról, így a termékkép jóval hangsúlyosabb lett. A termékkártyán csak a legfontosabb információkat hagyták meg, a terméknevet, az árat és a raktárkészlet információt.

A különbség jól látható a régi és az új termékkártya között:

Termékkártya

A belső oldalakon a korábbi három helyett inkább a két oszlopos elrendezésre váltottak. Ezzel ugyanaz volt a céljuk, mint a főoldal esetén: a szerkezet kialakítása áttekinthető és jól használható legyen.

Nézzük meg mit jelent ez a kategóriaoldalak esetében.

Így nézett ki a korábbi kategóriaoldal:

Régi kategóriaoldal

Ilyen az új kategóriaoldal:

Új kategóriaoldal

A kategóriaoldal jóval letisztultabb lett. A háromból csupán két oszlop maradt meg. A bal oszlopba kerültek a közösségi élethez kapcsolódó tartalmak (Főzőtanfolyam, Facebook, Google+, Blog), amelyek nem feltétlenül szolgálják az azonnali konverziót, de az áruház stratégiájában kiemelt szerepük van.

Nem véletlenül! Könnyen lehet, hogy aki még nem szánta rá magát a vásárlásra, a Blog olvasása után felismeri a diétás termékek előnyeit, és később már vásárlóként, akár törzsvásárlóként tér vissza az áruházba.

A bal oszlopban helyet kapott még a Top termékek termékajánló modul.

Jól látható, hogy a régi kategóriaoldalhoz képest mennyivel kevesebb tartalom került a bal oldali oszlopba. A hangsúly ez által a terméklista felé tolódik el.

A hasznos terület nagyobb részét arra használják, hogy bemutassák a kategória termékeit.

Gondoljunk csak bele: a látogató azért érkezett ide, hogy megtekintse a termékkínálatot, segítsünk neki ebben!

A webáruház egyik legfontosabb aloldala a termékoldal, ezért kiemelt figyelem irányult rá.

Így nézett ki a régi termékoldal:

Régi termékoldal

Ilyen az új termékoldal:

Új termékoldal

Hasonlóan a kategóriaoldalhoz, itt is a két oszlopos elrendezést használták, emiatt több hely maradt a termékinformációk és a termékkép megjelenítésére.

Fontos változás a régi designhoz képest, hogy a szállításról, részletesebb tájékoztatást kap a látogató.

Egyrészt bekerült a raktár állapot mellett a „Várható szállítási díj” és a „Várható szállítási idő” sor, másrészt a szállítási információkról egy felugró ablakban bővebben tájékozódhat a potenciális vásárló.

A szállítási mód, díj és idő, tipikusan olyan információk, amelyekre a látogató kíváncsi, kritikus mikro-konverziós lépés, a termék kosárba helyezése előtt.

3.2. Egyértelmű kiindulási pontok

A fejlécben vízszintes kategória menüt használtak, ez lett az elsődleges kiindulási pont. A látogatók számára ez megkönnyíti a navigációt, hiszen azonnal tudják, hol keressék a kategóriákat. Ebben a kategória menü színezése is segítségükre van, kellő vizuális támpontot nyújtva tekintetüknek.

Az előnyös elhelyezés azonban csak fél siker, szükség van az egyértelmű kategorizálásra is. A látogató számára világossá kell tenni, hogy milyen úton juthat el a kívánt termékhez, és lehetőség szerint több útvonalat is biztosítani kell egy adott termék eléréshez.

3.3. Elérhetőségek és előnyök kommunikálása

A Diétás Termékek Webshopban az előnyök három csoportba sorolhatóak.

Az első a szállítással és rendeléssel kapcsolatos előnyök csoportja.

A szállítási információkról korábban már esett szó, de az ingyenes szállítást érdemes lehet még megemlíteni. A termékoldalon a fő termékkép alatt emeltük ki az ingyenes szállítási lehetőséget, amivel így a konverziós folyamat megfelelő szakaszán találkozik a látogató, és egy utolsó lökést ad neki a termék vagy újabb termékek kosárba rakására.

Ingyenes szállítás

Szintén a vásárlással és rendeléssel kapcsolatos előny, és egyben a vásárlók bizalmának megnyerését szolgálja a pénzvisszafizetési és megbízhatósági garancia kiemelt hirdetése a belső oldalak bal oszlopában.

Pénzvisszafizetési és megbízhatósági garancia

Az előnyök második csoportjába tartoznak a webáruházzal és a szolgáltatással kapcsolatos előnyök.

Miben nyújt többet a Diétás Termékek Webshop, mint más, hasonló áruházak?

A termékek mellett szakértelmet és egy aktív közösséget kínál a webáruház csapata.

A főoldalon ennek megfelelően, helyet kapott a blog, hiszen a szakmai tartalmak mindig fontos szerepet játszottak a Diétás Termékek Webshopban.

A webáruház mögött egy lelkes közösség áll, emiatt a főoldalon, a kategóriaoldalon és a termékoldalon is kiemelték a közösségi média dobozait, bannerjeit.

Facebook banner

 

Az előnyök harmadik csoportjába tartoznak a speciális ajánlatok és kedvezmények.

A főoldalon a bannerváltó alatt sorolták fel a kiemelt ajánlatokat, úgy, mint a csomagokat, az akciókat, a VIP kedvezményeket, illetve a Szafi Fitt és Dia Wellness termékeket.

Kiemelt ajánlatok

Ki ne szeretne olcsóbban vásárolni vagy ugyanazon az áron jobb minőségű terméket vásárolni?

Ha van egy jó ajánlatunk, hirdessük minél hangosabban! Hiába akciózunk le egy terméket, ha nem talál rá a látogató.

Ugyanígy, lehet egy kiváló termékünk (amelynél nincs jobb a piacon), de ha még egy látogató sem tudta megtalálni, az nem sokat ér.

3.4. Reszponzivitás

A reszponzív design segítségével a webáruház minden kijelzőhöz alkalmazkodik. Ez a kulcsa annak, hogy optimális helykihasználást biztosítsanak az adott eszközön, és csak a látogató számára legszükségesebb tartalmakat jelenítsék meg.

A korábbi design fixen 980px szélességű volt. Mobileszközökön egy különálló, a desktoptól eltérő megjelenésű nézettel találkoztak a látogatók. Az új design rugalmasabb, és az okostelefonokon is megtartja az új arculatot.

Ennek eredményeként nem csak szebb lett az áruház, de minden eszközön kényelmesebb böngészni benne.

4. Eredmények

Az új design indulása óta eltelt 6 hónap eredményeit összevetették az azt megelőző félév adataival, amelyből így már reális következtetéseket lehet levonni. A számok pedig önmagukért beszélnek.

Az új reszponzív megjelenésnek köszönhetően a mobileszközről és tabletről érkező megrendelések száma is növekedést mutat.

Emellett a teljes webáruházat tekintve nőtt az oldalon eltöltött idő, illetve csökkent a visszafordulások aránya is.

Ami pedig még ezeknél is sokkal fontosabb, hogy az áruház konverziós rátája is növekedett, azaz adott számú látogatóból több vásárlót termel a webáruház.

A webáruház összes látogatóját vizsgálva a konverziós ráta 68%-kal nőtt.

Ezt a számot azonban óvatosan kell kezelni, ugyanis a növekedést egy-egy marketing kampány, vagy egy szezonális időszak is befolyásolhatta. A pontosabb mérőszámot számunkra az organikus forgalomból érkező látogatók viselkedése mutatja meg, ugyanis a SEO eredmények csak kisebb mértékben mutatnak kiugrásokat a látogatottságban.

Viszont a növekedés az organikus forrásból érkező látogatóknál is kézzelfogható. A konverziós ráta ugyanis itt is 36%-kal növekedett a design váltás óta.

Eredmények

Mobilra optimalizálni ma már nem újdonság, de a diétás termékek webshop adatait látva egyértelművé válik, hogy a profin elkészített reszponzív design, komoly versenyelőnyt és igazi értéket jelent.

A Diétás Termékek Webshop design megújításának két fontos tanulsága is van.

Egyrészt az, hogy nem kell félni a nagyobb átalakítástól.

Másrészt, nagyon sok esetben, a kevesebb, néha több. Az, hogy a látogatók hozzászoktak egy designhoz, nem jelenti azt, hogy ne reagálnának jól egy új, profibb megoldásra.

És vajon mennyibe kerül egy ilyen átalakítás?

A Diétás Termékek webshop a ShopRenter "Egyedi design és arculat" szolgáltatását vette igénybe, és a megnövekedett konverziónak hála az általuk kifizetett design csomag ára kvázi 4 nap alatt megtérült.

Először is gratulálok!
Mi is tudjuk milyen nagy munka átgondoltan újratervezni egy webáruházat!
KÉrdésem az , hogy nagyon jó hatású a termék oldalon a szállítási feltételek megadása. Ezt hogy tudjuk beállítani?(Gold csomagunk van) vagy ez egyedi sablon?
Köszönöm Orsi
#
Kovács Sándor
Szia Orsi,

a várható szállítási díj és a várható szállítási idő sort az admin felület Termékoldal szerkesztő menüpontján belül tudod beállítani. A beállítás részleteivel kapcsolatban kérlek fordulj az ügyfélszolgálat unkhoz vagy olvasd el a kapcsolódó leírást:
support.shoprenter.hu/.../...

A felugró ablak és a fő termékkép alatti képek már az egyedi design részeként kerültek be.

Üdv,
Sándor
Koszonom, tudtam, hogy a termek oldalon beállítható, arra voltam kiváncsi, hogy képként be tudok e tenni plusz infot a termékkép alá...
Orsi
"Várható szállítási idő: 2015. Október 23." Ez szerintem 26.-án érkezik meg...

Az algoritmus 2 munkanapot ad az aktuális időbélyeghez?
Vagy az adatbázisban minden termékhez van rögzítve érték, csak nem lett kidolgozva a munkaszüneti nap lekezelése?

Ha ismert a beérkezés napja, és az nem túl távoli. Nem lenne érdemesebb meghagyni a kosárba rakás lehetőségét? Mutatva a kosárban a szállítási napokat...
lásd GLUTENIX KALÁCS LISZTKEVERÉK 500G esetén szintén 26.-a van megjelölve...
#
Fekete Márton
Kedves Zsolt,

A munkaszüneti napokat külön fül alatt meg lehet adni, így azok is lekezelésre kerülnek. A várható szállítási idő alatt az a nap jelenik meg amelyiken kézbesítésre kerülhet a termék.

Üdv,
Fekete Marci
Kérjük írd be a képen látható kódot
Biztonsági kód Új kódot kérek
Szeretnék e-mail értesítést kapni az új hozzászólásokról!
Ha szeretnél további webáruházas tippeket, iratkozz fel heti értesítőnkre!
Van már webáruházad?