Moje MND: zákaznický portál pro dodavatele energií

O projektu

MND je dodavatel elektřiny a plynu. Zákazníci potřebují na jednom místě vidět, kolik platí, jestli jsou jejich zálohy nastavené správně, kdy přijde vyúčtování a jak změnit údaje nebo nahlásit problém. Do té doby to znamenalo hledat informace po různých místech. Cílem bylo vytvořit portál Moje MND, ve kterém zákazník po přihlášení hned vidí, co se děje s jeho odběrnými místy, a většinu věcí si vyřeší sám.

Portál má pět hlavních částí: přihlášení a profil, odběrná místa, zálohy a vyúčtování, požadavky a úvodní přehled. Vše jsem navrhl pro počítač i telefon. Zhruba v listopadu 2022 byl portál nasazen.

Moje role

Byl jsem UX/UI designer ve společnosti Eman a navrhl jsem celý portál. Na projektu jsem byl jediný UX designer, od struktury a obrazovek až po komponenty design systému. Pracoval jsem s projektovým manažerem a analytikem a hlavně přímo s lidmi z MND, od zaměstnanců po vedení. MND je velký korporát, takže všechno muselo být pečlivě schválené.

Práce trvala skoro tři čtvrtě roku a měla svůj rytmus: každé ráno jsme s klientem zadávali úkoly na daný den, každý večer jsem klientovi prezentoval, co se udělalo. Chodily stovky připomínek a klient s dalšími požadavky přicházel i během projektu.

Úkol: jedna úvodní stránka místo hledání po částech

Zákazník se po přihlášení potřebuje v prvních vteřinách dozvědět, jestli je všechno v pořádku a co má udělat. Úvodní stránka proto dává přehled o důležitých událostech napříč všemi odběrnými místy, aby zákazník nemusel procházet stránku po stránce. Detail odběrného místa naopak obsahuje jen údaje o tomto místě, jinak by do budoucna neřízeně bobtnal.

Proto má úvodní stránka pruh se stavem plateb („Máte vše uhrazeno“), karty odběrných míst se zálohou a stavem, rychlé akce, které zákazník zvládne sám (samoodečet, změna záloh, kontakty), aktivní požadavky a novinky.

Úkol: ukázat riziko nedoplatku dřív, než přijde vyúčtování

Největší starost zákazníka u zálohy je nedoplatek při vyúčtování. Číslo „záloha 1 250 Kč“ mu ale neřekne, jestli je to dost. Budík porovnává aktuální zálohu s doporučenou minimální zálohou, kterou má zákazník platit do nejbližšího vyúčtování. Pokud šipka míří do zelené části, zálohy jsou v pořádku. Pokud do červené, hrozí nedoplatek a portál doporučí zálohu zvýšit. Pod Budíkem jsou dvě akce: zadat samoodečet a upravit zálohu.

Jak vznikl

První koncept byl jen verdikt „Optimální“ s palcem nahoru nebo dolů, tedy přeplatek nebo nedoplatek. Finální podoba ukazuje stupnici od 500 do 2 000 Kč, doporučenou minimální zálohu i aktuální částku, takže zákazník vidí, kolik mu chybí. Text na Budíku se při tom také vyvíjel, například od „Zvažte navýšení zálohy“ k „Je potřeba navýšit zálohu“.

Stavy

Budík má pět stavů: mimo provoz, neaktivní (do doby zadání samoodečtu), zálohy v pořádku, mírné riziko nedoplatku a riziko nedoplatku. Každý má vlastní komponentu v design systému.

Úkol: grafy a ceny, kterým zákazník rozumí

Vedle Budíku zobrazuje portál spotřebu po letech (zvlášť vysoký a nízký tarif, skutečná spotřeba a odhad) a porovnání obchodní ceny zákazníka s průměrem nabídek největších dodavatelů. Obojí jde otevřít do nápovědy, která vysvětluje, jak se hodnoty počítají: co je zúčtovací období, jaký je rozdíl mezi uskutečněnou a odhadovanou spotřebou, z čeho vzniká průměr nabídek a že se k cenám připočítávají regulované složky. Nápověda je i v mobilní verzi jako samostatná obrazovka, ne zmenšený desktop.

Úkol: 26 požadavků v jednom rozcestníku

