Jak vylepšit zákaznický portál? Inspirujte se, jak jsme to udělali pro innogy my

Zákaznický portál je jedním z nejdůležitějších médií firmy současnosti i budoucnosti. Pro zákazníky je už samozřejmostí mít dokonalý přehled o svých službách a řešit požadavky okamžitě, odkudkoli a kdykoli. Jak jsme redesignovali selfcare portál innogy, předního prodejce energií?

40 tisíc zákazníků navštíví každý den portál innosvět, kde mohou získat přehled o odběru plynu, elektřiny, stáhnout si faktury nebo si nastavit platby.

Pokud nechcete volat nebo se trmácet na pobočku, právě portál je místem — na desktopu i mobilu — kde se láme vaše spokojenost a loajalita k firmě. Samoobslužný portál může leccos vylepšit, urychlit, usnadnit, ale i pokazit.

Cíle a rozsah redesignu

Stávající podoba portálu byla zastaralá: nemobilní, informace roztříštěné, netransparentní, nevyhovující potřebám uživatelů, byznysu, guidelines značky, IT platformy, bez možnosti dalšího rozvoje…

Problémů k řešení bylo skutečně hodně, proto jsme design postavili na zelené louce.

Zároveň jsme nechtěli „navrhovat obrazovky aplikace“, ale soustředili se na návrh služby. Drobný rozdíl ve slovíčkách? Jen zdánlivě.

Naším cílem tedy bylo vymyslet řešení, které:

• Uspokojí nejpalčivější požadavky zákazníků online
• Bude technicky a v čase proveditelné
• Bude přínosné pro byznys (zvýšení prodejů a retence, snížení nákladů)

Workshopy se stakeholdery

Prošli jsme se všemi stakeholdery aktuální podobu samoobsluhy a pokusili jsme se definovat klíčová témata pro klientskou péči.

Nová sitemapa webu nám pomohla najít shodu nad rozsahem projektu. Jednotlivá témata jsme převzali do sdíleného excelu a použili jako základ pro projektovou tabulku, revizi stavu a plánování workshopů.

Tabulka, která nám pomohla určit rozsah projektu a hlídat stav.

Následovalo přes 40 workshopů se stakeholdery, kde jsme postupně definovali obsah a priority pro klíčové sekce. Sekci za sekcí. Komponentu za komponentou. Ne vždy to bylo snadné, ale bylo to velmi užitečné.

• Snažili jsme se vždy definovat agendu a cíle
• Kladli jsme otázky, otázky a další otázky (děkujeme za trpělivost!)
• Zjednodušovali jsme zobrazení informací (tabulky), odebírali přebytečné informace a přidávali jen podstatné
• Odnášeli jsme si vlastní UX zápisy a zadání
• Na dalším workshopu jsme prezentovali řešení a hledali UX/byznys/IT optimum

Jedním z podkladů pro diskusi byly rešerše konkurence v ČR i zahraničí. Používali jsme je jako inspiraci pro rozšíření obzorů.

Příklad design rešerší, které nám pomáhaly během workshopů.

Současně jsme veškeré nápady validovali s IT proveditelností na straně zákazníka, což bylo vzhledem k napjatým harmonogramům klíčové.

Dalším podkladem pro workshopy byly samozřejmě vstupy a insighty od zákazníků. Uskutečnili jsme několik hloubkových rozhovorů se zákazníky, zapojili návštěvnická data ze stávající verze a první návrhy validovali s uživateli.

Z Google Analytics jsme zjistili, např. že nejnavštěvovanějšími sekcemi jsou platební sekce, upomínky a smluvní údaje.

Vyzkoušeli jsme také nástroj usabilityhub.com pro vzdálené testování. Kvantitativním dotazníkem jsme zjišťovali důvody, proč by se zákazníci přihlašovali do zákaznického portálu, jak často apod. Podle toho jsme se přizpůsobili navigaci.

Ukázka z ankety, kdy jsme zjišťovali preference zákazníků ohledně potřeb.

Ukázka z ankety, kdy jsme na wireframech zjišťovali preference zákazníků ohledně uspořádání informací.

Wireframes všude, kam se podíváš

