Mountex multistore webshop: HU, RO, SK

A Mountex új magyar nyelvű webshopja 2022 első negyedévében élesedett, amelyet nem sokkal később követett a román és a szlovák webáruház. Logishop webshop megoldásunkkal a Mountex webáruház számos olyan funkciót kapott, amelyek biztosították az egyedi igényeket és a nemzetközi terjeszkedést. Ilyen többek között a variánsok egyedi kezelése, a termékszűrőben elhelyezett kategória navigáció, a wikimodul, a részletes készletinformáció, és az egyes üzletekhez tartozó szolgáltatások egyedi megjelenítése. Az újonnan bevezetett blogtartalom és a “Túratippek” applikáció integrációja pedig azt biztosítja, hogy a Mountex teljes élményt nyújtson a vásárlóknak, látogatóknak. A projekt egyedisége, hogy a webshop megszerezte a PCI DSS audit tanúsítványt a bankkártya adatok biztonságos kezeléséért.
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.
- Webshop szolgáltatási csomag: Logishop PRO
- Backend technológiák: PHP8.1, Symfony5 framework, Doctrine ORM, Twig templating; - MariaDB relációs adatbázis; Redis cache, Elastic search keresőmotor, S3 alapú storage (MinIO)
- Frontend technológiák: Javascript, css, html5, ajax, promise.
- Publikus felület: Vue.js, Nuxt.js, ES6, Axios, Vuex; SCSS, Vue module CSS.
- Admin felület: jQuery, ES6, Twig; BEM, SCSS
Loginet Systems kft.
-
Irodacím: 1117 Budapest
Galvani u. 2. III. emelet -
Székhelycím: 1221 Budapest
Vihar utca 5. D. ép. 4. em. 15. -
-