Jan Klever

Zilla

Zilla, o (grandioso) design system da Quero Educação

Sobre a Quero

A Quero Educação tem como proposta encurtar distâncias na educação através da tecnologia, unindo quem quer aprender com quem é especialista em ensinar. Mais de 800 mil alunos já foram matriculados através de um de seus produtos que atendem do ensino básico à pós-graduação passando ainda por cursos livres e de idiomas.

Iniciando os trabalhos

O Zilla ainda era apenas um projeto quando assumi o papel de Design System Ops, o primeiro do cargo e do setor de Operação de Design. Com quase 1 ano, o design system ainda se encontrava sendo desenvolvido apenas pelo capítulo de Design de Produto que, após definição dos valores, dos princípios e do roteiro de construção dos componentes com base no inventário, já possuía uma robusta biblioteca de design servindo na construção dos protótipos de alta fidelidade.

No artigo, Design System: da confusão à construção de um produto, publicado no Medium eu conto um pouco mais sobre o início do Zilla.

Governança

Após uma pesquisa realizada entre o time de

ficou comprovada a necessidade de investimento na Governança. Três cenários foram definidos para serem atacados em conjunto com o time de Engenharia:

  • Construção de processos para os times de Design e Engenharia;
  • Metrificar a adoção do design system nos produtos e entendimento dos times de tecnologia acerca do assunto;
  • Acompanhar o desenvolvimento dos componentes em Engenharia;

Silhueta do fluxo de decisão do Zilla

Processos

É indiscutível a necessidade de processos no desenvolvimento de qualquer produto.

O fluxo de decisão foi o primeiro processo a ser definido para auxiliar designers e desenvolvedores a entenderem se determinado problema resulta na construção de um novo componente ou ajuste de algo já existente, podendo inclusive acontecer de maneira local em um time com as devidas validações técnicas.

No fluxo de criação foi possível apresentar todas as etapas necessárias na construção ou edição de um componentes, levando em consideração validações, não apenas do time de Operação de Design, mas também do capítulo de Design de Produto e, principalmente, da guilda de Front-end.

Metrificação

Através de uma pesquisa qualitativa enviada a cada trimestre foi possível fazer o acompanhamento do sentimento sobre o entendimento e impacto do Zilla na empresa, além do recolhimento de opiniões que norteavam esforços no ciclo seguinte.

Desenvolvemos internamente uma ferramenta para análise da cobertura do design system nos repositórios dos produtos e passamos a utilizar o Sleuth para mensurar o impacto das nossas bibliotecas também nos arquivos de design.

Acompanhamento

À medida que os componentes vão sendo desenvolvidos em código e também que novos componentes vão surgindo é importante que haja o controle do status e da disponibilidade de cada um deles. Por isso, desenvolvemos um banco de dados para que fosse possível apresentar tais informações (ver figura 1).

Tabela de componentes do Zilla com apresentação de disponibilidade e status

1: Página de acompanhamento de componentes com status e disponibilidade.

Alavancas de crescimento

Redesign e aquisições

Em 2019, a Quero Educação passou pelo processo de transição de sua identidade após um processo de redesign que iria reposicionar a empresa. Com o reflexo do seu crescimento novas empresas foram adquiridas e novas marcas foram adicionadas ao seu portfólio.

Naqueles momento, em que o Zilla ainda lutava pela equiparação da biblioteca de engenharia com a de design, precisávamos aprender a lidar com as novas variáveis o que propiciou um crescimento ainda mais expressivo.

Visando escalabilidade, optamos pela tematização do design system com impacto nas bibliotecas de design e engenharia, além de dividi-las em camadas. A tematização propiciaria que o Zilla fosse utilizado em diferentes produtos, e a divisão das bibliotecas manteria a organização necessária e o melhor aproveitamento dos tokens.

Dois diagramas de camadas. No primeiro de dentro pra fora: tokens, estilos e linguagem / No segundo: tokens básicos e tema

2: Na esquerda, o diagramas com as camadas do Zilla em engenharia. Na direita, o diagrama com as camadas do Zilla em design.

Em, OPS! Evoluímos nosso Design System, publicado no Medium eu conto um pouco mais sobre o avanço do Zilla.


Resultados

Até o final de 2020, o Zilla:

  • Já atendia a 7 produtos de diferentes marcas;
  • Apresentou um aumento superior a 250% na cobertura do principal produto (passando de 70%);
  • Teve uma crescente no engajamento e participação em mais de 130%;
  • E chegou a marca de construção de um novo produto cerca de 3 vezes mais rápido que o previsto;