How we scaled our design system to unleash Skyscanner’s new brand

Skyscanner’s design system, ‘Backpack’, played a crucial role in enabling the company’s recent brand refresh. In this piece, Shaun Donnelly looks at how having a design system helped Skyscanner — and could help other businesses give themselves a makeover

Introduction

In September 2019, our new brand launched. It was the culmination of over a year of work, touching every part of the company.

Three screenshots of the Skyscanner app on iPhone, displaying various screens from the UI.
Three screenshots of the Skyscanner app on iPhone, displaying various screens from the UI.
Our iOS app showing off our new brand.

Primer

We describe Backpack as ‘the codification of Skyscanner’s design language’ — a representation of all the discussions, debates and decisions that make up design at Skyscanner.

The new stuff

The new brand changed pretty much everything about our products. Our logo, typeface, illustration style and colour scheme all changed completely.

Backpack’s primary button in the old Skyscanner brand.
Backpack’s primary button in the old Skyscanner brand.
Backpack’s primary button in the old Skyscanner brand.
Backpack’s primary button in the new Skyscanner brand.
Backpack’s primary button in the new Skyscanner brand.
Backpack’s primary button with the new Skyscanner branding.

The problem

Back to our task — roll out the new brand for web and apps in a way that satisfied the following criteria:

  • It should require as little work from individual squads as possible. They have their own priorities and can’t drop everything to update their screens to support the new brand.
  • Ideally, Backpack should remain open source throughout without leaking the new brand to the outside world.

A new prop

Add a prop to all of our components to toggle the appearance of the new brand, like this:

<BpkButton title=”Book hotel” newBrand={true} />

Completely new components

Create a bunch of new components we could publish on our internal GitHub that match the API of the old components, but have the appearance of the new brand.

<BpkButtonWithNewBrand title=”Book hotel” />

New versions of components

We’ve always strictly followed semantic versioning with our components. Maybe we could publish updated components to Skyscanner’s internal npm registry, then consumers could switch the versions they’re using:

dependencies: {    “bpk-component-button”: “8.0.0.new-brand”}

The solution

Our components have supported theming for some time. It’s used in our booking flows so that our partners can give travellers an experience that reflects their brand when they’re booking directly on Skyscanner.

Screenshot of a partner-branded hotel booking screen on Skyscanner’s desktop website.
Screenshot of a partner-branded hotel booking screen on Skyscanner’s desktop website.
A partner-branded booking screen. The primary button is using Hyatt Regency’s brand colour.
const partnerTheme = {    buttonPrimaryTextColor: ‘black’,    buttonPrimaryGradientStartColor: ‘red’,    buttonPrimaryGradientEndColor: ‘orange’,};<BpkThemeProvider theme={partnerTheme}>    <BpkButton title=”Book hotel” /></BpkThemeProvider>
Screenshot of a standard Backpack primary button.
Screenshot of a standard Backpack primary button.
A standard Backpack primary button.
Screenshot of a Backpack primary button with some theme properties applied.
Screenshot of a Backpack primary button with some theme properties applied.
A Backpack primary button with some theme properties applied.

Extending theming

With a working solution, the next step was to actually put it in place.

Building tooling

Once the design system was in a good place, we had to ensure that the roll-out of the new brand would work. For this, each squad that used Backpack needed to be able to check if the pieces of UI they look after were ready for the brand refresh.

The two themes

We built two different themes, named London and Azure.

London

This theme was purposefully garish, to make it really obvious to people when things weren’t being themed correctly. For hopefully obvious reasons, we were very careful not to accidentally release this to travellers.

Screenshot of a flight search page in Skyscanner’s iPhone app with the ‘London’ theme enabled.
Screenshot of a flight search page in Skyscanner’s iPhone app with the ‘London’ theme enabled.
Much wow.

Azure

This was the theme we used to encapsulate the new brand. We chose ‘Azure’ because it was the original name for our new signature ‘sky blue’ colour. It also had an additional benefit: if any references to it accidentally made their way into our products ahead of time people would likely assume that we were referring to the cloud computing platform rather than our new branding.

Feature toggles

For components that should only be shown when the new brand was enabled, we added a feature toggle that could be read from inside the code, so engineers could do things like this:

const someComponent = () => (    newBrandEnabled ? 
<CoolRebrandedComponent /> :
<OldBrandComponent />
);

Getting everything ready

Once the tooling was in place, our colleagues in more than 41 teams across Skyscanner came together to test all the screens they looked after with the theme applied, and then fixed any issues that came up.

Hooking it up

The final piece was to hook the theming support up to the internal tool we use for running experiments; this tool is called ‘Dr Jekyll’. Thanks to Skyscanner’s strong experimentation culture we had lots of support doing this from our colleagues.

Rolling it out

On launch day, we enabled the new brand for tens of millions of travellers by flipping a switch in Dr Jekyll’s UI — a simple-sounding act, but one with thousands of team hours behind it.

In summary

This was a big undertaking for us. As a design system team we primarily work on small, discrete tasks like components. Working towards a huge, immovable deadline was new for us, but we really enjoyed the way it brought us together.

Further reading

Join Skyscanner, see the world

Life-enriching travel isn’t just for our customers — it’s for our employees too! Skyscanner team members get £500 (or their local currency equivalent) towards the travel trip of their choice in 2019 — and that’s just one of the great benefits we offer. Read more about our benefits and have a look at all of our open roles right here.

Image for post
Image for post

About the author

I’m Shaun Donnelly, a Senior Software Engineer working in the Phone Experience tribe in London. I work in Backpack squad — an enablement team who create beautiful, accessible and reusable UI components for our colleagues to use across Skyscanner. Outside of work my hobbies include cooking, failing at DIY and complicated flight itineraries.

The author in the CNN Centre in Atlanta Georgia, stood next to a cartoon bear.
The author in the CNN Centre in Atlanta Georgia, stood next to a cartoon bear.
Shaun Donnelly, Senior Software Engineer at Skyscanner

Written by

We are the engineers at Skyscanner, the company changing how the world travels. Visit skyscanner.net to see how we walk the talk!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store