When you say KAYAK, most people think about a website or an App to compare flights. What most people don’t know is that KAYAK has six other sister brands. 
So how do you maintain seven brands at once without wasting time?

Context

Defining a clear process

Before I started working as a Design System Lead I worked as a Product Designer at KAYAK, and the work process in the Design team definitely needed some improvement.
Designers used to create mockups without any guidelines, every mockup was kind of unique and each Designer would try to give a certain style to their creations. This work process wasn't sustainable and brought two major issues:

1. Design inconsistencies
2. Waste of time

We reached a point where the KAYAK website had more than seventy different shades of grey and some icons would have more than five different variations. These inconsistencies were a real issue, hurting the User Experience, but it was also an incredible waste of time for both Designers and Developers as they would spend a tremendous amount of time recreating the same components over and over again.

This work process or I should say lack of process, wasn't acceptable anymore and it was time to create a proper Design System.

Scalability

You probably know KAYAK and/or momondo, but do you know Cheapflights, swoodoo, checkfelix, mundi and HotelsCombined?
All these brands belong to KAYAK and run thanks to KAYAK technology.

So far seven brands are part of KAYAK but it wouldn’t be surprising to see this number going up through the years. This is for the business side, but as a Designer or Developer how can you possibly keep up and work simultaneously on so many brands? The only possible answer is: with a Design System.

Organisation is key

Foundations

Building a Design System is pretty much the same as building a house, the tiny decorative details are totally useless if you don't have walls and a floor. Defining the foundations is the very first step of the process and just like a house, it is crucial to have very strong foundations if you don't want the system to collapse later on.

Here are the Foundations of the KAYAK Design System:

• Colors
  
• Typography
• Spacings
• Icons
• Animations

Components

As soon as the Foundations are set in stone the work on the components can start.
One of the goals of a Design System is to bring order by removing inconsistencies, so before creating anything a good practice is to make a complete inventory of what already exist, what is missing, what is consistent and what is not. 

In my case I called this the Design System Inventory. I used a simple Google Spreadsheet where I listed all the components one by one and added them into categories. This document quickly became essential as it gave me a holistic view of what was missing or not. When you have to deal with seven brands you need to keep things organised. 

Now that the inventory is done the Design work can start.
Each component is crafted to pixel-perfection, made responsive, optimised to the maximum to make it light but also editable (thanks to the overrides) and finally added to a Sketch Library where it can be consumed by all Designers.

Templates

With a complete set of components ready to be consumed, the next step is to build the templates and test that everything works perfectly.

Building templates from scratch can be very long and tedious but the beauty of using a Design System is that you don't need to recreate anything, all the components are already built and you simply need to consume them, making Design work way more efficient. 

The tools

Having a Design Inventory, a UI Kit and other tools is not enough. A Design System is not exclusively made for Designers, it is 50% Design and 50% code.

I am obviously not the only person working on the Design System at KAYAK, I primarily take care of the Design side and make sure that what is made in terms of Design is replicated in code. I also make sure our Design work is kept clean, organised and follows our guidelines. I am not a developer and for this reason I won't talk about the engineering side of the Design System here.

For Designers

If you are familiar with code (even just a little bit, like me) you probably know Git, a version control system used by most developers. For some reason the concept of version control came very late in the Design world, but this concept makes perfect sense for Designers as they spend a lot of time iterating and updating mockups.

For this reason I decided to introduce Abstract to the Design Team at KAYAK.
Abstract is just like Git, a version control system but made to handle Design files rather than code. 

For everybody else

A Design System needs to be open and accessible to everyone, so having a platform where each member of the company can read the guidelines and consume the content of the System is highly important.

Building this platform and its content is also one of my missions.

Conclusion

This project is still in progress. KAYAK is not a small company and building a Design System from scratch that works for seven brands takes a lot of time.

I'm passionate about this topic and could talk about this project for days. If you are interested and would like to know more about my work on this Design System, do not hesitate to contact me.

Do you want to talk about Product Design, 3D animatiom or any other exciting projects? Just drop me a line at this email address: contact.ferrere@gmail.com

You can also find me here:
Twitter    LinkedIn    Skillshare   Instagram