The scope

This design system was designed by Secuoyas for a large consulting firm. The client was requiring more and more projects, mainly data visualization tools. The tools had similar structure and elements, but were approached as isolated projects, resulting every time in slightly different solutions. This led to an inconsistent user experience and unnecessarily increased design and development times.
In short, there was a major problem of inconsistency and inefficiency, since we had to spend a lot of time analyzing and generating a solution for a problem that was systematically repeated.
This design system was created to solve all these problems.

The challenge

The biggest challenge was to generate components and patterns that could solve generic problems, yet allowing customization according to the unique requirements of each project. For this purpose, an analysis of all the tools designed so far was conducted. In this analysis we looked for problems, elements and solutions that had been repeated over time. The result was a list of components and patterns that were prioritized according to their frequency of use.

The process

The work was organized by epics. We started with the foundations, which included (among other things) colors, typographies, grids, spacing and icons. Then we moved on to components, designing all their variants and states. Each component was accompanied by documentation, addressed to both the design team and the development team.
And finally we focused on patterns, ranging from basic patterns (such as navigation and filtering) to more complex patterns (such as transitions, animations and microinteractions).

Structuring the design system

The whole design system was prepared for two themes: light and dark. With this design system we had to be able to design all the client's tools. But we were aware that there might be cases that required further customization of the design. For this reason, the structure of the design system was designed to support different use cases. We decided to separate the design system into 3 large files: foundations, components and patterns. Thus, if the requirements of a project allowed the use of both foundations and components, both libraries could be imported into the project. However, if the project required highly customized components, we could import only the foundations library.

This design system has been a great challenge, because it required to standardize elements and solutions, and at the same time to allow a certain degree of flexibility. On the one hand, this meant that for certain elements we had to create a large number of variants. On the other hand, once the components were created, instead of assembling them into complex and less versatile organisms, we decided to rely more on patterns.

Working with devs

In this project we worked closely with the development team. On the one hand, we needed to gain a deep understanding of the technological constraints that would limit the design. On the other hand, working together with the development team we were able to establish a basic token system so that the design system would eventually act as a bridge between the two design and development teams.