Mountex multistore webshop: HU, RO, SK

A szabadidős és outdoor-sport üzletlánc, a Mountex egyedi fejlesztésű webshoppal jelent meg az online értékesítési piacon, amelyet követett a régiós terjeszkedés Szlovákiában és Romániában. Meglévő platformja azonban nem követte a cég fejlődését, ezért a meglévő webshop lecserélése mellett döntött a cég.

A kereskedő ugyanakkor nem csupán a webáruházát kívánta lecserélni, hanem ökoszisztéma kiépítésében, azaz egymással integrált kereskedelmi rendszerekben gondolkodott, amelynek része a mobil app és a bolti kassza rendszer is. 

A Mountex az új webáruházához a Logishop webshop motort választotta, amelynek funkciói illeszkedtek a terveihez és egyúttal lehetőséget adtak az egyedi fejlesztésekhez, illetve biztos alapot nyújtottak a nemzetközi terjeszkedéshez.

Az új webshop keretében a cég felhasználóbarátabb felület létrehozását, az online vásárlási folyamat megkönnyítését, többfajta átvételi mód és a bankkártyás fizetés, illetve POS-rendszer bevezetését kívánta meglépni.

Tervei között szerepelt a már meglévő “Túratippek” rendszer bekötése, a tartalomgyártás elindítása, a törzsvásárlói rendszer megújítása, illetve, hogy a platform kezelni tudja a többrégiós működést.

Az új webshop fejlesztésének komplexitása miatt - a gördülékeny megvalósítást szem előtt tartva - szükségesek voltak a kompromisszumok, amelynek keretében szűkíteni kellett az első körben megvalósításra kerülő fejlesztések volumenét. Ez takarja az MVP szemléletet (Minimum Viable Product, a leggyorsabban elkészíthető első üzemképes prototípus), azaz, hogy az értékteremtés végett azzal induljon el a cég, ami mindenképpen szükséges az üzleti működéshez, és ez a későbbiekben dinamikusan tovább fejlődne.

A folyamat összetettségét mutatja, hogy a szűkített scope-hoz is több mint 300 oldalas specifikáció született.

Főbb kihívások:

• Nagyszámú termék és termék variáns (több mint 100 ezer), amelynek szinkronizációját egy korlátozottan módosítható ERP rendszerből kellett megoldani, a felhasználói élmény (performancia) szem előtt tartásával
• A Mountex extra rugalmas termék és márka megjelenítést várt el, amelyhez dinamikus termék listákat kellett megjeleníteni. Ebből kifolyólag a Logishop termék entitásához kapcsolódó funkciók kibővültek, és elkészült a Mountex számára egyedileg lefejlesztett termékekből álló dinamikus lista, illetve a termékeket tartalmazó termékkártya is.
• Különleges és részletes szűrő felületet kellett létrehozni.
• Külsős biztonsági megoldáshoz (Keycloak alapú azonosítási rendszer) kellett integrálódni.
• Egyedi, különlegesen kialakított cloud infrastruktúrán kellett a projektet megvalósítani, ami mindkét fél számára kihívást jelentett, de biztonsági okokból szükséges volt.
• A vásárlási folyamatot újra kellett gondolni.

Az új magyar webáruház fejlesztése 2022 első negyedévében élesedett. A webshop mobilbarát, reszponzív kinézetet, felhasználóbarát felületet kapott, és számos új, hasznos funkció, egyedi fejlesztés került a platformra.

Rugalmasan felépíthető oldalstruktúra - "LEGO elem" fejlesztés

A Mountex igénye volt, hogy egyedi landing, illetve tartalmi oldalakat tudjanak létrehozni, amelyeket a főoldal és a blog cikkek szerkesztése, landing oldalak kialakítása esetén használnának. A design csapat és a Mountex 27 tartalomtípust véglegesített, amelyeket "LEGO elemekhez" hasonlítottunk.

