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.
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.
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;
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.
The need for processes in the development of any product is indisputable.
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.
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.
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.
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.
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.
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.
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