A PadPad.hu webshop redesignjának története: termékkínálat bővítése 150+ termékre, AI-alapú képfeldolgozás, automatikus SEO generálás, Google Merchant Center integráció, technikai SEO fejlesztések és konverzióoptimalizált főoldal.
Korábbi esettanulmányunkban boncolgattuk, hogyan álltunk át egy sablonos WooCommerce webshoppal egyedi fejlesztésre. Most viszont a motorcsere után egy design és grafikai átalakítás is szükséges volt, hogy tartsuk a mai trendeket.
Ami nagyon nem tetszett, az a főoldal megjelenése volt. Hiszen a cukrászdában is azt a süteményt választjuk, ami a legjobban néz ki. Az íze még nem derül ki ilyenkor, de a látvány az első dolog, amivel találkozunk. Ugyanez igaz egy webshopra is. Ezért ebben a körben inkább a grafika, a felhasználói élmény és a SEO irányába eveztünk el.
Termékek újragondolása
Első körben a termékeket gondoltuk újra. Eddig 10-20 alap termékkel ment a shop, és az egyedi tervezőn volt a hangsúly. Ez nem volt a legjobb döntés. Az emberek sokszor nem a saját grafikájukat töltik fel, hanem szeretnek választani kész designokból.
Ezt saját magamon is éreztem, amikor egy új mobiltokot akartam rendelni. Persze gondolkodtam rajta, hogy a családi fotónkat rakjam rá, miért ne lehetett volna, de végül mégsem tettem. Kiválasztottam egy absztrakt mintát és kész.
Ez alapján AI segítségével kialakítottam pár fő kategóriát, amivel érdemes lehet elindulni ezen a piacon. Ezután körbejártam, hogy az egyes témákhoz milyen képek működhetnek jól. Természetesen ebben is az AI volt segítségemre. Kategóriánként 10-20-30 ötletet generáltattam, majd azokból kiválasztottam a szimpatikusabbakat és elkészíttettem a végleges grafikákat.
A folyamat azonban nem állt meg itt.
Miután egy grafika bekerül a rendszerbe, egy automatizált feldolgozási folyamat indul el. Az OpenAI API segítségével a rendszer elemzi a képet, meghatározza a hozzá tartozó kategóriákat, címkéket generál, valamint kinyeri a legjellemzőbb 4-5 domináns színt. Ezek az adatok később a kategorizálásnál, a szűrésnél és a kereshetőségnél is felhasználásra kerülnek.
Emellett automatikusan elkészülnek a termékhez kapcsolódó SEO adatok is:
terméknév,
SEO title,
meta description,
alap leírás,
kulcsszavak.
A generált adatok természetesen bármikor manuálisan módosíthatók, de a rendszer jelentősen felgyorsítja az új termékek feltöltését.
Jelenleg már több mint 150 termék található a webshopban, ami szerintem sokkal barátságosabb kínálatot jelent, mint a korábbi néhány alaptermék.
A főoldal újragondolása
A termékkínálat bővítése után jöhetett maga a design.
A főoldali videó szép volt, jó volt, egyedi volt, de senkit nem buzdított semmire.
A jelenlegi slider és mellette a napi leárazás ajánló sokkal vágykeltőbb hatással bír. A sliderben aktualitások, szezonális kollekciók és az egyedi tervező hirdetése található meg.
A napi leárazás blokk mögött egy automatikus folyamat dolgozik. Minden nap éjfélkor lefut egy scheduler, amely kiválaszt egy véletlenszerű L-es egérpadot, körülbelül 40%-os kedvezményt állít be rá, majd a tegnapi akciós terméket visszaállítja eredeti árára.
Így minden nap új ajánlat fogadja a látogatókat.
Például egy 5990 Ft-os egérpad 3590 Ft-ért vásárolható meg. Sok esetben így szállítással együtt is kedvezőbb árat kap a vásárló, mint egy teljes árú termék esetén.
Ezután egy rövid információs sáv következik, ahol pár mondatban bemutatjuk magunkat.
Alatta található a kiemelt termékek szekció, ahol az aktuális kedvenceket, szezonális termékeket, leggyakrabban rendelt modelleket és esetenként limitált kiadásokat jelenítjük meg.
Majd következik egy fájdalompont szekció.
Ez alatt egy kategória blokk található, ahol a kategóriák képpel és névvel jelennek meg.
Ezután maga az egyedi rendelés folyamata következik, hogy segítsünk a látogatóknak minél gyorsabban eljutni a vásárlásig.
Természetesen nem maradhatott ki a vélemények szekció sem. Itt valós Facebook és Google értékelések jelennek meg.
Végül pedig a GYIK zárja a főoldalt.
SEO fejlesztések
A redesign során nemcsak a megjelenést, hanem a SEO alapokat is teljesen újragondoltuk.
Minden aloldal saját SEO beállítási lehetőséget kapott, ahol külön kezelhető:
SEO title,
meta description,
megosztási kép,
breadcrumb adatok,
JSON-LD schema adatok.
A cél az volt, hogy ne csak a termékoldalak, hanem a kategóriaoldalak és az egyéb tartalmi oldalak is külön optimalizálhatók legyenek.
A rendszer automatikusan kezeli a strukturált adatokat, a breadcrumb információkat és a Google számára releváns schema elemeket.
Megvalósult a Google Merchant Center integráció is, ahol napi szinkron fut a termékadatokkal.
Emellett bekerült a Google Search Console integráció. A sitemap automatikusan épül fel, és API segítségével beküldhető indexelésre és ellenőrzésre.
A termékekhez kapcsolódó SEO folyamatokat szintén AI támogatja, így a nagyobb termékszám mellett is kezelhető maradt az optimalizálás.
Színvilág és arculat
Az egész oldal színvilágával sem voltam megelégedve. A fekete-fehér-szürke kombináció ugyan letisztult volt, de nem igazán maradt meg az ember fejében.
Mivel a lila színt sok helyen a prémium, exkluzív vagy VIP érzéssel társítják, és mi is ezt a minőségérzetet szeretnénk kommunikálni, végül erre esett a választás.
Hírlevél feliratkozás
Bekerült a hírlevél feliratkozás is, ahol 10% kedvezményt biztosítunk az új feliratkozóknak.
Ezzel próbáljuk megszólítani azokat a látogatókat is, akik első alkalommal még nem vásárolnak, de később visszatérhetnek.
Kategória- és termékoldalak
Szerintem a képek magukért beszélnek.
A kategóriaoldal és a termékoldal alapvetően maradt a korábbi formában, mert ezekkel nem volt különösebb probléma.
A kategóriaoldalon viszont bekerült egy címke alapú és egy szín alapú szűrő is.
További szűrési lehetőségeket nem láttunk indokoltnak, mivel az árkülönbséget alapvetően a három méret határozza meg, a többi eltérés inkább a grafikából adódik.
Technológiai háttér
A megvalósítás során frontend oldalon:
Tailwind CSS
Livewire
Alpine.js
került felhasználásra.
Backend oldalon továbbra is Laravel szolgált alapként.
Összegzés
A projekt célja nem csupán egy szebb webshop elkészítése volt.
A termékkínálat bővítése, a főoldal konverziójának javítása, a SEO alapok megerősítése, az AI támogatott tartalomkezelés és egy erősebb prémium arculat kialakítása egyaránt fontos szerepet kapott.
A végeredmény egy modernebb, gyorsabb és sokkal jobban skálázható webshop lett, amely egyszerre szolgálja ki a vásárlói igényeket és a keresőoptimalizálási szempontokat.
