Design System
A true story, from chaos to consistency
Problem
Working in a small team of 5 people, where I was the only Product Designer, I didn’t have enough time to do everything, I had to reduce some essential processes.
This decision made me realize that I was already designing with a system, but it was inconsistent, undocumented and only lived in my head. The most frustrating part was how much time it cost me on certain design changes, far more than necessary.
After debating the need for a design system with the stakeholders, I had to define a strategy. We knew it would take a while, but we saw it as an investment.
Key Solutions
Start a component library in Adobe XD, the software the team was using at the time.
Switch to Figma to increase productivity by recreating components and screens in priority phases, after informing the stakeholders that Adobe XD was starting to become obsolete.
Build the foundations based on the user interface already created, for a truly functional, consistent and scalable design system.
To speed up development, instead of starting from scratch, we decided to implement and adopt an existing React UI component library—PrimeReact.
Conclusion
As a detail-oriented designer, it was fascinating for me to delve even deeper into the world of design systems.
It wasn't an easy task, because the product already existed, but the process of creating it in priority phases was undoubtedly a lifesaver. Understanding that this is a constantly evolving process is what makes me even more curious about its future.
A design system is a strategic investment, unlocking infinite reuse and long-term efficiency. That’s why it should be a priority to make it consistent and scalable across multiple platforms.
Cyango owns the rights to the content shown in this project.
Impact
Promoted design governance and standards by establishing rules, processes and oversight for how design decisions are made and executed, with agreed design guidelines and best practices.
Strengthened the brand's identity to build recognition and trust, with consistent colors, typography, icons, spacing, border radius, border width, shadows and interaction patterns.
Reduced cognitive load for users, so they don’t have to think too much when using the product, everything feels familiar and predictable.
Facilitated an easier onboarding for new team members by providing clear design standards and centralized documentation.
Next Steps
Improve and document the integration of Accessibility guidelines.
Create and implement Semantic and Component variables and tokens, not just Primitives.
Build a Documentation framework that unifies all design principles, UI components, and engineering references in one place.
Thank you, next!
