Unity is a scalable design system designed to drive consistency, efficiency, and inclusivity across products. It provides teams with reusable components, a unified set of design tokens, and comprehensive guidelines that streamline collaboration and ensure high-quality user experiences.
At Portal, the team initially used a federated governance model, where everyone contributed to their own design system. While suitable for large companies with diverse portfolios, it created numerous one-off components, slowing development. For our single-product startup, I was tasked with creating a centralized design system to improve efficiency and reduce time to market, dedicating 50% of my time to this initiative alongside other feature development.
Implementation Process
The setup of Unity begins with a team survey and component audit to identify gaps. Collaboration with product and engineering ensures alignment, followed by polishing and testing core components. After training the team and documenting the system, a technical audit finalizes integration before launching the design system.
Highlight Components
The flexibility of component
While reviewing the card components in our previous design system, I noticed that the federated designer governance model had led to the creation of numerous one-off components, increasing complexity. To address this, I analyzed the component usage data and identified the most common use cases for card components. Based on these insights, I designed a universal card component that could be consistently implemented across our platform, simplifying the system and enhancing scalability.
Documentation/Configuration+Accessibility
For the accessibility documentation, I detailed keyboard navigation patterns to ensure seamless usability for all users, including clear tab, focus, and action states.
Additionally, I implemented proper labeling using ARIA roles and attributes, such as aria-label and aria-labelledby, to enhance screen reader compatibility.
Buttons - Configuration
Buttons - Accessibility
Input - Configuration
Input - Accessibility
Gallery
Overview
overview of component groups, -Action -Communication -Container -Navigation -Selection -TextInput
Design System Impact
Global Adoption
To measure the impact of the design system, I implemented an Usage Tracker to regularly monitor and audit its performance. This tracker uncovered key insights—such as which components were most frequently used, which broke often, and which were legacy. Initially just for auditing, it evolved into a data-driven decision-making tool, guiding me in prioritizing fixes, optimizing commonly used components, and phasing out unnecessary elements.
As a result, the latest version Unity V3 design system’s adoption rate rose from 26% to 60.83%, ensuring its efficiency and scalability over time.
Component Usagae
We display this data with a chart on the dashboard, where each component’s square is sized according to its import frequency in our application.
Metrics Drive Better Iterations
Armed with this visibility, we can confidently phase out outdated elements and focus on standardizing around our most effective components. This data-driven approach ensures that every iteration of Unity moves us closer to a consistently cohesive and efficient design system.
