[Introduction]
Solo UX/UI Designer | Jul 2023
Severn Trent previously relied on third-party software to display weekly water usage to its customers. However, the product was quite basic, featuring an outdated user interface that lacked intuitiveness and engagement. To deliver a more cost-effective and interactive experience, we launched this project to replace it with our in-house designed solution, My Smart Tracker. This new tool updates water usage data on a daily basis, providing customers with a more engaging and user-friendly way to monitor their consumption.
Project Timeline | 12 weeks
Target Demographic | All smart meter customers
Tools used | Adobe XD, Adobe Experience Manager, Adobe Photoshop, Adobe Illustrator, Miro
[Description]
The Challenge
Our goal is to offer customers a more tangible and engaging experience than the current water tracker product. By encouraging regular use of the Smart Water Tracker, we aim to help users become more mindful of their water consumption and foster better habits.
Because leaks often go unnoticed - leading to significant water waste - we want to develop a clear, intuitive alert system. This system will guide customers through a simple online journey to identify and address leaks early. Based on the information users provide, we’ll offer tailored next steps to resolve issues independently.
Throughout the design, we prioritise simplicity and clarity in the UX and UI, ensuring users are supported without feeling overwhelmed.
My Approach
Mobile first design
Based on our analytics, nearly 70% of our users access the site via mobile devices. Applying the mobile-first design approach, we prioritised creating a streamlined, intuitive experience optimised for smaller screens. This ensures clear visual hierarchy, easy navigation, and accessible touch targets, enhancing usability and engagement on any device. By designing for mobile first, we focus on essential content and interactions, then progressively enhance for larger screens - delivering a seamless and efficient user experience across all platforms.
Bento style - Modular, Flexible, Effortless
The bento layout forms the backbone of scalability - each card modular, each element intuitive. By embracing Miller’s Law and reducing cognitive load, users enjoy a simple, swipeable canvas that supports adding, removing, and shifting features in rhythm with their needs. The consistent grid matches the Smart Tracker design, a layout that is familiar for Nectar users to learn the product faster.
Kick off
Our design process
The design process followed a clear, iterative framework: Discover, Define, Ideate, Test, and Design.
Ideation
I began exploring different layout options based on the three core aspects of the product: the usage tracking graph, the similar household comparator, and the leakage alert journey. To maintain clarity and reduce cognitive load, I chose horizontal tabs to separate the usage graph and similar household comparison, aligning with the principle of progressive disclosure - showing only what users need when they need it. The leakage alert appears contextually within the usage graph tab only when there is an active leakage, preventing unnecessary distractions and respecting Jakob’s Law by using familiar UI patterns.
During brainstorming, I identified potential features guided by user needs and data availability:
Water usage data refreshes every 8 hours
Toggle options for viewing usage trends by day, week, month, or year
Leakage alerts triggered by real-time data
Historical yearly data storage
Recent 8-week comparison graphs for similar households
Usage graph
The usage graph visualises daily household water consumption, helping users quickly grasp their usage patterns. As the product’s core feature, the graph was designed to be the hero. We tested line, horizontal bar, and vertical bar graphs, and found users interpreted the vertical bar graph most easily.
Our data allows switching between GBP (cost) and litres views. Through user testing, 'litres' confused users - e.g., a 4-person household using 480–500 litres daily couldn’t tell if this was high or low. However, showing cost (GBP) instantly made the data meaningful and relevant.
This insight led us to set GBP as the default view, with litres available for reference - making the tracker intuitive, actionable, and user-centered.
Leakage Alerts
Problem: Customers often don’t notice household leaks because pipes are hidden. They only realise when a large bill arrives, causing panic.
Solution: We introduced a leak alert system to prevent this frustration.
How it works: Using data analytics, we found that most people don’t use water between 2 AM and 6 AM. If continuous water flow is detected during this period for the next 72 hours, it signals a possible leak.
Special cases: Some customers use water overnight due to medical needs like dialysis, peritoneal dialysis, or similar treatments. We identified these users through the Severn Trent PSR scheme - an official register for customers with special needs.
Customer support: Before launch, we ran a campaign encouraging customers to register if they have special water usage needs but aren’t yet on the scheme, ensuring they won’t receive false alerts.
Alert Journey
Immediate Notification: When an alert is detected, a snackbar appears on the dashboard and an email is sent to users.
Two Possible User Journeys:
Journey 1: Known Leak
If the customer is already aware and managing the leak, the alert can be turned off. If the issue persists beyond 30 days, the alert reactivates.
Journey 2: Unknown Leak
If the customer is unaware, a step-by-step popup guides them through a leak flow test to confirm the issue.
If confirmed, customers receive a Severn Trent-approved plumber list for quick resolution.
If unsure, a "Video Your Notes" option connects the customer via video call with an operator to verify the leak remotely, saving time and cost.
If no leak is identified, the alert is closed but will re-alert after 72 hours if it persists.
Similar Household Comparison
This tab displays the average water usage trends of households similar to the user’s, offering a benchmark for comparison. On first visit, users answer a series of questions to classify their household group. During testing, some users expressed doubts about the data’s accuracy, knowing water use varies by household.
What I learned
From this project, I learned the real value of designing with users’ contexts front and centre - starting with a mobile-first approach was crucial given that most users access the product on phones. Prioritising simplicity with a modular bento layout helped reduce cognitive load and made the experience scalable and intuitive. I gained a better understanding for progressive disclosure, organising complex data like usage and leak alerts in ways that get users’ attention and familiarity.
User testing revealed important insights, such as cost-based metrics being more meaningful than raw water volumes, which shaped design decisions. Designing the leak alert flow highlighted the importance of empathy and inclusivity by accommodating customers with special needs and creating a helpful, guided journey to resolve issues.
Overall, the project sharpened my ability to balance clear communication, system-wide thinking, and user-centred problem solving in a real-world, impactful product.
