mandala em estilo boho, com penas e circulos em tons de rosa, amarelo e azul

Beatriz Sobreira

banner verde escuro com um mockup de notebook com a tela do site do oboticario e um wireframe de alta fidelidade

Desafio

Analisar o site oficial do O Boticário em busca de problemas de usabilidade.

  • Frequência exacerbada das palavras em caixa alta
  • Repetição de conteúdos
  • Linguagem
  • Posicionamento de alguns botões
  • Agrupamento

Mudanças

Categorizadas por assunto

Acessibilidade

  • Reescrita das palavras em caixa alta do menu principal para facilitar a leitura de pessoas com alguma neurodivergência (ex: dislexia);
  • Reescrita do botão “veja mais” para “confira mais detalhes”. O verbo “ver” não inclui pessoas cegas;
  • Adição do botão para adicionar à sacola de forma permanente. Usuários menos acostumados com compras online podem não passar o mouse no card e descobrir o botão (teoria do Next Billion Users);
  • Acréscimo de ícones para ajudar na compreensão da função.

Padronização

  • Do ícone de seta para baixo quando existe um submenu a ser aberto;
  • Dos pronomes possessivos. “Minha” sai e o site para a usar apenas “sua”.

Agrupamento

  • Divisão da barra de navegação para melhor organização visual e por categoria. Dessa forma, tudo relacionado a compra está na mesma linha de leitura;
  • Eliminação do carrossel, pois ele tem as mesmas categorias que já estão na barra de navegação. Dessa forma, o usuário fica com menos opções para escolher, ou seja, menos carga cognitiva é necessária (Lei de Hick);
  • Aglutinação do Live do Boti com Bot Lovers, pois ambos são do mesmo assunto; Billion Users);
  • Remoção de algumas categorias uma vez que as mesmas já estão na barra de navegação ou como botão flutuante.

Linguagem

  • Reescrita de “Informe a sua localização” para “Informe seu CEP” para evitar que o usuário preencha com o local que está no momento e não com o lugar que os produtos deverão ser entregues;
  • Mudança do label “COMPRE AGORA” para “Adicione à sacola”, pois da forma original está muito agressivo por estar no imperativo e em caixa alta. Além disso, ao clicar no botão, o item é adicionado à sacola antes de ir para a área de pagamento. O ícone foi adicionado para reforçar o significado do botão.

Resultados esperados

gráfico simbolizando um aumento

Aumento no índice de conversões

Melhora na navegabilidade e usabilidade do site

4 pessoas conectadas em volta de um coração

Aumento no sentimento de inclusão por mais pessoas

Antes e Depois