Building a multi-brand design system
A team of us here at BT are building a design system called Loop. In this post, Amy Hupe, Product Owner for Loop, shares how we’re approaching the challenge of a system that works across three brilliant — but very different — brands.
A design system is a set of visual styles, UI components, design patterns, guidelines and prototyping tools for designing digital experiences, with code to help teams implement them in websites and applications. They also include processes, like how the design system team supports its users, and how people outside of the team can contribute to it.
For the past few months, we’ve been working closely with our colleagues in BT Enterprise to start building our own design system.
It’s called Loop to reflect our focus on continuous learning and improvement, delivering standout customer experiences through a constant cycle of design iteration and enhancements.
Like most design systems, Loop aims to solve common design problems so our multidisciplinary product squads can focus on solving context-specific challenges. This should significantly improve design and development efficiency in our organisation and create unity across our products.
But unlike many design systems, Loop has some additional challenges.
BT is a large and multi-faceted organisation, so Loop will need to support various technologies being used by different teams and departments. It will also need to serve different platforms, including web, iOS and Android.
And perhaps the biggest challenge of all — and the one we‘ll cover here — is that it needs to support the three brands within the BT Group: BT, EE and Plusnet.
Challenges of building a design system that supports multiple brands
This is tricky because each brand is unique and distinct from the others. Everything from form components, to use of colour and typography has been designed a little differently for each brand. And although unity across individual brands is desirable, differences between the brands can help us to optimise for different audiences.
There’s also the question of how we make Loop easy to navigate for its users. Most designers and developers at BT are only working on one brand at a time, so we need to help them find the right tools and content as quickly as possible. We don’t want to present them with things that aren’t relevant.
Different approaches to multi-brand design systems
We could try to bring the brands closer together, to make different elements easier to systematise and maintain.
But this would take a lot of time and effort to achieve, create a lot of disruption for our teams, and demand changes which might not benefit the individual brands.
Alternatively, we could create three completely separate systems, but this has downsides, too. Maintaining three systems is a huge overhead and means we might miss valuable opportunities to align.
In BT Consumer Digital, we’re all working to deliver excellent user experiences, and much of what helps us to achieve that is not brand-specific. Accessibility, usability, clarity, and performance are things we have shared high standards across all of our brands.
We also cater to lots of common user tasks within our products, like browsing offers to select a product, checkout or contact us. With a single design system, we could align some of these with evidence-based patterns to improve efficiency and elevate the quality of our user experiences based on research.
So we’re opting for a solution that lets us achieve the best of both worlds.
How we’re approaching the challenge
After a thorough analysis of our UI across all three brands and conducting user research with teams across BT, we’re planning to converge across brands where we can and diverge where we need to.
One area where it’s been important to preserve differences in the way each brand uses colour. EE’s distinct visual language uses bold, contrasting colours from an intentionally small palette. The states of an EE component may dramatically use colour, for example, inverting its colours on hover. BT, however, has a much wider palette and uses tints and shades to denote states. These differences are important to each brand’s personality, so we’d be cautious about trying to align them on an approach.
By contrast, aligning spacing scales and breakpoints across the brands has hardly any impact on the look and feel of our products, but makes things much easier to maintain from a design system perspective.
Another way we’re tackling this problem is with how we build components. With each new component we create, we start with an unbranded version, which contains all of the properties that are the same across each brand. For instance, all of our buttons across all brands have a full-width option, so this is part of the unbranded component. We then extend that unbranded component with the brand-specific properties and styles it needs to create the branded versions.
The video below shows a hero banner with the words “find your perfect broadband deal” with some marketing copy and a button to find out more. In the bottom right corner, there is some code in a text editor. By changing a couple of values in the code, the hero banner, text and button changes from BT branding to EE.
We plan to take a similar approach to our guidance. We’ll create a single website to house information about Loop, design patterns and usage guidance for our components. Users will then have the option to switch between brand-specific examples and guidance at each component page.
Next steps for Loop
We’ve just launched the first parts of Loop to a select few teams at BT, so we can learn from their experiences as we continue to build it.
As Loop matures and we start to introduce more brand-agnostic functions like form design principles and content design guidelines, we expect to see more opportunities to align our approaches.
This will help maximise efficiency for all of our squads, helping them to design and build faster, learn more, and deliver standout customer experiences to all of our users, across all of our brilliant brands.
If you’re building a multi-brand design system in your organisation, or you’ve got a question or suggestion about our approach, let us know in the comments below.
