How Skyscanner built a design system that makes designers and developers lives easier


Digital Arts

For Skyscanner, UX really matters. In the highly competitive world of online travel booking – where bringing users and getting them to find what they want and buy through you as easily as possible is key – the site and apps see around 50 million monthly users across 30 languages, who booked £7.8billion of flights and holidays in 2015.

The company has 10 offices across the globe – from Edinburgh where Skyscanner began to London, Miami and Beijing. With a disparate design team and so many versions of the site and apps, keeping the design consistent requires a well-constructed design system that’s detailed enough to avoid confusion or errors, but flexible enough to work across multiple OSs, devices, languages and uses.

Skyscanner’s design system, Backpack, is accessible to everyone on Github. It combines Sketch libraries and templates with a full set of developer resources for the web, iOS and Android. Backpack belongs to a design team run by senior design manager James Ferguson, who I caught up with when he visited Skyscanner’s London office from his usual base in Edinburgh.

Neil Bennett: "Different organisations have very different ideas of what a design system means – it could be just brand guidelines, a set of developer resources on Github, or everything in between those two things. So what does a design system mean to Skyscanner?"

James Ferguson: "For us, it's about having a single set for all of our design assets – whether that is brand-related stuff, or component listings. At Skyscanner we've got many different products, and many different platforms. We've got huge teams and we need a way to ensure that we've got consistency between all of that for our users to make sure that we've got the best user experience.

"When we first started creating our design system, [our previous documentation] had always been created by either design and engineering – so these would either be done by designers and end up as a PDF. Or it was done by engineering and no designer would want to touch it, because it's all coded and they don't know what to do with it..

"And so for us, it was always about that bridge and make sure that we support both the design team and the engineering team. So for all of our components, we have them all in Sketch for Android, iOS and web, and we have the code counterparts for each as well – along with documentation around how to use it and what the patterns for UX consideration are."

NB: "Design systems can often form a kind of shared verbal language between designers and developers. Is that true for Skyscanner?"

JF: "One of the biggest wins that we've had [from having a design system] is having this shared language. It has really helped bridge that gap between design and engineering. For example, we have what we call design tokens. These are things like [inaudible 05:20] and colour. So designers will say ‘okay, we're using Blue 500 here’ and the engineers will use Blue 500 in their code.

"The same is true with spacing: it's Spacing Large rather than [a spacing of] 12 pixels. That also gives us the flexibility if anything needs to change at any point, we can do that quickly."

NB: "How did you initially approach creating your design system?"

JF: "Our approach for making our design system, like many other companies, we have taken each compact component and broken it down in smaller and smaller components until you can't break it down further.

"When we first started, we looked at changing the names of what-we-were-already-calling atoms and molecules, etc. We spent a lot of time trying to figure out what we were going to call stuff – but we largely left them as what they were. At the end of the day, it doesn't really matter [what they are called], it's the way of thinking that matters."

NB: "In my experience, naming is something that comes organically. You can try to insist that an element or concept is called something – but if everybody else is calling it something else, that’s what it’ll end up being called."

JF: "Totally."

NB: "Who has input into the design system? Is it just your team?"

JF: "One of the things that we were really clear on from day one is that while my team own it and maintain [the design system], it's not something that is exclusive to our team – or that you need to be on our team to contribute to.

"Inside our team, any piece that is in the design system will generally have three to four designers input upon it – whether that's for a sanity check or a full contribution."

NB: "Is it important for your design system to live out in the open and be accessible to anybody?"

JF: "It is. It's completely open source. We made that decision quite early on. We spent a lot of time in the beginning [of creating the design system], speaking with other companies and seeing how other people were approaching these things. We learned a lot, so we wanted to give a little bit back.

"Being transparent with the way that we're doing stuff, it helps keep us honest as well."

NB: "One of 2018’s biggest UX trends has been a renewed desire to make sites and apps more accessible – including looking beyond equating accessibility only with assisting people with major visual disabilities to include a wider range of people who have trouble with overly complex sites such as older users and those with neurodiversity. What’s your approach to accessibility?"

JF: "It's always interesting working within the travel sector that we often say, ‘Who is our audience?’. Well, the answer is ‘anyone who travels’ – so that generally means everyone.

"Designing experiences for everyone is no small task – so things like accessibility are hugely important to us. Up until now, if we're honest, we probably haven't had the best support for accessibility.

"But now that's one of the core principles that we build into every component that we make – we make sure that it's accessible.

"Also as we see the world switch to mobile, there's different types of accessibility situations as well. There's situational accessibility – if you're outside in the sun and it's glaring on your screen, you may not be able to see low-contrast elements or the colours very well. It’s particularly interesting to me, how we can overcome some of that."

NB: "What tools do you use?"

JF: "Sketch is our tool of choice for design software. We use that because it's really lean. The likes of Illustrator and Photoshop have become incredibly bloated over the years, with every feature under the sun put into it – you find yourself no longer using Illustrator to draw anything and Photoshop has almost nothing to do with editing photos anymore.

"So Sketch has been really good because it pares all that back. Its plug-in architecture has been really awesome for us, as we have been able to make our own plug-ins if need be – or use off-the-shelf stuff that's out there in the community.

"InVision is a tool that we use as well for micro-interactions. Some people prefer Principle because it's easy to pick up – but InVision is our main tool of choice because it's just very quick. You're able to link screens together and have it all plug straight into Sketch – you don't even really need to leave Sketch for the bulk of it.

"We still use Illustrator for illustration and iconography. If you try drawing something in Sketch that's smaller than a box, you might struggle a little bit.

"For motion design, some designers use After Effects, and a tool called Lottie that AirBnB created that takes animations from After Effects and converts them to code for iOS and Android."

"I think it's great to see large companies like AirBnB are creating these tools, open-sourcing them and giving them back to the community."

NB: "Voice is supposed to be the 'next generation' of UX design. What are you thoughts on designing on for voice?"

JF: "It's something that we have investigated quite a bit. We do have an Alexa skill that you can ask Alexa to search for flights and things like that for you – so it's fairly basic.

"What I think is more interesting for us is around conversational UI in general, and things like free text search and natural language search. It's an incredibly interesting space and whether that comes to life in something like an Alexa skill, or Siri or any of these kind of virtual assistants, or if it's properties in UI, or on screen, it's definitely an interesting space for sure."

Comments