Role: UX Designer
Challenge: Redesign a cluttered water usage dashboard to help customers track consumption and meet water-saving targets
Impact
The redesigned Usage page received enthusiastic feedback from stakeholders and the product owner, who praised it as significantly cleaner and more intuitive than the original design.
I conducted user testing with customers who validated the designs met their expectations. The main feedback was minor wording simplification, which the copywriter implemented.
The new design transformed a confusing, cluttered interface into a clear tool that empowers customers to understand their water consumption and take action to reduce it.
Problem
A water utility wanted to encourage customers to reduce water consumption using their new digital smart meters. Previous research showed customers were motivated to track usage, but the existing customer portal was working against them.
The Usage page was cluttered and confusing. Customers couldn't quickly identify their water-saving targets, usage graphs were too small to read, and the billing summary didn't render properly on desktop or mobile. The lack of visual hierarchy made it nearly impossible for customers to understand their consumption patterns or take action to save water.
The business goal: Drive behavioural change by making water usage data clear and actionable.
The user need: Track water consumption easily and understand how to reduce usage.
Process
Heuristic Evaluation
I conducted a heuristic evaluation of the existing Usage page against core UX principles. I documented 16 specific usability issues across desktop and mobile:
- Visual hierarchy problems: Target information (1,701L of 2,100L target) lacked emphasis, making it easy to miss
- Readability issues: Daily/weekly usage graphs were too small, forcing users to squint or zoom
- Technical failures: The water usage billing summary rendered poorly on both devices, with overlapping text and misaligned elements
- Confusing interactions: The "Edit target" button wasn't obvious, and tabs labelled "Weekly" actually showed billing period data, not calendar weeks
- Mobile-specific issues: Graphs weren't responsive, text misaligned, and the date selector required excessive scrolling through arrow buttons
Competitor Analysis
I analysed water and electricity customer portals from other utilities to understand industry standards. I focused on how they presented:
- Date selectors and time period options (hourly, daily, monthly, billing period)
- Usage graphs and data visualisation approaches
- Target-setting and progress indicators
- Layout hierarchy and information architecture
Key insight: Leading utilities used clear visual hierarchy to emphasise targets and year-on-year comparisons, helping customers contextualise their usage.
Solution
I redesigned the Usage page with a clear visual hierarchy and intuitive navigation across five time periods: Day, Week, Month, Year, and Bill.
Clearer Data Visualisation
I increased graph sizes significantly so customers could actually read their usage patterns. For the Month view, I displayed 30 days of data at once (instead of cramming it into a tiny space). For the Year view, I added a year-on-year comparison toggle that overlays 2023 and 2024 data, making it easy to spot consumption trends.
Prominent Target Display
I redesigned how targets appear. Instead of burying the information, I placed usage summaries directly below each graph: "You used 1,680L of your weekly target. That's 120L per person or $7.56* per week." A large, colour-coded indicator (green for under target, red for over) immediately shows performance. This gives customers instant feedback on whether they're meeting their goals.
Simplified Date Selection
I replaced the cumbersome arrow-clicking date selector with proper dropdown menus. For Week view, customers see a date range (23rd - 29th June 2024). For Month view, separate dropdowns for month and year. This matches how people naturally think about time periods.
Mobile-First Responsiveness
I redesigned the mobile experience from scratch. The graph now fills the screen width properly, text is sized for readability, and the "Filter by" dropdown makes time period selection thumb-friendly. All usage information displays clearly without horizontal scrolling or misalignment.
Encouraging Target-Setting
I created a new onboarding flow that prompts customers to set a water usage target when they first log in. A modal explains: "You have a digital water meter. To track and understand your water use, set a target now."
When customers click "Set my target," they're guided through a contextual form that shows their previous usage (293L per day on the last bill) and asks about household size and property type. This data helps calculate a personalised, realistic target rather than leaving customers to guess.
What I Learnt
This project taught me the importance of staying flexible during QA testing. Some UI requirements that looked polished in design didn't translate perfectly to code, particularly around responsive behaviour at specific breakpoints.
I learnt to anticipate these issues and iterate quickly with developers when they surfaced. We'd assess whether something was a genuine usability problem or a minor polish issue, then prioritise fixes accordingly. Not everything needs to be perfect—some issues aren't showstoppers.
If I did this again, I'd involve developers earlier in the design process, especially for the data visualisation components. A quick technical feasibility check before finalising mockups would have saved us an iteration on the year-comparison toggle feature.
Made with Bullet