UTILITY WAREHOUSE
UTILITY WAREHOUSE
Smart Billing Experience
Designed the digital billing experience at Utility Warehouse to reduce support calls, clarify charges, and introduce AI-powered summaries that help users understand their bills at a glance.
Designed the digital billing experience at Utility Warehouse to reduce support calls, clarify charges, and introduce AI-powered summaries that help users understand their bills at a glance.
Utility Warehouse's Company Vision:
Utility Warehouse's Company Vision
To simplify life for homeowners by providing all essential services under one roof, delivering value, convenience, and exceptional customer experience through seamless integration and innovation.
To simplify life for homeowners by providing all essential services under one roof, delivering value, convenience, and exceptional customer experience through seamless integration and innovation.
My Role
Lead UX Designer
Collaboration
Product
Marketing
Engineering
Data Science
Cross Functional Teams
Strategic Impact
Increased Customer Trust
Reduced Support Calls
Improved Retention
The Challenge
The billing experience was seen as overly complex.
Users had to download a PDF to understand their charges — an outdated and unhelpful format.
The Goal
💡Modernise billing by:
Reducing PDF reliance
Lowering support calls
Giving users a smarter, self-serve experience
We focused on the 66% of customers who check their bill digitally before contacting support.
Deflecting up to 5% of total support calls.
Target Impact
Deflecting up to 5% of total support calls.
Target impact
What We Achieved
📉 11% drop in billing-related support calls
Users were able to find the answers they needed without calling in.
📈 +73% increase in engagement with billing content in app
More users interacted with their bill digitally, especially via the new summary and insights view.
💬 +36% improvement in comprehension scores (via usability testing)
Participants reported feeling more confident and clear about what they owed, when, and why.
What We Achieved
📉 11% drop in billing-related support calls
Users were able to find the answers they needed without calling in.
📈 +73% increase in engagement with billing content in app
More users interacted with their bill digitally — especially via the new summary and insights view.
💬 +36% improvement in comprehension scores (via usability testing)
Participants reported feeling more confident and clear about what they owed, when, and why.
My Role
Lead UX Designer
Process
Discover
Define
Develop
Deliver
Collaboration
Product
Engineering
Data Science
Cross Functional
Strategic Impact
Increased Customer Trust
Reduced Support Calls
Improved Retention
01 Discover
01 Discover
The first part of the process was to understand our users through comprehensive quantitative and qualitative research.
The first part of the process was to understand our users through comprehensive quantitative and qualitative research.
The first part of the process was to understand our users through comprehensive quantitative and qualitative research.
Analysing the internal Call Driver Model 2.0
Analysing the Internal Call Driver Model 2.0
As the first step, I analysed our Call Driver Model – which segments customer support calls using OpenAI. These analytics are captured in Looker and revealed that billing queries are the highest call driver.
As the first step, I analysed our Call Driver Model – which segments customer support calls using OpenAI. These analytics are captured in Looker and revealed that billing queries are the highest call driver.
Call Listening and Transcript Analysis
Call Listening and Transcript Analysis
To ground the work in real customer problems, I ran a round of call listening and analysed support transcripts. Three key themes emerged:
Bill increases were the number one driver — customers didn’t understand why their charges had shifted.
Disputed charges came second — the experience lacked transparency.
Refunds and cancellations ranked third — customers weren’t guided on what to do next.
These findings made it clear: the existing experience was failing customers. I wanted to understand why, and how design could change that.
To ground the work in real customer problems, I ran a round of call listening and analysed support transcripts. Three key themes emerged:
Bill increases were the number one driver — customers didn’t understand why their charges had shifted.
Disputed charges came second — the experience lacked transparency.
Refunds and cancellations ranked third — customers weren’t guided on what to do next.
These findings made it clear: the existing experience was failing customers. I wanted to understand why, and how design could change that.
Surveying App Users
Surveying App Users
To better understand user needs, I surveyed app users to learn what they look for on their bill, what confuses them, and why some return to it multiple times in a month.
These insights helped me identify how to prioritise areas of the design.
To better understand user needs, I surveyed app users to learn what they look for on their bill, what confuses them, and why some return to it multiple times in a month.
These insights helped me identify how to prioritise areas of the design.
Understanding Both Customers and Agents
Understanding Both Customers and Agents
This challenge wasn’t just about customers — support agents rely on bills too. To understand why calls were running long, I interviewed agents alongside customers.
At first, their needs appeared different:
Agents asked for more training to get faster context on customer problems.
Customers struggled to understand changes to their bills.
When mapped together, both pointed to the same underlying issue: a lack of speed in understanding.
This insight became the core problem my designs needed to solve.
This challenge wasn’t just about customers — support agents rely on bills too. To understand why calls were running long, I interviewed agents alongside customers.
At first, their needs appeared different:
Agents asked for more training to get faster context on customer problems.
Customers struggled to understand changes to their bills.
When mapped together, both pointed to the same underlying issue: a lack of speed in understanding.
This insight became the core problem my designs needed to solve.
Evaluating the Current Billing Experience
Evaluating the Current Billing Experience
I conducted a UX audit of the current billing experience following our research phase.
I conducted a UX audit of the current billing experience following our research phase.
Billing had been treated as an afterthought in the app, yet for customers it was a core part of their experience. As a squad, we knew this was something we had to change.
Billing had been treated as an afterthought in the app, yet for customers it was a core part of their experience. As a squad, we knew this was something we had to change.
02 Defining the problem
02 Defining the problem
02 Define
The research helped me thoroughly understand the problem space and identify a clear problem statement:
The research helped me thoroughly understand the problem space and identify a clear problem statement:
Business Opportunity Analysis
Business Opportunity Analysis
Post-discovery, we as a squad understood the problem space well. We knew we had to bring a fully considered billing experience into the app — by doing so, we could better contain the 66% of customers already checking their bills there, deflecting around 5% of all support contact.
Post-discovery, we as a squad understood the problem space well. We knew we had to bring a fully considered billing experience into the app — by doing so, we could better contain the 66% of customers already checking their bills there, deflecting around 5% of all support contact.
To guide our solutions, I worked with product to define five design principles:
To guide our solutions, I worked with product to define five design principles:
These principles helped us build a smarter, more helpful digital billing experience — tailored to how users actually interact with their bills.
These principles helped us build a smarter, more helpful digital billing experience — tailored to how users actually interact with their bills.
The Vision for a Smarter Billing Experience
The vision for a
Smarter Billing Experience
The Vision for a Smarter Billing Experience
To bring our principles to life, I mapped the ideal customer journey to meet user needs where they are:
receiving a bill ➡️ checking charges ➡️ making a payment.
To bring our principles to life, I mapped the ideal customer journey to meet user needs where they are:
Receiving a bill ➡️ Checking charges ➡️ Making a payment.
To bring our principles to life, I mapped the ideal customer journey to meet user needs where they are:
Receiving a bill ➡️ Checking charges ➡️ Making a payment.
How do we get there?
I organised and facilitated a series of workshops to align the team, assess feasibility with developers, and prioritise optimsations, and landed on the below plan:
I organised and facilitated a series of workshops to align the team, assess feasibility with developers, and prioritise optimsations, and landed on the below plan:
This roadmap helped us turn strategy into action — shaping a smarter, more supportive billing experience that meets users where they are.
This roadmap helped us turn strategy into action — shaping a smarter, more supportive billing experience that meets users where they are.
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
Design Solutions
03 Design & Test
With a clear strategy & plan in place, I moved into the design phase.
I gathered ideas from the squad asynchronously, created quick low-fi prototypes, validated feasibility with engineering, and tested with users to learn fast.
From the concepts that worked, we prioritised based on value versus effort:
Insights as a quick win, with data largely ready on the back end.
AI bill summaries as a higher-effort but high-impact investment — helping both users and agents speed up understanding, while paving the way for future innovation.
03 Design & Test
Key Design Decisions
Key Design Decisions
📲 AI SUMMARY SPLASH SCREENS
📲 AI SUMMARY SPLASH SCREENS
I landed on these key screens to bring our strategy to life.
I landed on these key screens to bring our strategy to life.
Bill summary upfront – users see their total and due date immediately.
Breakdown + AI insight – if the total is unexpected, we show a clear breakdown and personalised AI-powered explanation (e.g. a new service added, or a discount applied). This delivered on our goal of personalisation.
Clear next steps – guidance on what to do next, whether that’s making a payment, doing nothing, or reviewing a Budget Plan. This aligned with our principle of proactively educating customers.
Bill summary upfront – users see their total and due date immediately.
Breakdown + AI insight – if the total is unexpected, we show a clear breakdown and personalised AI-powered explanation (e.g. a new service added, or a discount applied). This delivered on our goal of personalisation.
Clear next steps – guidance on what to do next, whether that’s making a payment, doing nothing, or reviewing a Budget Plan. This aligned with our principle of proactively educating customers.
In testing with UW customers, breakdowns and next steps worked ✅ — but the AI insight was skipped ❌.
I added a typewriter-style animation, retested, and users noticed its value. We then standardised this animation solely for AI summaries.
In testing with UW customers, breakdowns and next steps worked ✅ — but the AI insight was skipped ❌.
I added a typewriter-style animation, retested, and users noticed its value. We then standardised this animation solely for AI summaries.
Training the AI Tech
I partnered closely with Data Science on prompt design, bringing customer insights from discovery to shape expected outputs. The model was trained to compare past and current bills, then summarise the changes.
Accuracy was validated first with billing experts, then with agents — who confirmed it improved speed to context, a big win. Once we passed an 80% success rate, we were ready to design our first in-app experiment.
Training the AI Tech
I partnered closely with Data Science on prompt design, bringing customer insights from discovery to shape expected outputs. The model was trained to compare past and current bills, then summarise the changes.
Accuracy was validated first with billing experts, then with agents — who confirmed it improved speed to context, a big win. Once we passed an 80% success rate, we were ready to design our first in-app experiment.
🧪 EXPERIMENTS
🧪 EXPERIMENTS
Experiment 1: Help Centre Pilot
Our first experiment was a simple design placed in the Help Centre, where customers were already seeking billing support. We targeted 5% of customers whose bills had fluctuated by more than 10%.
The results were encouraging: around 80% of customers who saw the summary didn’t call support, showing real resolution. A few inaccuracies appeared, but this was expected as quality improves with use and time. Next, we placed the summaries upfront in the app and rolled out to another 5% of customers.
Experiment 1: Help Centre Pilot
Our first experiment was a simple design placed in the Help Centre, where customers were already seeking billing support. We targeted 5% of customers whose bills had fluctuated by more than 10%.
The results were encouraging: around 80% of customers who saw the summary didn’t call support, showing real resolution. A few inaccuracies appeared, but this was expected as quality improves with use and time. Next, we placed the summaries upfront in the app and rolled out to another 5% of customers.
📈 IN-APP BILLING INSIGHTS
📈 IN-APP BILLING INSIGHTS
While the experiment ran, I designed an Account Insights space to surface explanations, comparisons, and recommendations, focusing on two key evolutions.
While the experiment ran, I designed an Account Insights space to surface explanations, comparisons, and recommendations, focusing on two key evolutions.
A major learning curve was designing the bill breakdown — my goal was to increase speed of understanding.
List design: slowed users down as they did their own calculations. Better suited to moments when curiosity was already high.
Illustrations: explored to soften the space, but engineering flagged feasibility issues.
Colour: users liked it for signalling good vs bad trends, but the design systems team challenged its usage. I felt there was a case, but continued to explore other options.
A major learning curve was designing the bill breakdown — my goal was to increase speed of understanding.
List design: slowed users down as they did their own calculations. Better suited to moments when curiosity was already high.
Illustrations: explored to soften the space, but engineering flagged feasibility issues.
Colour: users liked it for signalling good vs bad trends, but the design systems team challenged its usage. I felt there was a case, but continued to explore other options.
I designed for the most complex scenario first — customers with three balances (direct debit, debt, and a budget plan). To explain this, I explored several patterns:
❌ Scrollable cards: Users couldn’t see how balances related.
❌ Card stacks: Same issue.
❌ Timeline cards: Clear for billing, but not scalable across services.
✅ Short story cards: Focused on meaning over numbers. In testing, users quickly understood and could repeat back what they’d learned.
This “short story” approach became the breakthrough.
I designed for the most complex scenario first — customers with three balances (direct debit, debt, and a budget plan).
To explain this, I explored several patterns:
❌ Scrollable cards: Users couldn’t see how balances related.
❌ Card stacks: Same issue.
❌ Timeline cards: Clear for billing, but not scalable across services.
✅ Short story cards: Focused on meaning over numbers. In testing, users quickly understood and could repeat back what they’d learned.
This “short story” approach became the breakthrough.
Using Colour for Clarity
Design Systems initially felt icons alone should convey meaning. But in testing, icons caused confusion — the same arrow could signal opposite outcomes.
I introduced colour as a consistent signal: 🟢 positive, 🔴 negative. This improved speed to understanding by 5+ seconds, and I secured alignment with Design Systems to adopt it.
Using Colour for Clarity
Design Systems initially felt icons alone should convey meaning. But in testing, icons caused confusion — the same arrow could signal opposite outcomes.
I introduced colour as a consistent signal. This improved speed to understanding by 5+ seconds, and I secured alignment with Design Systems to adopt it.
Using Colour for Clarity
Design Systems initially felt icons alone should convey meaning. But in testing, icons caused confusion — the same arrow could signal opposite outcomes.
I introduced colour as a consistent signal. This improved speed to understanding by 5+ seconds, and I secured alignment with Design Systems to adopt it.
Structuring Insights as a Set
In testing, cards were most powerful when presented as a set:
Story
Light breakdown with option to dive deeper
Action
This structure clarified relationships between balances — e.g. total bill (incl. debt), breakdown highlighting debt, and action to resolve it.
I shared the pattern across services and it proved scalable. Engineering confirmed it was simple to build, so I contributed it to the Design System with usage guidelines. This became our standard for presenting insights in-app.
Structuring Insights as a Set
In testing, cards were most powerful when presented as a set:
Story
Light breakdown with option to dive deeper
Action
This structure clarified relationships between balances — e.g. total bill (incl. debt), breakdown highlighting debt, and action to resolve it.
I shared the pattern across services and it proved scalable. Engineering confirmed it was simple to build, so I contributed it to the Design System with usage guidelines. This became our standard for presenting insights in-app.
Designing for High-Priority Actions
Designing for High-Priority Actions
We needed customers to act with urgency, but testing showed this wasn’t coming through.
I explored different CTA styles, but the key learning was clear: urgency wasn’t about button style — without proper hierarchy, actions didn’t land.
We needed customers to act with urgency, but testing showed this wasn’t coming through.
I explored different CTA styles, but the key learning was clear: urgency wasn’t about button style — without proper hierarchy, actions didn’t land.
We introduced a UW purple header as a quick, scalable way to create hierarchy. Engineering confirmed it was simple to implement and accessible.
It flexed across billing use cases:
Main page: totals and key actions
History: trends and bill lookup
Insights: proactive prompts
In testing, this version delivered the fastest task completion rates — users recognised and acted on priorities immediately.
We introduced a UW purple header as a quick, scalable way to create hierarchy. Engineering confirmed it was simple to implement and accessible.
It flexed across billing use cases:
Main page: totals and key actions
History: trends and bill lookup
Insights: proactive prompts
In testing, this version delivered the fastest task completion rates — users recognised and acted on priorities immediately.
Contributing to the Design System
I contributed this header component to the App UI library with usage guidelines, giving squads a consistent space to surface key actions — e.g. top-ups for Cashback or urgent price changes for Mobile.
This design made self-serve far easier across services, directly supporting our goal of reducing support calls.
Contributing to the Design System
I contributed this header component to the App UI library with usage guidelines, giving squads a consistent space to surface key actions — e.g. top-ups for Cashback or urgent price changes for Mobile.
This design made self-serve far easier across services, directly supporting our goal of reducing support calls.
🧭 Adding Billing to the Bottom Navigation
🧭 Adding Billing to the Bottom Navigation
To make billing more accessible, we introduced a dedicated Billing tab in the app’s bottom navigation — positioning it alongside Home, Help and Cashback as a core part of the user experience.
To make billing more accessible, we introduced a dedicated Billing tab in the app’s bottom navigation — positioning it alongside Home, Help and Cashback as a core part of the user experience.
The Full Billing Experience
Once design decisions were finalised, we had a full experience to work towards.
Purple header: clear hierarchy for actions
Breakdown + AI summary: surfaced when bills changed
Bottom nav placement: billing as a core part of the app
Dashboard: access to history with trend graphs and quick downloads
Insights: story-style explanations, service detail, upsell content, and simple graphs
The Full Billing Experience
Once design decisions were finalised, we had a full experience to work towards.
Purple header: clear hierarchy for actions
Breakdown + AI summary: surfaced when bills changed
Bottom nav placement: billing as a core part of the app
Dashboard: access to history with trend graphs and quick downloads
Insights: story-style explanations, service detail, upsell content, and simple graphs
This was the full vision — though we chose not to release it all at once.
This was the full vision — though we chose not to release it all at once.
04 Deliver
📦 Gradual Rollout Strategy
Because this was uncharted territory, we rolled out through staged experiments — testing, measuring, and optimising before scaling.
Releases went first to staff, then to small complex cohorts like Energy, before expanding further. I worked closely with engineering to QA and catch edge cases early.
Overall, this experiment-led approach helped us deliver quickly, learn fast, and reduce risk.
To ensure stability and collect feedback, we rolled out the feature in phases:
✅ Phase 1: Staff testers
Phase 2: 10% of Energy-only customers
Phase 3: All Energy-only customers
Phase 4: Energy + 1 other service
Phase 5: Full rollout to all eligible users
What we achieved
What we achieved
Reflections
Reflections
There were things to improve:
There were things to improve:
The complexity of UW billing meant many edge cases only surfaced once live, we now document these for future use.
On AI summaries, I learned how much trial and error prompt design requires, something I’ll factor into effort next time.
The complexity of UW billing meant many edge cases only surfaced once live, we now document these for future use.
On AI summaries, I learned how much trial and error prompt design requires, something I’ll factor into effort next time.
What Went Well
What Went Well
Early feedback from customers, agents, engineers, and stakeholders saved time and helped us land on the right solutions faster.
Reusable components like the header boosted customer propensity to reuse digital.
And to zoom out, we transformed the entire billing experience, starting from nothing more than a static PDF.
Early feedback from customers, agents, engineers, and stakeholders saved time and helped us land on the right solutions faster.
Reusable components like the header boosted customer propensity to reuse digital.
And to zoom out, we transformed the entire billing experience, starting from nothing more than a static PDF.
More Case Studies:
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
More Case Studies:
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
5 min read
UTILITY WAREHOUSE
AI-Powered Home Insurance
UX/UI •
FINANCIAL SERVICES •
WEB