3 Learnings from KAYAK's Design System

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 done 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. And 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. My name is Alkistis Mavrioeidi, 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, space, cars, and other parts of the travel planning.
My journey with 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. I joined as one of the first focus UX designers in a team of UX and UI designers. Currently, we have product designers, UX designers, brand designers, experienced 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 have been instrumental in everything that you'll see presented here today, and have helped pull together the learnings that I will share with you.
Before I jump into the rest of the talk, I'd like to say 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 2000 plus strong across Kayak and our sister brand “OpenTable”. In offices all over the world that operates seven travel brands. We are still passionate about solving problems and helping people experience the world through travel. And we've recently expanded our offerings to also create solutions for travel for business, as well as the hospitality industry with Kayak Hotels.
Now as I previously mentioned, the Kayak product includes seven brands. Kayak is the 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. So here's a little summary of the complexity and the range of our global products. 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.
In the past few years, we came a long way to building 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 its brand and allow for light mode, dark mode, and hybrid light and dark mode brands to exist. 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 its own unique personality. As well as for the Kayak for business, which is built to accommodate small to medium-sized businesses that want to set up their own flexible travel system. So now that you know a little bit about our journey, let's get into the learnings.
So here are the top three learnings for building efficient and scalable design systems. The first one is that design principles are a necessary foundation. It is extremely important to establish the foundational design language and design principles that are guiding us to make decisions and apply a consistent experience across our site. So first off, we have our design values. We believe that empathy, simplicity, and familiarity are foundational when it comes to our design in 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.
We also have guiding principles that help us make decisions as we build our design systems. These principles have helped efficiently build our components and scale our designs, and here they are in summary. One is to use typography and spacing to create a visual hierarchy. Two, to embrace a less is more mindset towards color. Three, to design like you're having a conversation. Four, delight the user with the details. And five, use imagery in context with the content.
Now let's see in practice what some of these mean. So when it comes to typography, hierarchy was always top of mind for us. In the previous version of our design system, we had selected to sell 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. 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 needs it to be consistent and easily identifiable. The font with shows was designed to be used on small to large screen sizes, and it also provided a range of type weights that would allow us to build defined hierarchies. Except for 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 theme structure across the portfolio. Before our core, the Kayak brand was an exception because of the use of the two fonts that you saw before, and cross-brand compatibility was a talent. Now, we have personalized fonts per brand, and switching between its brand to experience is easy because the structure is the same. Thanks to our one font choice, we are also able to set up our design system for different screen sizes, instead of four different platforms. Currently, we're using specific fonts per native platform. That's adding another layer of differentiation between the experiences we design. We are now working on moving away from this towards this 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 its platform, like native mobile and web. And last but not least, from a technical perspective, moving to a viable font, which includes all font definitions in one font file helped us to improve site performance and server requests.
Now moving to the second principle of embracing a less is more mindset toward 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, but also created a very overwhelming layout. 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 for a lot of other bright colors to co-exist 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.
In order to combat that, we created strategic guiding principles on how to use color and design 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 of clear functionality, and also the experience cannot rely on backup solutions like hover interactions. Also, starting Mobile-First helped assist our mentality from designing for platforms to designing from screen sizes, which was mentioned in our typography updates as well. In order to help have a scalable model for seven travel brands, we needed to compromise and find a certain space in the structure. That means that our sandbox would not be an open playground, but it is actually there to help our global design team to 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 call to action that is progressing down the conversion funnel. Related to our color strategy was a concept of creating pure light and dark themes, which simplify the theming models, 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 a 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. Our design principles are the basis for a scalable theme model for other brands. So the use of typography and spacing to create a visual hierarchy leads to less clutter and a better user experience.
The lane use of color allows us to reserve strategic use of brand color for the conversion flow progression, and the simplicity of design allows us for more opportunities to delight the user with other details such as illustrations. 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 move to implement dark and light mode on desktop.
And finally, we expanded the model to switch to other brand themes. A display which you can see here in this video visual is featuring our homepage through our brands. This system also allows us to dream big and move to new challenges, for example, our illustrations. A lengthy model means that we don't have the bandwidth to create a separate illustration for each of our brands. Thus, our illustrations are following a consistent system by using asymmetric style and functional colors. You can see here, how illustrations are supported by the illustration's color system.
All right, so now we're moving to learn 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 regionalized markets.
Our three biggest brands were strong in their ability to hear and correspond to the needs of different regional users like North America, Europe, and AIPAC. 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.
The big question is how do we validate that a difference is necessary and provides unique value to a specific locale? So here are some of the tools that we've used to establish whether differentiation makes sense. So 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.
The second one is having regional experts. So we have regional experts in our design team that can bring experience from big markets like Korea, and they also indicate to the rest of the team UX patterns and user preferences. Competitive analysis of local products and other knowledge will help us understand the need for regionalized differentiation.
And finally, A/B testing. So Kayak has a sophisticated system for A/B testing that helps us validate changes to our product. It also helps us easily test even experience with a design based on a local need, which would actually provide a better experience globally and not just in this region. And the last learning that I have today is one very important thing that we did right, that our design and engineering team approach the problem together, and by thinking systematically.
So 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 the product is a core team that needs to work closely together. Thanks to Engineering Best Buddies, we strategically made choices for a baseline UX 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 a 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 mentioned before.
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 handoffs 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. Design to developer handoff has greatly improved because of how aligned it is, because of how aligned is our design system 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 support with a lot of questions during development.
So to summarize here, these are our top three learnings for building a scalable and efficient design system. Number one, design principles are an unnecessary foundation. Number two consistency should also allow for differentiation. And three, it's a team effort between design and engineering. So 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. Exploring other creative areas to help us systemize to... for us to systemize actually, such as marketing, advertising, and TV, and will help us create a universal design language that will strengthen our brand identity on multiple media platforms. So 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.
So 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.