Rebranding do Hero: alinhando marca e acessibilidade em um Design System multi-marca.

Contexto — situação anterior

O ecossistema da plataforma sofria com uma arquitetura de front-end fragmentada em silos (Paciente vs. Backoffice Médico). Componentes essenciais não podiam ser instanciados entre os módulos, forçando a engenharia a recriar estruturas do zero, inflando o tempo de desenvolvimento de novas features em até uma sprint.

Paralelamente, o marketing lançou um rebranding global da marca. O desafio era utilizar essa demanda de atualização visual como alavanca para executar uma reestruturação técnica profunda no Design System, unificando a fundação do produto para estancar a dívida técnica e o desperdício operacional.

Estratégia — execução & alinhamento arquitetural

A modernização não podia paralisar o roadmap de produto da empresa. A transição precisava acontecer com o sistema operando em tempo real. Para garantir a adoção pela engenharia sem atrito, estruturei a execução em três pilares:

Benchmarking estrutural

Liderei o benchmarking, com apoio de outro designer do time na busca de referências. Analisamos sistemas robustos não pela estética, mas pela arquitetura de tokens semânticos — o objetivo era extrair a lógica de theming que permitiria alternar entre as marcas Conexa e Psicologia Viva na mesma base de código.

Acessibilidade como fundação

A conformidade WCAG AA foi injetada no DNA dos Basic Components. Contrastes, estados de foco e áreas de clique foram resolvidos no nível do componente pai, blindando a engenharia de cometer erros na montagem das telas.

Negociação de viabilidade

Eliminei brainstorms e conduzi alinhamentos diretos com os Tech Leads. Garantimos que a nova estrutura de variáveis do Figma refletisse o modelo mental do código, permitindo transição gradual sem quebrar a interface em produção.

Demonstração do sistema

Anatomia & Contraste

Componentes reais renderizados em código — não capturas de tela — usando a mesma base de botão do Hero DS, testada em anatomia, estados e contraste de acessibilidade entre as duas marcas.

-1 Sprint

Aceleração do ciclo de entrega: redução de esforço de handoff de fluxos para o backoffice

100%

Adoção cross-product: unificação da base de componentes, mitigando repositórios duplicados

-30%

Redução de bugs técnicos: queda nos bugs de interface reportados após a refatoração

+80%

Acessibilidade nativa: ganho de conformidade com a base WCAG AA injetada na fundação

O que dizem sobre o impacto

“A implementação do Design System reduziu drasticamente o tempo de handoff e a dívida técnica. Agora, as entregas são mais consistentes e o time consegue focar na evolução técnica da plataforma, não apenas em ajustar componentes.”

“Com um sistema escalável e documentado, nossa velocidade de prototipação saltou de nível. Isso nos devolveu o tempo necessário para focar no que realmente importa: discovery, testes com usuários e a validação de hipóteses antes do desenvolvimento.”

Aprendizados

• Acessibilidade tratada como requisito, não como camada final.
• Documentação abrangente reduz ruído no handoff design-engenharia.
• Temas extensíveis garantem customização sem quebrar a base.
• Padronização sustenta escalabilidade em organizações complexas.