Contexto

A empresa estava passando por uma mudança de identidade visual, com produtos inconsistentes e sem um padrão claro entre interfaces e comunicação.

Desafio

Existia um design system anterior, mas ele era incompleto, sem padronização de iconografia, sem definição clara de voz e com lacunas que dificultavam sua reutilização. Então tive que reconstruir tudo:

1. Unificado a identidade visual em todos os canais digitais (WEB e Mobile).

2. Traduzindo um manual de marca impresso para um guia digital aplicável.

3. Criando bibliotecas reutilizáveis para acelerar o desenvolvimento front-end.

4. Mantendo o projeto em sigilo até o lançamento oficial.

5. Gerenciando prazos para coincidir com a data de lançamento definida.

Decisão

Avaliei a possibilidade de evoluir o sistema existente, mas optei por reconstruir do zero para garantir consistência, clareza e escalabilidade.

2. Definição de cores

• Comparativo entre paleta antiga e a nova.

• Adaptação para padrões digitais (contraste, acessibilidade e consistência).

• Validação das cores principais e secundárias com marketing.

Antiga Paleta de cores

Único guia de cores que existia da paleta de cores anterior, tive que elaborar um novo guia com base na nova marca do zero.

Processo

1. Ação

Estruturei um design system completo, definindo tipografia, iconografia e regras visuais, além de refazer a identidade dos produtos já existentes.

Trabalhei em conjunto com o time de marketing para alinhar o tom de voz e garantir consistência entre produto e comunicação, participando também da construção do site institucional em parceria com uma empresa externa.

3. Tipografia

• Escolha da nova fonte conforme diretrizes do rebranding.

• Criação de tabela tipográfica com tamanhos, pesos (bold, italic) e aplicações.

• Testes de legibilidade em diferentes dispositivos.

Nova Paleta de cores

Agora um guia completo, onde estou prevendo o uso de 3 cores principais, definido no guia da marca, cores neutras para texto e background e cores de alerta de sistema, que geralmente é padrão.

Novo guia Tipográfico

Com o novo guia tipográfico, previ as possível hierarquia entre as fontes, definindo regras claras de como funcionaria os tipos nos produtos digitais.

Guia Tipográfico anterior.

Sim, o guia tipográfico anterior não era muito exigente, mas funcionava bem até onde chegou.

4. Iconografia

Revisão do novo set de ícones. (não existia uma anterior)

Definição de regras de uso por categoria e função.

Validação com marketing para garantir coerência visual.

5. Biblioteca de elementos

• Redesenho de componentes herdados da identidade anterior.

• Criação de novos elementos: botões, modais, cabeçalhos, rodapés, efeitos (sombras, espaçamentos etc.).

• Documentação detalhada para uso no front-end.

O processo envolveu equilibrar consistência visual com limitações técnicas dos produtos já em produção, além de alinhar diferentes áreas da empresa.

Complexidade

Resultado

O novo sistema trouxe mais consistência entre os produtos, facilitou a evolução das interfaces e criou uma base mais sólida para escalar o design dentro da empresa.

O que eu teria feito diferente hoje?

Hoje, envolveria engenharia desde o início e estruturaria o design system já com uma biblioteca de componentes reutilizáveis (ex: React), garantindo maior consistência entre design e desenvolvimento e reduzindo retrabalho.