Egy terméklistából felhasználói döntést támogató webshop.
Egy Webnode-alapú, nehezen áttekinthető webshopból többszintű termékválasztást és automatizált háttérfolyamatokat támogató WooCommerce-rendszer készült.
01 · Kiinduló probléma
A kihívás
A korábbi Webnode-alapú webshopban körülbelül 27 termék szerepelt, mégis nehéz volt eligazodni közöttük. A termékoldalak jellemzően képekből és egy hosszabb leírásból álltak, ezért a látogató csak akkor tudta volna érdemben összehasonlítani a kínálatot, ha sorban végigolvassa a termékoldalakat.
Közben a Héjakút mögött már létezett egy összetettebb termékrendszer, ez azonban a weboldalon alig jelent meg. Technikai oldalon a korábbi platform az automatizálási igényeket is korlátozta.
Szakmai megközelítés
A meglévő oldalt felhasználói szemmel vizsgáltam végig, és azt kerestem, milyen kapaszkodók hiányoznak ahhoz, hogy egy új látogató gyorsan megtalálja a számára releváns termékeket.
A redesign wireframe-ekkel indult. Ezekkel határoztuk meg, mely korábbi tartalmak maradjanak meg, milyen új információs rétegekre van szükség, és hogyan lehet úgy erősíteni a marketing- és SEO-szempontokat, hogy közben Zsuzsi sajátos hangja megmaradjon. Ezután készült el a UI design a meglévő arculathoz igazodva.
02 · Szakmai döntés
A termékekből rendszer lett
Probléma
A látogató kevés kapaszkodót kapott ahhoz, hogy a teljes kínálat végigolvasása nélkül felismerje, melyik keverék lehet számára releváns.
Döntés
A termékeket több, a felhasználó számára is érthető szempont szerint strukturáltuk, és a főoldalon már a terméklista előtt különböző belépési pontokat hoztam létre.
Megoldás
A rendszer problémakörök, testi és lelki fókusz, teacsaládok és egy interaktív választó felől is elérhetővé teszi a releváns termékeket.
03 · Folyamat
Több út ugyanahhoz a megfelelő keverékhez
A látogatók nem ugyanazzal a gondolkodásmóddal érkeznek, ezért a webshop sem egyetlen kategorizálási logikára épül.
- 1
Problémakörök
Alvás, stressz, női ciklus, emésztés és más élethelyzetek alapján lehet elindulni.
- 2
Interaktív választó
A felhasználó testi vagy lelki fókuszról, területről és a keresett támogatás intenzitásáról válaszol.
- 3
Teacsaládok
A Gyökerek ereje, Földanya ereje, Hold ereje, Nap ereje és Teák segítői más nézőpontból kapcsolják össze a termékeket.
- 4
Klasszikus szűrés
A terméklista oldalon hagyományos szűrés is rendelkezésre áll.
04 · Szakmai döntés
Az autentikus hang megtartása a struktúra újraírása közben
Probléma
A korábbi tartalmak egyik legnagyobb értéke Zsuzsi nagyon sajátos, felismerhető megfogalmazása volt. Egy erősen marketinges újraírás könnyen elveszítette volna ezt a karaktert.
Döntés
A wireframe-et közös döntési eszközként használtuk: előbb meghatároztuk, mi maradjon változatlan, hol kell új információ, és hol érdemes SEO- vagy marketing-szempontból erősíteni a tartalmat.
Megoldás
Az új oldal strukturáltabb és kereshetőbb lett, miközben megmaradt az a személyes hang, amely a Héjakút kommunikációját eredetivé teszi.
05 · Szakmai döntés
A termékcsomagolások színeiből digitális rendszer
Probléma
A weboldal vizuális világának kapcsolódnia kellett a már meglévő arculathoz és a fizikai termékekhez.
Döntés
A meglévő arculat és termékcsomagolások grafikai rendszerét Holló-Szabó Réka tervezte. A webes UI-t ehhez igazítottam, és a csomagolások színeiből digitális palettát és hierarchiát alakítottam ki.
Megoldás
A webshop így vizuálisan is ugyanannak a márkavilágnak a része lett.
06 · Szakmai döntés
Exportálhatatlan tartalomból strukturált WordPress-adat
Probléma
A Webnode-ból nem állt rendelkezésre olyan adatbázis-export, amellyel a korábbi termékleírások és tudástáranyagok egyszerűen átvihetők lettek volna.
Döntés
A releváns oldalak HTML-tartalmát lementettem, majd automatizált adatfeldolgozással és AI-eszközökkel választottam ki belőlük a megőrzendő tartalmi részeket.
Megoldás
Az így létrejött strukturált adatokból importállomány készült az új rendszerhez. Ez jelentősen lerövidítette a manuális másolással járó munkát, miközben az eredeti szövegek megmaradhattak.
07 · Szakmai döntés
Kevesebb manuális lépés a rendelés után
Probléma
A korábbi webshop technikai korlátai miatt több folyamat is manuális vagy nehezen kezelhető volt.
Döntés
A WooCommerce-rendszert úgy állítottam össze, hogy a vásárlási és rendeléskezelési folyamatok több külső szolgáltatással is összekapcsolhatók legyenek.
Megoldás
Az új rendszer támogatja az online fizetést, az automatikus számlázást, a GLS szállítást és csomagpontválasztást, valamint az egyszerűsített csomagcímke-generálást.
08 · Szakmai döntés
Gyors webshop és mérhető működés
Probléma
A sok új tartalom, interakció és webshopfunkció mellett fontos volt, hogy az oldal technikai teljesítménye ne romoljon.
Döntés
A fejlesztés során külön figyelmet kapott a teljesítményoptimalizálás és az oldal későbbi mérhetősége.
Megoldás
A mért teljesítményértékek 90 fölötti eredményeket adtak. Emellett bekötöttem a Google Analytics, Search Console és Merchant Center szolgáltatásokat is.
09 · Eredmény
Eredmény
A korábbi, elsősorban termékleírásokra épülő webshopból többszintű, felhasználói döntést támogató rendszer jött létre. A látogató problémakör, testi vagy lelki fókusz, teacsalád és interaktív választó alapján is elindulhat.
Technikai oldalon egy könnyebben működtethető, több ponton automatizált WooCommerce-rendszer váltotta fel a korábbi platformot. A mért teljesítményértékek 90 fölötti eredményeket adtak, és elkészültek a Google-integrációk is.
A te projektednél mi a probléma, amit meg kell oldani?
Ha új weboldalon vagy digitális felületen dolgozol, szívesen megnézem, hogyan lehetne UX, design és technikai oldalról egy rendszerként felépíteni.