A customer portal for an energy supplier
Frontend of the 2025 redesign for the Meter Points module of Moje SPP — invoices, consumption, readings and contracts for almost 1.5 million customers.
SPP (Slovenský plynárenský priemysel, a.s.) is Slovakia's largest energy supplier, continuing a gas-industry history of more than 150 years. It serves nearly 1.5 million customers across every region of Slovakia and is the country's largest natural-gas retailer; besides gas it also supplies electricity and CNG/LNG. SPP has been 100% owned by the Slovak Republic since 2014.
Moje SPP is the customer portal where customers manage all their meter points — addresses and the gas and/or electricity contracts tied to them. SPP's internal team designed the 2025 redesign, including a component design system; our brief was a faithful frontend implementation of the Meter Points module from the supplied Figma files — turning a finished design into a functional, responsive interface with every state and interaction working exactly as specified.
Implementing the meter-points module's frontend, we tackled several key challenges.
- More contracts, more people, one place
A single meter point can carry both a gas and an electricity contract, and can belong to the customer or merely be shared with them — the interface had to make these states clear at a glance.
- Three kinds of meter reading, one form wouldn't cut it
Distribution readings, estimates and self-readings carry different legal weight — the distinction had to be clear enough that a customer couldn't accidentally submit an “invalid” reading.
- Understandable consumption across years
Turning years of meter readings into one legible consumption chart that quickly tells a customer whether they used more or less than last year.
- Onboarding with no wasted steps
A customer needs to clearly distinguish “I already have a contract, I just want to load it” from “I want a new contract” — both handled in two clicks from the same place.
We turned the Meter Points module's Figma designs into a working frontend, with an emphasis on pixel-accurate fidelity to the design, responsiveness, and reliable behavior across every state and interaction. The module works as a central hub, where a point's detail view splits its data into five tabs with clearly separated actions for informational versus binding meter readings.
- Faithful implementation of the Figma component design (colors, typography, states)
- A meter-point list grouped by owner and by sharing status
- A point detail view with five tabs: Invoices, Consumption & readings, Requests, Customer data, Point data
- An interactive multi-year consumption chart with a filterable readings table
- “My reading” (informational) kept separate from “Self-reading” (binding for billing)
- Adding another point through a single modal — loading an existing contract or requesting a new one
Brief and design analysis
We studied the supplied Figma files, the component design system and real meter-point states to prepare an implementation plan.
Component build-out
We turned the Figma design into reusable, responsive components that faithfully match the design.
Implementation and interactivity
We assembled the module on Bootstrap 5.3 + Sass with AlpineJS for interactivity, and a React/TypeScript application layer — including the consumption chart and modal flows.
Testing and rollout
We tested the flow for adding points and readings before a phased rollout to all customers.
The delivered Meter Points frontend faithfully carries the prepared design into a working interface, giving SPP customers a single clear entry point to all their contracts, invoices and readings — regardless of how many addresses and products they have active, and across every device.