Így készült el a Cheppers e-commerce design keretrendszere

Miért is vágunk bele?

Designerként te is érezted már, hogy újra és újra megrajzolsz feleslegesen bizonyos elemeket? Hogy a weboldal tetejéről indulva majdnem ugyanazokat a téglalapokat húzzod meg egy fejléchez Figmában (Sketchben, XD-ben)? Nos, valószínűleg nem vagyunk ezekkel a frusztrációkkal egyedül, hiszen számtalan csapat (Airbnb, IBM vagy mondjuk az UBER - csak hogy a nagyobbakat megemlítsem) készített már magának valamilyen design rendszert, ezáltal lerövidítve a tervezés idejét, illetve biztosítva a felhasználóiknak azt az elengedhetetlen élményt, hogy az oldalaikon pásztázva ugyanazokkal a mintákkal találkozhassanak. Így hát mi is beálltunk a sorba, hogy megalkothassuk a saját játszóterünk legalapvetőbb építőkockáit, ezzel nem csak időt takarítva meg leendő ügyfeleinknek, hanem megteremthettük azt a lehetőséget is, hogy az igazán finom tervezői falatokat ízlelgethessük, mint például a UI animációk alaposabb kidolgozása.

Kicsi körbetekintés

Mielőtt belevetettük volna magunknat a tervezésbe, kíváncsiak voltunk arra, hogy hogyan csinálják a “nagyok”. Mivel alapvetően e-commerce-es LEGO alkatrészeket készültünk gyártani, így kutatásunk fókuszába a Shopify “Polaris” nevű rendszere került, de tanulmányoztuk többek között, a sokak számára bizonyosan ismerős Material Design-t és a fejlesztőink által sokat emlegetett Ant Design System-et is.

Nem csupán kész design rendszerek után kutakodtunk, hanem szétnéztünk az e-kereskedelem világában is, hogy a legnagyobb látogatottságú és leggördülékenyebb vásárlási élményt nyújtó webshopok megoldásait tanulmányozzuk. A saját korábbi tapasztalatunkat és a kutatás segítségével szerzett új ismereteinket egybegyúrva megalkottunk egy modern, sallangmentes és egyedi igényekre könnyen skálázható keretrendszert olyan ügyfelek igényeire szabva, akik kinőtték a sablonos bérelhető webáruházakat, olyan egyedi igényeik vannak, amelyek ezekkel a megoldásokkal már nem vagy nagyon nehézkesen megvalósíthatóak és szeretnének versenyképesek maradni itthon, esetleg külföldi piacok felé nyitni.

Belekezdünk

A már sokak által kitaposott atomic design ösvényen indultunk el mi is. Először a legelemibb részecskéket az atomokat építettük fel (ilyenek például a címkék, beviteli mezők, gombok), majd jöhettek a molekulák, melyek atomok blokkjaiból állnak (például egy címke, egy beviteli mező és egy gomb közösen alkothatnak egy keresőmezőt), ezek után pedig az organizmusok következtek, amik már összetettebb UI komponensek (gondoljunk itt például egy fejlécre). Sokat segített a tervezésben a remek Figma nevű alkalmazás, ami a variánsok megrajzolásán túl, interakciókkal is tudja már bővíteni az építőkockáinkat (komponenseket). Erről bővebben is olvashattok egy korábbi cikkünkben.

A következő lépcsőfok a template - vagy más néven sablon - amely organizmusok kombinációja különböző elrendezésű, szerkezetű és funkciójú oldalakon. Innen pedig már csak egy kicsi mágia választ el minket a valódi tartalommal teletűzdelt e-commerce élménytől.

A tervezés során természetesen rengeteget konzultáltunk a fejlesztőinkkel, hiszen a végcél egy olyan leprogramozott rendszer létrehozása, ahol a különböző stíluselemeket (gombok lekerekítése, tipográfia stb.) változóként tudjuk definiálni, növelve ezzel méginkább a produktivitásunkat immáron nem csak a tervezési, hanem a kódolási szakaszban is.

A projekt utolsó szakaszában kipróbáltuk élesben is a megrajzolt elemek működését. Az eddig bemutatott munkára alapozva eltérő stílusú, egyedi webáruházak tipikus oldalait terveztük meg, a korábban szükséges idő töredéke alatt, miközben egyáltalán nem lett sablonos a végeredmény.

Mi az a Cheppers Commerce design keretrendszer?

Több mint 400 komponenst rajzoltunk meg a több hónapos közös munka során, tűpontosan definiáltuk őket a szoftverfejlesztéssel foglalkozó kollégáink számára és a sok közös workshop eredményeképp született meg a Cheppers Commerce design keretrendszer.

Megoldásunk úgy lett felépítve, hogy azt pillanatok alatt tudjuk személyre szabni, a betűtípust, a színeket szinte gyerekjáték legyen megváltoztatni, és a leendő webshopon megjelenő termékekhez illő szűrőket vagy akár egy teljesen egyedi folyamatot könnyedén lehessen beilleszteni.

Mire jó ez az egész?

Közhelynek tűnhet és az is, de muszáj megemlítenünk napjaink egyik legbefolyásosabb influenszerét, a koronavírust. Ugyanis a kényszeresen megváltozott szokásaink begyűrűztek egyebek mellett a vásárláshoz fűződő viszonyunkba is, és egyre többet rendelünk a netről . A korona mellett a nemzetközi trend is az e-commerce piac felpörgését jelzi, egyre többet vásárolunk mobilról is, így elengedhetetlen ma már, hogy egy modern és reszponzív webshoppal vegyük fel az egyre bővülő konkurenciával szemben a versenyt.

Rengeteg külföldi és hazai szolgáltató ad gyorsan és olcsón bérelhető webshopot, ahol cserébe nagyon gyorsan korlátokba ütköznek azok az ügyfeleink akik minket megkeresnek, leginkább akkor, amikor az egyedi folyamataikra szeretnék szabni a működését, vagy integrálni szeretnék a saját vállalat irányítási rendszerükkel. Az egyedi megoldások viszont időigényesek és nagyon költségesek. Ezt a szakadékot szerettük volna az utóbbi hónapok munkájával legalább részben felszámolni. Felgyorsítani a tervezést és a szoftverfejlesztést is. Hogy több idő jusson az egyedi igényekre, azokra a megoldásokra, amelyek versenyelőzhöz juttatnak az egyre komptetitívebb piacon.

Hamarosan prezentáljuk azt a bemutató webáruházat, amelyet a ma elérhető legmodernebb megoldásokra építve készítettünk el azért, hogy lásd, milyen egy modern, letisztult, villámgyors webáruház alapja szerintünk 2022-ben.

A design keretrendszerünk bemutató anyagát itt meg tudod tekinteni, a többit pedig együtt megálmodjuk és megvalósítjuk.

Ha Te is szeretnéd megújítani, leporolni elavult webshopodat, esetleg most építenél egy vadiújat, akkor látogass el a Cheppers Commerce bemutató oldalunkra, ahol további előnyökkel ismerkedhetsz meg a szolgáltatásunkkal kapcsolatban.