Problem

As the platform expanded and both the Design and Tech teams grew, I started to see inconsistencies in our design elements and delays in project delivery. To address these challenges, I proposed the creation of a Design System to streamline our process and boost efficiency.

Challenges

🚨

Component inconsistencies

Over time, multiple versions of similar components were created, leading to redundancy and confusion within both the design and development teams.

⏱️

Optimizing times

The absence of a unified design system caused delays in both design and development, as teams had to realign elements manually for each project.

🐣

New Team Onboarding

New team members often struggled to familiarize themselves with existing design components, resulting in inefficiencies and inconsistencies in their contributions.

Initial Process

I made research to better understand this type of project and how to approach it, considering the company’s size and the potential team members involved.
I made a document that explains the definition, process, objectives, and scope of a DS. To make things clearer, I made an inventory to improve the prioritization of components.
I presented it to the CEO to understand the project process and wins. Then had a session with the Chief Technology Officer to align and optimize task prioritization.

Design Process

To create a project like this, we considered the size of the business and the team during the definition phase, in order to establish a process that allows us to invest sufficient time as a team without neglecting daily tasks.

Design tokens

We consider elements such as typography, colors, icons, effects, and shadows as “design tokens.” These essential elements will be used in future components to ensure consistency and efficiency throughout the design system.

Form components

We started with components like text fields, checkboxes, radio buttons, and switches, as they were the most widely used elements in the platform’s functionalities. We designed them to be flexible, making them easy to adapt and integrate.

Buttons

With three levels, this component offers a versatile structure. It supports versions with icons and a specific “Danger” version for delete actions.

Finally, inconsistencies in the platform decreased and the speed in the Design team’s task development significantly increased, facilitating the launch of landing pages and test forms just under our supervision.

The project was put on hold due to a business request, which had a negative impact on the organization and development of the tech library.

Building Scalable Design Foundations

Challenges

🚨

Component inconsistencies

⏱️

Optimizing times

🐣

New Team Onboarding

Finally, inconsistencies in the platform decreased and the speed in the Design team’s task development significantly increased, facilitating the launch of landing pages and test forms just under our supervision.