Az Ügyfél

pzs_logoAkik közelebbről figyelik a hazai iparművészet trendjeit vagy érdeklődnek a kézműves design termékek iránt, Panyi Zsuzsiról szinte biztosan hallottak. Az üveg szenvedélyes rajongója, amely kollekcióiban ötletes ékszerek és letisztult design tárgyak formájában ölt testet. Egyedi, kiváló minőségű munkáit nagyvonalú színek és egyszerű geometriai formák jellemzik.

Panyi Zsuzsi története tankönyvekbe illő iskolapéldája annak, hogy egy szenvedély által vezérlet hobbiból miként lehet sikeres vállalkozás. Ahogyan annak is, hogy egy vállalkozás üzletvitelében milyen fordulópontokat eredményezhet az okosan felépített e-kereskedelmi jelenlét. A cég az elmúlt években sok energiát fordított korszerűsítésre és innovációra. 2016-ban érte csapatunkat a megtisztelő felkérés, hogy alkossuk meg a márka új, Magento 2 alapú webáruházát.

panyizsuzsi_termekek

A kihívás

Panyi Zsuzsi üzletvitelének és webáruházának működését olyan átgondolt üzleti és kereskedelmi folyamatok jellemzik, amelyeket nagyvállalatok is megirigyelnének. Kommunikációjában a márka erősen építkezik a saját gondozású tartalommarketingre, közösségi médiára, célzott remarketingre, a szezonális ajánlatokra, vásárlási trendek alapján személyre szabott ajánlatokra és a precízen kidolgozott eDM kampányokra. A vásárlókat lojalitás programok, testre szabott kedvezmények, célszegmensekhez igazított különleges ajánlatok fogadják. A rendelések kiszolgálása a logisztikával összehangolt gyártási folyamatok mellett történik, ahol minden munkafolyamat óramű pontossággal igazodik egymáshoz. Mindehhez számos célszoftver összehangolt működése szükséges.

Ezen összetett üzleti folyamatoknak a webáruház nemcsak egy alkotóeleme, hanem egyben irányítója is, ahol a vásárlási információk és a felhasználói viselkedési adatok aggregálódnak. A webáruház az a pont, ahol a kereskedelmi, felhasználói és tranzakciós adatok egy helyen összefutnak és rendelkezésre állnak, így logikus elvárás volt, hogy az üzletmenetben a webáruház szoftver egyfajta irányító szerepet töltsön be. A Panyizsuzsi márkának tehát olyan webáruház megoldásra volt szüksége, amely képes a hozzá kapcsolódó alkalmazásokkal (például eDM platform, számlázási rendszer, logisztikai rendszer, analitikai szoftverek) szinkornizáltan együttműködni és a felhasználói interakciók alapján azokat automatizáltan, adatszinkronizációk útján vezérelni. Vagyis a portálmegoldásnak a klasszikus e-kereskedelmi funkciókon túl CRM feladatokat is el kellett látnia.

panyizsuzsi_screens_04

Funkcionális és ergonómiai tervezés

A projekt előkészítő tervezési szakaszában nagy segítséget nyújtott, hogy az ügyfél előző webáruháza révén már alaposan ismerte a Magento működését és többéves e-kereskedelmi tapasztalata mentén sok ötlettel, konkrétan megfogalmazott funkcionális igénnyel támogatta a tervezési vezérfonal összeállítását. A precízen átgondolt követelményeknek köszönhetően a Panyizsuzsi webáruház üzleti igényfelmérési szakasza más projektekhez képest sokkal gyorsabb volt, így az ergonómiai tervezés hamar elkezdődhetett. Az ügyféllel folytatott termékműhely találkozók során részletesen kidolgoztuk a webáruház valamennyi felületének felépítését, vagyis az egyes oldaltípusok logikai kialakítását wireframe terveken keresztül modelleztük, mielőtt a konkrét design tervezésbe fogtunk volna.

panyizsuzsi_wireframe

Az ergonómiai tervezés egyik fontos kérdése az image tartalmak és a termékajánlatok helyes arányának megtalálása volt. A Panyizsuzsi márka igen sok állandó és szezonális kollekcióval rendelkezik, amelyek hangulatvilágát mindenképpen ki szerettük volna emelni a webáruház belépési pontjain. Ezért tudatos elhatározás volt, hogy a címlap betöltődésekor a felhasználót nagyméretű slider és erőteljes kiajánlók érjék elsődleges vizuális impulzusként. A hangulatfestő képeknek az aloldalakon (kategória oldalon, termékoldalakon) is kiemelt pozíciót adtunk, hogy segítsék az egyes termékcsoportok megértését, könnyebb befogadását.

panyizsuzsi_case_study_image02

