Komplex vállalati rendszer UX/UI modernizációja
Egy több éve használt contact center alkalmazás teljes UX/UI újragondolásán dolgoztam.
A meglévő rendszer funkcionálisan erős volt, azonban a vizuális megjelenése, kezelhetősége és felhasználói élménye már nem felelt meg a modern vállalati elvárásoknak.
A cél nem csupán egy frissebb felület létrehozása volt, hanem a működési logika, az információs struktúra és az ügyintézői munkafolyamatok átgondolása is.
A kihívás
A régi rendszer számos összetett contact center funkciót támogatott, azonban az évek során a felület nehezen áttekinthetővé vált.
A fő kihívások:
- nagy mennyiségű adat és funkció kezelése egy képernyőn
- összetett ügyintézői folyamatok egyszerűsítése
- gyors döntéshozatal támogatása
- új kommunikációs csatornák integrálása
- modern, ügyfelek számára is versenyképes megjelenés kialakítása
A tervezés során azt vizsgáltuk, hogyan lehet a rendszer működését megtartani, miközben a használat gyorsabbá és intuitívabbá válik.
UX folyamat
Felhasználói és üzleti igények feltérképezése
A projekt elején workshopokon keresztül ismertem meg a contact center működését, az üzleti igényeket és a technológiai korlátokat.
A tervezést több szereplővel együttműködve végeztem:
- üzleti szakértők
- fejlesztők
- architectek
- termékoldali döntéshozók
A fő kérdések:
- Mely információknak kell mindig elérhetőnek lenniük?
- Milyen feladatokat végeznek naponta az ügyintézők?
- Hol lehet egyszerűsíteni a folyamatokat?
- Hogyan csökkenthető a hibázási lehetőség?
Információs architektúra újragondolása
Az egyik legfontosabb feladat a rendszer struktúrájának újraszervezése volt.
A korábbi különálló ablakok és funkciók helyett egy integrált munkafelületet terveztünk.
Főbb elemek:
- állandóan elérhető státuszkezelés
- hívásvezérlés
- ügyféladat panel
- script kezelés
- jegyzetek
- interaction history
- KPI adatok
A cél az volt, hogy az ügyintéző mindig az adott munkafolyamathoz szükséges információkat lássa és hogy a gyakran használt funkciók gyorsan elérhetők legyenek.
Kiindulási alap
PrimeNG Design System (Community) + Lara theme
Tervezett elemek:
- gombvariációk
- aktív / inaktív állapotok
- hover állapotok
- státusz ikonok
- figyelmeztetések
- táblázatok
- kártyák
- navigációs elemek
A cél egy könnyen implementálható, újrafelhasználható komponensrendszer kialakítása volt.
Fluid desktop layout
A rendszer elsődlegesen desktop környezetre készült, de többféle monitorfelbontást kellett támogatnia.
A klasszikus mobil-first responsive működés helyett fluid desktop layoutban gondolkodtunk.
A cél:
- 1360–1920 px szélesség támogatása
- rugalmas panelek
- átméretezhető területek
- stabil munkakörnyezet megtartása
Nem az elemek átrendezése volt a cél, hanem hogy a komplex operátori felület különböző képernyőkön is hatékonyan használható maradjon.
Light & Dark Theme
A rendszerhez világos és sötét témát is terveztünk. A színrendszer kialakításánál figyelembe vettem:
- kontrasztarányokat
- olvashatóságot hosszú munkavégzés során
- státuszszínek felismerhetőségét
- következetes visszajelzéseket
A felületnek napi több órás operátori használat mellett is jól használható.
Accessibility
A tervezés során WCAG 2.1 ajánlásokat is figyelembe vettem.
Vizsgált területek:
- színkontrasztok
- ikonok felismerhetősége
- állapotok egyértelmű jelölése
- interaktív elemek mérete
- fókusz és visszajelzések
- olvasható tipográfia (Betűtípus: Noto Sans (Google Fonts))
Az újratervezés eredménye
Az újratervezés célja egy olyan korszerű contact center platform kialakítása volt, amely egyszerre támogatja az ügyintézők hatékony munkavégzését és a fejlesztők hosszú távú munkáját.
Az egységes komponensrendszerre épülő felület átláthatóbbá tette a komplex folyamatokat, gyorsabb használatot tett lehetővé, ezenkívül könnyebben tanulhatóvá vált az új felhasználók számára, miközben rugalmasan bővíthető és testreszabható maradt.
