British Gas - mobile app re-design

Project overview

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.

DISCOVERY

How effective is the current experience?

I conducted a UX audit of the current app experience, looking for pain points, quick wins and areas which require exploration and testing.

  • The app's home screen and navigation focus on upselling and advertising products and services rather than what a customer wants.

  • The app was designed for credit customers who pay monthly. Pay as you go customers use the app more frequently to top-up and have different neds.

  • to be Customers are taken out of the app and passed between the website and telephone to complete basic tasks. There needs to be more continuity in the journey and visual styles.

  • Topping-up gas and electricity require the customer to complete two transactions, which is a significant inefficiency and a waste of the customer's time.

  • It's hard for customers to see their top-up history and energy spend because payments are split by fuel type.
A screenshot from the UX audit.

A screenshot of the UX audit.

DISCOVERY

Is the British Gas experience aligned with the other energy providers?

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

  • Topping-up is simpler and easier on other apps, and customers can top-up both fuels in one transaction.
  • Other energy providers are more up-front about the financial support they offer. Utilita, for example, promotes financial support through a 'power up' on their home screen, which allows customers to apply and access financial support without leaving their app.
  • Other energy providers allow their customers to manage more of their accounts through the app. The apps are rich in features and information. However, some are bloated and hard to navigate.
  • I learnt that many people aren't pay-as-you-go customers by choice and are constrained by their property or landlord and felt like their energy provider was punishing them through higher prices and limited trust.
Usability-testing-round-1-analysis

Usability testing analysis in MIRO.

IDEATE

Improving core journeys and creating new concepts

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.

notifications-1

.

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.

notifications-1

Low-fidelity designs created in Figma.

PROTOTYPING AND TESTING

Testing our hypotheses and proposed improvements

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

  • Automatic top-ups simplify the management and payment for pay-as-you-go customers. Customers don't need to worry about losing power or needing to check the meter, saving them time and stress.
  • Participants were not aware that British Gas offered financial support and would need to know where to look for it.
  • The self-serve journeys, including ordering a replacement key and finding a top-up location were easy to use and preferred over the current process, which requires lengthy call times. Creating self-serve journeys will give customers better access to support when needed.
  • Notifications were a valuable addition to the app experience. Participants used the notifications centre to set their preferences, which were very different. Giving customers the ability to choose their preferences will help drive engagement and ensure that important communications are received.

DEFINE

Financial support

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.

Process-mapping

The current journey of applying for financial support.

Testing

Automating payments

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.

auto-top-up-and-scheduled-payment

The re-design of scheduled payments and auto top-up.

REFINE

Preparing for handover

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.

High-fidelity-designs

Some of the high-fidelity designs I created for the app.

OUTCOME

Supporting customers and reducing costs 

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]