A márka által megcélzott piacon jellemző trend az impulzus vásárlás, ezért a UX tervezés másik sarkalatos pontja a vásárlási élmény minél gördülékenyebbé tétele volt. Ebben a tekintetben nagy előrelépést jelentett a Magento 2 teljesen megújult pénztári logikája, amely elődjéhez képest sokkal átláthatóbbá és gyorsabbá vált. A Magento 2 webshop motor működési elve minden korábbinál letisztultabb vásárlási folyamatot és a felhasználók számára könnyebben használható felületi terveket tett lehetővé olyan kulcsfontosságú oldaltípusokon, mint például a kosár, pénztár, felhasználói fiók vagy a rendelés köszönő oldalak.

A portál tervezésében természetesen fontos követelmény volt a reszponzivitás is, amelynek hiánya a korábbi webáruház egyik egyértelműen kijavítandó hibája volt. A drótváz tervezés során a hagyományos desktop nézeten felül bevezettünk egy 1180 pixeles szélesebb desktop állapotot is, amely a nagyobb felbontású asztali monitorokon hatékonyabban gazdálkodik a rendelkezésre álló képernyő területtel. A wireframe terveket egy 12-es osztású grid-rendszerre építettük fel. Az alkalmazott modulháló előnye, hogy segítségével a széles és szűkebb desktop állapotok közötti váltás böngésző oldalon minimális erőforrásokkal megvalósítható, egyben a tablet és mobil verziók töréspontjainak kialakítására is alkalmas volt. Az ergonómiai terveket a legszélesebb oldalállapotoktól a legszűkebbekig megterveztük drótvázak szintjén, mielőtt a Photoshop-hoz nyúltunk volna.

Webarculat és látványvilág

Lifestyle és divattermékeket értékesítő webáruházak esetén különösen igaz, hogy a vásárlás élménye éppen olyan fontos, mint maga a termék. A Panyizsuzsi ékszereket élénk színek, játékos geometriai formák jellemzik, ahol egymással harmonizáló színminták alkotnak kellemes összképet. A márka egyik megkülönböztető attribútuma a tisztaság, színgazdagság és felszabadult vidámság. A webdesign tervezésekor is ezt a hangulatot igyekeztünk erősíteni. Ehhez első körben meg kellett figyelnünk és értelmeznünk kellett magukat a termékeket.

panyizsuzsi_ekszerek

A UI komponensek nagy lekerekítésekkel, kellemes eltartásokkal és a termékeken is visszaköszönő letisztultsággal építik fel az egyes layout-ok barátságos megjelenését, ami harmonizál a termékkínálat jellegével. A márka és a webdesign közötti konzisztencia érdekében ügyfelünk állandó résztvevője és véleményezője volt a tervezési munkának.

panyizsuzsi_case_study_image03b

A Panyizsuzsi termékek – ha megfigyeljük őket – érdekes összhangban vannak egymással (és valószínűleg ez az egyik oka annak, hogy oly sokan a márka rajongói). Egyazon anyagból készülnek, egymással rokon formavilágra építkeznek, mégis mindegyik más, a termékpaletta sokszínű és változatosan komponált. Hasonló összetevők kreatív kombinációja variációk és felhasználási területek széles tárházát eredményezi. A webdesign során is ennek az elvnek igyekeztünk megfelelni: egymáshoz nagyon hasonló kialakítású építőelemek, illetve azok variációi alkotnak oldaltípusinként más és más szerkezetet, hangulatot, funkciót. A design tervezéshez ezért az atomic design elveit alkalmaztuk; a kicsitől haladtunk a nagy felé. Első körben a termékek stílusjegyeiből képzett elemi szintű alkotórészeket terveztünk (UI kit), majd azokból komponens típusokat, végül komplett oldaltípusokat alkottunk.

A design tervezés a Google által megalkotott material irányzat szabályrendszerét követve készült. Főbb jellegzetessége a rács alapú elrendezés, amely a flat látványvilágot finom térbeli mélységérzettel egészíti ki. Az egyes UI elemeknek van térbeli kiterjedése, azaz finom árnyékot vetnek egymásra. Magukat az elemek a felhasználó mindig szemből látja és a mélységet, távolságot kizárólag az árnyékokból és a méretek változásából következtetheti ki. Ez magával hozza a flat designból ismert letisztultságot, ugyanakkor nagyobb szabadságot nyújt a komponensek hierarchiájának kifejezésére és lehetőséget ad bizonyos elemek egymásra csúsztatására. Szabályrendszere kiváló terep volt a hover effektekkel való játékra például a méretváltozások és óvatos alakváltozások alkalmazásával.

panyizsuzsi_case_study_image01

A tipográfiai kísérletezés során az Amble fontcsaládot választottuk, ami a korábbi webshopban alkalmazott Arial betűtípushoz képest lágyabb vonalvezetéssel rendelkezik. A fontcsalád szépen, vektorgrafikusan renderelhető a felhasználók böngészőjében. Elérhetők benne kifejezetten vastagon szedett és vékony metszetek is, amik kellemes ritmust tudnak adni a layout-nak, egyúttal jó eszközt nyújtanak a fontos headline-ok kiemelésére is.

