Unificar e padronizar o sistema Saffira

A Aton Engenharia atua em engenharia e telecomunicações desde 1988. O Saffira é um software que monitora grandes extensões de floresta em tempo real, por vídeo, para prevenir incêndios — do primeiro foco de fumaça ao avanço das chamas.

Quando cheguei, o produto não tinha um design system se sustentasse. As telas não guardavam consistência visual nem de componentes, por isso uma mesma tela do sistema parecia pertencer a sistemas diferentes. Faltava atualização de acessibilidade e a hierarquia do dark mode não era respeitada.

Para o usuário do Saffira — alguém que monitora floresta para agir antes que um foco de fumaça vire incêndio —, a interface tinha três problemas que competiam com a sua atenção: informação sem hierarquia, telas sobrecarregadas de dados e ausência de acessibilidade para tamanhos de tela diferentes.

Em um produto cuja função é perceber um sinal a tempo, uma tela que não organiza o que importa pode custar tempo de identificação do incêndio e se torna atrito no pior momento. Era isso que o sistema precisava resolver e não apenas uniformizar cores.

Evoluir o que funcionava e criar padrões

Diante de um sistema inconsistente, a tentação é começar do zero: apagar tudo e reconstruir. Mas fiz o contrário, mapeei o que já existia, identifiquei os poucos padrões presentes e preservei os pontos já consolidados que podiam ser aprimorados. A partir dessa base, construí o restante: novas hierarquias de tipografia, de informação e de cor. Padronização de componentes, documentação de regras e boas práticas.

Sobre essa base, defini o sistema: hierarquia de tipografia, organização da informação e paleta, com o dark mode passando a obedecer a uma hierarquia e a acessibilidade tratada como requisito intríseco ao produto.

A entrega foi minha, de ponta a ponta: componentes, tipografia, cores, padrões visuais e as regras de uso de cada componente — quando usar, como usar, o que evitar —, além das boas práticas, dos testes e da auditoria do que foi aplicado.

O sistema também destravou o redesenho de fluxos que sofriam o mesmo problema. Onde havia excesso de informação numa tela só, reorganizei o conteúdo por hierarquia e abri espaço para o que faltava — como visualizações de dados e gráficos —, de modo que o operador encontre o que precisa de maneira evidente e rápida.

O efeito apareceu de dois lados. Do lado do produto, menos divergência e mais consistência visual entre as telas. Do lado de quem constrói, os desenvolvedores passaram a entregar mais rápido: com o sistema delimitado e concreto, havia algo definido de onde partir, em vez de decidir cada padrão do zero a cada tela.