
When I started this project, energy prices were at an all-time high in the UK. Many people were struggling to afford to use their energy and needed support. People had to stay with their current provider as competitors weren't taking on new customers.
British Gas partnered with SOMO, the agency I worked with, to reimagine the customer experience for pay-as-you-go customers. The project's goal was to improve the customer experience and support customers in this challenging time whilst reducing the cost of service. I worked on this project for six months, leading the project from discovery to development.
The team at SOMO consisted of a product owner, client partner, researcher, UI designer and another UX designer and myself as UX lead alongside a small group of stakeholders from British Gas.
I conducted a UX audit of the current app experience, looking for pain points, quick wins and areas which require exploration and testing.

A screenshot of the UX audit.
I began with a competitor analysis but soon decided to run usability testing as most experiences were behind a log-in. I conducted the testing with participants from other energy providers to understand their experience, identify uncovered needs, and hear how they felt about it.
Findings

Usability testing analysis in MIRO.
I created several prototypes to bring into usability testing informed by the insight from the discovery phase. The prototypes were a mixture of new concepts and improved journeys. Each prototype was an effort to reduce pain points and better support customers.
Notifications center
Problem
Customers would often get cut off from supply as they were unaware that their meter balance was low. This happened when away from the homeof a low meter balance.
Customers had meters in hard to reach locations, under the stairs or outside that they would manually have to check to an accurate meter balance.
Solution
A notifications centre where users could set up custom alerts. Automatic top-ups which would top-up a customers account when their meter balance drop belows their set threshold. The notifications can be set to email, SMS or push. Flexibility and custom to ensure they are seen.

.
Automatic top-up
Problem
Customers would often get cut off from supply as they were unaware of a low meter balance.
Solution
Automatic top-ups and alerts which a customer could set the method and amount.

Low-fidelity designs created in Figma.
I ran four rounds of usability testing during the project, and this was the second. The purpose was to test our proposed improvements and new concepts. I created the low-fidelity prototypes in Figma and tested them with existing pay-as-you-go customers. The testing helped me measure our hypotheses' effectiveness, identify areas of refinement, and determine what features could be de-prioritised.
Key insights
The number of customers calling British Gas to access financial support has increased by over 50% in the last year and is likely to rise. Those customers face lengthy call waiting times and potentially embarrassing conversations.
I worked with British Gas to map out the current experience and determine whether designing this process in the mobile app would be possible.

The current journey of applying for financial support.
Through my conversations and many rounds of usability testing with customers, I discovered that many had lost supply by simply forgetting to top up. They had more pressing issues or were away from their home at work or on holiday. Energy only became a priority for customers when they were cut off. Getting back on supply once cut off was a time-consuming process.
I designed two concepts to help reduce 'accidental 'cut-offs' and conducted usability testing to determine the best solution.
Scheduled payments
Scheduled payments are similar to direct debit. Customers would select the amount and date they want their account to be topped up.
Automatic top-ups
Automatic top-ups are not scheduled. They occur when a customer's balance goes below a set amount. Customers can choose their threshold and how much they top-up by.
Outcome
In the testing, it was clear that automatic top-ups would be more beneficial to the customer, giving them flexibility and control without feeling tied into a scheduled payment. I worked closely with the copyrighter to resolve some minor issues with the set-up instructions.

The re-design of scheduled payments and auto top-up.
My final work on this project was finishing the high-fidelity designs and building components into a design system, using elements of the current brand where possible. The design system covers everything from typography and button styles to accessibility standards. I worked closely with a UI designer and British Gas designers to build the design system. I ran regular check-ins and collaborative sessions to ensure the components were extensive, consistent and of the highest quality.

Some of the high-fidelity designs I created for the app.
Throughout this project, I worked closely with British Gas and its customers to improve core journeys and designed new features which keep the customer in control and on supply. Customers can access financial support through the app without lengthy waits and difficult conversations.
The demand for the calls centre has reduced significantly due to the design of several self-serve journeys, including ordering a replacement card, finding a top-up location and onboarding wizards for new customers.
![Showreel_-Mobile-screens-[remix]](https://dansteeldesign.co.uk/wp-content/uploads/2025/02/Showreel_-Mobile-screens-remix.gif)
Other work
E-on NextMobile app
Talent BuilderSaaS
OnePlan EventsSaaS
British GasMobile app
Cera CareMobile app
University of NottinghamMobile app