Egy webáruház megjelenése nem pusztán esztétikai kérdés. Legalább annyira szól a vásárlói élményről, a technológiai megfelelőségről és a márka értékeinek kifejezéséről.
Az online tér folyamatosan fejlődik: a Google elvárásai, a mobilhasználat dominanciája és a felhasználók ingerküszöbe folyamatosan változik. Egy modern webshopnak egyszerre kell gyorsnak, reszponzívnak, jól strukturáltnak és hitelesnek lennie. Ha ezek jól összeérnek, az üzleti eredményeken is látszik a hatás.
Egy 10 évvel ezelőtti design, még ha időtállóan szép is, ritkán tud a mai feltételeknek megfelelni. Ezt tapasztalta Alexa és Zoltán is, a MagyarBrands díjjal is elismert Értéksziget gyógyászati segédeszköz bolt és webáruház tulajdonosai.
„Az előző egyedi designt is a Shoprenter csinálta 10 évvel ezelőtt. Ez még mindig nagyon tetszik nekünk, nagyon szép munka volt – azóta már mi is dolgoztunk rajta jócskán. Az elmúlt évek alatt a webshop arculata, termékköre, küldetése is átalakult. Megváltozott a logónk és némiképp a márkánk arculati színei is.
Jó volt ez a kabát, de már egy újra, korabelire kell cserélni, ami megmutatja az értékrendünket, kifejezi a személyiségünket és igényességünket.
Megváltozott a világ. Más szempontok vannak és fejlődött a technika. Mindenképp a most legmodernebb és a Google szempontrendszerének is megfelelő, számítógépen jól kinéző, ugyanakkor mobilra kiválóan optimalizált webshopot szeretnénk.” – ezekkel a szavakkal keresett fel minket ismételten Zoltán.
Ebben a cikkben azt mutatjuk meg, hogyan zajlott az Értéksziget megújítása és milyen lett a végeredmény.
“Jó volt ez a kabát, de már egy újabbra kell cserélni”
Mielőtt a lényegre térünk, tegyünk egy kis visszatekintést. Ilyen volt a webáruház régi megjelenése:
Görgess az ablakban, hogy a teljes oldalt áttekinthesd!
Zoltánék elvárásai az új megjelenéssel kapcsolatban:
- A webáruház új megjelenése legyen modern, letisztult, a mai kornak abszolút megfelelő. Mivel náluk a keresztény háttér és a gyógyászati segédeszköz kereskedelem összefonódik, fontos volt számukra, hogy ez a logójuk mellett az arculatban is visszaköszönjön.
- Legyen gyorsabb az oldal és feleljen meg a Google legújabb elvárásainak.
- A mobil nézet kialakítása kapjon kiemelt figyelmet. A vásárlóik 80%-a mobilról használja a shopot, 45% pedig már innen is vásárol. Ezért nagyon fontos a kiváló kezelhetőség.
- A Tudástár (blog) kapjon kiemeltebb szerepet az egész webáruházban.
Így néz ki egy design projekt a Shoprenternél
Az új design nem egyik napról a másikra született meg – tudatos, több szakaszból álló tervezési és kivitelezési folyamat vezetett el a végleges eredményhez.
A projekt egy megbeszéléssel indult, ahol ügyfelünkkel közösen átbeszéltük a célokat, elvárásokat és a márka átalakulásának főbb pontjait. Ezután kezdődött a tervezés.
Wireframe – funkció és struktúra
A design alapja mindig a funkcionalitás. Ezért elsőként drótvázakat (wireframe-eket) készítettünk. Ezek még nem tartalmaztak grafikai elemeket, csupán a tartalmi blokkok, navigációs logika és felhasználói útvonalak vázlatát.
Görgess az ablakban, hogy a teljes oldalt áttekinthesd!
A drótváz segített abban, hogy közösen átbeszéljük:
- milyen elemek kerüljenek az oldalra,
- hová helyezzük a kiemelt ajánlatokat,
- az egyes funkciók, hol kapjanak helyet,
- milyen új elemekkel bővítsük az oldalakat,
- hogyan épüljön fel a menürendszer stb.
A drótvázat több oldalra (főoldal, kategória- és termékoldal) is elkészítettük.
Látványtervek – több körös kreatív munka
A drótvázak elfogadása után megkezdtük a grafikai tervezést.
Több látványtervet készítettünk, különböző vizuális irányokat bemutatva, majd ezek alapján közösen finomítottunk. A színvilág, a betűtípusok, az ikonok stílusa, a képhasználat és az arányok mind-mind olyan döntések voltak, amelyekhez iteratívan,több körben jutottunk el.
Ügyfelünk visszajelzései alapján alakítottuk ki azt az egyensúlyt, ami egyszerre modern, letisztult és a márka személyiségét hitelesen tükrözi:
Görgess az ablakban, hogy a teljes oldalt áttekinthesd!
Sitebuild – a tervek életre keltése
Miután minden részlet a helyére került, kezdetét vette a sitebuild szakasz.
A látványos tervek alapján elkészült a működő webáruház. A fejlesztés során nagy figyelmet fordítottunk a sebességre és a reszponzivitásra. A mobilos nézet optimalizálása kiemelt fókusz volt, hiszen ma már a vásárlók többsége telefonról érkezik.
Kíváncsi vagy a végeredményre?
Nézd meg a webáruház oldalát: erteksziget.hu
Design megoldások, amik az Értékszigetet egyedivé teszik
Szeretnénk pár fejlesztést és modult kiemelni az új megjelenésből, melyek abból a célból lettek kialakítva, hogy a webáruház ne csak szép, de eredményesebb is legyen.
Ezek sokszor apróságnak tűnhetnek, de összességében sokat segítenek a látogatónak a tájékoztatásban, és egy lépéssel közelebb viszik a rendelés leadásában.
Az ikonok vagy piktogramok egy webshop menüjében nemcsak esztétikai szerepet töltenek be. Segítik a látogatókat a gyorsabb tájékozódásban, hiszen már egy pillantás alatt felismerhetővé teszik az egyes kategóriákat. Emellett egységes arculati elemként hozzájárulnak a márka professzionális megjelenéséhez is.
Az Értéksziget esetében, kisebb képernyőre váltva ezek már nem jelennek meg, könnyítve a tájékozódást.
A piktogramok elérhetősége nem teljesen egyedi funkció, több design témánkban is elérhető ez a lehetőség. Ugyanakkor az Értéksziget esetén a megfelelő ikonok megtalálása és elkészítése is a feladat része volt.
A “magazinszerű bannerkezelő modul” egy újkeletű vizuális megoldás. A hagyományos, statikus bannereknél jóval dinamikusabb és tartalmasabb élményt nyújt a látogatóknak.
Az Értéksziget webáruház esetén itt kaptak helyet a kiemelt ajánlatok, illetve azok a fő információk, amelyeket a látogatók gyakran keresnek (elérhetőségek, gyakori keresések).
Top termékek kiemelése a kategória oldalak tetején
Annak érdekében, hogy segítsük látogatók döntéshozatali folyamatát és megkönnyítsük a választást, minden kategória oldalon felsoroljuk a top 10 terméket. Ez így néz ki pl. a Gyógytorna kellékek kategóriában:
A szekció lenyitható és felcsukható, így nem zavaró a látogató számára.
Egyedi ikonok és információk a termékoldalon
Az egyedi ikonok és információk a termékoldalon gyorsan és érthetően kiemelik a termékről elérhető fontos tudnivalókat. A látogató ezen információk birtokában hamarabb döntést tud hozni és könnyebben össze tudja hasonlítani az ajánlatunkat másokéval. Azáltal, hogy minden fontos információ egy helyen van, áttekinthetőbb az ajánlat.
Termék szűrő modul
Az Értéksziget esetében pár termékkategória más-más szűrőt igényelt, mert adott tulajdonságok, csak az egyes kategóriába sorolt termékekre jellemzőek. Egy általános, egységes szűrő, nem lett volna releváns minden kategóriára.
Például a “Kötszer, sebellátás” kategóriában így néz ki az egyedi szűrő:
KPI számok és jelvények
Az Értéksziget büszke a rengeteg vásárlói visszajelzésre és az évek során elért eredményekre. Ezeket szerettek volna a főoldalon kommunikálni. A “Bízhat bennünk” szekcióba így több, egyedi kérés is megvalósult:
- egy mozgó animációval szemléltetjük a legfontosabb, számokban is kifejezhető eredményeket
- feltüntetjük az évek során nyert díjakat és elismeréseket
- a különböző felületről beérkező véleményeket egy szekcióba rendeztük, így a Google, Árukereső és a saját csatornás visszajelzések is meg tudnak itt jelenni.
Az egyes szekciók könnyedén szerkeszthetők az admin felületen, mert dinamikus modulként alakítottuk ki őket, így nincs szükség bonyolult kódolásra a módosításukhoz.
Egyedi szöveges oldalak
A redesign során a szöveges oldalak is teljesen új külsőt és elrendezést kaptak, így ezek is teljes mértékben illeszkednek a webáruház megjelenéséhez.
Megújult többek között a Rólunk, Ajánlatunk, Vevőszolgálat (Kapcsolat), Szállítás és fizetés, Szaküzlet, Prémium vásárlói élményprogram és Szolgáltatások oldal is.
Köszönjük a bizalmat, ismét!
Örömmel tölt el minket, hogy sikerült teljesíteni az Értéksziget tulajdonosainak a kéréseit:
- A webáruház új megjelenést kapott, amely abszolút megfelel mai felhasználói igényeknek és arculatban is meg tudtuk valósítani Alexa és Zoltán elképzeléseit.
- Az oldal gyorsabb és megfelel a Google legújabb elvárásainak, ráadásul a tulajdonosok elmondása szerint javult is az organikus pozíciójuk a design váltás óta. Ez részben annak is köszönhető, hogy az új design-t már a Starter 2.0 témán készítettük el.
- A webáruház mobilos nézete átláthatóbb lett, és az innen érkező vásárlások aránya is megnövekedett a megújulás óta.
- A Tudástár (blog) nagyobb szerepet kapott az egész webáruházban. A főoldalon kiemelt szekcióban látható, de ott van az egyes kategória és termékoldalakon is, ahol van kapcsolódó bejegyzés.
„Hálásan köszönjük, amit értünk és cégünkért tettetek az egyedi design kapcsán. Nagyon szép és tisztességes munkát végeztek. Az eredmény egy csodaszép és funkciógazdag, látványos webshop lett.”
Szabó Zoltán
Szeretnéd megújítani a webáruházad és teljesen egyedi megjelenést álmodtál meg? Segítünk megvalósítani! Kérj egy díjmentes konzultációt és beszéljünk az elképzeléseidről!
A szerzőről:
