Comnica CC Szoftver re-desing

Comnica egy Contact Center szoftver mely kezeli a kimenő és bejövő hívásokat, rögzíti azok adatait, és ezen adatok feldolgozását segíti. A felhasználói: ügyfélszolgálatok és Call Centerek (B2B szoftver).

Körülmények

9 fős fejlesztő csapattal dolgoztam együtt UI/UX designerként, scrum módszertanban.

Feladatom

A szoftver problémás területeinek feltárása, a felhasználói nézőpontok felkutatása és megoldási javaslatok prezentálása és elkészítése a fejlesztő csapattal együtt.

Idő

2016. május – 2017. december

Áttekintő

A több mint 10 éve épülő és fejlődő szoftver rengeteg olyan funkciót tartalmaz, amely a felhasználó minél egyszerűbb és komplexebb munkavégzését hivatott szolgálni. Azonban a nem konzisztensen beépített elemek bonyolultabbá tették az egyszerűbb feladatok elvégzését is. Ezért volt szükség a szoftver komplett felülvizsgálatára, a felhasználói szempontok és az üzleti érdekek összeegyeztetésére.

Kutatás

stakeholder Interjú

Vezetőség tagjai, Comnica support tagjaival, akik nap mint nap kezelik a felhasználók panaszait.

EthnograpHic research

Terepi megfigyelés, a felhasználók megfigyelése munka közben. Ezzel a módszerrel betekintést nyertem egy számomra ismeretlen szakma dolgozóinak mindenapi munkájába. Valamint segített kontextusba helyezni a szoftver használatát, hogy milyen tényezők befolyásolják még a felhasználó munkáját és milyen más eszközöket használnak még.

User Interjú

A különböző feladatkörökben lévő felhasználókkal készítettem félig irányított interjúkat a napi feladataik és a szoftver használatára vonatkozóan. Célom a különböző feladatkörökhöz tartozó munkafolyamatok megértése.

Surveys

Több résztvevőnek küldtem kérdőívet az interjúk után felmerülő kérdésekből, valamint olyan kérdésekből melyekről szeretem volna qualitatív eredményt.

user tesztek

A terepkutatás során adtam feladatot a felhasználóknak hogy lássam, a különböző feladatokat milyen útvonalakon oldják meg.

Desk research

Hasonló külföldi példák felkutatása és a hazai versenytársak megismerése, elemzése.

Mintavétel

A kutatáshoz a tesztalanyok kiválasztásánál figyelembe vettem a cég méretét az országon belüli elhelyezkedését, a cégen belüli pozíciót, és törekedtem arra hogy minden szegmenstől begyűjtsem azt.

Következtetések és a probléma meghatározás

Perszóna alkotás

A Perszónák elkészítése segített összefoglalni és koncentrálni a kutatások eredményeit. Az elkészített perszónák munkavégzés fókuszúak, fontosnak tartottam a motivációk és frusztrációk mellett feltüntetni azokat az eszközöket, amelyeket a Comnica mellett használnak, hogy emlékeztessenek a szoftveren kívüli munkafolyamataikra és kompetenciáikra.
A perszónákat felhasználtam az egész fejlesztési folyamat során.

A szoftver 2 Perszóna megalkotását igényelte, akik különböző munkakörökben használják a szoftvert.
– operátorok, akik a telefonon beszélnek az ügyfelükkel, ők rögzítenek adatokat a hívásról a szoftverbe (pl.:milyen válaszokat adott az ügyfél a feltett kérdésekre), valamint a szoftver is rögzít adatokat a hívásról (hívás hossza, stb)
– szupervizorok, akik az operátorok munkáját irányítják, elemzik és értékelik

Feature List

A perszónák és a kutatott feladatkörök álltal jól meghatározhatóak azok a feladatok és funkciók amiket a userek végeznek, használnak. Így kilalakult egy Feature list, ami segített a funkciók priorizálásában, és feladatkörök szerinti csoportosításában.

A feladatkörökhöz kapcsolt featurek úgy segítettek a szoftver felületének egyszerűsítésében, hogy belépéskor megadható, kiválasztható egy listából, hogy milyen feladatokat végez az adott felhasználó. Ezzel a megoldással, csak azok a featurek jelennek meg számára a felületen amelyek számára relevánsak, így csökkentve a zajt (felesleges, vagy akár inaktív gombokat, ikonokat) a felületen.

User Flow

