Mochub.com
MOCHUB.COM

Közösségi piactér tervezés és fejlesztés

Szolgáltatások
UX KUTATÁS, UX/UI DESIGN, DRUPAL COMMERCE FEJLESZTÉS
Időszak
2017-18.
Ügyfél
Mochub
Iparág
Elektronikus kereskedelem

Mint egy LEGO® készlet különálló darabjai, amikor összerakjuk őket, pont olyanok, vagyunk mi magunk is, hisz együtt egy közösség részeként többre vagyunk képesek, mint külön-külön. A WE LOVE WHAT YOU BUILD (WLWYB) 2017-ben kereste fel a Chepperst azzal az elképzeléssel, hogy hozzunk létre egy közösségi piacteret az egyedi LEGO építményeket tervezők és építők számára; egy olyan helyet, amely összeköti őket a világ minden tájáról származó rajongókkal.

 

A weboldal célja, hogy az építők bemutathassák alkotásaikat (My Own Creation - MOC), ugyanakkor munkájukért jutalmat is szerezhessenek. Így született meg a MOCHUB.

 

“Bármit megépíthetsz, amit csak akarsz, ezért szeretem a LEGO®-t.”

 

“Drága, de mivel újra és újra felhasználható, így jobban belegondolva mégis olcsó.”

 

NÉZD MEG A WEBOLDALT

Mochub.com UI tervek

A LEGO® mindig is a világ egyik legkreatívabb játéka volt, amelyet fiatalok és felnőttek egyaránt kedvelnek. Időtlen formában, elemről elemre alkotunk meg egy új világot; a folyamatos kombinálás, keresés, építés folyamatában elmerülve csak a pillanatnak élve, majd felfedezzük és megcsodáljuk az újonnan született alkotást annak minden szegletéből. Ez az egyike azon ritka játékoknak, melyek a mai napig gyakorlatilag változatlan formában maradt generációk kedvence.

 

Bár már léteznek olyan felületek, amelyek bemutatják az egyedi tervezésű LEGO® építményeket és olyanok is, amelyek lehetővé teszik LEGO® alkatrészek vásárlását, még sincs más a piacon olyan, aki mindkét oldalt kiszolgálná. Az építők általában arra kényszerülnek, hogy fáradtságos munkával hatalmas és nehezen használható adatbázisokból nem hivatalos megnevezésű darabokat és alkatrészeket ássanak elő.

 

A Cheppers és a WLWYB egy olyan honlapot hozott létre, ahol az alkotók feltölthetik LEGO® MOC-jaik építési utasítását és az ehhez szükséges alkatrész listát. . A MOCHUB csapat gondoskodik mindenről, a tervek validálátástól és optimalizálásától kezdve, az alkatrész beszerzésén  át egészen a csomagolásig és szállításig bezárólag. A vásárlóknak nem kell többé időt tölteniük azzal, hogy kitalálják, mely alkatrészekre van szükségük, vagy hol és  hogyan lehet megvenni az egyes elemeket.

MOCHUB.com mobil UI terv

Első lépések

 

UX Tervezőcsapatunk 2017 nyarán kezdte meg a kutatást. A versenytárselemzés megerősítette, hogy nincs közvetlen verseny a piacon. Az üzleti célok feltárása mellett ez az információ segítette a kutatókat a WLWYB által kínált egyedi értékesítési pontok meghatározásában.

 

A felhasználói  interjúkat az MocHub irodájában és raktárában tartottuk. Egyeztettünk többek között a WLWYB ügyfélszolgálati képviselőivel, akik gondoskodnak a logisztikáról, szállításról. A véleményük és az általuk alkalmazott munkamódszer megértése kulcsfontosságú volt, mivel ők kezelik a weboldalról érkező megrendeléseket.

 

Az UX backlog óráról órára nőtt, és később, amikor további 9 interjút készítettünk a célcsoport tagjaival, megerősítést nyert két dolog:

 

  • A MOCHUB igazi megoldás lesz a LEGO® közösség valós problémáira
  • Az oldal gyors indításához elengedhetetlen a minimálisan szükséges funkciók (MVP) és szolgáltatások kiemelése a számtalan ötlet, terv, vágy és elképzelés közül a backlogból
MOCHUB.com UX tervezés

UX tervezés

 

