Foundations of a multi-product design system



UX researcher, UX/UI designer


Design audit, workshops, stakeholder interviews, UI design, visual design, documentation.

Achieved goals

  • Succesfully created a design source of truth to iterate with.
  • Reduced friction in communication between teams (32% fewer requests for specs or assistance).
  • Successfully created a event system for measuring component data (e.g. how much a component is used by the company, or track user behaviors in specific user flows).


Over time, features have been developed in different products in the company that have generated technical and design debt, and because of this, there are clear inconsistencies both at the communicative level, at the visual level and at the production level (for example, same visual appearance but different code components).


  • Investigate and monitor all the components in use of all the products we offer.
  • Increase the autonomy and productivity of technical teams.
  • Improve the visual appearance of all interfaces


The process is divided in 6 main phases: kick-off, discovery, concept, design, analysis and development.



In this phase, the team and stakeholders were decided, based on a stakeholder map process. After that, the team decided the schedule based on business goals and technical constraints.


Once we know the magnitude of the problems to be addressed and we are aware of the time and resources available, the team focuses its efforts on taking an inventory of all products and active components to date. At the same time, reports were created based on internal benchmarking and a secondary research was carried out to support decisions based on existing usability patterns, both in competitive products and in products from other industries.

Concept & definition

Once we have all the information, both from stakeholders and from the research carried out, we begin to map all the modules that make up the components in order to "atomize" as many elements as possible. Thanks to this, and with the elements reduced to a minimum, the list of assets necessary to make up the first stage of the design system is created, to later elaborate the tokens.


Token system

The token system created is based on a hierarchy of levels (product - theme - base - modifier). With special detail at the "product" level, so we can assign tokens to different products, and "theme", since it allows us to create custom themes for specific reasons (e.g. different clients).

Using this framework, wen can manage abstraction efficiently between products and teams.

Asset updating & visual design

Once we had a consistent token structure, the main assets such as fonts, colors, sizes, etc were updated and prepared, along with the visual assets such as icons, illustrations, and imagery.

Composition of twenty icons in black with rounded shapes.
Global icon set, designed according to the size and shape parameters established in the design system. Designed by Dani Delgado.
Specific icons needed a visual "no-pixel perfect" adjustment for better response in different screens (as seen on image above).
Design system illustrations, featuring a ticket exchange, a crowd of people, a venue representation in a desktop screen, and a blueprint transfering data to a mobile phone
A glimpse of the illustration set for marketing purposes.


After documenting all the graphical and token parts, it was possible to start prototyping all the components and usability patterns established in the definition. In this phase, the tags assigned to the existing components were also reviewed, and new ones were assigned based on the business objectives defined in the roadmap and in the definition phase.

Mockup of user interface components.
A glimpse of some components, with all the variants system.


Validation & testing

In a board presentation we show the results of the design system to stakeholders to do a pre-validation of the entire content summary. Subsequently, several tests were developed both internally and at the user level (since there were substantial changes in some components) to validate hypotheses and collect more data.

Handoff & documentation

Once the value proposition was validated, the process was documented and a the team set up the process scope to make a progressive handoff for a correct implementation on the shipped products and a iteration plan.

Contact info

If you want more info about my profile, do not hesitate to contact.