ADI GLOBAL · 2025 . dti Digital
Uma análise completa do aplicativo ADI Global para identificar barreiras, elevar a legibilidade e tornar fluxos críticos mais inclusivos.
MEU PAPEL
Product Designer (estágio)
CONTEXTO
A ADI
ADI Global Distribution é um distribuidor atacadista de produtos de segurança, pró-AV e de baixa tensão para empreiteiros, instaladores e revendedores.
- Possui mais de 100 lojas nos Estados Unidos que atendem o país inteiro.
- A empresa possui mais de 190 locais na América do Norte, Porto Rico, Europa, Oriente Médio e África.
- O App está disponível nos Estados Unidos, Porto Rico, Canadá, Reino Unido, França, Espanha e Holanda.
CONTEXTO
O desafio
Recebemos um pedido direto de um stakeholder: avaliar a acessibilidade do aplicativo. A demanda veio de feedbacks reais de usuários — sinais de que algo na experiência estava criando barreiras. Sem roteiro predefinido, partimos de uma imersão no app como usuário. Três problemas se destacaram de imediato e orientaram toda a análise que veio a seguir.
PROCESSO
Como chegamos lá
Para a realizar a análise, foram utilizados plugins o Figma:
- Stark
- Contrast
- Simpe WCAG
Todos foram utilizados nas análises das telas do aplicativo levando em consideração a nota alvo AAA.
E também, fomos atrás dos dados referentes aos nossos usuários:
20,8% do nosso público tem entre 35 e 44 anos, e 31,1% tem entre 44 e 54 anos. Considerando que, com o avanço da idade, há uma maior probabilidade de desenvolver algum tipo de deficiência visual, e com base nas pontuações obtidas durante a análise, identificamos certas áreas para melhoria delineadas no documento final.
SOLUÇÃO
Análises e Soluções
Com os dados demográficos em mãos e as ferramentas configuradas, iniciamos a análise tela por tela, avaliando contraste, tipografia, áreas de toque e simulações de deficiência visual. O app partia de uma nota abaixo de A na WCAG — o que significa que falhas básicas de acessibilidade estavam presentes em fluxos críticos como checkout e seleção de endereço.
Três categorias concentravam os problemas mais impactantes:
Tipografia
A fonte Nunito Sans, por ter terminações arredondadas, prejudica a legibilidade para usuários com baixa visão. A recomendação foi substituí-la por Inter ou Roboto, fontes com traçado mais reto e melhor desempenho em simulações de visão embaçada e ghosting. Além disso, textos em 12px foram elevados para 14px, melhorando a leitura em componentes de formulário e resumo de pedido.
Contraste e Cor
O cinza #666666 usado em textos gerais não atingia a proporção mínima de 7:1 exigida pelo nível AAA. A solução foi substituí-lo por #252525, mantendo o cinza original apenas nos placeholders de campos não preenchidos. O stroke dos campos (#DDDDDD) também foi ajustado para #666666, já que a versão anterior apresentava ratio de apenas 1.36:1. O estado de erro, que usava vermelho sobre fundo colorido, foi corrigido para fundo branco, elevando o contraste de 4.49 para 7.05.
Área de toque
Botões e elementos interativos estavam abaixo dos 44x44px recomendados pela Apple e dos 48x48dp do Material Design. Os componentes foram padronizados, o espaçamento entre eles ajustado para 24px, e a área clicável dos endereços na lista foi expandida — antes, o usuário precisava acertar exatamente o círculo de seleção.
Além dessas três frentes, validamos positivamente a busca por voz, a compatibilidade com leitores de tela TalkBack e VoiceOver, e identificamos gaps de texto alternativo em imagens e botões, que foram documentados e endereçados na entrega.
O resultado foi uma evolução de uma nota abaixo de A para AAA na WCAG — implementado em produção para mais de 200 mil usuários ativos nos mercados dos EUA, Reino Unido, França e Holanda.
IMPACTO
Resultados
VAMOS CONVERSAR