PROJECTS
Design System Driving Consistency
Workflow
Overview
Design Approach
Sruture
System Documentation
Challenges
Next Steps
TEAM
Mónica Ferraz
Spencer James
Suroor Gupta
Bruno Alves
TIME
2024/2025
PRODUCT
Metrics
Business
Standardized and reusable components, boosting design efficiency by 45%
Reduced UI inconsistencies by 80%
Faster screen development, saving 40% of design time
Users
Improved usability and interface clarity
Metrics
Business
Standardized and reusable components, boosting design efficiency by 45%
Reduced UI inconsistencies by 80%
Faster screen development, saving 40% of design time
Users
Improved usability and interface clarity
Metrics
Business
Standardized and reusable components, boosting design efficiency by 45%
Reduced UI inconsistencies by 80%
Faster screen development, saving 40% of design time
Users
Improved usability and interface clarity
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet app. The goal was to create consistency, scalability, and efficiency across the product while improving collaboration between design and development. Using Atomic Design as a flexible foundation, I built a modular and reusable system that could grow with the product.
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet app. The goal was to create consistency, scalability, and efficiency across the product while improving collaboration between design and development. Using Atomic Design as a flexible foundation, I built a modular and reusable system that could grow with the product.
Overview
The Best Wallet Design System was restructured to support a fast-growing non-custodial crypto wallet app. The goal was to create consistency, scalability, and efficiency across the product while improving collaboration between design and development. Using Atomic Design as a flexible foundation, I built a modular and reusable system that could grow with the product.
Design Approach
I started with a full audit of the existing system. Some colors were present but not set as variables or assigned clear usage rules. Spacing, borders, shadows, and typography rules were missing, as well as structured components. To address this, I organized the system into three layers: Foundations, Base and Composite Components, and Patterns, which define how components should be applied across different product contexts. This ensured the system remained modular, reusable, and adaptable as the product grew.
Design Approach
I started with a full audit of the existing system. Some colors were present but not set as variables or assigned clear usage rules. Spacing, borders, shadows, and typography rules were missing, as well as structured components. To address this, I organized the system into three layers: Foundations, Base and Composite Components, and Patterns, which define how components should be applied across different product contexts. This ensured the system remained modular, reusable, and adaptable as the product grew.
Design Approach
I started with a full audit of the existing system. Some colors were present but not set as variables or assigned clear usage rules. Spacing, borders, shadows, and typography rules were missing, as well as structured components. To address this, I organized the system into three layers: Foundations, Base and Composite Components, and Patterns, which define how components should be applied across different product contexts. This ensured the system remained modular, reusable, and adaptable as the product grew.
Structure
Foundations define the core visual language, including colors, typography, spacing, borders, shadows, icons, and avatars. Components build on these foundations, from simple base elements to more complex composite components. Patterns guide how components are applied consistently across the product. All variables and elements were documented and standardized, ensuring the system is scalable and easy to maintain.
Structure
Foundations define the core visual language, including colors, typography, spacing, borders, shadows, icons, and avatars. Components build on these foundations, from simple base elements to more complex composite components. Patterns guide how components are applied consistently across the product. All variables and elements were documented and standardized, ensuring the system is scalable and easy to maintain.
Structure
Foundations define the core visual language, including colors, typography, spacing, borders, shadows, icons, and avatars. Components build on these foundations, from simple base elements to more complex composite components. Patterns guide how components are applied consistently across the product. All variables and elements were documented and standardized, ensuring the system is scalable and easy to maintain.
System Documentation
I documented all foundations, components, and patterns, creating design tokens for colors, typography, spacing, borders, and shadows. The documentation included guidelines for when and how to use each element, ensuring consistency between design and development.
System Documentation
I documented all foundations, components, and patterns, creating design tokens for colors, typography, spacing, borders, and shadows. The documentation included guidelines for when and how to use each element, ensuring consistency between design and development.
System Documentation
I documented all foundations, components, and patterns, creating design tokens for colors, typography, spacing, borders, and shadows. The documentation included guidelines for when and how to use each element, ensuring consistency between design and development.
Challenges
The biggest challenge was introducing structure and naming conventions to a system that lacked organization. Another was balancing strict rules with flexibility, so the system could adapt to new features. I learned the importance of thorough auditing, clear documentation, and setting variables early to ensure scalability and consistency. This process turned a fragmented system into a scalable foundation for future growth
Challenges
The biggest challenge was introducing structure and naming conventions to a system that lacked organization. Another was balancing strict rules with flexibility, so the system could adapt to new features. I learned the importance of thorough auditing, clear documentation, and setting variables early to ensure scalability and consistency. This process turned a fragmented system into a scalable foundation for future growth
Challenges
The biggest challenge was introducing structure and naming conventions to a system that lacked organization. Another was balancing strict rules with flexibility, so the system could adapt to new features. I learned the importance of thorough auditing, clear documentation, and setting variables early to ensure scalability and consistency. This process turned a fragmented system into a scalable foundation for future growth
Next Steps
The restructured Design System is fully functional and designed to evolve with the product as new features are added.
Next Steps
The restructured Design System is fully functional and designed to evolve with the product as new features are added.
Next Steps
The restructured Design System is fully functional and designed to evolve with the product as new features are added.
WORK
Case Studies
From crypto wallets to wellness brands, these case studies show how I bring clarity and consistency to every design challenge, across digital products, identities, and systems.
WORK
Case Studies
From crypto wallets to wellness brands, these case studies show how I bring clarity and consistency to every design challenge, across digital products, identities, and systems.
WORK
Case Studies
From crypto wallets to wellness brands, these case studies show how I bring clarity and consistency to every design challenge, across digital products, identities, and systems.
Thanks
Thanks for stopping by and checking out my work.
© 2025 All rights reserved.
Thanks
Thanks for stopping by and checking out my work.
© 2025 All rights reserved.
Thanks
Thanks for stopping by and checking out my work.
© 2025 All rights reserved.