In the past, rolling out a new visual identity meant all the teams had to refactor their code to adopt the new style. If we look at the last 2 brand updates, they both took several years before the new visual identity was adopted by all areas of the website. This is due to the fact that product teams have higher value items in their backlog, and it is difficult to get refactoring work to adopt a new visual identity prioritised. But the outcome for the customer is a fragmented website and experience, and on some occasions a loss of trust!

When we put together a strategy for a design system, we looked back at how the British Gas brand evolved in the digital world over the last couple of decades and we observed a trend: the visual identity would change on average every three years. Being involved in the last 2 changes, we also knew that it was a lengthy and expensive exercise each time.

We were convinced that we could help the company with these two challenges: increase the speed and reduce the cost of future brand updates.

These are aspects of the design system setup that would make it possible:

  • Encapsulating the branding within the components, via web components.
  • Utilising design tokens to make it easier to make large scale changes across the whole library.
  • Having an evergreen approach to our Design System, enforcing teams to always have the latest version of the system.
  • Following a non-breaking changes approach to delivery and having a process that built components based on their purpose rather than their visual appearance.

Our time to shine!

February 2023: British Gas introduces a refresh of its brand identity, and that implied some changes in the visual side of things. Out with gradients, shadows, and asymmetric corners... and in with a new palette of colours, new font, icon, and illustration styles!

We created a working team that consisted of the Nucleus team, augmented with a couple of designers from the product teams. Together we translated the visual identity to what it would mean for the digital experiences. The brief was simple: we update components visually but keep their essence. The goal is to make sure the visual update works with the current content on the website. That way, we can push a visual update without requiring any (or very little) work outside the design system team.

We started by updating the foundations of the system: font, colours, border radii, spacing, icons, illustrations, and tints as well as removing any unnecessary elements like shadows, and gradients that aren't part of the new identity.

We then focused on each component, looking into their specific visual elements, and what the new identity means for each of them.

Testing our work

As this redesign was a continuous effort across multiple departments and teams, we needed to gain feedback from their journeys and to ensure that we were not going to break anything. To do this, we offered the ability to overwrite Nucleus on their browser to the new brand refresh, codenamed Otter.

This allowed an overall transparency, where anyone could see our progress. It enabled teams and testers to quickly give feedback, without us having to release into a testing environment and blocking teams on their everyday work, and it made sure they were always on the latest version of the brand refresh.

This ability to overwrite the system on an individual's browser has been instrumental in a number of other projects and when we need to showcase how a change might impact production, without ever having to do a production release.

Out with the old!

With one release of Nucleus, we were able to wipe out the entire old brand identity from 2018 and bring in the new brand refresh across the website. The first time it has happened in the 20 something years of the website.

After the release of the refreshed brand, we made sure for teams to send us any errors or any analytics to catch any potential bugs and to feedback on the traffic conversions. There were very limited issues and teams reported that there had been no effect on their conversion.

Where it took months, no... years in the past, it took us a few minutes this time. And without requiring any development work from anyone outside the design system team.

A success for Nucleus without a doubt!

All that was left to do for our team was release an updated version of the Figma UI kit, and make changes in the documentation to reflect the new identity.

Next time...

We expect our brand to continue evolving, and when that happens, we have made a few changes to the way Nucleus works that will help us deliver the next updates with even more ease.

Now that we work with design tokens, and have a layered approach to how our web components are put together, we have built the flexibility for the system to evolve with the brand in tandem.

A design system helps in many ways, and in this particular scenario, it has proved to be very valuable. It has allowed us to operate a fairly important change while letting product teams keep their focus on their own priorities, not having to worry about anything as long as they use the system to build their experiences.