Redizajn správy odberných miest pre najväčšieho dodávateľa energií
Pre modul Odberné miesta v portáli Moje SPP sme dodali frontendovú implementáciu redizajnu 2025 podľa Figma návrhov pripravených klientom – jedno prehľadné miesto, kde takmer 1,5 milióna zákazníkov spravuje faktúry, spotrebu, odpočty a zmluvy pre všetky svoje adresy.
SPP (Slovenský plynárenský priemysel, a.s.) je najväčší dodávateľ energií na Slovensku, ktorý nadväzuje na viac ako 150-ročnú históriu plynárenstva v krajine. Obsluhuje takmer 1,5 milióna zákazníkov vo všetkých regiónoch Slovenska a je najväčším predajcom zemného plynu v krajine; okrem plynu dodáva aj elektrinu a CNG/LNG. Od roku 2014 je SPP v 100% vlastníctve Slovenskej republiky.
Moje SPP je zákaznícky portál, cez ktorý si zákazník spravuje všetky svoje odberné miesta – adresy a k nim priradené zmluvy na plyn a/alebo elektrinu. Redizajn 2025 vrátane komponentového dizajnového systému pripravil interný tím SPP; naším zadaním bola verná frontendová implementácia modulu Odberné miesta podľa dodaných Figma návrhov – teda premeniť pripravený dizajn na funkčné, responzívne a presne zodpovedajúce rozhranie so všetkými stavmi a interakciami.
Pri frontendovej implementácii modulu odberných miest sme riešili niekoľko kľúčových výziev.
- Viac zmlúv, viac ľudí, jedno miesto
Jedno odberné miesto môže mať plynovú aj elektrickú zmluvu a môže patriť zákazníkovi alebo mu byť len zdieľané – rozhranie muselo tieto stavy odlíšiť na prvý pohľad.
- Tri druhy odpočtu, jeden formulár by nestačil
Distribučný odpočet, odhad a zákaznícky odpočet majú rôzny právny význam – rozdiel musel byť zrozumiteľný bez rizika, že si zákazník omylom nahlási „neplatný“ odpočet.
- Zrozumiteľná spotreba naprieč rokmi
Premeniť roky odpočtov na jeden čitateľný graf spotreby, ktorý zákazníkovi rýchlo povie, či tento rok minul viac alebo menej než minulý.
- Onboarding bez zbytočných krokov
Zákazník potrebuje jasne odlíšiť „mám už zmluvu, len ju chcem načítať“ od „chcem novú zmluvu“ – oba prípady vybaviť na dva kliky z toho istého miesta.
Figma návrhy modulu Odberné miesta sme prepísali do funkčného frontendu s dôrazom na presnú zhodu s dizajnom, responzívnosť a spoľahlivé správanie všetkých stavov a interakcií. Modul funguje ako centrálny rozcestník, kde detail miesta rozdeľuje agendu do piatich záložiek s jasne oddelenými akciami pre informatívny a záväzný odpočet.
- Verná implementácia komponentového dizajnu z Figmy (farby, typografia, stavy)
- Zoznam odberných miest zoskupený podľa vlastníka aj zdieľania
- Detail miesta v piatich záložkách: Faktúry, Spotreba a odpočty, Žiadosti, Údaje zákazníka, Údaje miesta
- Interaktívny viacročný graf spotreby s filtrovateľnou tabuľkou odpočtov
- „Môj odpočet“ (informatívny) oddelený od „Samoodpočtu“ (záväzný pre fakturáciu)
- Pridanie ďalšieho miesta cez jeden modál – načítanie zmluvy alebo žiadosť o novú
Analýza zadania a návrhov
Preštudovali sme dodané Figma návrhy, komponentový dizajnový systém a reálne stavy odberných miest a pripravili implementačný plán.
Príprava komponentov
Prepísali sme dizajn z Figmy do znovupoužiteľných, responzívnych komponentov verne zodpovedajúcich návrhu.
Implementácia a interaktivita
Poskladali sme modul na Bootstrap 5.3 + Sass s AlpineJS pre interaktivitu, s aplikačnou vrstvou v React a TypeScript – vrátane grafu spotreby a modálových tokov.
Testovanie a nasadenie
Otestovali sme tok pridávania miest a odpočtov pred postupným nasadením pre všetkých zákazníkov.
Dodaný frontend modulu Odberné miesta verne prenáša pripravený dizajn do funkčného rozhrania a dáva zákazníkom SPP jeden prehľadný vstupný bod do všetkých ich zmlúv, faktúr a odpočtov – bez ohľadu na to, koľko adries a produktov majú aktívnych, a naprieč všetkými zariadeniami.