Cobi Design System: base de componentes para a Cobasi

Introdução

Em 2022, depois de ter atuado em dois design systems, o Jude na James e o Aquagen na Diagnósticos do Brasil, senti que estava pronto para enfrentar um novo desafio. Minha experiência anterior me proporcionou um profundo entendimento da importância e do impacto que um design system bem estruturado pode ter em uma organização. A oportunidade surgiu quando, atuando como consultor na Cobasi, o maior pet shop do Brasil, percebi que havia espaço para implementar um design system robusto que pudesse suportar o crescimento acelerado da empresa.

Sempre fui um defensor fervoroso dos design systems, ou DS. Durante meu tempo na Cobasi, preguei constantemente sobre os benefícios que um DS poderia trazer: consistência visual, eficiência no desenvolvimento, melhor colaboração entre times e uma experiência de usuário unificada. No final daquele ano, fui convidado a assumir o papel de especialista em design system da Cobasi. Até então, eles possuíam apenas um guia de estilos básico, sem um nome definido ou estrutura sólida.

Durante um ano de trabalho intenso, transformamos aquele guia de estilos em uma megaestrutura de componentes dentro do Figma, com governança estabelecida e pronta para ser codificada. Meu trabalho foi dividido em três etapas principais: atualizar os componentes existentes e criar novos, documentar seus usos e, por fim, elaborar uma governança que atendesse às necessidades dos usuários internos.

O desafio

A Cobasi estava passando por um período de rápida expansão, tanto em termos de negócios quanto de produtos digitais. Com uma equipe de design crescendo e vários projetos acontecendo simultaneamente, a necessidade de um design system robusto tornou-se evidente. O guia de estilos existente era limitado, sem padronizações claras ou documentação adequada. Os designers frequentemente recriavam componentes, e os desenvolvedores enfrentavam dificuldades para manter a consistência nos produtos.

Meu desafio era desenvolver um design system que unificasse a linguagem visual e de interação da Cobasi, facilitando a colaboração entre designers e preparando o terreno para uma futura implementação pelo time de desenvolvimento.

Processo

Mapeamento e avaliação inicial

A primeira fase do projeto foi dedicada ao mapeamento dos processos existentes e à avaliação do estado atual dos componentes e recursos disponíveis. Realizei um levantamento detalhado de todos os componentes utilizados nos produtos digitais da Cobasi, analisando diferentes aplicativos, sites e sistemas internos. Identifiquei inconsistências visuais e funcionais entre os componentes: botões com estilos diferentes, variações de cores não padronizadas e padrões de interação divergentes.

Conversei com designers, desenvolvedores e stakeholders para entender as dores, necessidades e expectativas em relação ao design system. Embora o desenvolvimento do DS tenha sido despriorizado, mantive rodadas de conversas com o coordenador de desenvolvimento. Essas discussões foram fundamentais para alinhar expectativas, compreender limitações técnicas e garantir que o design system estivesse preparado para uma futura codificação.

Criação da identidade do design system

Sabendo da importância de engajar toda a equipe no projeto, propus uma gincana para escolher o nome do design system. O setor Labs, responsável pelos produtos digitais e desenvolvimento, foi convidado a inventar nomes criativos. Após a coleta das sugestões, o time de design de produto selecionou os melhores. O nome vencedor foi Cobi, que refletia a identidade da Cobasi e criava uma conexão direta com a marca. Essa atividade não apenas nos forneceu um nome, mas também aumentou o envolvimento e o senso de propriedade da equipe em relação ao design system.

Atualização e criação de componentes

Com base no levantamento inicial, iniciei o processo de atualizar os componentes existentes e criar novos. Estabeleci os fundamentos do design (design tokens), incluindo paleta de cores, tipografia, espaçamentos, ícones e estilos de bordas. Esses elementos serviram como base para todos os componentes, garantindo consistência visual.

Mantendo-me atualizado com as últimas ferramentas, apliquei o uso de variáveis no Figma um dia após o lançamento do recurso na Config 2023. Isso permitiu maior flexibilidade e eficiência na gestão dos estilos e componentes.

Utilizando os recursos avançados do Figma, como Componentes, Variantes, Auto Layout e as novas Variáveis, construí uma biblioteca de componentes reutilizáveis e flexíveis. Comecei pelos elementos mais básicos, como botões, inputs e checkboxes, avançando para componentes mais complexos como cards, modais e listas, e desenvolvendo templates de páginas e seções inteiras.

Documentação e guia de uso

Entendendo que um design system eficaz depende de uma boa documentação, dediquei esforços para torná-lo acessível e compreensível para todos os envolvidos. Desenvolvi uma documentação detalhada dentro do Figma, onde cada componente foi acompanhado de orientações de uso, variações disponíveis e exemplos práticos. Também criei um guia online acessível a toda a equipe, detalhando os princípios do design system, os componentes disponíveis e as diretrizes de uso.

