A consistência e usabilidade são elementos fundamentais para o sucesso de uma plataforma mobile. A auditoria de padrões de design é um processo essencial para garantir que a interface esteja alinhada com as diretrizes de design estabelecidas, proporcionando uma experiência coesa e eficiente para os usuários. Este artigo explora as etapas do processo de auditoria e sua implementação no time de Design Toro.

O Que é uma Auditoria de Padrões de Design?

A auditoria de padrões de design é a análise sistemática dos elementos visuais e interativos de uma plataforma para identificar inconsistências, melhorar a acessibilidade e aprimorar a experiência do usuário. Esse processo busca detectar desvios em relação ao design system Aldebaran e propor soluções para padronização e otimização.

Contexto

A Toro Investimentos foi comprada pelo Santander Brasil em 7 de junho de 2023. O Santander passou a deter indiretamente 100% do capital social da Toro Corretora e da Toro Investimentos SA. 

Detalhes da aquisição

• Em setembro de 2020, o Santander adquiriu 60% da Toro.

• Em 2023, o Santander anunciou a compra total da Toro Participações.

• O Santander concluiu a compra do restante das ações da Toro. 

A união entre Santander e Toro consolidou Belo Horizonte como um dos grandes polos financeiros do Brasil, segundo o diretor de Pessoa Física do Santander Brasil, Geraldo Rodrigues Neto.

Uma vez fazendo parte do Grupo Santander como coligada, a Toro Investimentos passou por um processo de Rebranding em 2024, abandonando a paleta roxa e passando a adotar o vermelho como cor principal da marca. Dessa forma, o Design System Aldebaran e os produtos Web e Mobile, assim como todas as comunicações relacionadas precisaram ser reformuladas.

Em Setembro de 2024 como forma de garantir a aplicação das novas diretrizes definidas para o Rebranding, surgiu a iniciativa de auditoria em padrões de interface.

Objetivos:

1. Identificar divergências em padrões de utilização de interface do Aldebaran DS

2. Avaliar possíveis melhorias em componentes utilizados no produto Toro

3. Observar possíveis oportunidades de refinamento em aspecto visual e interativo do Aldebaran DS

Outputs esperados:

1. Relatório de auditoria dos componentes utilizados na interface do App Toro

2. Propostas de melhoria para a aplicação de padrões de interação

3. Documentação dos padrões de componentização utilizados

4. Plano de ação de acordo com criticidade a ser repassado aos squads de produto

Etapas do Processo de Auditoria

1. Definição dos Critérios de Avaliação

Antes de iniciar a auditoria, é fundamental estabelecer os critérios de avaliação. Para auxiliar na definição de quais aspectos poderiam ter um maior impacto no produto final, avaliamos de forma qualitativa os feedbacks envolvendo o Rebranding, além de conversar com o time de QA para agregar os pontos levantados durante as validações em squads.

Alguns dos aspectos analisados incluem:

• Tipografia: fontes, tamanhos e espaçamento.

• Paleta de Cores: consistência e acessibilidade.

• Componentes Visuais: botões, ícones, inputs, etc.

• Padrões de Navegação: fluxos de uso e coerência.

• Acessibilidade: conformidade com diretrizes como WCAG.

2. Levantamento de Elementos de Design

O próximo passo é a coleta de dados sobre os elementos visuais e interativos da plataforma. Isso pode ser feito através de screenshots, inspeção de código e análise do design system existente.

3. Identificação de Inconsistências

Nesta etapa, compara-se os elementos coletados com as diretrizes estabelecidas, identificando inconsistências como:

• Diferenças na aplicação das cores e fontes.

• Uso incorreto de espaçamentos e tamanhos de elementos.

• Componentes repetidos ou divergentes dentro do sistema.

4. Documentação dos Problemas Encontrados

Os problemas identificados foram documentados de forma clara e organizada, incluindo:

• Capturas de tela das inconsistências.

• Descrição do problema.

• Impacto na experiência do usuário.

• Sugestão de correção.

5. Propostas de Melhoria

Com base na documentação, é possível propor soluções para unificar os elementos de design e garantir a padronização da plataforma. Isso pode incluir:

• Revisão e atualização do design system.

• Implementação de componentes reutilizáveis.

• Melhorias na documentação de diretrizes de design.

6. Validação e Implementação

Após a definição das soluções, é essencial validar as mudanças junto aos times de design e desenvolvimento. O processo de implementação deve ser monitorado para garantir que as melhorias sejam aplicadas corretamente.

Conclusão

A auditoria de padrões de design é um processo essencial para garantir a coerência e eficiência de uma plataforma mobile. Seguindo as etapas descritas, é possível identificar inconsistências, propor soluções e melhorar significativamente a experiência do usuário. Implementar auditorias regulares contribui para a evolução contínua da plataforma e para a manutenção de um design coeso e eficiente.

Benefícios da Auditoria de Padrões de Design

• Melhoria na Consistência Visual: Um design uniforme gera uma experiência mais intuitiva.

• Otimização do Tempo de Desenvolvimento: Padrões bem definidos reduzem retrabalho.

• Aprimoramento da Acessibilidade: Garantia de que todos os usuários possam utilizar a plataforma sem barreiras.

• Aumento da Satisfação do Usuário: Uma interface coesa melhora a experiência geral e a percepção de qualidade do produto.

Próximos passos:

• Apresentar proposta de padronização para times potenciais aliados no processo de manutenção

• Orientar demais times como ajudar proativamente no mapeamento de melhorias ao DS

• Monitorar a aplicação dos padrões de design pelo time e fomentar fóruns de discussão