Seiko Boutique
Esettanulmány

Seiko Boutique

Az Ügyfél

A SEIKO a japán óragyártás úttörője, egyben a világ órapiacának egyik ikonikus márkája, amely számos korszakalkotó óra megalkotója volt az elmúlt 130 évben. A márka tökéletesség iránti elkötelezettsége és szigorú minőségi előírásai nemcsak termékei kivitelezésében öltenek testet, ám azok fogalmazására, képviseletére és eladási folyamataira is kiterjednek. Ügyfelünk, a Seiko Boutique – régiónkban egyedüli Seiko prémium kereskedőházaként – 2016-ban nyitotta meg elegáns és nemzetközi szabványok által szabályozott üzletét a Szent István Bazilika szomszédságában. Csapatunkat érte a megtisztelő feladat, hogy megalkothattuk az üzlet online megjelenését és webáruházát, amely a fizikai bolt működésével összehangolt, annak arculatához illeszkedő portálként jött létre. A projekt egyik hangsúlyos követelménye volt, hogy a márkával érintkező vásárlóknak a fizikai boltban és a weben egyaránt ugyanolyan magas színvonalú élményben kellett részesülniük. A 2016 augusztusában indult webáruházat Magento alapokon fejlesztettük.

Seiko Boutique mockup

Ergonómiai kialakítás

Abból adódóan, hogy a portál célja nem pusztán egy webshop létrehozása volt, hanem egyben a márka és az üzlet brand oldalaként is funkcionál, semmiképpen sem egy hagyományos webáruház tervezési feladat állt előttünk. Az eladásösztönzést az image építéssel kellett ötvöznünk, amelyeket egyenlő hangsúllyal kellett szerepeltetnünk a készülő online platformon. Emiatt igen sok felületen volt szükség a megszokott e-kereskedelmi megoldások vagy a webshopokra jellemző konvenciók újragondolására. Ebben a munkafolyamatban ügyfelünk igen innovatív szemléletű partnernek bizonyult. Az ergonómiai tervezés vezérlő elvei a felfedezés, a lenyűgözés, a technológiai részletekben való zavartalan elmélyedés és a könnyed vásárlói élmény megteremtése voltak. Ennek elérésében nemcsak a rendelkezésre álló jó minőségű termékinformációk és bemutató anyagok voltak segítségünkre, hanem a portál alapkoncepciója is. A Seiko Boutique alapítói tudatosan egy tartalomgazdag portált szerettek volna alkotni, amelyben a hírek, blogtartalmak, speciális Seiko magazin kiadványok és a prémium klubtagoknak szóló különleges ajánlatok alkotják a website igazi hozzáadott értékét. A felhasználói élmény tervezést tehát igen sok „csatasorba állítható” tartalom és mondanivaló támogatta.

Seiko Boutique drótváz

A projekt során készült drótváz tervek mintái

drótváz tervek kialakítása során szándékosan kiléptünk a megszokott kb. 1200 pixeles szélesebb desktop tartományból elmozdultunk a fullwidth szélesség felé. Így a termékeknek és a márka lenyűgöző látványvilágának nagyobb teret tudtunk engedni. Egyúttal lefelé is „tágítottuk a teret”, sok helyen alkalmaztunk fix frame méretű oldalblokkokat a lookbook-jellegű élmény eléréséhez. A felületek kialakítása során folyamatosan tisztítottuk és egyszerűsítettük a komponenseket, egyértelmű hangsúlyokkal vezetve a látogatók figyelmét. A portált erős vizuális impulzusok, szellős térközök, markáns tipográfia és a képernyőt uraló, hangulatfestő tartalmi kiajánlók határozzák meg. A design tervezést minden kulcsfontosságú felületre kiterjedő wireframe tervezés és termékműhely workshopok előzték meg. Így alakultak ki például a márkakollekciók látványos elosztó oldalai, a szokatlan, ám informatív elrendezésű termékoldalak vagy a VIP felhasználók élménygazdag oldalszekciói. Ezek mind első körben ergonómiai koncepciókban öltöttek testet, mielőtt a Photoshop-hoz nyúltunk volna.

Webarculat és látványvilág