Proposta de Design Ops

Reconhecendo a importância de otimizar processos e melhorar a colaboração entre equipes, propus a implementação de práticas de Design Ops na organização. Apresentei os benefícios que essa abordagem traria, como maior eficiência, alinhamento entre times e melhor gestão de recursos. No entanto, até o final da minha atuação como especialista, essa iniciativa não havia sido implementada, principalmente devido ao cancelamento do desenvolvimento do design system.

Interação com a equipe de desenvolvimento

Mesmo com o desenvolvimento despriorizado, mantive um diálogo constante com o coordenador de desenvolvimento. Essas conversas permitiram:

• Alinhamento técnico: discutir como os componentes poderiam ser implementados no futuro, considerando as tecnologias utilizadas pela equipe.
• Feedback recíproco: trocar ideias sobre possíveis desafios na implementação e receber insights que ajudaram a refinar os componentes e a documentação.

Essa colaboração foi essencial para garantir que, quando o desenvolvimento fosse retomado, o design system estaria alinhado com as necessidades técnicas da equipe.

Resultados e impacto

Apesar da despriorização do desenvolvimento, o trabalho resultou em um design system sólido dentro do Figma, pronto para ser utilizado pelos designers e preparado para futura implementação.

• Engajamento da equipe: a gincana para a escolha do nome “Cobi” fomentou o envolvimento dos times, criando um senso de pertencimento e entusiasmo em relação ao design system.
• Consistência visual interna: os designers passaram a ter uma referência unificada, reduzindo a recriação de componentes e aumentando a consistência nos projetos.
• Eficiência no design: a disponibilidade de uma biblioteca bem estruturada economizou tempo e recursos, permitindo que os designers focassem em soluções mais estratégicas.
• Preparação para o futuro: mesmo sem a codificação imediata, o design system estabeleceu uma base que poderá ser aproveitada quando o desenvolvimento for retomado.

[confirmar: a data do case é 2022 (“Em 2022… convidado no final daquele ano… durante um ano de trabalho”). O perfil diz “Design System Specialist (2023–2024)” e o Mapa de Habilidades diz “Cobasi 2022–2024”. Escolha uma data.] [confirmar: o perfil diz que o COBI tem “componentes para todas as squads do Labs”; o case diz que a codificação foi cancelada. Confirmar o alcance real.]

Aprendizados e reflexões

Este projeto reforçou a importância da persistência e da visão de longo prazo em iniciativas como a construção de um design system.

• Colaboração e engajamento: a gincana para a escolha do nome mostrou como atividades colaborativas podem aumentar o envolvimento da equipe e fortalecer a cultura organizacional.
• Adaptação às circunstâncias: a despriorização do projeto exigiu flexibilidade e foco em áreas onde eu poderia agregar mais valor, como a documentação e a melhoria dos processos internos de design.
• Inovação contínua: a implementação rápida das variáveis no Figma demonstrou a importância de estar atualizado com novas ferramentas para melhorar a eficiência e a qualidade do trabalho.
• Desafios na implementação de Design Ops: propor mudanças organizacionais como o Design Ops requer tempo e alinhamento estratégico, especialmente em empresas em rápido crescimento.

Conclusão

Participar da criação do Cobi Design System foi uma experiência enriquecedora, apesar dos desafios enfrentados. A organização da gincana e a escolha do nome “Cobi” foram momentos marcantes que reforçaram o espírito de equipe e o compromisso com a inovação.

Embora o desenvolvimento tenha sido despriorizado, o trabalho realizado estabeleceu uma base sólida para futuras iniciativas e melhorou significativamente os processos internos de design. Acredito que as fundações estabelecidas e as documentações criadas servirão como alicerces quando a empresa decidir retomar o desenvolvimento do design system.

Desafio

A Cobasi crescia rápido, com vários produtos digitais e uma equipe de design em expansão. O guia de estilos existente era limitado, sem padrões claros nem documentação. Os designers recriavam componentes, e os desenvolvedores tinham dificuldade para manter a consistência entre os produtos.

Entrega

• Tokens de design (cores, tipografia, espaçamentos, ícones e bordas) e uma biblioteca de componentes no Figma, do básico (botões, inputs) aos complexos (cards, modais, listas).
• Documentação de uso dentro do Figma e um guia online para toda a equipe.
• Proposta de governança e de Design Ops para manter o sistema vivo.

Resultado

Biblioteca usada por 15 a 20 designers, com menos componentes recriados. A codificação foi despriorizada pela empresa, então o sistema ficou pronto no Figma para ser implementado depois. [confirmar: dado de adoção]