One of the key design strategies for British Gas digital is to create and deploy accessible, consistent and coherent experiences for their users. A large part of this strategy is developing and testing the Nucleus design system.
THE CLIENT
TASKS UNDERTAKEN
UX Research
UX Analysis
User Journeys
Hi-fidelity Prototype creation
Usability testing
TIMEFRAME
11 MONTHS
As lead UX designer for the British Gas Home Insurance team, I took the opportunity to design test and refine a new quote summary page using Nucleus components.
The Design Challenge
The quote summary page was using the older BGVI design system (image above) and is the core page for the British Gas Home Insurance business. Each month there are approximately 12,000 visitors to the Home Insurance journey via price comparison sites and direct to the BG site. Ordinarily, only small design changes to a buy page can have a measurable effect on sales but this is a wholesale design restructure and re-style.
Test, iterate, and test again!
The final MVP Nucleus design would be put live as an A/B test so that we may get quantitative results against the older design before replacing it.
Before the design was built in the live environment two usability tests were conducted to progress the first iteration of the design. The design improvements were based on the qualitative research gained in the moderated testing lab sessions.
Quote Summary iteration 1
The first of two prototype designs constructed with HTML code using live Nucleus components. Select 'See the prototype' to have a play with the live design that was tested in our lab sessions.
Quote Summary iteration 2
The second of two hi-fidelity prototype designs constructed with HTML code using live Nucleus components. This prototype takes the designs further with our hypotheses based around the implementation of a new concept for informing the user of any update to price as they alter the quote displayed in context. How the quote works when locked from a previous visit and a pattern for promotional codes.
Mental Modelling
We asked each participant to take us through how they would go about buying home insurance while drawing out the path on a whiteboard as they imagined each step. This was to see if the designs met their expectations and to gain insight into the commonality between our user's approach to buy home insurance.
