Driving Consistency: Asphalt Web Design System
Gojek was established in 2010. Starting with 3 offerings, it has expanded to over 18 products and numerous unique services. Now, customers can order meals, receive beauty treatments at home, or travel in style with a chauffeur. However, rapid growth brings challenges. The resulting strain impacts all teams, including design, where designers lack time to coordinate for consistency. To address this problem, a design system was implemented across iOS, Android, and Web platforms. Asphalt, Gojek's very own design system, consists of guidelines and components utilised to craft consistent and meaningful experiences across all products.
Gojek
12 months
Design Systems
My Role
I led the design of Asphalt Web Design System from July 2019 till December 2020 and collaborated with 2 other product designers on the project. We closely collaborated with a team of 5 UX Engineers who developed the design system.
In addition, we worked closely with product managers, designers and engineers from various products that used the design system.
Research and Insights
We started out by studying popular design systems and understanding the needs of our organisation. Once we were done with the initial research phase, we had two options - use an existing third party design system by theming it according to our brand guidelines or create our own design system from scratch. We decided to go with the latter because:
Our own design system would provide us with complete control over it's structure and functions
Creating custom components would be much easier if we owned the design system completely
Custom tools built in-house around the design system to support designers, developers and business would greatly enhance productivity and efficiency
We wanted to make Asphalt Web accessible on both design and development fronts
At this point, Asphalt design system already existed for our Android and iOS apps. Our plan was to launch Asphalt Web for internal products first and then make it compatible for consumer facing web products
How might we develop a comprehensive design system that not only ensures consistency across diverse product domains and brands but also empowers the creation of accessible products, fosters user-friendly utilisation, and encourages early collaboration with engineers in the design process?
What does success look like
Improved adoption of the design system
Increase in usage of components
Growth in time saved due to adoption
Increase in usage of tokens
Final Design
We started out by setting up a library of components and styles. We worked closely with the engineering team to set up a token system that served as a single source of truth for colour, typography, sizing, spacing, shadows, animation used in a design system. This way the tokens were consistent across design and code. We identified commonly used design patterns like data tables, forms, dashboards etc. We then created guidelines around component and style usage, and layout choices for creating these design patterns.
Impact
We built a tool called Radar to gather design system usage metrics data automatically, safely & periodically. It provides us with the following values:
Component Usages - instances of components found in source code across platforms
Token Usages - instances of tokens found in source code across platforms
Products - distinct count of products using any component across platforms
Hours Saved - estimate of effort saved by components
Hours saved is a very rough estimate of how much time the design systems have saved per product.
hours saved ＝ no. of components in X platform ⨉ mean time to build 1 component ＝ no. of components ⨉ 80h
31
Products are using the design system
3154
instances of components found across products
3760
hours saved by using the design system
33651
instances of tokens found across products