Create a design system from scratch to enable shared design experience and standards across products and improve our efficiency in delivering solutions.
After starting the new team structure of the company, each designer was responsible for one of the products.
We found ourselves dealing with problems in all products, such as:
Conflicting component libraries
Inconsistent components and design solutions in the same product
Too much time invested in interface design
Demand for a more agile delivery process
Component Design
Microinteractions
Management
Design Principles
Documentation
Interface redesign
Cristiano Vieira, Design Lead
Felipe Martins, PD
Fabiano Bergamo, PD
Marcela Pianovski, PD
Paulo Zubiolo, PD
Pedro Bertollo, PD
During the first half of 2022, we created EixoDS. We focused on improving the experience and time spent on tasks for logistics processes.
During the component design phase, we focused on creating components that would make the experience across products consistent and that the layouts would fit our context of use.
In this example, I prepared different layouts and table views for the project team to validate the scalability of the products they were responsible for and what data and interactions should be considered.
Our process was far from linear or clear of obstacles. During creation, we found ourselves deciding on trade-offs that were necessary to make implementation happen:
Our leadership planned a roadmap in which the design system would be ready for handoff in may. The team was split into different phases of the process and collaborated on other parts of the project when possible.
We were a team of 6 designers acting on the creation and iteration of the design system. I started a record of the meetings on Confluence with topics discussed during meetings and a changelog in the design system file so everyone could update the changes made for alignment or further discussion.
We prepared a presentation about the design system during a monthly meeting with developers, managers, and directors.
We had to define a starting point for the implementation. After discussions, We concluded that we should start with the Shipper platform, the product I worked on. After developing components and layouts for the products, other teams started to catch up with the developers from my team to start applying them to their products.
The alignment with the managers was crucial for us to be able to start developing the component library.
Figma file structure
Typography and color system
After the first solution was delivered with the new library and after collecting feedback from developers and designers, we observed:
Less time is spent on design thinking processes when using the Design System
More assertiveness and fewer design homologation adjustments before release
Clean code and greater efficiency in team development, and no time spent refactoring components to meet product/use needs
Aligning our project with managers and developers interested in working with a component library was crucial to start development, reducing setbacks and making our project more than a Figma file.
My communication skills improved a lot during this project. I took on the responsibility of testing the components and managing the developers involved, reporting the process weekly to my team leader and product managers.
Thanks for reading!
💖
Back to all projects 🔙💼