Zákaznický portál pro dodavatele energií
Frontend redesignu 2025 pro modul Odběrná místa v portálu Moje SPP — faktury, spotřeba, odečty a smlouvy pro téměř 1,5 milionu zákazníků.
SPP (Slovenský plynárenský priemysel, a.s.) je největší dodavatel energií na Slovensku, který navazuje na více než 150letou historii plynárenství v zemi. Obsluhuje téměř 1,5 milionu zákazníků ve všech regionech Slovenska a je největším prodejcem zemního plynu v zemi; kromě plynu dodává i elektřinu a CNG/LNG. Od roku 2014 je SPP ve 100% vlastnictví Slovenské republiky.
Moje SPP je zákaznický portál, přes který si zákazník spravuje všechna svá odběrná místa – adresy a k nim přiřazené smlouvy na plyn a/nebo elektřinu. Redesign 2025 včetně komponentového designového systému připravil interní tým SPP; naším zadáním byla věrná frontendová implementace modulu Odběrná místa podle dodaných Figma návrhů – tedy proměnit připravený design ve funkční, responzivní a přesně odpovídající rozhraní se všemi stavy a interakcemi.
Při frontendové implementaci modulu odběrných míst jsme řešili několik klíčových výzev.
- Více smluv, více lidí, jedno místo
Jedno odběrné místo může mít plynovou i elektrickou smlouvu a může patřit zákazníkovi, nebo mu být jen sdíleno – rozhraní muselo tyto stavy odlišit na první pohled.
- Tři druhy odečtu, jeden formulář by nestačil
Distribuční odečet, odhad a zákaznický odečet mají různý právní význam – rozdíl musel být srozumitelný bez rizika, že si zákazník omylem nahlásí „neplatný“ odečet.
- Srozumitelná spotřeba napříč roky
Proměnit roky odečtů v jeden čitelný graf spotřeby, který zákazníkovi rychle řekne, zda letos spotřeboval více, nebo méně než loni.
- Onboarding bez zbytečných kroků
Zákazník potřebuje jasně odlišit „mám už smlouvu, jen ji chci načíst“ od „chci novou smlouvu“ – oba případy vyřešit na dva kliky ze stejného místa.
Figma návrhy modulu Odběrná místa jsme přepsali do funkčního frontendu s důrazem na přesnou shodu s designem, responzivitu a spolehlivé chování všech stavů a interakcí. Modul funguje jako centrální rozcestník, kde detail místa rozděluje agendu do pěti záložek s jasně oddělenými akcemi pro informativní a závazný odečet.
- Věrná implementace komponentového designu z Figmy (barvy, typografie, stavy)
- Seznam odběrných míst seskupený podle vlastníka i sdílení
- Detail místa v pěti záložkách: Faktury, Spotřeba a odečty, Žádosti, Údaje zákazníka, Údaje místa
- Interaktivní víceletý graf spotřeby s filtrovatelnou tabulkou odečtů
- „Můj odečet“ (informativní) oddělený od „Samoodečtu“ (závazný pro fakturaci)
- Přidání dalšího místa přes jeden modál – načtení smlouvy nebo žádost o novou
Analýza zadání a návrhů
Prostudovali jsme dodané Figma návrhy, komponentový designový systém a reálné stavy odběrných míst a připravili implementační plán.
Příprava komponent
Přepsali jsme design z Figmy do znovupoužitelných, responzivních komponent věrně odpovídajících návrhu.
Implementace a interaktivita
Poskládali jsme modul na Bootstrap 5.3 + Sass s AlpineJS pro interaktivitu, s aplikační vrstvou v React a TypeScript – včetně grafu spotřeby a modálových toků.
Testování a nasazení
Otestovali jsme tok přidávání míst a odečtů před postupným nasazením pro všechny zákazníky.
Dodaný frontend modulu Odběrná místa věrně přenáší připravený design do funkčního rozhraní a dává zákazníkům SPP jeden přehledný vstupní bod do všech jejich smluv, faktur a odečtů – bez ohledu na to, kolik adres a produktů mají aktivních, a napříč všemi zařízeními.