Unity Design System
From chaos to cohesion:
Building a scalable design system for a fast-paced startup
Cobre lacked a design system, leading to inefficiencies and roadblocks. Teams were aware of the need for a solution, but competing priorities made it challenging to address the issue.
To build an effective and scalable design system, it was essential to understand the needs, challenges, and goals of both our users and internal teams. During the discovery phase, I collaborated closely with designers and developers at Cobre to delve deep into our existing processes and identify areas for improvement.
Team members interviews
Competitor audits
User Flows analyzed
Possible components identified
Inconsistent UI elements
Buttons, spacing, and typography varied across screens, disrupting the user experience and creating confusion for users.
Inefficient workflows
Designers and developers spent time rebuilding components from scratch instead of focusing on innovation and delivering value.
Misaligned expectations
Teams struggled to maintain consistency across projects, leading to fragmented user interfaces and slower iteration cycles.
Scalability challenges
As the product grew, the lack of standardization made it harder to align design and development, impacting productivity and collaboration.
Style Guide Development
Component Library Creation
Integration with Developers
Maintaining consistency across products became time-consuming and error-prone, especially with frequent updates and rebranding needs.
The solution: Design tokens
Centralized variables for colors, typography, and spacing. Tokens bridged design and development, ensuring consistent implementation across platforms.
How the design tokens worked:
Foundation Tokens: Defined core styles (colors, typography, spacing) in Figma and code.
Flexibility: Enabled seamless rebranding for white-label products.
Collaboration: Integrated tokens into Storybook for developer-readyBodyMedium handoff.
Inconsistency across design iterations led to inefficiencies, slow development cycles, and fragmented user experiences.
Starting designs from scratch diverted focus from innovation.