A LEGO elemek segítségével a Mountex előre létrehozott design elemeket tud feltölteni tartalommal, mint például egyedi címet adhat meg vagy feltölthet saját háttérképet. Ilyen "LEGO elemnek" számít például a Bannersáv LEGO elem, termék carousel, visszaszámláló, különböző bannerek, videós blokkok, szöveges blokkok. Ezen LEGO elemek pedig tetszőlegesen sorrendbe tehetők az egyes oldalakon belül egy egyszerű drag-and-drop módszerrel. Ez a fejlesztés a CMS bővítését is eredményezte.

Túratippek integrációja

A Mountex egy Túratippek rendszerrel rendelkezik, ami a korábban elindított Túratippek appot szolgálja ki: több mint 150 gyalogos túratippel látja el a felhasználóit, akik választhatnak, hogy barangolnak a feltöltött útvonalak között, vagy a különböző beállítási funkciók segítségével testreszabják a túrát, típusa (egyirányú- vagy körtúra), nehézségi fokozata és hossza szerint.  Az új webshop fejlesztést a Mountex arra is fel kívánta használni, hogy a “Túratippek” rendszert bekösse a rendszerbe. Egyedi integráció részeként a Túratippek rendszerük a webshopot is kiszolgálja: a cikkekben található bizonyos információk (térkép, túrahossz, nehézség) mind a központi túratippek rendszerből érkeznek.

Blog, tartalmi oldalak beillesztése

A webshop új elemének számít a Blog, amely kiváló csatorna a Mountex filozófia közvetítéséhez. Jelenleg a webshopok már nem csak webshopok, hanem teljes élményt szeretnének átadni a vásárlóknak, látogatóknak. Ezért volt fontos a Mountex projektnél a Blog továbbfejlesztése, hiszen ők nem csak termékeket árulnak, hanem túratippeket, kirándulásról szóló élménybeszámolókat, technikai ismertetőket, tippeket és tanácsokat, híreket is megosztanak a látogatókkal. Emiatt fontos volt a jelenlegi CMS bővítése a Blog funkcióval: több témája van, az egyes blogcikkeknek van szerzője, illetve címkék alapján kategorizálhatóak.

Termékvariánsok megjelenítése

Mivel elsősorban ruházati termékeket árul, fontos volt, hogy a variánsok ne külön termékkártyán jelenjenek meg, hiszen minden színt és méretet nem lett volna szerencsés volna külön-külön megjeleníteni. A sima termékkártya ehhez nem volt megfelelő, mert nem tette volna lehetővé a különböző színek megjelenítését az egyes variánsokból. Ezért egyedi termékkártyát fejlesztettünk nekik, amely összefogja az egyes termékekhez tartozó variánsokat egy egyedi szabály szerint. Az a színű variáns jelenik meg elsőnek a termékkártyán, amelynek a legnagyobb a készlete, és a színpöttyök segítségével megtekinthető a többi szín is. A variánsokat kizárólag színnel jelölik, a többi variánsképző tulajdonság nem látszik a termékkártyán. 

Ez a Mountex számára teljesen egyedi fejlesztés volt. Ez a működés a Gyűjtőszínek fejlesztést is magával hozta, hiszen nem lehetett számos színt feltenni a szűrőkbe és a termékkártyákra, hanem egyes színeket 'gyűjtőszínek' alá kellett elhelyezni (pl a kék alá tartozik a mountexes tengerész kék vagy fjord kék). 

A kártyán alapértelmezetten legfeljebb 7 darab szín jelenik meg. Abban az esetben, ha egy termékből több mint 7 darab szín érhető el, csak 6 darab szín jelenik meg a kártyán (mobilon ugyanis ez a darabszám, ami még kezelhető, amely a prototípuson elvégzett használhatósági tesztekből derült ki), és a hetedik szín helyén egy "+" gomb jelenik meg. Ha egy termék nem érhető el egy bizonyos színben, akkor a szín nem jelenik meg a termékválasztóban.

Mérettáblázat és márka

