The Project
I was tasked with redesigning the British Gas mobile app to address all the negative feedback the previous app was receiving. With an App Store rating of 2.1 and many commentsrequesting more features and better user experience, we had the exciting opportunity to take this product to thenext stage in its evolution.
The UX Process
Discovering Customer Cohorts
Using analytics from the data team we were able to uncover who our customer base was and group them into different customer cohorts. This meant we could really understand who we were designing for.
Research and Data Analytics
Using data and analytics from various sources we identified many customer pain points ranging from missing features to technical problems to general negative sentiment towards the previous app.
New Information Architecture
Based on these customer pain points and our understanding of our different customer cohorts we created aset of problem statements and addressed them by redesigning all the main user journeys for the app.
Early Concept Validation
The early concepts for the mobile app were validated with users to see what features would resonate with our customers. Some of the early concepts included an Account Health feature which didn't perform so well and was subsequently removed. This is part and parcel of the user-centric design process.
Iconography And User Testing
As part of this redesign, I was responsible for reorganising and standardising the iconography used in the product design department.This was needed as previously there was no process in creating or validating new icons. This had resulted in a lack of quality and consistency in the British Gas icon set.
New Component library
For the App redesign we needed a new design system to hang our user journeys on. This new design systemused an updated application of the British Gas brand that was more modern and systematic. We used all the latestFigma features like component sets, properties and tokens to design this component library.
Figma Variables and Themes
By using Figma variables as part of our new design system meant that we could deploy features much faster as all the design decisions were set in one place, a single source of truth for designers and developers. Variables also gave us the opportunity to incorporatethemes in the app. A light and dark mode with the possibility of a high contrast mode down the line.
New App Dashboard Design
The new homepage design was created as a dashboard style design. The thinking behind this was so that customers could scan and see a consolidated view of all their account details in one place. We also implemented a new feature called‘Next Best Actions’ which allowed customers to be informed about their next account action.
Energy Usage Charts
One of the major pain points seen in the data and analytics was the omission of the Energy Usage charts in the app.This was something that British Gas customers could access on the desktop website, but not within the prevous British Gas app.This was an important addition and opened up the possibility of a disaggregated view in the future.
Payments and Direct Debits
Another pain point that we uncovered was that the payments journeys were not performing very well. We have redesigned these to include newer payment options like Apple Pay and Google Pay and improved the user journeys to make it easier for customers to update their direct debits.
Offers And Promotions
One of the problems identified from the previous app was that we didn’t have a mechanism to promote offersfrom different parts of the business, so there wasn’t a chance of cross selling between energy, services or Hive smart home products. This new promotions area uses illustration that I designed myself.
Prototype User Journeys
All our designs were prototyped into interactive user journeys for the whole app. This included individual tasks to a fully functioning usage chart and a light and dark mode versions. We wanted this prototype to replicate what the final app would look and feel like so that we could test it with real users.
Usability Testing In The Lab
To validate our new app design and its improved feature set, we went to the User Testing Lab in Leicesterto put our prototype in front of real customers to get their feedback. We developed a test script that ran through a number of tasks and general usability questions with the users. Overall the new app design performed very well.
Usability Testing Report
After the usability test we compiled a report with all the findings and any recommendations and insights.This was presented to the business to validate our hypothesis and give us confidence that is new design wouldperform well once it has been developed and released to consumers.
App Store Promotion Images
Below are some of the promotional images that I created to advertise the new app onthe Apple App Store and Google Play Store. I was also responsible for creating a promotional landing page and a promotional video all created to market our new mobile app to our customer base.
The Results
The new British Gas Energy app is now live on the App Store and Google Play Store with a rating of 4.4 up fromthe previous app at 2.1. The performance metrics like touchpoint NPS, contact rates and unique visitors were all in positive territory.A massive improvement!
