Design systems allow us to organize and establish the foundations that bring coherence to the product. Additionally, they are the means through which we achieve a unique language for all team members to work collaboratively and promote best practices.

‍

As a digital product design agency, it is common for us to encounter projects that lack a design system. In fact, it is most usual for companies to contact us after investing countless hours trying to evolve their product without achieving the desired results, in a complex, tedious, and frustrating process.

This scenario has motivated us to write this article, where we will share the benefits and advantages of a good design system, based on real experiences, and explain how we approach these situations from the agency's perspective.

In the development of a digital product, many different profiles are involved: product and marketing departments, designers, developers, etc.

For optimal coordination and planning, it is essential to have tools that allow us to tackle daily tasks in an organized and structured way.

Well, a design system is like the foundation of a house; it sets the groundwork for building a common and strategic vision, establishing rules, and compiling libraries of reusable resources, enabling scalability and efficient growth. Interesting, right?

‍

First phase: A good immersion to understand the challenges and share this fascinating journey

For the development of these types of projects, where you will interact with different layers and departments of a company, it is vital to integrate as much as possible with the entire project structure. At Lúcid, we consider it essential to establish and agree on a collaborative work methodology with the client, where all parties actively participate in the entire design process.

The first phase is immersion, where we get to know the clients better, they share their challenges as a company, their insights, and provide context about the project. In these sessions, we share all our knowledge with them: we explain the differential value of good product design and detail each of the different phases of this journey that we will undertake as a team.

We share our work tools, such as Notion and Figma (which we couldn’t live without 😉), which allow us to work collaboratively, ensuring the involvement of all parties in the project. This allows us to take communication to the next level, coordinating and improving the team's productivity.

Similarly, in these joint sessions, we evaluate the documentation we start with: functional analysis, design system, brand values, main objectives, use cases, etc., to then break down the requirements, identify objectives, define scenarios, and user personas.

When the teams are aligned and ready to start working, it’s time to measure efforts and capacity. Let’s begin!

‍

Basic elements of visual language, the foundation of a scalable structure

Once we understand the challenges, have all the documentation collected, and the work tools defined, it’s time to structure all the elements that form the basis of the product's visual system: typography families; hierarchies; primary, secondary, and tertiary corporate colors; neutral colors; iconography, etc.

‍

Definition of an atomic design system: The UI resource library we can’t live without

Once the basic elements are defined, it’s time to create components through an atomic design system. This system, which establishes the creation of components from the simplest to the most complex, is organized into five levels: atoms, molecules, organisms, templates, and pages.

The goal of this step is to create a UI library, that is, a catalog of components that we can use repeatedly in the interface. These components must have behavioral states and meet standards, and each one must be accompanied by an explanation indicating when and how it should be used.

‍

‍

Spaces: A vital element for a consistent and organized experience

A well-organized spacing scale provides greater visual consistency in the interface and gives us agility in the component creation process: paddings, margins, positions, and distances between elements.

‍

Grid, layout, and breakpoints: Defining the product's behavior for the endless screen resolutions on the market

The creation of a grid system that adapts to screen width establishes the skeleton or basic structure of the interface. This allows us to control and align all content to generate a more consistent system and a better experience.

The layout's behavior is defined through breakpoints, which are the standard measurements that define screen width and the optimal adaptation of content design.

‍

This is how we work with design systems at Lúcid. For us, they are an essential tool for generating success patterns, ensuring maximum quality in your product, improving your brand image, avoiding errors, and creating a unique and memorable user experience.

And it’s that a design system doesn’t just apply to creation and implementation; in the future, it also helps with planning and organizing changes, as well as the scalability and evolution of your product in the market.

‍

Do you have a digital product and identify with any of the points we’ve discussed in this post?

Does your team need advice and a unified strategic approach for the development of a digital product?

Get in contact with us, and we’ll find the most suitable solution for your team’s needs.

‍