About Quero

Quero Education proposes to shorten distances in education through technology, uniting those who want to learn from those who specialize in teaching. More than 800 thousand students have already been enrolled through one of its products that serve from basic education to postgraduate courses, and also have free and language courses.


Zilla

What already existed

Zilla was still just a project when I took on the role of Design System Ops, the first in the role and in the Design Operation sector. With almost 1 year, the design system was still being developed only by the chapter of Product Design, which, after defining the values, principles and the roadmap for building the components based on the inventory, already had a robust design library serving in the construction of high-fidelity prototypes.

In the article, Design System: from confusion to building a product (in Portuguese), I tell you a little more about the beginning of Zilla.

Governance

Team needs

After a survey carried out among the Technology team, the need for investment in Governance was confirmed. Three scenarios were defined to be attacked together with the Engineering team:

  • Construction of processes for Design and Engineering teams;
  • Metrify the adoption of the design system in the products and understanding of the technology teams on the subject;
  • Monitor the development of components in Engineering;

Atomic Design

We used the methodology of Atomic Design, by Brad Frost, to restructure the entire design library, bringing greater clarity in the use and guiding the development of the components.

Flows

The need for processes in the development of any product is indisputable.

Zilla decision flow silhouette

The decision flow was the first process to be defined to help designers and developers to understand if a given problem results in the construction of a new component or adjustment of something that already exists. In fact, it can happen that a solution is local in a team with the necessary technical validations.

In the creation flow, it was possible to present all the necessary steps in the construction or edition of a component, taking into account validations, not only from the Design Operation team, but also from the Product Design chapter and, mainly , from the Front-end guild.

Metrification

Through a qualitative survey sent every quarter, it was possible to monitor the feeling about the definition and impact of Zilla on the company, in addition to collecting opinions that guided efforts in the next cycle.

We internally developed a tool to analyze the coverage of the design system in the product repositories and started using Sleuth to measure the impact of our libraries, also in the archives of design.

Follow-up

As the components are developed in code, and also as new components appear, it is important to control the status and availability of each one of them. For this reason, we developed a database so that it was possible to present such information.

Zilla component table with availability and status presentation

1: Tracking page for components with status and availability.

Growth Levers

Redesign

In 2019 Quero Quero went through the process of transitioning its identity after a redesign process that would reposition the company. At that time, when Zilla was still struggling to match the engineering library with the design library, we needed to learn how to deal with the new variables, which led to even more expressive growth.

We chose to divide the design and engineering libraries into layers (see figure 2) so that it was possible to make the best use of the basic definitions (tokens) up to the final component.

Two layer diagrams. In the first from the inside out: tokens, styles and language / In the second: basic tokens and theme

2: On the left, the diagrams with the Zilla layers in engineering. On the right, the diagram with the Zilla layers in design.

New Brands

The company's growth ended up resulting in the acquisition of other companies and with that new brands were added to Quero's portfolio.

With a view to scalability, we opted for the theme of the design system with an impact on the design and engineering libraries. This would allow Zilla to be used in different products or context in a much more orderly manner.

Examples of buttons on different themes. Colors and formats are different.

3: Examples of buttons on different themes for different sites

This theme is reflected in different groups of design tokens provided for each product. With this, it is possible to modify the appearance of the components, without changing their functioning, facilitating the maintenance of the components and ensuring greater coverage in all the company's products.

In OPS! We evolved our Design System (in Portuguese), I tell you a little more about the progress of Zilla.

Results

By the end of 2020, Zilla had already achieved expressive results that set it as an example of a product in the company. Between them:

+ 130%increased engagement

+ 250%increase in coverage of the main product

7 productsserviced with different brands

3xmore speed in the development of a new product