TokShop eCommerce UX/UI redesign

A TokShop webáruházának teljes újratervezése komoly kihívást jelentett számunkra. A cég mobil kiegészítők területén komoly szerepet tölt be az online piacon. Feladatunk volt az új webáruház felhasználói élményének újragondolása, valamint a felhasználói felületek tervezése, a frontend fejlesztés koordinálása.

Az vásárlók felismerték, hogy külföldről rendelni mobil tartozékokat rizikós. Hol megjött, hol nem az jött meg, de mindenképpen lassan. Kína messze van a TokShop Budapesten. Egyszerűen. Gyorsan. Itthonról.

Márka

TokShop

Üzletág

eCommerce

Cél

teljes UX/UI terv biztosítása a frontend fejlesztőknek

Partner

TokShop

Feladat

UX/UI redesign

Év

2019

Platform

desktop, mobil

Weboldal

tokshop.hu

Feladat

Kutatás, Elemzés

Összegyűjtöttük az ügyfél által kitűzött célokat és a futó oldal felhasználói viselkedésének információi alapján levontuk a következtetéseket. Felállítottunk egy követelménylistát, mely alapján újraterveztük a jelenlegi webáruházat.

A felhasználói felület létrehozása során különös figyelmet fordítottunk a kapott arculati kézikönyv szabályaira. Valamint a célcsoport és a forgalmazott termékek jegyeire (fiatalos, lendületes, csúcsminőségű, minimalista, technológiai).

Feladat

Mobile Service Atlas

Mobile verzióban az oldal azonosítja a telefonod típusát és párosítja hozzá a megfelelő releváns termékkategória oldalt. A látogatók előszeretettel használják a funkciót, mely magas konverzióval bír.

Kérdés:
A Desktop verzióban hogyan tudunk személyre szabott ajánlatokat adni a látogatóknak?
Regisztrálja készülékét két lépésben és saját fiókjában mindig az eszközéhez illő termékeket éri el.

Régi weboldal problémakörei

Navigációs menü

A régi verzióban a menü bal oldali klasszikus oszlopos elrendezésben működött. Elemzésünk során megfigyeltük, hogy a navigációs menü használata nagyon körülményes volt és sok visszafordulást eredményezett. Ennek okán az amúgy is nagy szortimenttel rendelkező webshop termékei között elveszett a felhasználó. Egy ragadó megamenüre cseréltük, melyet az oldal bármely pontjáról elér a látogató.

Emellett a megoldás lehetővé tette a termékek párhuzamos kategorizálásának vizualizálását.

Régi weboldal problémakörei

Reszponzivitás hiánya

A régi verzióhoz képest egy olyan kialakítást terveztünk, amely lehetővé teszi, hogy az oldal rugalmasan alkalmazkodjon minden kijelző méretéhez. Fontos, hogy a jó UX, nem feltétlenül a teljesen azonos megjelenést jelenti a Desktop verzióval.

Régi weboldal problémakörei

Termékszűrés és rendezés

Az egyes termékkategória lista oldalain több 100 termék is listázásra kerül. A régi verzió terméklista oldalán nem voltak kellően vizualizálva a termékszűrő és rendező funkciók.

Kiemelt fontossággal bírt tervezésünk során a mobil verzió használhatóságának szerepe, mivel ha a látogató elvész a kínálatban elhagyja az oldalt. Nem kényszeríthetjük a látogatót arra, hogy hosszasan görgessen és közben fejben tartsa a saját termékpreferenciáit.

user interface

Lendületes Visual Design

Hiszünk abban, hogy egy kidolgozott Intuitív user interface és a tökéletes termékfotók összhangja alapköve egy sikeres online terméknek.

user interface

Mobile layout-ok

Gondoskodtunk arról, hogy a mobil felhasználók mindössze néhány kattintással elérhessenek mindent, amire szükségük van. Ne terheljük őket fölösleges dolgokkal, csak arra összpontosítsanak amit igazán szeretnek – az online vásárlásra.

user interface

Egyedi Illusztrációk

A TokShop márka az általa nyújtott szolgáltatások és széles termékportfolió alapján ismert és azonosítható. Tervezőink koncepciója volt, hogy a kidolgozott egyedi illusztrációk különleges karaktert kölcsönözzenek a projektnek, mely kifejezi azt az értéket, amelyet közölni akarunk.

user interface

TokShop eCommerce UX/UI redesign

Kutatás, Elemzés

Mobile Service Atlas

Navigációs menü

Reszponzivitás hiánya

Termékszűrés és rendezés

Lendületes Visual Design

Mobile layout-ok

Egyedi Illusztrációk

Kidolgozott UI elemek