British Gas Smarter Energy

UX and UI design for a responsive dashboard

Smarter Energy is a online service enabling British Gas customers to view and track their gas and electricity usage, compare their usage with others, and get hints and tips on how to reduce the amount of energy they use.

The data is collected from next generation connected smart meters and transmitted to a third party (Alert Me) where sophisticated algorithms are used to collate the data and extrapolate patterns, which is then consumed by the British Gas technology, linked to customers' accounts and then made available via a responsive website.

British Gas dashboard

Dashboard mock-ups

Showing graph design for energy usage over time

I joined the project as resource was being ramped up - one UX had already begun the process of exploring options for the interface, and was joined by myself, two full-stack front-end developers, a data analyst, scrum master and a test engineer alongside various BA's, product owners and technical people from the wider business. The project was a lean start-up flavour of agile, and the service was to be trialled strict MVP.

Paper-based and Axure prototypes

The war room

The core project team worked very closely together, and especially us two UX - who divvied up app functions and separate stories to focus on, whilst working together on global design features.

We spent a lot of time exploring and expanding on various UI navigational patterns and designs using wireframes and lo- and hi-fi prototypes, and guerrilla testing were necessary.

Paper-based and Axure prototypes

Paper-based lo-fi prototypes

We used paper-based prototypes to get early feedback from users and to help inform content hierarchy

One of our key objectives was simplification of both the data representation itself, and the way in which users could interact with the data, ie. comparing themselves against similar homes, discovering their peak usage and what household items might be using the most energy at any given time.

Paper-based and Axure prototypes

High fidelity clickable prototypes

Built in Axure and used in guerrilla testing, formal customers labs, to gain the buy-in of the wider business and to use in show-and-tells

We built clickable prototypes to use in guerrilla testing as well as formal customer labs which were run on-site by third party. The prototypes were also very useful for show-and-tells, and for gaining buy-in to our ideas from the wider business.

They are also very useful tool for describing functionality and interaction design to developers who were building the front end alongside us.

Feedback from repeated formal and informal user testing revealed that the concept was fairly well understood, and that iconic representations of types of house and types of household appliance were well received.

Learnings that instigated further UI development were that use of colour as an indicator in anything other than 'stop/go' scenarios (green and red for 'good' and 'bad') was not necessarily very well understood, and that adding sophistication in the form of employing further colour ‘stages’ often served only to confuse the meaning of the concept.

Prototypes for Tips and Feedback sections

We also became aware that comprehension amongst our user base of data visualisation in the form of graphs was limited, and that graphs needed to be single-source, non-comparitive and very clearly labelled.

Final design