Jason King
Product Designer

Booking.com
Design system

Leading a Design System Team to improve company wide quality, usability, and scalability

Overview 

Improve quality, user experience, and scalability of the overall product — while not impacting teams’ workflows — through the creation and delivery of a design system.

Role: Lead Designer - Design & product strategy, Workshop Facilitation, UX/UI design, Team roadmap & goal setting, Documentation, Identify and maintain process, manage designers

2 Teams (Core and a11y) - 4 UX designers (Including me), 6 Devs

Teams were chasing metrics
Booking.com Design System
Building trust through collaboration
Booking.com Design System

A collective approach from the beginning 

I organized and facilitated several workshops & 1:1 discussions focused on identifying:

  • What could be standardized or made reusable  
  • Design & technical debt 
  • Cross-functional needs 
  • Standards & quality

While my team and I would own the work on the design system, creating buy in and a common language was a necessary step in order to introduce any design system.

Creating standards to help set quality
Booking.com Design System

Type Standards 

Global customers, 43 languages 

Teams were using their own typefaces and sizing even on the same page. In order to make sure our system was accessible to all of our users,  I worked to create a type ramp that could fit the diversity of needs by

  • Considering the existing hierarchy
  • Looking at non-english like characters
  • Accommodating for right to left languages

Booking.com Design System

From 1,985 different colors to 33

In an effort to capture conversion, teams were using colors to make their feature the loudest on the page. 

I worked with my team, along with the inputs from other teams, to simplify the color scheme. I formalised a smaller color pallete focused on:

  • Cohesion across pages and platforms
  • Accessibility
  • Uniformity in all UI components

Booking.com Design System

Standards become components

With the key standards in place, I had the team divvy up the identified components to recreate them based on the standards and the quality bar we had set. Each component needed to:

  • Be reusable for all users
  • Work cross platform
  • Meet accessibility standards
  • Fit the current tech stack limitations (html/css)

The components shown here were the set that I owned and set the UI and interactions for. 

Integrating into teams' workflows

Prototyping a tool

I worked with a developer to design and prototype a tool that would fit into the product development process. We focused on integration with Sketch and included some basic documentation and code snippets to help teams be successful. The goals of these decisions were to:

  • Get the design system in use earlier in the process
  • Help teams make decisions before scope or code is committed
  • Allow design & engineering to have easier hand offs

Prototyping drag & drop into Sketch

Booking.com Design System

Iterate after testing

The above prototype was released to a beta group to use as a part of their workflow. Key updates based on that feedback were:

  • Better left nav organization
  • Split mobile vs desktop views/code
  • Build in a11y to help make better decisions

Booking.com Design System

Lead the team by identifying key areas of investment

I created a roadmap by facilitating planning sessions with the team. I wanted to be sure they had an eye towards longer goals while continuing to deliver for the needs of all of our users.

Tools aimed at the greatest impact on the culture

Keeping teams engaged to maintain our success

As a way to keep in touch with all of the ongoing work, I continued to own the documentation and tooling for the design system. 

Ultimately, the goal was to empower the business to feel confident in the use of the design system. The tools I created allowed teams to better adopt the system by: 

  • Using more flexible UI components 
  • Knowing how to contribute to the system
  • Introducing more robust design documentation & interaction guidelines 
  • Becoming a resource for the changing design culture

What were the results?
3
Platforms released (web, iOS, Android)
3
User types impacted (customer, partner, & 3rd party)
2-4
Hours of dev time saved per component
<1%
Negative a/b test peformance
72%
Teams that thought their processes where better
89%
Designers that thought their designs were improved