Contexto

O Coral é o design system do Grupo Mateus, o projeto nasceu como iniciativa do time de design em 2020. Definimos ferramentas do time e padrões de interface, baseado nas aplicações que o time já havia desenvolvido.

Desafio

Devido ao seu tamanho, o Grupo desenvolveu diversas aplicações próprias para os colaboradores, em diversas tecnologias e dispositivos diferentes, o queresultou em uma imensa inconsistência nas suas interfaces, atrapalhando usuários e times que desenvolvem as soluções.

Estratégia

Decidimos dividir nosso processo em duas grandes partes: Discovery e Delivery. Como grande parte dos componentes, style guides e design tokens, já estavam construídos na camada de design, o primeiro passo foi validar se o que já tinha sido feita resolvia problemas de negócio dos clientes. Como tínhamos muitas plataformas para cobrir, decidimos focar nossos esforços iniciais no mobile, atendendo o aplicativo de RP da empresa, com 32mil usuários ativos. Eis o que descobrimos:

Contexto

Para que a documentação de um componente ou padrão fosse publicada, era necessário seguir um processo demorado e custoso, que envolvia a implementação em hardcode(dependência de uma pessoa desenvolvedora) e a criação de um espelho no Figma. Isso resultava em duas fontes de consulta desconectadas e não sincronizadas entre si, além de não permitir colaboração.

Objetivo

Criar uma documentação colaborativa que não dependa de implementação ‘hard code’ e que possa ser atualizada com facilidade e rapidez tanto pelo time de design quanto por pessoas que consomem a documentação.

Responsabilidades

Liderei o projeto, fazendo todo o planejamento e condução dos workshops, mapeamento de processos e criação da nova interface. Ajudei a definir a ferramenta utilizada para construir a nova documentação e acompanhei o time de desenvolvimento na implementação da interface.

Escopo e Limitações

Criação de dois templates:

• Home;
• Página de componentes e padrões;

Limitações:

• Por compliance, a documentação não poderia ser mais pública (adequação à ISO 27001);
• Orçamento restrito apenas à quantidade de pessoas no time de DS.

Mapeamento do processo

Contexto

Muitos componentes do Sirius Design system vieram de uma biblioteca legada que fazia parte do antigo Design System da Zenvia. Foram construídos antes do Figma lançar novas funcionalidade de criação de componentes.

O problema

O componente de Hintbox possuía muitas variantes que impactavam na performance do arquivo e aumentavam o tempo de manutenção desses componentes.

Solução

Utilizamos às components properties do figma para diminuir o total de variants do componente. Ao todo o componente perdeu 44 variants ficando com apenas 4.

Figma properties

Utilizamos as booleans nos elementos de: Title, body text e close icon e swap instances para os botões de ações. Além disso fizemos melhorias nos textos e adicionamos text propreties nos títulos e corpo de texto. O funcionamento do componente você pode assistir no vídeo abaixo.

Resultado

Ao todo foram retiradas 44 variants do componente que agora utiliza apenas 4. Mudanças que antes deveriam ser replicadas em várias variants agora são feitas em poucos passos economizando o tempo do time e reduzindo o tamanho do arquivo.