Building a Product to serve other Products

CASE STUDY

My role at Idean was to work with Centrica (British Gas) as a Product Design Lead, specifically on the Design System team, Nucleus.

Nucleus was at an early adoption stage with limited coverage across the British Gas experience at the time. So building out the core components and patterns was a key part of my role.

The key challenges that stood out were:

-How to scale the system and define what components and patterns needed to be created and how we worked with the different design teams to make sure understood what was needed.

-How to start to measure the impact of the work. This was important as it was key at the time to make sure we reinforced the value Nucleus was making both in terms of customer experience and making it more efficient to build out new experiences

-How do we build processes around the design system and make it a living and breathing system that the whole company felt part of its creation.

Company
British Gas, (through Idean)

Roles
Product Design Lead (Design System)

Key Responsibilities
Product Design
Running Workshops
UI Design
User Research
Usability testing

My Role & Objectives

INTRODUCTION

The product we were creating was Nucleus, which was the British Gas design system. It included everything from how to get set up, the key values and principles and then the components, patterns and page types plus much more.

Being part of building it, I really felt that I built of my previous experience of digital design but learnt a really deep understanding and appreciation of the accessibility of what we were creating. This was through being around a talented team and also being part of lots of user testing sessions utilising the in house lab.

Every new component, patterns and journey we released went through a rigorous process designed to make sure that we were solving the customer challenge, creating an experience that was truly assessable to all and delivering something that was easy to adopt by the design teams.

The Product

NUCLEUS

The Nucleus Design System team was one squad that sat amongst another 15 design squads each focusing on a different part of the British Gas experience.

This ment the way I worked with other designers across the team at large became really important to the success of the design system in general.

Through regular workshops, drop in sessions, documentation and advocacy of the system and the benefits we were able to convert a large percentage of the overall experience over to using Nucleus components.

Through process design, being a good listener through workshops and drop in sessions in and generally being collaborative in how we / I worked really helped the adoption and continued success of the design system.

Driving Adoption

MY APPROACH

Outcomes & Achievements
along the way

OUTCOMES

During my time with the team we increased the adoption of the system across the product teams in the business and took it from a product with limited adoption and uptake to a key driver in creating a more accessible, consistent experience for customers and a more efficient way of designing for the Product teams.

Key Achievements included;

  • Introduced key complexed components including new tables, cards, page formats and illustrations into the design system and helped design direct many more.

  • New homepage designed and launched with increased accessibility score, up from 49/100 - 95/100 based on specific criteria. Bounce rate down 10% and +37% uplift in click through based on A/B testing.

  • 50% of components created for all functional journeys across website

  • 75+ participants joined our the weekly Nucleus Sessions from the business

  • 10+ User testing sessions with teams and customers in the lab

  • New process designed and rolled out around how teams could contribute to the design system.