.png)
As Product designer, I worked with the design team and developers
Nuvocargo
2022
Nuvocargo encountered significant challenges after a few years of operation. One of these challenges was maintaining consistency between products, particularly as different designers led each one. To tackle this issue, a design system project was initiated to ensure consistency across all products.
I worked with a team of three designers, including myself, to create a design system. The development team, consisting of eight individuals, was responsible for implementing the system. Our main challenge was ensuring effective communication and proper implementation throughout the project.
We utilized an existing UI kit to start the design system for Nuvocargo products.
We focused on the essential elements frequently used in the designs and created base components for them.
These elements included:
We created the main components and variants in Figma for easy access.
We implemented the design system using tailwindcss as it was recommended by the development team. This technology allowed us to create designs with specific guidelines and take into consideration the framework's limitations.
.png)
Once the main components were built, the design team began creating the secondary components that were frequently utilized in the designs.
These included complete components like tables, banners, pop-ups, success screens, and empty states, as well as inputs, among others.
.png)
As the designer's first design system was created from scratch, it was crucial to grasp the concept of Atomic design to properly develop components.
The utilization of Figma played a vital role in this project as it enabled me to implement best practices in generating components and variants. This proved to be a huge time-saver when designing screens with shared components.
.png)