3 Learnings from KAYAK's Design System

Alkistis Mavroeidi at UXDX USA. Video: https://www.youtube.com/watch?v=px8_P94k5-o

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Introduction and KAYAK's global team

[00:00:00] I am really excited to be here today and to talk to you about the very interesting topic of scalable and efficient design systems. Our team in the past few years has made a huge effort to create a design system that accommodates a very complex and global product, and today I will share with you the top three learnings from our team's incredible effort. Hopefully these learnings will help you set up a design system for success as well. But first things first, I'd like to introduce myself.

[00:00:25] My name is Alkistis Mavroeidi and I am a design manager at KAYAK, focusing on our meta search experience, which is the core KAYAK product. This includes searching for flights, stays, cars and other parts of travel planning. My journey at KAYAK started five years ago when I joined as a UX designer. A lot of things have changed since, but most importantly the amount of expertise we've built and the different roles that we have within our global design team.

[00:00:53] I joined as one of the first focused UX designers in a team of UX and UI designers. Currently we have product designers, UX designers, brand designers, experience designers, content writers, design operations and, last but not least, design systems experts. At this point I'd love to give a huge shout out to our design systems lead, Matt Holmes, as well as the rest of our design systems and design lab, who've been instrumental in everything that you'll see presented here today and have helped pull together the learnings that I will share with you.

[00:01:26] Before I jump into the gist of the talk, I'd like to share a little bit about KAYAK. The company's journey started in 2004, when a team of passionate technologists and travelers set out to solve one of the most common challenges in travel: searching and comparing your flight options. In the next 18 years this evolved into a global brand that operates in 60-plus countries and 25-plus languages, with a diverse team 2,000-plus strong across KAYAK and our sister brand OpenTable, in offices all over the world, that operates seven travel brands.

[00:02:02] We are still passionate about solving problems and helping people experience the world through travel, and we've recently expanded our offerings to also creating solutions for travel for business, as well as the hospitality industry with KAYAK Hotels. As I previously mentioned, the KAYAK product includes seven brands. KAYAK is our core brand that we are always trying to expand across different markets. The rest of the brands you see on the screen are our portfolio brands that are focused on regional markets and build off of the core KAYAK experience.

Why KAYAK needed a design system

[00:02:36] Here's a little summary of the complexity and the range of our global product. We have seven travel brands, 60-plus markets, 25-plus languages, multiple travel products across three businesses, meta search, B2B and hotels, and most importantly we have a lean and empowered team of around 30 designers. Looking at this slide, it becomes obvious that the only way for us to scale efficiently was to build a robust design system.

[00:03:06] In the past few years we came a long way to build consistency, first within one brand, by starting off with building the KAYAK design system and creating unified components for all the travel experiences. We then proceeded to expand and scale the design system to the rest of our brands and create a system that's flexible enough to accommodate the unique challenges of each brand and allow for light mode, dark mode and hybrid light and dark mode brands to exist.

[00:03:35] Thanks to the things we learned from expanding to seven travel brands, we are now able to create even more scalable solutions. Most recently we started applying the principles we learned to white-labeling solutions for KAYAK Hotels, each of which has their own unique personality, as well as for KAYAK for Business, which is built to accommodate small to medium-sized businesses that want to set up their own flexible travel system.

Learning one: design principles are a necessary foundation

[00:04:02] Now that you know a little bit about our journey, let's get into the learnings. Here are the top three learnings to building efficient and scalable design systems. The first one is that design principles are a necessary foundation. It is extremely important to establish a foundational design language and design principles that guide us to make decisions and to apply a consistent experience across our site.

[00:04:30] First off, we have our design values. We believe that empathy, simplicity and familiarity are foundational when it comes to our design and our user experience. Empathetic design helps us prioritize the human, simplicity helps us focus on the essence, and familiarity helps us leverage and build on existing mental models.

[00:04:52] We also have guiding principles that help us make decisions as we build our design systems. These principles have helped us efficiently build our components and scale our designs, and here they are in summary. One, use typography and spacing to create visual hierarchy. Two, embrace a less-is-more mindset towards color. Three, design like you're having a conversation. Four, delight the user with the details. And five, use imagery in context with the content.

Typography: one font per brand