Új elemként került be a Logishop webshopba az a funkció, amely az adott márkához tartozó mérettáblázatot biztosítja a vevő számára. Erre azért volt szükség, mert az egyes márkák esetben eltérhetnek a méretek, így nem lehetett egy egységes mérettáblázatot kialakítani.

Wikimodul

A funkció célja, hogy a termékleírásban szereplő idegen szavakat elmagyarázza az érdeklődőnek, ha megakadna. A wikimodul a termék végoldalon megjelenő információs tooltip-et jelenti, amely a termék jellemzőkben és a termék leírásban előforduló szakkifejezések, idegen szavakra húzva az egeret jelenik meg. Például ha a vevő nem tudja, mi az, hogy Gore-tex, akkor ha az egérrel rámegy erre a szóra, egy keretben megjelenik az ezzel kapcsolatos információ.

A termékszűrőben elhelyezett kategória navigáció

A terméklista oldalon elkülönített szűrőpanelben jelennek meg a termékszűrők, ahová termék a paramétereket lehet feltenni. A szűrők a paraméter adattípusának megfelelően jeleníthetők meg (checkbox, radio button, érték választó).

Egyedi fejlesztés a Kategóriafa megjelenítése a termékszűrők felett a terméklistákon, amelynek segítségével a felhasználó könnyen navigálhat a webshop termékkategóriái között anélkül, hogy elhagyná a terméklistát.

Részletes készletinformáció

Az egyes termékvégoldakakon jelenik meg a készletinformáció, ahol látja a vevő, hogy az adott variáns mely áruházakban elérhető.

A felsorolt áruházak mellett felkiáltójel jelenik meg, ha az adott áruházban az adott variánsból már csak 1 darab érhető el. Amennyiben nem érhető el a variáns az adott üzletben, áthúzva jelenik meg az üzlet. Ha több mint 1 darab variáns érhető el, akkor az üzlet neve standard módon jelenik meg, és kattintásra információs tooltipet jelenít meg.

Bolt szolgáltatás

Új fejlesztésnek számít a webshop felületén megjelenő Bolt szolgáltatás, amelynek külön aloldaluk van, és megnézhető, hogy mely boltokban találhatóak olyan szolgáltatások, mint például a "Javítósarok" vagy a "Boulder".

Modernebb design kialakítása

A LogiNet UX szakértőkből álló csapata, a 22.design egy mai, modern megjelenésű designt készített a Mountex számára, amelynek a lépései a következők voltak:

• Persona építés.
• Terepszemle és user interjú (a tervező csapat elment a budaörsi mountex üzletbe interjúzni egyrészt, másrészt pedig, hogy testközelből is megtapasztalja a Mountex életérzést).
• User journey: felvázoltuk a webshop journey-t és megvizsgáltuk milyen egyediség figyelhető meg náluk.
• Versenytárs elemzés, külföldi best pratice-ek gyűjtése.
• UI design egy általunk frissített styleguide alapján. A konverziós út mellett fontos volt az életérzés átadása: nem csak webshop, de túratippek, ajánlók, szakértőiség jelenik meg az oldalon.
• A folyamat végén használhatósági tesztek történtek, amelyek alapján iteráltunk, finomítottunk.
• Azóta UX trackinget kezdtünk, azaz bevezetünk analitikai eszközöket, amelyekkel figyelhető az oldal teljesítménye.
• Egyedi ikonográfia használata, amivel stílust kaptak a weboldalak. Ilyen például, hogy kosár ikonként egy túratáska, a "kedvencek" szívecske helyett gomba, a menü szendvics pedig útjelző táblával lett jelölve. Ezeknek az volt az "ára" hogy elnevezésekkel kellett egyértelműsíteni a funkciókat, mert a szépség/ötletesség nem mehet a használhatóság kárára. Ezt kifejezetten teszteltük amúgy, hogy működik-e.

Bankkártyás fizetés bevezetése és PCI DSS audit

