Initiatives for a Design System
The challenge
We needed a Design System
I started articulating for a Design System when the business decided to take a rebranding into products that were part of and integrated user journey. Since then, I led different initiatives related to this theme in the company.
Context
Fast growing
​
So multiple Designers were starting to work on the same product at the same time.
Design debts​
​
Designers used to create their own rules and components for each delivery. While this brought speed, inconsistencies were mounting and previous work was rarely reused.
Complex rebranding​
​
Components and pages were built independently, with low reuse. So changes in the visual identity implied manual modifications in each one of them.
Inventory
Diagnosis
In addition to conversations with leaders, designers and front-end developers, I did an initial interface inventory to understand needs. Few patterns were identified.
Design tokens
A common language
By that time, the business still did not intend to invest in a Design System. In parallel with negotiations, we formed a committee of interested designers and front-end engineers.
We started with design tokens. That way, styles management could be centralized and teams would be able to already start creating components at a team level autonomously, while ensuring a more unified and cohesive system.
We used the same model with different possible values and "themes", in order to support the company's multiple brands.
Team components
Building libraries
A few months later, two libraries using the same design tokens were built and documented. I made several contributions to designs, specifications and approvals.
Styleguide
Guidance
Later, the company decided to invest on a styleguide, starting by styles and buttons.
Me and a fellow Designer analyzed the visual design language that would be essencial to build the first component. Each element was discussed within the design team in weekly design critique sessions.
Core components
A core library
A core library, start by buttons, was demanded by business. I created an initial version with several variants and took it to a design critique. From feedbacks and needs, I generated a new version and documented handoff specification.
My steps further
UI elements​
in the core experience flows were identified and prioritized
Use cases​
were investigated
Research
was conducted with Product Designers and Engineers
Team Components
that could be promoted to the core library were identified
At the end at the end of my participation in the project, I built a UI Kit proposal iteratively, based on workshop sessions with Product Designers.
