--- title: "The Meter Points module – in SPP's Moje SPP customer portal" description: "The Meter Points module of SPP's Moje SPP customer portal, implemented to the 2025 redesign and design system by SPP's internal team — points, consumption, readings, requests and contract data in one interface." canonical: "https://interfase.sk/en/case-studies/spp/portal" lang: "en" --- # The Meter Points module – in SPP's Moje SPP customer portal > The Meter Points module of SPP's Moje SPP customer portal, implemented to the 2025 redesign and design system by SPP's internal team — points, consumption, readings, requests and contract data in one interface. - Client: SPP, a.s. - Year: 2026 - Services: Frontend development, Web App, Design implementation ## Customers with several meter points – own and shared addresses and contracts SPP is Slovakia's largest energy supplier, serving nearly 1.5 million customers. Many of them have more than one meter point: next to the household there's a cottage, a rented flat or a point shared with a family member. Moje SPP is the customer portal where customers manage all their meter points — addresses and the gas and electricity contracts tied to them. SPP's internal team created the 2025 redesign, including a component design system. Our brief was to implement the interface of the Meter Points module to SPP's design system: turning the finished design into a working, responsive interface that behaves exactly as designed in every state and interaction. ## Requirements for the module – multiple contracts, reading types and consumption history The module has to serve a customer with a single gas meter as well as one with several points, several products and points shared by someone else. - **More contracts, more people, one place**: A 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 has to show that at a glance. - **Three kinds of reading**: Distribution readings, estimates and customer readings mean different things. A customer must never submit an informational reading thinking it will affect their bill. - **Consumption across years**: Years of physical, estimated and self-reported readings have to become one chart that quickly tells a customer whether they used more or less than last year. - **Adding a new point**: "I have a contract, just load it" and "I want a new contract" are two different paths. Both have to start from the same place, two clicks away. ## Principle We implemented the interface to SPP's finished design, including every state and interaction the design defines. - **Every state in the design**: An empty list, a shared point, an unpaid invoice, an open filter or dialog — every state in the design has its working counterpart in the portal. - **Design-system components**: We implemented tags, tabs, tables, forms and dialogs as reusable elements with SPP's shared colours and typography. - **The same behaviour on every device**: The module is responsive, so the list, the detail and the reading forms work on a desktop and on a phone. ## Meter point list and detail – five tabs for own and shared points The list groups cards by contract owner and shows points shared by someone else separately. GAS and ELECTRICITY tags reveal the products before the customer clicks. The detail splits everything that belongs to an address into five tabs. A bar above the header flags a shared point; the Invoices tab itself flags an unpaid invoice. - Invoices, Consumption & readings, Requests, Customer data, Point data - Requests with a service filter, status and a new-request button - Contract data, meter and POD number for every product ## Consumption and readings – a yearly chart and a table of every reading A bar chart shows consumption by year for the selected service and contract. On hover it shows the exact value and the period it was measured over. Below the chart, a table lists every reading with its date, type, value and tariff. A customer's own reading carries their note and can be deleted. - Source filter: all readings, distribution readings, my readings - Physical, estimated and own readings told apart in the table - Detailed filter and export of readings ## Informational reading – kept separate from the self-reading for billing "My reading" is only for keeping track of consumption, and the form says so up front: it is not binding for billing. Customers can add one at any interval, with a note, and edit or delete it later. The self-reading that does count toward billing has its own button, its own form and its own path. ## Binding gas meter reading – from the prompt to submission A self-reading is binding, so the portal prompts for it on its own and the form asks only for what's really needed. 1. **Prompt** – The point's card asks the customer to submit a gas self-reading. 2. **Meter point** – The form already knows which address it is. 3. **Meter value** – The value in m³ and the reading date, both required. 4. **Guide** – "How do I read my gas meter correctly?" right next to the fields. 5. **Add self-reading** – A value that billing works with. ## Adding a meter point – loading an existing contract or requesting a new one Adding a point opens a dialog with two clearly separated options: load the data from an existing contract, or create a request for a new contract with SPP. When a customer has no meter point yet, the empty list offers the same two paths right at the start. ## Mobile number verification – assigning points, notifications and sign-in With a verified mobile number the portal can assign a customer's meter points, deliver notifications and let them sign in. The screen explains this before it asks for the number. - A "Why do you need my number?" link right by the form - Verification by SMS code that can be resent or sent to another number - The step can be postponed with "Set up later" ## Meter point detail – consumption, requests, customer data and the meter Consumption, requests, customer data and contract data with the meter — the detail's tabs in the single visual language of SPP's design system. ## Implementation of the Meter Points module – to SPP's design and design system The Meter Points module gives SPP customers one entry point to the contracts, invoices, consumption and readings of all their addresses — own and shared. The design and design system are the work of SPP's internal team; our implementation makes them work in the portal with every state and interaction. ### What we delivered - Meter Points module implemented to SPP's design system - Meter point detail with five tabs - Consumption and readings overview - Reading and new meter point forms - Mobile number verification - Interface for desktop and phone --- Web version: https://interfase.sk/en/case-studies/spp/portal llms.txt: https://interfase.sk/llms.txt