Mi, UX tervezők nem vagyunk feltalálók: a weboldalakon elhelyezett megoldások többségével - mivel ismerősek a felhasználók számára - könnyű dolgunk van. Vegyük például a keresőmezőt: tudjuk, hogyan működik, és mit kell csinálnia, így használatuk során nem ütközünk akadályokba. Ezért is illesztünk egy mintaelemzési lépést  a UX tervezési fázisába: célunk megismerni, hogy mely összetevők illeszkednek jól egymáshoz, és melyek használata nem okoz majd fejtörtést felhasználóink számára.

 

A MOCHUB esetében a minták hasonlítottak számos közösségi csatornáéhoz, így az olyan komponensek, mint a beágyazott videók, a képgaléria, a visszajelzések, a megjegyzések és a keresőmező a kezdetektől fogva a rendszer részét képezték. Később azonban, ahogy az MVP elvárások alapján csökkentettük a szolgáltatások számát, ezek közül néhánytól búcsút kellett vennünk.

 

A kutatás során megalkotott vásárlói és vevői perszónák viselkedését forgatókönyvekkel modelleztük kiindulásképp. A forgatókönyveket és az összegyűjtött mintákat használva belevetettük magunkat a drótváz tervezésbe, és a teszteléshez elkészítettünk egy InVision prototípust.

A prototípus tengerentúli felhasználókkal történő tesztelése nem volt a legegyszerűbb, de csapatunk lelkesen állt hozzá a problémához. A használhatósági tesztek ütemezése és megvalósítása 2 hétig tartott, így az egyes tesztek közötti időt a tervek finomítására, újragondolására használtuk fel.

Mochub.com desktop UI terv
Mochub.com tablet UI terv
Mochub.com mobil UI terv

Weboldal fejlesztés

 

A LEGO® gyerekkorunk óta szülőként is az életünk része, és erre a Cheppers-ben mindannyian jó szívvel gondolunk. A WLWYB egy olyan platform megalkotásával bízta meg a Cheppers-t, ahol a kreatív tagok bemutathatják és értékesíthetik a WLWYB óriási LEGO® alkatrész kínálatára támaszkodva épített alkotásaikat. Itt mindenki csak nyerhet: végre vásárolhatunk szuper készleteket, építési utasításokkal és az alkotóelemekkel, illetve tervezőként munkánkkal pénzt kereshetünk.

 

A MOCHUB honlap felépítése viszonylag egyszerű: a felhasználók feltölthetik saját alkotásaikat (My Own Creation - MOC), amiket a látogatók megvásárolhatnak. A  vásárlások után járó jutalék  jóváíródik az értékesített készletet tervető felhasználó MOCHUB számláján, ahonnan egyszerűen felveheti a pénzt.  A weboldal fejlesztése során beépítésre került néhány, az egyedi igényekhez igazított modul a -küldeménykövetéshez, a munkafolyamat-szabályozáshoz, fizetéshez és a teljes e-kereskedelem folyamathoz, mindezt egy lenyűgöző, mind az értékesítői, mind a vevői folyamatok könnyű kezelését támogató vizualitással. Az ötlet lényege, hogy a MOC-k megálmodói egyazon felületen mutathassák be, és értékesíthessék alkotásaikat.

 

Amikor megismertük a projektet és áttekintettük a weboldalhoz kapcsolódó követelményeket, a Drupal keretrendszer használata volt a legkézenfekvőbb választás. A megjelenítendő termékek, a kereskedéshez kapcsolódó funkcionalitás és az adminisztrációs folyamatok életre keltése csupán két havi munkát igényeltek a fejlesztőcsapat részéről.

Mochub.com weboldal

Modulok, amiket használtunk

 

A Drupal (Commerce) nyilvánvaló választás volt az e-kereskedelmi funkcionalitás számára, beleértve az árak és jutalékok termékek szerinti adminisztrációját, egy egyszerű fizetési folyamat kialakítását, a fizetési eredmények feldolgozását és a szállítási feladatok kezelését. Az egyedi termékfeltöltési és vásárlási megoldások, illetve a jutalékkezelés miatt az alap Drupal Commerce funkcionalitást több helyen saját fejlesztésű megoldásokkal kellett kiegészítenünk, módosítanunk. Azonban a közösség által fejlesztett, nyílt forráskódú komponensek jelentős fejlesztési időt - így költséget - takarítottak meg. Íme néhány, a projektben használt kulcs modul:

 

  • Drupal Commerce
  • Bootstrap
  • Panels and Page Manager
  • Views
  • Search API Solr
  • Simple Hierarchical Select
  • Slick
  • Social Media API, Social Auth (Google and Facebook), Disqus
  • SVG Image, Simple Styleguide, Blazy, Colorbox, Crop, DropzoneJS
  • Webform
Megosztás

Van egy projekted számunkra?