AnyagPláza: a vásárlói út átgondolásától a megújult főoldalig
Az AnyagPláza UNAS webshop átalakítása nem a designnal kezdődött. A közös munka első lépéseként a teljes vásárlási folyamatot vizsgáltam át, hogy megtaláljuk azokat a pontokat, amelyek bizonytalanságot okozhatnak a látogatóknak, és megnehezíthetik a rendelést.
UNAS webshop átalakítás: először a működést tettük rendbe
Az AnyagPláza festékeket, építőanyagokat, szerszámokat és felújításhoz szükséges termékeket kínáló, már működő webáruház. A vállalkozás mögött Viktor és Dzseni állnak, a webshop mellett Makón személyes átvételi lehetőséget is biztosítanak vásárlóiknak.
Amikor Viktor megkeresett, nem egy új főoldal elkészítése volt az első feladat.
A webshop működött, rendelkezett termékkínálattal, érkeztek rendelések és a vásárláshoz szükséges információk is jelen voltak. Elsőként azt szerettük volna feltárni, hol vannak azok a pontok, amelyek bizonytalanságot okozhatnak a vásárlóknak vagy szükségtelenül megnehezíthetik a rendelést.
Ezért mielőtt a designhoz nyúltam volna, webshop működését és vásárlói útját vizsgáltam át: a termék kiválasztásától a kosáron és a szállítási lehetőségeken keresztül egészen a rendelés leadásáig.
A vásárlási folyamat egyszerűsítésével kezdtünk
A tesztelések során hamar láthatóvá vált, hogy a szállítási és fizetési folyamat több pontján is szükség van finomhangolásra.
Különösen a nagyobb tömegű rendelések kezelése igényelt pontosítást. Egyértelművé kellett tenni, mely esetekben szükséges egyedi egyeztetés, milyen szállítási lehetőségek közül választhat a vásárló, és hogyan tud ezekben az esetekben továbbhaladni a rendelés során.
Ebben a szakaszban többek között pontosítottam a szállítási módokat és súlyhatárokat, átdolgoztam a hozzájuk kapcsolódó tájékoztató szövegeket, egyértelműsítettem a fizetési lehetőségeket, átnéztem a személyes átvételhez kapcsolódó beállításokat, valamint mobilon is végigteszteltem a vásárlási folyamat problémás pontjait.
A cél nem pusztán az volt, hogy a rendszer technikailag működjön.
A vásárlónak értenie is kell, mi történik, milyen lehetőségei vannak, és mi a következő lépés.
A változtatások után Viktor az áruház adatai alapján arról számolt be, hogy az ezt követő időszakban nem tapasztaltak kosárelhagyást: „Aki betesz valamit, az meg is veszi.”
Ez az AnyagPláza által megfigyelt eredmény a módosításokat követő időszakból; önmagában nem bizonyít közvetlen ok-okozati kapcsolatot az elvégzett fejlesztésekkel.
A működés rendbetétele után előtérbe került a főoldal
Ahogy haladtunk a webshop fejlesztésével, egyre jobban kirajzolódott a következő feladat.
A vásárlási folyamat fontosabb pontjait már javítottuk, de a főoldal még nem ugyanazzal az egyértelműséggel vezette végig a látogatót.
A korábbi verzióban számos termékajánló és promóciós tartalom versenyzett a figyelemért. A webshop teljes kínálatának gyors áttekintése nehezebb volt, az egyes szekciók pedig még nem alkottak egységes vizuális rendszert.
Ekkor nőtte ki magát az eredeti fejlesztési munka egy teljes főoldali redesignná.
Viktor elképzelése az új irányról világos volt: a kék márkaszín maradjon, az oldal legyen modern, dinamikus és karakteres, és már az első képernyőn derüljön ki, mit kínál az AnyagPláza.
A részletek kidolgozásában szabad kezet kaptam.
Köztes állapot · 2026. szeptember 15.
A fő kérdés: mit kell látnia először a vásárlónak?
A főoldal újratervezésekor nem abból indultam ki, hogy milyen új elemeket lehet még elhelyezni rajta.
A kérdés inkább ez volt:
Mire van szüksége a látogatónak ahhoz, hogy néhány másodperc alatt megértse, hol jár, mit talál itt, és merre érdemes továbbindulnia?
Erre épült fel az új tartalmi hierarchia.
Az új nyitófelület azonnal bemutatja az AnyagPláza fő kínálatát, két egyértelmű CTA pedig a teljes kínálathoz és az akciós termékekhez vezet.
Közvetlenül ezután a vásárlás szempontjából fontos bizalmi információk jelennek meg: átlátható szállítás, biztonságos fizetés, személyes átvétel Makón és közvetlen segítség, ha a vásárló elakad.
Nyolc kategória, hogy ne kelljen keresgélni
Az egyik legfontosabb változás a „Mit keresel?” szekció kialakítása volt.
Nyolc vizuális kategóriakártyával tettük közvetlenül elérhetővé a fő termékcsoportokat: a festést, szerszámokat, gletteket és gipszeket, burkolást és szigetelést, munkavédelmet, szilikonokat és ragasztókat, autóápolást és vegyszereket.
A látogatónak így nem kell először a teljes menürendszert feltérképeznie ahhoz, hogy elinduljon a számára releváns irányba.
A kategóriák után a népszerű termékek következnek, majd külön tartalmi blokkok szólnak a szakemberekhez és az otthonukat felújító vásárlókhoz.
A főoldal így már nem egymás után elhelyezett promóciók sora, hanem tudatosan felépített útvonal a kínálat megismerésétől a konkrét termékekig.
Nem csak termékeket akartunk mutatni
Egy webshopnál könnyű abba a hibába esni, hogy szinte kizárólag a termékekről beszélünk.
Az AnyagPláza mögött azonban valódi üzlet és valódi emberek állnak, ezért ezt is láthatóvá szerettem volna tenni.
Önálló helyet kaptak az áruház előnyei és a vásárlói visszajelzések. A makói személyes átvételt külön blokk és térkép mutatja be, a főoldal végén pedig Viktor és Dzseni is megjelennek egy rövid bemutatkozással.
Így a látogató nemcsak azt látja, mit vásárolhat, hanem azt is, kitől vásárol.
Figma-tervből működő UNAS főoldal
A vizuális koncepciót Figmában terveztem meg, majd a meglévő UNAS webshopban valósítottam meg.
További webdesign munkáimat a portfóliómban is megnézheted.
Nem történt platform- vagy sabloncsere: az új megjelenést a Triton rendszer keretein belül, annak natív beállításaival, egyedi HTML-elemekkel és célzott CSS-módosításokkal építettem fel.
A meglévő kék márkaszín mellé világos, levegős felületek és sötét kontrasztos blokkok kerültek. Egységesebb lett a tipográfia, a gombok megjelenése, a kártyák és a tartalmi hierarchia is.
A desktop verzió mellett a mobilos megjelenést sem egyszerűen „összenyomtam”: külön figyelmet kapott a hero, a kategóriák elérése, a termékkártyák használhatósága, a tartalmi blokkok sorrendje és az érintésre használt elemek kezelhetősége.
Az átadás előtt desktopon, tableten és mobilon is végigellenőriztem a főoldalt, többek között a navigációt, keresőt, kategórialinkeket, CTA-kat, termékkosarat, carouseleket, térképet, kapcsolati adatokat és fontos footerlinkeket.
Az első szakasz elkészült – de a történet itt még nem ér véget
A megújult főoldalt 2026 szeptemberében adtam át.
Viktor visszajelzése:
„Megnéztem, nagyon szuper lett. Köszönöm a munkád.”
Viktor · AnyagPláza
A most lezárt szakaszban tehát a projekt az eredeti vásárlóiút- és működési fejlesztéstől eljutott egy új főoldalig és egy olyan vizuális rendszerig, amely meghatározza az AnyagPláza további megújulásának irányát is.
A webshop többi része még nem készült el.
A következő ütemekben a kategória- és terméklista-oldalak, majd a termékoldalak következnek. Ezeknél az új főoldalon kialakított vizuális és UX-rendszert visszük tovább, miközben a jelenleg még eltérő tipográfiát, tördeléseket és tartalmi megjelenéseket is egységesítjük.
Ezért ez az esettanulmány sem egy lezárt webshopprojekt vége.
Ez az AnyagPláza megújulásának első fejezete.
Mit viszek tovább ebből a projektből?
Az AnyagPláza számomra jól megmutatja, hogy egy webshop fejlesztése ritkán csak technikai vagy csak vizuális feladat.
A szállítási beállítás, a checkout egyik mondata, a kategóriák sorrendje, egy CTA felirata vagy a főoldal vizuális hierarchiája elsőre egymástól független részleteknek tűnhetnek.
A vásárló számára azonban egy folyamatot alkotnak.
Ezért a tervezési döntéseknél végig ugyanazt a kérdést tettem fel:
Mire van szüksége a vásárlónak ahhoz, hogy magabiztosan megtegye a következő lépést?
És számomra pontosan ettől lesz egy webshop nemcsak szép, hanem működő is.