💡 About

The Product Gears Design System was created with the primary objective of delivering consistent and optimized interfaces. My biggest challenge was generating a simple and resilient solution.

What is a Design System?

Design Systems are sets of reusable components, principles, and guidelines that provide designers and engineers with a consistent shared language.

The real value of a design system lies in its ability to provide designers and engineers with the guidance needed to create frictionless user experiences and digital products. Functional Design Systems help designers understand what to do and how to do it, but they also provide the rationale and motivation behind the design.

▪ Consistent designs;

▪ Better communication;

▪ More clarity on the handoff to engineers;

▪ Higher efficiency for design and engineering teams.

Principles

Why not Atomic Design?

Atomic Design is a way to organize a Design System from small to large components. These components are referred to as atoms, molecules, organisms, models, and pages.

Atomic Design is the most common model when thinking about structuring a Design System, but this methodology has a crucial flaw. In the Atomic Design view, although similar, a button and a dropdown coexist in different categories.

Both are navigational tools that should be related in some way, but in Atomic Design, they are separated based on their complexity. It makes more sense to organize components into groups based on their functionality, avoiding illogical boundaries.

Nomenclature

It is essential that the design and engineering team speak the same language, and components/tokens with well-defined nomenclatures facilitate this process.

In the case of Toolbox, when naming a component/token, I used three pillars of definition: “What is it?”, “semantics” and “variable.” Thus creating components that are easy to find in the Design System.

Design Tokens

Design Tokens are semantic style variables. So it's all the style possibilities to build the look of our components.

The tokens are 100% mirrored between design and technology, creating predictability so that the engineering team can develop components exactly the same as those made by the design team.

Motion Tokens

Micro-interactions are important to draw the user's attention and give visual feedback on the action being performed. However, it is a factor that is often ignored because it is not essential in a product.

The definition of some combinable variables of low complexity is enough to provide transitions to the components of the Design System, increasing the level of communication between the product and the user and raising the aesthetic level of the design.

Components

When we start to merge Design Tokens, we evolve them into Components. These are divided into Base Components, which are indivisible, and Components, which are complex organisms.

Discovery

Structure

Mapping all needs is the first step toward a Design System. That means lifting the structure of all our products and processes.

According to the initial project, I noticed that we would have three products. The Landing Page to acquire leads and present the product, an area where users provide their feedback (end user), and the administration environment.

Product Profile

The second step is understanding if these products need support libraries with graphics, images, or illustrations.

The profiles were molded according to development, adapting to the needs of each product.

For example, in the beginning, we did not use images of people because they are commonly generic when not tailored for the product. However, in an AB test, the Landing Page that had the best result contained images of people, which was then incorporated into the image support library on the Landing Page.

Styles Inventory

From that moment on, I began to explore typography needs (weights, sizes, and line height) and searched to understand the colors that would be used and their applications.

Components Inventory

At this stage, I identified what the Core Components of the Wireframes already designed would be, for each of my libraries.

Definitions

Mood board

After listing the components, I created a mood board as a reference for creating the components of the Design System. At that time, I focused on looking for aesthetic details that would help me make decisions regarding the Toolbox UI.

Grid

Because the Admin product has a complex flow, its navigation needed to be more accessible, so I created a specific grid considering that a fixed side menu would be necessary.

As for the product for the end user and the acquisition channel, as they are common interfaces, they do not require a complex grid. However, it was necessary to consider that these two products would have much more mobile access.

Handoff

The first step to a good design handoff is a solid designer-developer relationship. Engineers are responsible for making the design a reality. The sooner they are brought into the design conversation, the sooner the final product can be perfected.

That's why I created the handoff model directly with my developer, adapting myself to make this handoff as smooth as possible.