🇺🇸 English

Work done in 2019.

Contexto & Problema

A fusão das empresas que tem os dois maiores portais imobiliários brasileiros trouxe uma problemática que era: como manter os produtos das marcas ZAP Imóveis e Viva Real consistentes, dando oportunidade para que os times pudessem escalar os produtos com agilidade?

Em poucos meses de trabalho em conjunto, já foi possível perceber que existiam dores tanto do capítulo de design, como de tecnologia em refazer muitos elementos e manter padrões no desenvolvimento dos produtos.

Foi assim que a solução da criação de um design system foi se desenhando pelo time de Design. São dois portais muito parecidos, diversos elementos visuais são os mesmos, alterando apenas estilos inerentes à cada marca, como cores e tipografia.

Por 1 ano e meio este design system, batizado de Lina em homenagem à arquiteta Lina Bo Bardi, foi sendo desenvolvido como uma iniciativa não oficial dentro da empresa. Não havia um time dedicado na construção desse produto. As pessoas dedicavam tempo e esforço simplesmente pelo interesse em construir algo que facilitava o trabalho de todos.

Eu mesma, ainda trabalhando no time de Proprietários, era uma das colaboradoras do design system.

E foi por essa entrega de valor que em uma mudança de estrutura da empresa surgiu a oportunidade de oficializar um time dedicado na evolução do design system, formado por mim, um desenvolvedor front-end e um líder técnico.

Processo

Desenhei uma dinâmica, com a colaboração de uma agilista, e com a participação de product designers, front-ends e product managers para colher as dores do dia-a-dia de trabalho dessas pessoas e assim criei um roadmap e priorizei o backlog de desenvolvimento do produto design system.

Como propósito para o time recém criado definimos como objetivo: pessoas, processos e produtos, na intenção de criar um time que pudesse dar suporte aos times de produto do Grupo ZAP, agilizando, escalando e criando consistência visual para as marcas. 

Como OKR, definimos dois principais objetivos:

1. Dar clareza aos stakeholders dos seus papéis nos processos do Design System

• Ter processos para criação e alteração de componentes;
• Ter estes processos (criação e/ou alteração de componentes) executado com sucesso em 99% das solicitações;
• Ter uma avaliação acima da nota 8 em NPS nas execuções de processos do design system.

2. Disponibilizar o Design System em um link único, organizado, como fonte da verdade e disseminado pela empresa para consulta e interação, que tivesse o menor impacto de adoção

• Ter a Lina 90% organizada em agrupamentos como: Iconografia e os styleguides das marcas Grupo ZAP, ZAP, Viva Real e Marketing;
• Reduzir o impacto no tempo de carregamento de um projeto que utiliza a Lina em 35% (melhoria de débito técnico).

Solução

Documentação

Criei um site para manter a documentação do design system atualizada e acessível para as pessoas da empresa, com um inventário e status de cada componente que permitiu visibilidade e autonomia para que as squads pudessem trabalhar em seus produtos de forma mais rápida e assertiva:

https://zeroheight.com/522094462

Tematização das marcas do Grupo ZAP 

Para todas as marcas do Grupo ZAP fiz uma análise dos tokens e componentes listados abaixo e organizei em 3 styleguides de acordo com a respectiva marca, para que pudéssemos criar temas dentro do design system e assim facilitar o trabalho dos designers na busca por artefatos.

Cores: análise da paleta de cores, criação de novas cores de acordo com regras de acessibilidade e usabilidade

Botões: análise de uso nas interfaces, nomenclatura, definição de novos padrões para os estados e organização de componentes para codificação

Tipografia: análise de uso nas interfaces, definição de novos padrões

Componentes: manutenção de diversos componentes maiores utilizando da definição dos tokens menores: elementos de formulário, badge, avatar, card, tooltip, modal, paginação, etc.

Iconografia

Com a necessidade de uma família de ícones (mais de 60 itens) e um time consideravelmente pequeno para criar ícones, decidimos usar uma mesma família a partir da biblioteca do Material Design (Google) para todos os produtos do Grupo ZAP e assim agilizar o processo e consistência visual dos produtos. Fiz auditoria dos ícones existentes (remoção, adição e alteração), que resultou no redesenho de 60% de ícones e adição de novos. Um incremento de 285% de ícones adicionados à biblioteca (open source).

Governança

Liderava a manutenção de todo o design system e me tornei referência para o time, acompanhando o uso de componentes nos produtos do Grupo ZAP junto aos Product Designers, sugerindo melhorias e alterações, oferecendo consultoria a essas pessoas na construção das interfaces em que estavam trabalhando e dando suportepara que os produtos escalassem de forma organizada e com consistência visual.

Resultado

Com base nos objetivos do time, criei reuniões para alinhamento das Pessoas, um espaço que tínhamos foco total no design system com discussões ricas sobre visual, interação, animação, documentação, etc.

Isso gerou Processos melhor definidos e iterados a cada semana, tanto para colaboração de criação de novos componentes, como alteração de forma autônoma.

A maior evidência de impacto do design system no Produto foi na criação de um novo produto para Aluguel, em que um novo squad pode testar suas primeiras hipóteses em poucas semanas utilizando apenas tokens e componentes disponíveis na Lina.

Como não estive na empresa até atingir todas as metas, no meu último quarter atuando nesse squad fiz novamente a pesquisa de NPS com product designers, front-ends, product managers e gerentes de engenharia (cerca de 25 pessoas) e obtivemos um aumento da nota média de 8 para 9.