Product Designer | MD User Experience | Illustrator by hobby
Design system_
[the ask_] Build a design system that helps to provide the long life to the product and one single source of truth where we can replicate patterns, styles and behaviors to preserve the consistency for the system and care the quality of the product over the time.
[The role_] Product designer, illustrator and prototype designer.
[The timeline_] 6 months- on going.




The challenge_
Bringing a product to life with several hands and heads involved requires the inclusion of processes to ensure proper implementation with the development team.
When we are in the design exploration phase - a big part of this process is built on chaos - lots of layouts, changes, exploration, and iteration + the ideas of many heads involved in the creation of this type of project.
The biggest challenge was to bring all those explorations together, summarize the best approach and define the rules that will operate in a meaningful way for the whole system.
What are the elements to be added and defined?
What is a rule and what is not?
What is the best approach to building a system of this size?
How should a system be constructed, and what elements should it contain?
Define atoms, molecules, and organisms.
The process_
I will now detail the cognitive process used to create and map the creation of the design system and under what rules and logic the process operates.
-
Make inventories of all the elements repeated in the exploratory phase/ ideation and define the product.
-
Divide them according to the atomic design approach: atoms, molecules, and organisms.
-
Define the process and the working system in the tool.
-
Define the naming and status of each component. Understanding where it lives and what components impact.
-
Group the components under a logical order.
-
Define the appropriate matrices to logically build the components.
-
Test the components: using them in different layouts- to test their behavior.
The solution_
An entire design system was delivered with 23 components. Each Component with more than 20 variants. Plus 20 styles between colors, typography and layouts. A whole component library with responsive sizes for three breakpoints small, medium, and large.