Ügyfél igények és kihívások

Az ügyfél azzal a kéréssel keresett fel minket, hogy szeretné korszerűsíteni weboldalát és a hozzá tartozó mobil applikációját is. Egy speciális projektről beszélhetünk, mivel az áruház - és a hozzá tartozó erőforrások - működése nem állhatott le a korszerűsítések során, emiatt a UX tervezés párhuzamosan zajlott a fejlesztéssel. Ebből fakadóan a tervezés pontossága, a tempós kivitelezés és a szűk határidők betartása kulcsfontosságú tényezők voltak a sikeresség felé vezető úton. Az applikáció fejlesztésében partnerünk, a Loginet Systems Kft. volt segítségünkre.

A magas prioritású (keresés, checkout) és a kevésbé fontos feladatok között úgy kellett egyensúlyoznunk és ütemeznünk a UX feladatokat, hogy nem sokkal a tervezés megkezdése után a fejlesztők el tudják kezdeni az alapok összerakását. A legfontosabb témaköröket, a sok iteráció miatt, csak a folyamat végén tudtuk definiálni. Azonban azzal, hogy mindent precízen és azonnali átadásra terveztünk, sikerült tartanunk a határidőket és ez nem ment a minőség rovására.

Megvalósítás

Az Auchan igényeinek tisztázását követően indultunk neki a 8 hetes design folyamatnak. A legtöbb iterációt a termékkártyák letisztultabbá, átláthatóbbá tételén, az áruház és időpont választáson illetve a kosárba helyezés funkciókon végeztük. Ezeknél a magas prioritású eseteknél a legapróbb részleteknek is kifogástalanul működniük kell annak érdekében, hogy a vásárlók felhasználói élménye a lehető legjobb legyen. A vásárlási folyamat tökéletesítése, az FMCG szektorban a nagy piaci verseny miatt, üzletileg is meghatározó. A kapott megoldásokat többször is teszteltük a felhasználókkal.

Először a keresési folyamat átalakításának vágtunk neki. Abból indultunk ki, hogy az applikációt megnyitva a felhasználó szeretné minél gyorsabban megtalálni a terméket, amire szüksége van. Az eredeti változat alsó navigációjában két nagyon hasonló elem is szerepelt, ami ezt a célt szolgálta, a Kategóriák, Keresés menüpontok. Az átfedés megszüntetése érdekében, arra jutottunk, hogy a kettő összevonásával egy Termékek menüpontot hozunk létre. A Termékekre kattintva a megnyíló oldal tetején megjelenik egy keresőmező, alatta pedig kártyákon a kiemelt kategóriák. Ezzel a megoldással a felhasználónak több opciót is kínálunk a keresett termékek megtalálására. A navigációban felszabadult helyre pedig átkerült a Kedvencek menüpont.

A terméklista kapcsán egy nagy kihívást jelentő problémára kellett megoldást találnunk. Egyes termékeket nem darabszámra, hanem súly alapján vásárolnak a felhasználók (zöldségek, húsok stb.). Ilyen esetekben a súly feltüntetésének akkor is jelentősége van, ha előre csomagolt, darabra vásárolható formában szerepelnek a kínálatban. Az app korábbi verziójában a kosár gombra kattintva csak lépcsőzetesen, fix értékenként lehetett növelni a mennyiséget (pl.0,35kg->0,70kg). Az új termékkártya gombjára kattintva egy picker view jön fel, ahol a felhasználó el tudja dönteni, hogy darabszám vagy súly alapján vásárol a termékből. Miután választ és a picker view eltűnik, a termékkártyán megnő a vásárlás gomb és láthatóvá válik, hogy mekkora mennyiség került a kosárba (darab vagy darab és súly variánsban). A kártyák korábbi vízszintes elrendezését függőlegesre cseréltük, ennek köszönhetően három helyett egyszerre négy jelenik meg a képernyőn. Újításként elhelyeztünk az alsó navigáció fölé egy zölddel kiemelt sticky sávot, ami a kosárba került áru összértékét mutatja a felhasználónak.

Átgondolt és precíz méretezésre volt szükség a termékkártyák részletének átdolgozásánál is. A könnyebb átláthatóság érdekében, a termékkártyákat egységesre terveztük, kezdve a kártyák méretével, ahol minden állapotban egységes magasságot határoztunk meg (ha megnőtt kosárba gomb vagy akciós ár is kikerült, extra információként). Az előre meghatározott szövegdobozban, a szöveg hosszától függően, a betűméret dinamikusan változik, ezzel is kitöltve az üres teret. Azért, hogy a cím a lehető legrövidebb legyen, létrehoztunk egy kiszerelést mutató címkét, ami a termékfotón jelenik meg, ennek hála például egy tej esetében mellőzni lehet a szövegből, hogy „1 liter”.

Az átvétel módjának megadása a vásárlási folyamat, legfontosabb, kezdő lépése. Itt dől el, hogy a házhozszállítást vagy az áruházi átvételt választja a felhasználó. Az elérhető termékek is attól függően listázódnak, hogy hol lakik és milyen időpontra rendel a vásárló. Az időpontválasztást éreztük a folyamat egyik érzékeny pontjának, ezért ennek validálására kiemelt figyelmet fordítottunk a felhasználói tesztek alkalmával.

Felhasználói validáció

A felhasználói tesztek során sok pozitív visszajelzés érkezett a designnal és a folyamatokkal kapcsolatban, ugyanakkor változásra érdemes, hasznos visszacsatolást kaptunk a kiemelt témakörökben. Ezeket apró szövegmódosítással vagy egyes elemek áthelyezésével oldottunk meg terv szinten.

Ilyen zavaró tényező volt például a kosár és az összesítő oldalon helyet kapó házhozszállítás/kiszállítás ideje blokk, amit ki is vettünk, így az oldal csak a kosárban található termékek listáját tartalmazza. Vagy ilyen apró módosítást igényelt a rendelés összesítő oldal, ahol zöld színnel emeltük ki a már kitöltött adatokat és pirossal a még kitöltésre váró felületeket. Ezzel egy sokkal informatívabb felületet hoztunk létre, ami segíti a felhasználót abban, hogy mely szekciókat kell ellenőriznie.

Továbbá megváltoztattuk az applikáció főképernyőjét, is a felhasználók visszajelzései alapján. Ennek köszönhetően, kikerült a bizalomkártya a főoldalra, mivel sokan arra használták az applikációt, hogy a regisztrált virtuális kártyát csippantsák le a vásárlás végén, ha nem volt náluk az eredeti.