A webáruház design tervezése igazi örömjáték volt a csapatunk számára. A márka arculatával, image képeivel, videós anyagaival és termékfotóival való munka nagyon hálás feladat volt. A tervezési folyamatban a design és frontend csapatunk számos szereplője részt vett, így a tervezést kollégáink és az ügyfél közötti állandó iteráció és közös ötletelés jellemezte. A webdesign kialakításában fontos szempont volt a prémium életérzés közvetítése, amelynek elsősorban magas társadalmi státuszú férfi vásárlókat kellett sikerrel megszólítania. A kiváló minőségű termékfotók lehetővé tették, hogy sok helyen parallax elemekkel és a képanyagok izgalmas animációjával dolgozzunk. A design tervezés további érdekessége volt, hogy a Seiko egyes termékkollekciói önálló logóval, színvilággal és mini-arculattal rendelkeznek, így ezeket egy egységes vizuális keretrendszerben kellett összehangolni úgy, hogy se egymással, se website alaphangulatával ne ütközzenek. Így született meg a fizikai bolt belsőépítészeti megoldásaival összhangban lévő, alapvetően sötétszürke és aranybarna színrendszer, amelyre az egyes kollekció arculatok jól felfűzhetők voltak.

A fő oldaltípusok design terveinek elkészültekor azokat külön le is fejlesztettük, hogy a tokiói központban bemutathatók és véleményezhetők legyenek, hiszen a termékpaletta online prezentációját szigorú nemzetközi előírásokhoz kellett igazítanunk. Vagyis már a design szakaszban frontend prototípus fejlesztés zajlott a Magento fejlesztés elkezdése előtt. Az arculatgazdáktól érkezett visszajelzéseket követően folytattuk az összes oldaltípus design tervezését, amelyek valamennyi reszponzív állapotban elkészültek, a fejlesztéshez pedig UI kit és előkészített CSS styleguide is készült.

Fejlesztés és bevezetés

A fejlesztés technológiai alapjául a Magento webshop motort alkalmaztuk, amely mind tartalomkezelési, mind e-kereskedelmi funkciói terén élvonalbeli eszköztárral rendelkezik. A felhasználói élmény javítása érdekében a projektben számos, OANDER saját fejlesztésű Magento modul került felhasználásra. Mivel a SEIKO termékpalettája igen gazdag és technikai specifikációk széles skáláján mozog, a webáruházhoz egy egyedi termékkereső és varázsló funkciót fejlesztettünk, amely next-next-finish elven működve a felhasználó ízléséhez és műszaki elvárásaihoz igazítva ajánl modelleket. Ugyancsak ebből adódóan fontos szerepet kapott a termékösszehasonlító funkció precíz kidolgozása, illetve egy egyedi ajánlórendszer kialakítása, amely a megtekintett termékekhez jellemzők alapján előre programozott algoritmusokkal javasol a látogatónak további modelleket.

A backend fejlesztési feladatok másik kihívása egy többszintű clubtagsági rendszer megalkotása volt. Ennek segítségével a felhasználók a korábban megvásárolt óráikat be tudják regisztrálni az oldalon, a Seiko Boutique pedig számukra extra ajánlatokat, mások számára nem elérhető információkat tud publikálni. A clubrendszer egyben a vásárlókkal való kapcsolattartás és a márkával való szorosabb viszony kialakításának eszköze is, ahol a vásárlók a zártkörű eseményektől a szerviz lehetőségekig minden fontos információt elérhetnek. Ezen funkciókat mind egyedi modulfejlesztésekként készítettük el a Magento engine-re építkezve.

Bátran állíthatjuk, hogy a Seiko Boutique az egyik legösszetettebb Magento frontend fejlesztés eredménye, amelyet bármilyen fejlesztőcég a közelmúltban felvonultatott. Tekintve, hogy a felületek kialakítása számos helyen eltér a Magento ergonómiai logikájától, illetve a webshop számos olyan egyedi funkcióval rendelkezik, amelyek egyedi sitebuild megoldásokat igényeltek, a Seiko Boutique frontend kialakítása más projektekhez képest nagyobb, ugyanakkor rendkívül izgalmas kihívást jelentett. A kliens-oldali fejlesztéshez az OANDER által fejlesztett, Bootstrap-alapú Magento alapsablon szolgált kiindulópontként, amely a fejlesztést gazdaságosabbá és kódszinten színvonalasabbá tette, mintha a projektet a Magento gyári sablonjából származtattuk volna.

A fejlesztést alapos tesztidőszak követte, majd a tartalomfeltöltési fázisban csapatunk aktívan közreműködött a portál tartalomfejlesztési feladataiban. Így segítettük ügyfelünket a tartalmak rögzítésében, szerkesztési mintákat készítettünk és design csapatunk közreműködött a különböző képi kiajánlók előkészítésében is. A Seiko Boutique 2016 júliusában élesedett, és az ügyféllel végzett közös munka eredményeképp egy olyan webáruház született, ami méltó mind a Seiko márka, mind a prémium bolthálózat által képviselt minőséghez. Akik szeretnének a karórák világában kalandozni egy kicsit, mindenképpen érdemes ellátogatniuk a webáruházba.

Kattints ide a webáruház megtekintéséhez!