Zákazník může měnit hodně věcí: adresu, zálohu, způsob úhrady, kontakty, sazbu, jistič, hlásit poruchu nebo reklamovat vyúčtování. Portál pokrývá 26 typů požadavků a na jedné stránce jsou seskupené do sedmi skupin (nastavení odběrného místa, nastavení plateb, změna identifikačních údajů, reklamace vyúčtování, správa účtů, ostatní požadavky a „Napište nám“). Pod rozcestníkem vidí zákazník své aktivní požadavky se stavem a odhadem doby zpracování.

Logika formulářů

Aby se všechny formuláře chovaly stejně, mají společná pravidla. Zákazník s více zákaznickými účty nejdřív vybere účet. Zákazník s jedním účtem tento výběr nevidí, byla by to zbytečná informace.

Když požadavek zakládá z rozcestníku Požadavky, musí si nejdřív vybrat odběrné místo. Když ho zakládá z detailu odběrného místa, pole je rovnou předvyplněné.

Když změna ovlivní i další odběrná místa pod stejným účtem, formulář to řekne a nabídne seznam dotčených míst. Dlouhý seznam se ve formuláři posouvá.

Pojmenování odběrných míst

Pokud zákazník nemá odběrné místo pojmenované, ukazuje se adresa. Když si přidá přezdívku, nahradí adresu. Dvě místa nemohou mít stejný název. K rozpoznání místa podle dohody s MND stačí název nebo adresa spolu s identifikátorem EAN či EIC.

Úkol: zálohy a vyúčtování pro různé typy zákazníků

Domácnost s jedním odběrným místem potřebuje jiný přehled než zákazník s pěti místy nebo velkoodběratel. Přehled proto existuje v několika variantách podle počtu míst. Nahoře je pruh „Po splatnosti“ s celkovou částkou a tlačítkem Zaplatit, pod ním tabulky záloh, vyúčtování a historie plateb s filtry u sloupců a exportem. Ve výchozím stavu jsou vždy vybrána všechna odběrná místa, a když zákazník vybere jedno, zobrazí se jen jeho data. Součástí návrhu je také patnáct variant detailu zálohy a vyúčtování (po splatnosti, částečně zaplaceno, uhrazeno, přeplatek, komoditní a nekomoditní vyúčtování).

Úkol: přihlášení a správa přístupů

Portál má samostatnou registraci pro domácnosti a pro podnikatele, přihlášení e-mailem i přes Google, Facebook a Seznam (na mobilu), výběr zákazníka při více účtech a správu přístupů: zákazník může přidat nebo odebrat přístup jiné osobě, nebo naopak spravovat účet jiné osoby. U změn s větším dopadem portál upozorní, co to znamená (například že osoba s přístupem může provádět všechny druhy změn bez omezení).

Úkol: design systém na míru

Klient dodal základní grafickou strukturu, ale nepasovala na to, co portál potřeboval. Proto vznikl design systém: paleta navázaná na značku, typografie Avenir Next Pro, tlačítka ve čtyřech stavech, ikony, stíny, jednotné zaoblení rohů a také komponenty specifické pro tento produkt, například stavy Budíku, grafy spotřeby a historie odečtů. Všechny komponenty jsem dělal já. Projekt byl napojený na design systém, takže jsem se během práce neustále pohyboval mezi projektovým souborem a knihovnou komponent.

Spolupráce a proces

Soubor ve Figmě byl uspořádaný tak, aby se v něm klient dokázal zorientovat. Úvodní tutoriál vysvětloval, jak soubor číst, co znamenají stavy designu (schváleno a připraveno k vývoji, žádá se zpětná vazba, pracuje se na tom) a jak komentovat. Připomínky a komentáře se zapracovávaly přímo v návrzích a každá sekce nesla svůj stav, takže bylo vidět, co je schválené a co se ještě mění.

Výsledky

Portál byl nasazen na podzim 2022.

Co z toho beru

Největší poučení z tohoto projektu bylo, že v korporátním prostředí nejde jen o hezký návrh. Funguje to, když je každé rozhodnutí vysvětlené a zapsané tam, kde ho uvidí všichni. U Budíku jsem se naučil, že zákazníkovi nepomáhá hodnocení („je to dobře“), ale míra: ukázat, kolik mu chybí. U formulářů, že pravidla chování je lepší popsat jednou než navrhovat každý formulář zvlášť. A design systém se vyplatí vždy, když základ od klienta nesedí.