Creating a design system is about undertand everybodys needs, building an ecosystem where the team knows exactly how to collaborate and users find spaces that make them feel welcome and get where they need to go without hassle or confusion
— PROJECT NAME
Roots 2.0
— ROLE
Product designer
The project involved the complete reconstruction of the Design System for a digital product, leveraging the Atomic Design methodology to create modular, reusable, and scalable components.
This process included replacing components in the product’s existing screens and continuously validating the system with the team to ensure it was functional, legible, and easy to implement
Particular objectives
- Assessment our legacy library.
- Standardize our components.
- Develop new components.
- Implement into our products.
Process
Phase 1: Discovery and Audit
Interviews and Workshops:
We organized sessions with designers, developers, and product managers to identify pain points. One of the most relevant findings was the teams' perception that design decisions were inconsistent and often confusing for users. Additionally, there were no standardized components or patterns, making it difficult to align the development of interfaces.
Interface Audit:
We analyzed all existing products to identify common patterns and eliminate unnecessary variations. For example, we discovered that there were more than 15 different button styles used for the same use cases, creating friction both internally and for users.
- Ideación
Phase 2: Defining Foundations
- The next step was to transform the insights into solutions that promoted immediate understanding, minimized friction across products, and ensured system scalability. In collaboration with my team and other designers, we established a unified visual language, defining tokens, nomenclature, and a clear documentation structure for interactions. We designed a tokenized scheme that allowed each visual decision to be translated into variables easily integrable by developers.
Phase 3: Modular Construction
I led the creation of a library of reusable components, from buttons to key screens, using the Atomic Design approach to build from atoms to complete templates.
We ensured that each component met WCAG accessibility standards, guaranteeing an inclusive experience. Additionally, I involved developers from the early stages to ensure functionality and ease of implementation.
Adoption
The main challenge was aligning teams around the use of the system. Initially, we faced resistance: some designers feared losing creativity, while developers anticipated added complexity to their processes.
To address this, I implemented a phased strategy:
- Education and Advocacy: I conducted workshops and developed clear documentation to highlight the practical benefits of the system.
- Quick Wins: We executed a pilot project to deliver fast results, building trust and enthusiasm among other teams.
- Ongoing Support: We formed a dedicated team to address questions and adjust the system based on emerging needs.
The turning point came when we presented the first results during a general meeting: we demonstrated how a project that used to take 8 weeks was now completed in just 5. This tangible impact was key to achieving widespread adoption of the system.
And when we had the atom tested, we made documentations and deliveried changes
Key results
The Impact: Tangible Results
Success was not measured only by components, but by outcomes.
The design system transformed both the team’s workflow and the final products, achieving clear results:
- Time reduction: Developing new features became 30% faster.
- Visual consistency: The perception of reliability and professionalism in our interfaces increased by 15%, according to post-launch surveys.
- Scalability: Creating new products became faster and involved fewer errors.
Additionally, the system drove a cultural shift: previously siloed teams now collaborate closely, guided by a clear and valued common framework.
Components
Key screens
Takeaway
This project wasn’t just about design; it was about leadership, organization and UI contruction
Leading the creation of this system taught me:
- Listen first: The best systems are not designed in isolation. Involving all stakeholders from the start ensures a design that truly solves problems.
- Be adaptable: Not everything went according to the initial plan. I learned to adjust the strategy based on the team’s needs and limitations.
- Measure success: Designing with clear metrics in mind not only ensures tangible results but also helps tell a compelling story about the value of design.
The most important takeaway was seeing how a system can transform not just products, but also the way teams collaborate and create together.