Chrome UX Design System
One Chrome, by design.
Developed for the Google Chrome team, this design system consolidates three platform-specific Figma libraries—Desktop, Android, and iOS—into a cohesive and adaptable framework. The project commenced with a thorough audit of the primary three design libraries, identifying inconsistencies across platforms and evaluating the current production status of each. This process, coupled with a broader audit of 16 additional design files from satellite teams, unveiled disparities in design language, component usage, and workflows, laying the groundwork for a more unified structure.
To enhance the system's usability, we interviewed stakeholders and team members to pinpoint key challenges and gather actionable feedback. Leveraging insights from these interviews and audits, we redesigned numerous components, introducing variables to ensure scalability and alignment with the latest Figma updates.
Our approach also prioritized flexibility, empowering satellite teams to create custom designs as needed while preserving overall consistency. The outcome is a streamlined, user-centric system that simplifies workflows, fosters collaboration, and supports innovation across platforms.
A key project goal was to create a unified system across the three main libraries. To achieve this, we designed an audit process to benchmark and compare each library. Using nine evaluation criteria (Documentation, Structure, Usability, Consistency, Engineering Alignment, Styles, Componentization, Flexibility, and Production Accuracy), we determined the maturity level of each library, reflecting its usability, structure, and up-to-dateness. This allowed us to identify weaknesses and create a prioritized backlog of tasks to guide our development approach.
The audit consisted of two simultaneous tracks. The first was a cross-platform comparison of common components, revealing key differences in how each library implemented its components, variables, and properties. The second track was a comprehensive analysis of each individual library based on the nine criteria.
Each criterion was scored from 1 to 3, reflecting how well each library met current design system standards. To minimize subjectivity, we developed a checklist of guiding questions. The componentization analysis, a subset of the broader audit, involved evaluating over 1,200 components using specific sub-criteria: Use of properties, responsiveness, production accuracy, bugs, naming, and structure. These sub-criteria scores then contributed to the overall componentization score for each library.
Of all the libraries and Figma files we audited, the audit highlighted significant weaknesses in the iOS library, including poor governance, redundancy (with many individual components instead of flexible variants), style detachments (styles and variables not properly linked or missing), and overly complex components hindering usability (due to layering, properties, and naming conventions). Stakeholder interviews echoed these concerns when applying the library components and styles to their designs. Consequently, we undertook a complete rebuild of the iOS library.
To deliver the complete library within four sprints, we first implemented a tokenization system for color, typography, and elevation using Figma variables. This tokenization, based on agreed-upon styles from the Chrome team and the Apple design system, incorporated reference and system tokens. By assigning semantic names to each token based on its platform usage, we enhanced style consistency and usability across teams.
Using insertion statistics from the previous library, we began by optimizing the most popular components, such as Buttons, Alerts, List Items, and Symbols. For each of these, we developed a versatile master component, configurable via intuitive properties within a protected admin area. This centralized approach streamlined maintenance and safeguarded against accidental modifications. Common variations of each component were then created as instances and organized on component-specific stickersheet pages for designers to use.
Furthermore, comprehensive documentation and usage guidance are provided alongside each component stickersheet, clarifying best practices and outlining clear do's and don'ts for component usage within designs. The documentation format was created to be modular, so this content could be easy to maintain and modify.
After creating a completely new library, consolidating over 1700 components into approximately 60, and incorporating a complete symbol catalog, we created 53 key UI designs, covering core product screens for both iPhone and iPad. These designs, reflecting the latest production versions, provide team members with readily customizable references for various design use cases.
With the iOS library complete, we turned our attention to optimizing the Android and Desktop libraries. This involved refining components, enhancing documentation, and implementing a robust and sustainable governance structure to ensure efficient maintenance and seamless integration of future designs across all platforms. This model empowers the team to easily maintain and integrate new designs. Due to the sensitive nature of the project, I can only provide further details if you contact me privately.