Grafika měla v této fázi stopku. Záměrně. Tím že jsme používali pouze wireframes, věříme, že se diskuze směrovala lépe k problémům struktury a obsahu. Barvy, fonty, tonalita přišly na řadu později.

Snažili jsme se o maximální konzistenci a rychlost vývoje, a pracovali jsme proto v komponentovém systému. Komponenty v rámci možností vždy odpovídali předepsaným pravidlům corporate design manuálu.

Ukázka wireframů.

Celý design systém jsme poskládali z cca 20–30 komponent. Jednotlivé wireframes se poté staly živou ukázkou a dokumentací, jak jednotlivé komponenty používat.

Nová grafika

Jakmile jsme měli schválené důležité obrazovky, grafický designer je oblékl ve stylu manuálu innogy.

Můžete se podívat, jak vypadaly stránky před a po.

Původní homepage

Nový dashboard

Stará (vlevo) a nová obrazovka (vpravo) s přehledem záloh

Finále a chytání posledních much

Místo klasického přístupu “předělejte vše do grafiky” jdeme cestou “grafika pouze pro komponenty”. Tím šetříme spoustu času.

Vývojáři tak nečekají na kompletní šablony a pouští se rovnou do vývoje komponent podle grafiky. Podle wireframes následně již programují a skládají jednotlivé sekce z připravených komponent.

Vývoj probíhá v rekordním tempu a nasazení. Nacházíme přes 250 bodů, které validujeme s klientem. Předáno do vývoje za 2 dny. Mobil i desktop. Jdeme do finále.

Na jaké úpravy jsme se soustředili před spuštěním:

• Interakční chyby ve formulářích
• Sladění patiček, tlačítek, barev napříč systémy
• Prázdné stavy (když nedorazí data)
• Zvětšení rozestupů tlačítek na mobilu
• Mobilní optimalizace a další

UX check před spuštěním.

Jsou to právě tyto detaily, které často rozhodují o úspěchu digitální služby.

Pár čísel na konec

Role UX týmu Wundermanu byla taková, jaká byla zrovna potřeba: moderační, ideační, tvůrčí, validační i organizační.

• Proběhlo 40 workshopů se stakeholdery a IT s cílem upřesnit společně zadání a validovat UX výstupy pro IT
• Zapojili se 4 UX designeři, 2 grafičtí designeři, 2 projekťáci, IT oddělení, externí dodavatelé, cca 7 hlavních stakeholderů i executive management.
• Připravili jsme přes stovku wireframů v rámci více než 150 interních design sprintů a revizí nad jednotlivými cestami a návrhy
• Před spuštěním jsme společně stihli opravit přes 250 bodů a UX překážek
• Projekt trval cca 8 měsíců od první schůzky

Co se nám na projektu osvědčilo:

• Zrychlit komunikaci tím, že se UX designeři baví napřímo s byznysem
• Srozumitelně prezentovat a předávat složitá rozhodnutí
• Připravovat rychlé variantní návrhy pro nalezení optimálního řešení
• Proveditelnost návrhů průběžně ověřovat s IT
• Děláme si vlastní strukturované UX zápisy z workshopů

Přínosy projektu

Co dostali zákazníci?

• Atraktivnější rozhraní
• Jednodušší navigaci mezi účty, smlouvami a odběrnými místy
• Vyšší transparentnost (dokumenty, smlouvy, upomínky, ceníky)
• Nové užitečné online funkce (chci zařídit, platba kartou, dashboard, graf spotřeby)
• Snadný přístup přes mobil

Jaké byly přínosy pro byznys?

• Vyšší potenciál pro retenci i cross-sell
• Posílení efektů multi-channel komunikace
• Nová platforma pro posílení a rozvoj CX
• Orientace na zákazníka a jeho potřeby
• Pobočky mají více času pro své klienty
• Call-centrum získají více času na sofistikovanější požadavky

IT oddělení získalo prostor pro konsolidaci backendu a přechod na nový systém:

• Sjednocení IT platforem
• Začištění IT služeb
• Prostor udělat klíčové věci architektonicky správně
• Flexibilita pro budoucí změny
• Konsolidace dat

Autor: Filip Knopp
Filip je Senior UX Designer v agentuře Wunderman Thompson