Project
Design System | Warren Investimentos
Role
Design | Project leadership | Documentation
Project developed with the goal of improving the overall structure, facilitating use within the squads, and evolving the design system in the company in an organized manner.
Problems to be solved
- Few components, with the need for creating local components without standardization
- Complexity in using the library due to lack of documentation and file organization
- Existing components are complex to use and inconsistent between design and development
Phase 1: Architecture
The first step of the project was to understand what already existed and could be leveraged, and what needed to be created and organized.
Through workshops and architecture studies, along with the squad, the step-by-step process for better utilization of the token library, components, and templates was decided.
In this phase, the main decisions were:
- Improvement of the taxonomy for tokens and components
- Decisions regarding documentation
- Adjustments to complexity in order to make libraries more practical
Phase 2: components
After making organizational decisions and organizing tokens, it was time to populate the component library with the current needs of the product.
At this stage, necessary adjustments were made to existing components, and new components were created as needed. This was done in constant collaboration with various development and design teams, with the goal of creating an accessible library for use.
Phase 3: documentation
The documentation was created in Zeroheight, a tool specifically designed for documenting design systems. The same design and development architecture was used, making it much easier to find specific information and more convenient to use the design system elements on a daily basis.
See the full documentation here.
Main Results
Complex components simplified, making daily use easier
-
Documentation created quickly with clear usage examples and rules
-
Reduced design and development time within squads
-
Simplified maintenance and support for the library
After completing the design system creation project, the design and technology teams had to undergo a technology migration (Flutter), and the design system was a key element in ensuring that the migration was done swiftly while maintaining interface consistency.