A feladatokat apró lépésekre bontottam, hogy kirajzolódjanak a folyamatok és minden eshetőség, ami munka közben felmerülhet. Ez segítette kidolgozni az elnavigálás mentes felületet, amely a szoftver korábbi verziójában nagy problémát okozott.

Probléma1

A kampányindítás munkafolyamata sok el és átkattintással teljesíthető a felületen, a felhasználó könnyen elveszti a fonalat és nehezen talál vissza, kiesik a flow-ból.

megoldás1

Egy felületen lépésről lépésre elvégezhető a kampányindítás, ha más körülmények miatt szükséges a folyamat megszakítható és menthető. Nem igényel elnavigálást a teljes folyamat, ha igen az egyértelmű és könnyen oda-vissza tud lépegetni a folyamatban.

Probléma2

Túl sok funkció bonyolulttá teszi a felületet, nehéz megtalálni az ikonok alapján a megfelelő gombot. Ismétlődő szűrő beállításokat mindig újra be kell állítani.

megoldás2

A felület egyszerűsítése több eszközzel történt meg:
1. Belépéskor a feladatkör megadásával, csak azokhoz a funkciókhoz, felületekhez fér hozzá a felhasználó, amire tényleg szüksége lehet a feladatköre alapján. Így sok inaktív funkció nem is jelenik meg a számára. 2. A különféle feladatokhoz tartozó eszközök csoportosítva lettek és azon a helyen találhatóak meg, ahol a felhasználó várja, sokszor kibontható formában, hogy csak akkor foglaljanak helyet a képernyőn, amikor a felhasználónak szüksége van rá.
3. Az érthetőség érdekében az ikonok a legtöbb estben szövegekkel vannak magyarázva.

Megvalósítás

Lo-fi Prototipusok

A problémák definiálása után papír alapú low-fidelity prototípusokat készítettem a megoldások gyors vázolására, ezek segítettek az ötletek prezentálásában és a tesztelésében.
Sok esetben egy oldalhoz/nézethez elég sok funkció/ interakció tartozik, ami túlzsúfolttá tette az oldalakat.
Megoldásként a feature listában lévő elemeket szétbontottam gyakoriság alapján minden nap használt és ritkábban használt elemekre.
A minden nap használt, fő feladatok egyszerűen, első látásra elérhetőek a felületen, a másodlagos feladatok, pedig kicsit eldugottabb, de intuitíven elérhető helyre kerültek a felületen, hogy létrehozzam a szoftver tiszta, egyszerű megjelenését.
Ezekre kerestem megoldásokat, best practice-eket.

Best Practice-ok

Az egyik legfőbb és legmegbízhatóbb forrásaim a Material Design és a Google termékek voltak. A szoftver dátumválasztójának összetettségét az Airbnb példája alapján tudtam a legjobban megoldani. A navigációhoz külföldi call centereket is kutattam, amihez sok jó ötletet adott a Talk desk alkalmazás.
A best practice kutatások során végig figyelembe vettem a saját user-ek képességeihez legjobban illeszkedő megoldásokat.

A következő megoldásokra kerestem még példákat:

in place interaction

in place editing

button bar

bulk operation

notification

Wirefame-k

A részletek kidolgozásához elkezdtem a high fidelity wireframe-ek elkészítését. Ezekben minden apró részletet megterveztem, hogy minden részlet a helyére kerüljön, és minden use-case-re legyen megoldás.
A mellékelt kép egy példa a dátumválasztó összetettségéről.

UI Design

Amint a wireframe-eket validáltam a felhasználókkal és a back-end csapattal, a látvány kidolgozása következett. Egyszerű és friss stílust választottam, mivel a user-ek akár egész nap használják a felületet a munkavégzéshez, összetett feladatok végrehajtásához. Így fontos számukra az átláthatóság, egyszerűség. Egyszerű, letisztult mégis kontrasztos UI születet.

eszközeim

A UI designokat Sketch-ben készítettem.
A prototípusok Invison-ben keltek életre.
A dokumentálás Jirában és Confluenc-ben készült.
A frontend fejlesztőknek Zeplinben adtam át a designokat.
Utómunkálatok a Figmában készültek.

Eredmény

Kicsit több mint 1,5 évig dolgoztam a projekten, ami során, sikerült a fejlesztő csapattal együtt letisztázni nagyon sok funkciót és kialakítani egy letisztult felhasználóbarát felületet, ahol megvalósulhat a zökkenőmentes munka.