[00:05:25] Now let's see in practice what some of these mean. When it comes to typography, hierarchy was always top of mind for us. In the previous version of our design system we had chosen to show hierarchy using two different fonts, one being used for stronger, prominent content. This strategy ended up creating a few problems for us, because the mixing of the two fonts resulted in confusing hierarchies and cluttered information. Our strong header font was working well for large headers but did not translate well in smaller content pieces, especially in nested hierarchies. We also realized that this type didn't scale well on smaller screens.

[00:06:08] We recently did the typography update that helped us solve a lot of the problems of the old version. When choosing our new font, we needed a font that was unique but also fully featured, and that supported many languages, since we are in so many global markets. The font also had to work on all types of media, including TV, web and print. This allows us to have a consistent brand voice across all the presentations. It also needed to be consistent and easily identifiable. The font we chose was designed to be used on small to large screen sizes, and it also provided a range of type weights that allowed us to build defined hierarchies.

[00:06:52] Apart from switching our font, another big change we made was to limit our font use to one per brand. By choosing one font per brand, we've been able to simplify the typography tokens, which allowed us to achieve multiple goals. First of all, we were able to incorporate brand voice into typography and align a brand themes structure across the portfolio. Before, our core KAYAK brand was an exception because of the use of the two fonts that you saw before, and cross-brand compatibility was a challenge. Now we have personalized fonts per brand, and switching between each branded experience is easy because the structure is the same.

[00:07:35] Thanks to our one-font choice, we were also able to set up our design system for different screen sizes instead of for different platforms. Currently we're using specific fonts per native platform, thus adding another layer of differentiation between the experiences we design. We are now working on moving away from this towards a new model of a technology-agnostic definition of type, by setting up typography for responsive scaling instead of building a separate definition of hierarchy for each platform, like native mobile and web. And last but not least, from a technical perspective, moving to a variable font, which includes all font definitions in one font file, helped us to improve site performance and server requests.

Color: a less-is-more mindset

[00:08:26] Now moving to the second principle, of embracing a less-is-more mindset towards color. The impact of that is strikingly obvious when you look at these two distinct experiences of our homepage. Our use of color before, which you see on the left, was problematic for two reasons. First, we were relying on color extensively to communicate messages, which was both restrictive for accessibility purposes and also created overwhelming layouts. It's important to note that our brand color is orange, a color that I would describe as competitive, in the sense that it doesn't allow a lot of other bright colors to coexist well and form good hierarchies. Secondly, reliance on color was making scalability to other brands even more of a challenge, because of having to translate all these colors to each theme.

[00:09:22] In order to combat that, we created strategic guiding principles on how to use color, and designed components that would communicate function in the most optimal way without necessarily relying on color. Starting mobile first was a really helpful tool, because it really emphasizes the need for clear functionality, and the experience cannot rely on backup solutions like hover interactions. Starting mobile first also helped shift our mentality from designing for platforms to designing for screen sizes, which was mentioned in our typography updates as well.

[00:09:59] In order to have a scalable model for seven travel brands, we needed to compromise and find a certain space in structure. That means that our sandbox would not be an open playground, but it is actually there to help our global design team make decisions and work on a consistent UI. One example is that a lot of the color simplification was achieved by reserving our brand color for the main calls to action that progress down the conversion funnel.

[00:10:34] Related to our color strategy was the concept of creating pure light and dark themes, which simplified the theming model so we could apply the same color model to all brands. Before we had pure light or pure dark themes, it was impossible to align designs between brands, because we were mixing the two patterns throughout our product. Scaling of colors for all brands and the use of colors by designers became easier for our lean team when we decided to apply an entirely consistent light theme definition. We then used functional colors for all our UI components, which helped us a lot in building the dark theme, by taking the same definition and just changing the values.

A scalable theming model

[00:11:21] Our design principles are the basis for a scalable theme model for other brands. The use of typography and spacing to create visual hierarchy leads to less clutter and a better user experience. The lean use of color allows us to reserve strategic use of brand color for the conversion flow progression. And simplicity of design gives us more opportunities to delight the user with other details, such as illustrations.

