Energy Bill and Bill Email Redesign

Project Overview

Every month our 4.5 million customers received a bill that simply displayed “100 DR” or “50 CR,” leaving most unsure whether they owed money or held a credit. This ambiguity drove up support calls and pulled down satisfaction scores, so I was tasked with reimagining the balance display to make it instantly clear.

➤ Project size: 4.5 million customers 
➤ My role: UX Designer (end-to-end) 
➤ Timeline: 8 weeks 
➤ Team: Product Manager, Engineering, Customer Support, Infrastructure

Goals

➤ Understand how customers interpret “DR/CR”
➤ See how competitors display balances
➤ Uncover pain points in existing bill layout

Key findings:
➤ “DR”/“CR” jargon is unfamiliar outside accounting.
➤ Some competitors used colour (green/red) or “in credit/debit,” but none combined symbols, words, and colour.
➤ Customers want a definitive “in credit” vs. “in debit” statement.

Impact

Once I implemented these changes, the results were significant. The happiness score on the billing page increased, and customer complaints about balance confusion dropped considerably. More importantly, it reduced unnecessary calls to customer support, saving both time and operational costs.

Process

Research

Define

Ideation

Prototype & Testing

Solution & Design

1. Research

Research Goals

Activities

To achieve the set goals, I decided to study our customers and our competitors’ customers. Identify and analyse the most successful competitors in the energy sector and their billing layout. I also used the internet, social media, and colleagues to further explore the competitors.
Conducted competitor research (analysing 5 key competitors) and case studies. Understand current usability pain points and inform design decisions for a new version.
Analysed 10,000 feedback and facilitated 6 in-depth advisor interviews.
Executed usability testing, prototyping, and content redesign.

Key Findings

Bills are a source of stress and anxiety

I have found bills worrying in recent months as the cost of energy has soared,
so it is unsurprising that we found that one in two consumers experience a negative emotional
response when reading their energy bills – 47% of consumers said they find this stressful and
49% said this makes them feel anxious, as illustrated.

This is concerning as consumers often feeling stressed and out of control with their
energy payments could lead to poor decision-making and have a knock-on effect on
their finances.

2 Define

Personas

Based on my research, Product Manager information and Competitive analysis, I created Steven, Jemma and Shirley as my User Personas. Representing my targeted audience's frustrations, needs, and goals during the completion of the task.

Pain points

Across all three, the common pain points were

Ambiguous labels (e.g. “100 DR”)
Colour-blind accessibility issues (red/green)
Lack of clear “action” wording

Empathy Map

Receives monthly paper bills. Not familiar with financial shorthand like “CR” and “DR”. Wants clarity and reassurance that her bills are correct and up to date.

3 Ideation

To expand on my thought process, I utilised the crazy 8 exercises to extract the nascent ideas that were forming in my head since the research phase.

4 Prototype & Testing

To gather the most accurate feedback, I built prototypes in Figma with exact fonts, spacing and wording. I even created a fake company logo so participants wouldn’t be biased by branding.

During moderated tests with 5 participants, every one of them could immediately tell whether they owed money or had credit. The average time to comprehension fell to 3.2 seconds, compared with 9.5 seconds in the existing design, and satisfaction scores averaged 4.6 out of 5.

As we can see in the first image, two-thirds (65%) of those who received the simple explanation
completely understood why the change was needed. This was compared to 48% of those
who saw existing communications – a significant improvement.

Furthermore, increased understanding also translated to greater acceptance. As illustrated
in the second image, consumers who were given a simple explanation of how direct debits work, as well as a clear rationale for why the changes are needed, were significantly more likely to accept
the changes. By contrast, consumers who did not receive any explanation were significantly
more likely to challenge the change – 38% of those who didn’t receive the explanation told
us they would challenge the change, compared to just 28% of those who received our test
explanation.

In the Solution & Design phase, I combined four clear cues—symbols (– for debit, + for credit), the phrases “in debit”/“in credit,” colour coding with high-contrast—so that no one could misinterpret their balance.

I also worked with content designer on the language to make sure it's easy read and accessibile.

I then worked with engineers to perfect formatting and responsiveness, with the infrastructure team covering every billing scenario, with the content team polishing wording across bills and emails, and with our Product Manager planning and launching it.

5 Solution & Design