A Panyizsuzsi webshop design-jának további érdekessége az alig észrevehetően, de konzekvensen szinte mindenhol fellelhető apró animációk jelenléte. A tervezés során tudatosan bántunk a kurzormozgásra aktiválódó mikro-interakciókkal. A webáruházban például SVG animációk, finom zoom effektek, a termékkártyák kissé késleltetett méretváltozásai, az input mezők feliratainak helyváltoztatása, easying effekttel kinyíló és visszacsukódó panelek teszik tudat alatt mozgalmasabbá a felhasználói élményt.

Technológia és fejlesztés

A webáruház fejlesztésének alapjául a Magento webshop motor legújabb, 2016-ban megjelent verziója szolgált. A Magento 2 tulajdonképpen egy ízig-vérig megújult platform. Többéves fejlesztése során a gyártó teljesen átalakította a webáruház motor backend architektúráját és fejlesztési megoldásait. A szoftver teljes kódszintű átdolgozása révén többek között bevezetésre került a piacvezető minőségű Zend2 PHP framework, inkrementális indexelési eljárások, továbbá a Magento 2 már a legújabb, PHP7-es környezeteken futtatható. Ezekkel az eljárásokkal a Magento sebességre rendkívüli módon, közel 100%-kal gyorsult.

magento2_logo

A Magento 2 elődjéhez, az 1-es szériához képest hatékonyabb, kifinomultabb gyorsítótárazást tesz lehetővé, javult a keresőoptimalizáltsága, hatékonyabb importálási eljárásokat biztosít, illetve minden tekintetben egy standardizáltabb és összetettebb szoftver. A Magento 2 megújult admin felülettel is rendelkezik, ahol a felhasználói élményt „touch-friendly” komponensek, gyorsabban paraméterezhető konfigurációs lehetőségek és logikusabban csoportosított információs blokkok teszik kellemesebbé.

A Panyizsuzsi.hu projekt során a webshop paraméterezése és frontend fejlesztése mellett igen sok, jellemzően integrációs feladatokat megvalósító egyedi Magento 2 modult fejlesztettünk, így a webshop gazdag ügyfélspecifikus vagy a hazai igényekre reflektáló műszaki tartalommal egészült ki. Ezek közé tartozik a Magento 2-höz fejlesztett OTP bankkártyás fizetés kifejlesztése, vagy például a DPD futárszolgálat rendszerével való integráció, amelyeket csapatunk modulszinten alkotott meg. Ügyfelünk eDM kampányainak kezeléséhez a webáruházat integráltuk az Interpire E-mail Marketer szoftverrel, amely modulfejlesztésünk időzített szinkornizációs eljárás révén folyamatosan karbantartja a két rendszer feliratkozói adatbázisát és állandóan megfelelteti azokat egymásnak. A fejlesztési feladatok részét képezte többek között a Számlázz.hu rendszerével való integráció, amely az ügyfél számára a webshopban leadott rendelések automatikus számlázását teszi lehetővé. Fejlesztéseink a Magento minden eddiginél szigorúbb coding standardjai szerint készültek.

panyizsuzsi_wide_01

Rendszerbevezetés és támogatás

Csapatunk Panyi Zsuzsival évek óta szoros kapcsolatban áll, így a projekt minden fázisát – beleértve a webshop éles üzembe helyezését és az azt követő aktív „babysitting” fázist – jó együttműködés és közös problémamegoldás jellemezte. Az intenzív, 3 hónapig tartó fejlesztési időszakot alapos tesztelési fázis követte, amely során az ügyféllel közösen kipróbáltunk és ellenőriztünk minden lényeges funkciót. Ebben az időszakban csapatunk aktív tartalomfejlesztési támogatást is nyújtott, kezdve a különböző szöveges tartalmak beszerkesztésétől, a hírlevél és rendszerüzenetek HTML fejlesztésén át az induló képi kreatívok betördeléséig.

A megújult webáruház 2016 novemberében indult el, gondosan előkészített élesítési forgatókönyv alapján. A vállalkozás számára kiemelten fontos a megbízható és stabil informatikai háttértámogatás, hogy saját szakterületére, az ékszerek tervezésére, gyártására, kommunikációra és ügyfél kiszolgálásra fókuszálhasson, ezért csapatunk a bevezetést követő terméktámogatási szolgáltatásokat is nyújt a webáruház kapcsán.

Panyi Zsuzsi a hazai piacon az elsők egyikeként adaptálta a Magento 2 platformot komplex webáruház formájában. Nagy örömünkre szolgált egy ilyen remekül felépített márkavilággal és átgondolt üzletmenettel rendelkező hazai iparművészeti vállalkozás online jelenlétén dolgozni. Azoknak, akik szívesen elmerülnének egy kicsit a letisztult, vidám és minőségi kézműves ékszerek világában, érdemes ide kattintaniuk.