A bankkártyás fizetési lehetőség nyújtásának alapfeltétele a megfelelő biztonság megteremtése volt. A Logishop megoldásunkra épülő webshop rendszer megszerezte a PCI DSS audit tanúsítványt.

A PCI DSS standard a világ legnagyobb kártyatársaságai (VISA, MasterCard, AMEX, JCB, Discovery) által létrehozott adatbiztonsági szabvány, amely a bankkártya-adatok biztonságos kezelésének szabályait tartalmazza. A rendkívül szigorú előírások pontosan meghatározzák, hogy ki és milyen módon férhet hozzá a kártyaadatokhoz. A szabvány célja, hogy az online kereskedők és a kártyakibocsátók minél hatékonyabban tudjanak fellépni a bankkártyás csalások (és annak lehetőségei) ellen. A PCI DSS-elismerés garantálja az online indított fizetések biztonságát, valamint a Mountex kereskedelmi tevékenységének teljes körű megbízhatóságát is. A PCI DSS megfeleléssel a legmagasabb biztonsági szint érhető el, amely a fenti adatok tükrében is kiemelten fontos mind a vállalat, mind a vásárlók szempontjából.

A Mountex webshopon 3 havonta futtatják végig az ASV scan-t, ezzel ellenőrizve, hogy a szigorú feltételeknek minden szempontból megfelel-e az infrastruktúra. A PCI DSS tucatnyi – többek között a hálózati felépítésre és beállításokra, a szoftver-fejlesztésre és sérülékenység-menedzsmentre vonatkozó – biztonsági követelményt határoz meg.

Integrációk

Fontos volt a gördülékeny integráció a Mountex már meglévő SAP rendszerével, amelynek következtében a termékvariáns, felhasználói és rendelés adatok is mind egy interfészen keresztül közlekednek az SAP és webshop között.

Az SAP-hoz azonban nem csupán a Logishop kapcsolódott, hanem a Keycloak alkalmazás is, amely a felhasználók bejelentkezésekor az autentikációt végzi. A felhasználók regisztrációja a Keycloak rendszerében történik meg, és sikeres regisztráció esetén a Keycloak és a Logishop között meghatározott kapcsolaton keresztül kerülnek át a felhasználói adatok a webshop felületére, erre létrehozva egy webshop profilt a felhasználónak.

Az SAP mellett több rendszer integrációjára került sor: Sendinblue (CRM rendszer), Túratippek, BIG FISH Payment, GLS csomagpont miniapp, Foxpost csomagpont mini app.

A projektet alapvetően vízesés módszertannal (waterfall) valósítottuk meg. A fejlesztés előtt készült egy jelentős funkcionális specifikáció - mintegy 300 oldalon részletezve - amely a megvalósítandó projekt scope-ot részletesen leírta. Ettől függetlenül is menet közben számos olyan plusz igény merült fel, amellyel a projekt elején nem számoltunk, de ezeket az igényeket folyamatosan átvezettük.

A fejlesztés során a projekt tagok között a kommunikációt az Atlassian JIRA rendszerében vezettük. Itt fogalmaztuk meg a fejlesztési feladatokat, illetve a tesztelés során felmerült hibákat is. 

A fejlesztés során elkészült minden olyan dokumentáció és beállítás, amely az PCI DSS Audit során elvárásként meg lett fogalmazva.

A projet menetét folyamatosan figyelemmel kísértük a heti többszöri projekt státuszokon és az egyes régiós áruházak élesítése kapcsán külön élesítési meetingeken.

A Mountex új webshopja számos olyan funkcióval, egyedi fejlesztéssel bővült, amely segíti a növekedési terveit. A kártyás fizetés mellett az online platformon vásárolt termékek szállítási módja is bővült a felhasználói igények változására reagálva, az üzletben történő személyes átvétel és a házhozszállítás mellett lehetőség van csomagautomatákban is átvenni az árut.

A jövőben a magyar, szlovák és román webshopok továbbfejlesztése folytatódik a kimagasló online vásárlói élmény biztosítása érdekében.