Prototyping drag & drop into Sketch
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: UX Lead - Design & product strategy, Workshop Facilitation, Team roadmap & goal setting, Documentation, Identify and maintain process, UX/UI design
2 Teams (Core and a11y) - 4 UX designers (Including me), 6 Devs
Teams were chasing metrics
Building trust through collaboration
A collective approach from the beginning
My team & 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
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
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. We formalised a smaller color palette focused on:
Cohesion across pages and platforms
Accessibility
Uniformity in all UI components
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)
Integrating into teams' workflows
Prototyping a tool
I had a developer work with design to prototype a tool that would fit into the product development process. The team 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
Iterate after testing
The above prototype was released to designers company wide to use as a part of their workflow. I led efforts to make key updates based on feedback such as:
Better left nav organization
Split mobile vs desktop views/code
Build in a11y to help make better decisions
Lead the team by identifying key areas of investment
With a v1 released and being used in production, 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. This also helped create clarity for the team and the business going forward with the design system.
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. As I listened to teams, participated in their workshops, and heard feedback on the design system, I translated that into clearer documentation and guidance.
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