[00:11:50] The MVP of this model was implemented on our mobile platforms, by creating a system to easily switch from the light mode to the dark mode that we developed first. After the successful implementation on mobile, we moved to implementing dark and light mode on desktop. And finally we expanded the model to switching to other brand themes, a display of which you can see here in this video, which is featuring our homepage through our brands.

[00:12:24] This system also allows us to dream big and move to new challenges, for example our illustrations. A lean team model means that we don't have the bandwidth to create separate illustrations for each of our brands. Thus our illustrations follow a consistent system, using an isometric style and functional colors. You can see here how illustrations are supported by the illustrations color system.

Learning two: consistency should also allow for differentiation

[00:12:52] Now we're moving to learning number two: consistency should also allow for differentiation. The first challenge of the design system, as mentioned, was to create a consistent experience across our product, which also ensures the quality of our product. However, we realized that a cookie-cutter system that's inflexible doesn't allow for differentiation and was not going to work for a regionalized market. Our three biggest brands were strong in their ability to hear and correspond to the needs of different regional users, like North America, Europe or APAC.

[00:13:30] One of the most prominent spaces for differentiation is our homepages. The personalized content, as well as the brand character, was given space to adapt and differentiate. The tricky balance here is to be strategic about where to be different, because if we break the system a lot, then a lean team can no longer support it. It is clear that every differentiation increases the cost of maintenance, as well as the number of edge cases to account for in each design decision. Therefore we have to tread carefully about when we're introducing differentiation.

[00:14:09] The big question is how do we validate that a difference is necessary and provides unique value to a specific locale? Here are some of the tools that we've used to establish whether differentiation makes sense. The first one is user testing and user research. We've made sure to expand our tools to ensure that we regularly get feedback from users from different regions.

[00:14:34] The second one is having regional experts. We have regional experts in our design team that can bring experience from big markets like Korea, and they also educate the rest of the team on UX patterns and user preferences, competitive analysis of local products, and other knowledge that will help us understand the need for regionalized differentiation.

[00:14:59] And finally, A/B testing. KAYAK has a sophisticated system for A/B testing that helps us validate changes to our product. It also helps us easily test whether an experience designed based on a local need would actually provide a better experience globally, and not just in this region.

Learning three: a team effort between design and engineering

[00:15:20] The last learning I want to share today is one very important thing that we did right: our design and engineering teams approached the problem together, by thinking systematically. If you're at the beginning of your design systems journey, we highly recommend having engineering on board and finding your engineering best buddies. Design, engineering and product is a core team that needs to work closely together.

[00:15:49] Thanks to our engineering best buddies, we strategically made choices for a baseline UX and UI [?], that is, using the same components for all brands. It also helped us create integrations between design and code through component libraries, design tokens and the scalable theming model. And last but not least, we differentiated for locales based on data-driven choices and user behaviors, so that also feeds into the regionalized differences that I mentioned before.

[00:16:24] There are a few signals that we like to track to help us acknowledge and celebrate the success of our design systems integration. First of all, the design team rarely gets questions about foundational style definitions from developers anymore, thus it's saving us a lot of valuable time when it comes to engineering handoff or questions through development. Secondly, all of our platforms are using design tokens from the same source of truth, therefore scaling has become very efficient.

[00:17:00] Design-to-developer handoff has greatly improved because of how aligned our design system is with our UI code libraries. And all of the above have helped our designers to have more time to spend on product design and user experience, instead of making sure to align for consistent UI and supporting a lot of questions during development.

Summary and what's next

[00:17:31] To summarize, these are our top three learnings for building a scalable and efficient design system. Number one, design principles are a necessary foundation. Number two, consistency should also allow for differentiation. And three, it's a team effort between design and engineering.

[00:17:56] To wrap this up, here's a view of what's coming up next for our design systems efforts. We'll keep pushing our design system to support regional differences while keeping the consistency of our user experience. The illustration theming model is in its early stages, but it's showing huge potential and scalability, so we're really excited about that. We're exploring other creative areas for us to systemize, such as marketing, advertising and TV, and that will help us create a universal design language that will strengthen our brand identity on multiple media platforms.

[00:18:41] These are a lot of challenges, but we're really excited about what's coming, and we hope to share with you in the future more progress from our team and our design systems. That's all for now. Thank you for listening, and I really hope that these learnings will help you build a scalable and efficient design system for your product as well.