Booking.com is the largest accommodations platform in the world. Its tech team is made of 1.2K+ employees split into product teams. My team, the Design System team, had a main goal: to enable product teams of Booking.com to deliver higher quality work faster by creating and maintaining tools, guidelines and libraries of the Design System.
My role in this project was to wireframe, design, test and hand off the prototype to developers for implementation.
This project’s target audience was the designers at Booking.com who use the Booking Design System.
Historically, the design system contained a color palette that is directly available for usage by our designers and developers. To strengthen the foundations of the design system, my team introduced Functional Colors.
Rather than referring to colour names, functional colours communicate a specific context where colour is used. For example, functional colors can be action-foreground, background-disabled, border. Whereas the old color palette had colors such as “grayscale-900”, action-300”, etc.
Even though this concept was not new to the design world, it was new to the company. To make it easy for designers and developers to use these functional colors, I was responsible for designing a playground interface where users can discover colors and understand their usages to help them choose a color better.
First, with the help of my team, I defined the requirements that we needed to fulfill for this project to move forward.
Next, I came up with a couple of options for a concept playground. To help make an unbiased decision, I listed pros and cons for each option.
Option 1
In the first option, the component example is in the middle of the page. The sidebar contains all colors that the user can scroll and choose from.
Pros:
Option 2
In this option, the colors are shown in the middle of the page as a list of two columns. The properties and example preview is on the right sidebar.
Option 3
In this option, the properties and example preview is also on the right sidebar, but the colors are displayed in a grid layout.
I presented the options to my team and after a few rounds of feedback, I decided to go with option 3 as it fits all requirements that we needed.
Using option 3 to move forward, it was time to make the concept into reality. I designed a few other screens then created a Figma prototype where a user can hover and click on multiple colors and see their properties.
Try it out!
I shared the Figma prototype with designers and developers across the business and I sent out a survey to fill after browsing the prototype. From the 16 responses I received, 75% found the functional color feature helpful in their daily design work
I handed off the prototype and Figma file to the developer in my team and presented the design covering all use cases and limitations. After the developer implemented it and me reviewing the implementation, the playground was released.
The feedback we received from the community was overwhelmingly positive. Because of this playground, designers and developers were able to discover colors and understand their context which avoids misusages and creates a consistent design throughout the product.