Design systems allow us to organize and establish the foundations that give coherence to the product. They are also the means through which we achieve a single language for all team members to work collaboratively and promote best practices.

‍

As a digital product design agency, it is common for us to come across projects that lack a design system. In fact, most often companies 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 approach daily tasks in an organized and structured manner.

Well, a design system is like the foundation of a house; it lays the groundwork for building a common, strategic vision, establishing rules, and compiling reusable resource libraries , which enable scalability and efficient growth. Interesting, isn't it?

‍

First phase: A good immersion in understanding the challenges and sharing this fascinating journey

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

The first phase is the immersion, in which we get to know the clients better, they share their challenges as a company, their points of view and provide a context about the project. In these sessions, we share all our knowledge with them: we explain the differential value of a 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 (without which we could not live 😉 ), which allow us to work collaboratively and ensure the participation of all parties in the project. This allows us to take communication to the next level, coordinating and improving team productivity.

Similarly, in these joint sessions, we evaluate the documentation we started 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 get started!

‍

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

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

‍

Defining an atomic design system: the UI resource library we can't live without

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

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

‍

‍

Spaces: a vital element for a coherent and organized experience

A well-organized spacing scale provides greater visual consistency in the interface and gives us agility in the process of creating components: fills, margins, positions and distances between elements.

‍

Grid, layout and breakpoints: defining product behavior for the infinite screen resolutions on the market

Creating a grid system that adapts to the width of the screen 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 behavior is defined by breakpoints, which are standard measures that define the width of the screen and the optimal layout adaptation of the content.

‍

This is how we work with design systems at Lúcid. For us, they are an essential tool to generate successful patterns, guarantee the highest quality in your product, improve your brand image, avoid mistakes and create a unique and memorable user experience.

And it is that a design system not only applies to the creation and implementation; in the future, it also helps to plan and organize changes, as well as to the scalability and evolution of your product in the market.

‍

Do you have a digital product and do you feel you can improve it with a great digital system?

Does your team need advice and a unified strategic approach to digital product development?

Enter contact us, and we will find the most suitable solution for your team's needs.

‍