Elindult a Mountex hazai, szlovák és román webshopja

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.

Előzmények

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. 

Célok

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.

Kihívások

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.

Megoldás

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.

Fejlesztési módszertan és technológia

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.

Technológiai stack

• 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

Eredmények és jövőbeni tervek

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.

"A LogiNet segítségével 2022. második negyedévében sikeresen bevezettük 3 országban a webáruházunkat (Magyarország, Románia, Szlovákia). Az együttműködésünkkel kapcsolatban pozitívumként emelném ki a LogiNet projektmenedzsmentjét, amely mindig rugalmasan reagált a felmerülő problémákra, extra fejlesztési igényekre. Fontos volt, hogy a szakemberei megértették az igényeinket, elvárásainkat, és erre igyekeztek minél gyorsabban megoldást találni, még akkor is, ha ez nem olyan könnyű egy egyedi fejlesztésekkel és komponensekkel rendelkező COTS szoftver esetében."

Baranyi Bálint, Mountex