As a digital product design agency, it is common for us to come across projects that do not have a design system. In fact, the most usual thing is that companies contact us after having invested countless hours trying to evolve their product without obtaining the expected results, in a complex, tedious and frustrating process.
This scenario has motivated us to write this article in which we will tell you about the advantages and benefits of a good design system, based on real experiences, and, we will explain how we deal with these situations at the agency.
Many different profiles are involved in product design projects: product and marketing departments, designers, developers, etc.
For optimal coordination and planning, it is essential to have tools to operate in an organised and structured way.
The design system is the base for building a common strategic vision, establishing standards, and compiling libraries of reusable resources, making scalability and efficient growth possible. Interesting, isn't it?
For the development of this type of project, where you are going to interact with 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 in the entire design process.
The first phase is the immersion phase, where we get to know the clients a little better. In this stage, they share with us their challenges as a company, and their insights and give us 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 we detail each one of the different steps of this journey that we are going to go through as a team.
We share with you our tools, such as Notion and Figma (without which we could not live 😉), they allow us to work collaboratively, achieving the involvement of all the parties in the project. This allows us to take communication to the next level, coordinating and improving team productivity.
Likewise, in these collaborative sessions, we evaluate the documentation from which we start: functional analysis, design system, brand values, main objectives, use cases, etc. To establish the requirements, identify the goals, and define scenarios and user personas.
When the teams are lined up to start working, it's time to measure efforts and capacity. Let's get started!
Once we understand the challenges, we have all the documentation compiled and the working tools defined, it is time to structure all the elements that compose the basis of the product's visual system: typographic families; hierarchies; primary, secondary, and tertiary corporate colors; neutral colors; iconography, etc.
Once the basic elements have been defined, it is 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.
This step aims to achieve a UI library that can be used frequently in the interface. These components must have behavioural states and comply with standards, and each of them must be accompanied by an explanation of when and how it should be used.
A well-organized scale of spaces provides greater visual consistency in the interface and gives us agility in the process of creating components: paddings, margins, positions, and distances between elements.
In order to establish the skeleton and basic structure of the interface, we need to create an adaptable grid system. This grid will allow us to control and align all content creating a consistent design system and a more pleasing experience.
We will define the behaviour of the layout via breakpoints, the standard measures that set the screen width, and the optimal adaptation of the content design.
This is how we work with design systems at Lúcid. For us, they are an essential tool to generate successful patterns, ensure maximum quality in your product, improve your brand image, avoid mistakes and create a unique and memorable user experience.
A design system not only applies to the creation and implementation but also helps plan future actions to scale and evolve the digital product according to market and user needs.
Do you have a digital product and do you feel you can improve it with a great digital system?
Does your team need advice on strategic thinking for the development of a digital product?
Contact contact us and we will find the most suitable solution for your team's needs.
