Skip to main content
Engineering, Mobile

How to Measure Design System at Scale

24 September / Global
Featured image for How to Measure Design System at Scale
Image
Figure 1: Designer-eye challenge. Without the marking, very few could tell the “Confirm your pickup spot” sheet and the back button implementations (left) were not up to Base design hand-off (right).
Image
Figure 2: All Base UI library components were marked as green while one-off custom components were marked as red. This helped both designers and non-designers see what can be made with Base.
Image
Figure 3: Deterministic counter to rewards usage of Base components and discourage usage of one-off custom components in a consistent manner. Non-Base implies a layout looks-like-Base-but-not-Base.
Image
Figure 4: The counting algorithm traverses view trees looking for known component classes.
Image
Figure 5: Visitor implementations are used in order to perform the DFS post order traversal. 
Image
Figure 6: The same deterministics counters were used across designers and engineering’s workflows. Everyone having the same goal of 100% is the key for quality at scale.
Image
Figure 7: Broad statistics were aggregated across all users, providing us with crowdsourced data that reflected real-world usage.
Image
Figure 8: Existing E2E test suites were utilized to take regular screenshots and calculate detailed design metrics 
Image
Figure 9: Real impacts where many engineer teams improved Uber screens in seamless coordination thanks to Design System Observability (measured in June 2024, Rider iOS app).
Image
Figure 10: When hearing about an accidental design degradation due to an infrastructure migration in early 2024, our engineer teams jumped in to fix it quickly.
Image
Figure 11: Design System metric is now a trackable business-impact metric
Vietanh Nguyen

Vietanh Nguyen

Vietanh Nguyen is a Principal Design Engineer, leading cross functional teams to enhance the experiences of millions globally. With a strategic focus on design system adoption, he ensured that every user-facing surface reflects Uber's commitment to functionality and aesthetics. He followed the three main principles of Design Engineering: "Be the Translator between Design and Engineering," "Bridge the Gaps via Toolings," and "Enable Vision with Leadership and Coding."

Alankar Gupta

Alankar Gupta

Alankar Gupta is a Staff Android Engineer at Uber, and part of Rider Foundations team. He is currently working towards BaseUI adoption for core apps and guardrailing the UI quality.

Sagar Pant

Sagar Pant

Sagar Pant is an iOS developer on the Rider Foundations team. He is working on improving observability for Uber apps.

Posted by Vietanh Nguyen, Alankar Gupta, Sagar Pant