O Banco de Questões é uma plataforma essencial para estudantes que se preparam para exames competitivos, permitindo resolver questões de diversas disciplinas, acompanhar o desempenho e acessar explicações detalhadas em texto e vídeo.

Antes do redesign, a plataforma apresentava dificuldades de navegação, baixa retenção de conteúdo e problemas na versão mobile, prejudicando a experiência do usuário. Meu trabalho envolveu otimizar essas questões, resultando em uma melhoria de 35% no tempo de acesso aos filtros, 42% a mais nas visualizações dos vídeos explicativos e uma redução de 50% nos cliques de frustração.

Contexto

O Banco de Questões é fundamental para que os candidatos pratiquem e monitorem seu progresso. Contudo, análises quantitativas e qualitativas apontaram problemas de usabilidade que prejudicavam o aprendizado e a retenção dos usuários.

Desafios identificados

• Dificuldades de navegação: Filtros e configurações essenciais eram difíceis de acessar.

• Baixo engajamento com vídeos: Muitos usuários não interagiam com os vídeos explicativos.

• Problemas no mobile: A versão mobile tinha problemas de rolagem, com 50% dos usuários não indo além da metade da página.

• Frustração do usuário: Muitos cliques em elementos não interativos, o que gerava frustração.

Para resolver estes problemas, eu liderei um redesign estratégico baseado em dados reais do Clarity, avaliações heurísticas e feedback direto de usuários.

1. Diagnóstico inicial

Antes de implementar qualquer solução, fiz uma análise detalhada utilizando diversos métodos para identificar os pontos críticos e as oportunidades de melhoria.

• Avaliação heurística: Identifiquei problemas de consistência, hierarquia visual e acessibilidade, além de dificuldades em interagir com os filtros e o feedback das questões. O layout tinha elementos redundantes, navegação confusa e falta de padronização.

• Mapas de calor: Revelaram muitos cliques em elementos não interativos, o que indicava que os usuários esperavam que aqueles itens tivessem alguma função. No mobile, a interação com o conteúdo abaixo da dobra da página era muito baixa.

• Gravações de sessões: Muitos usuários tinham dificuldades para encontrar funções essenciais, frequentemente retornando a telas anteriores, o que indicava uma navegação não intuitiva.

• Reclamações de suporte: Muitos usuários mencionaram dificuldades em localizar filtros, entender o feedback e navegar com eficiência.

Imagem 1: design antigo do banco de questões

Esses dados me guiaram a um redesenho estratégico, fundamentado em evidências reais e alinhado às necessidades dos usuários.

2. Melhorias implementadas e impacto

Reestruturação da navegação

• Problema:

  • Os filtros estavam fixos no topo da tela em todos os dispositivos, forçando os usuários a rolar para ajustar as configurações.

  • A usabilidade estava comprometida, já que qualquer alteração interrompia o fluxo de navegação.

  • No mobile, essa estrutura tornava a navegação ainda mais desconfortável devido ao espaço limitado na tela.

• Solução:

  • Desktop: Mantivemos os filtros no topo, mas adicionamos um menu lateral flutuante, permitindo que os usuários ajustassem os filtros sem precisar rolar para cima.

  • Mobile: Movemos os filtros para um menu fixo na parte inferior da tela, garantindo acesso rápido sem prejudicar a experiência de leitura.

  • Opção de ocultar filtros: No desktop, os usuários agora podem ocultar os filtros após a seleção, maximizando o espaço disponível na tela.

• Impacto:

  • Redução de 35% no tempo necessário para acessar e ajustar os filtros.

  • Menos cliques frustrados (rage clicks), indicando uma navegação mais suave.

  • Aumento da rolagem no mobile, sugerindo uma experiência mais fluida e sem barreiras.

  • Queda significativa nas reclamações de suporte relacionadas aos filtros.

Vídeo 1: visão expandida do novo menu lateral flutuante

3. Aumento de engajamento com vídeos explicativos

• Problema:

  • Vídeos explicativos eram mostrados em modais em tela cheia, bloqueando todas as outras interações.

  • Os usuários perdiam de vista a questão respondida, filtros e outros conteúdos ao assistirem ao vídeo.

  • O formato modal também impedia anotações ou referência simultânea a outros conteúdos.

• Solução:

  • Os vídeos não são mais exibidos em modais. Agora, carregam abaixo da caixa de questões, permitindo interação contínua.

  • Os usuários podem visualizar a questão respondida, fazer anotações e ajustar filtros enquanto assistem.

  • O fluxo tornou-se mais suave, eliminando o acionamento repetitivo de modais.

• Impacto:

  • Aumento de 42% nas visualizações de vídeos, indicando maior engajamento.

  • 21% mais estudantes revisitando perguntas após assistir ao vídeo, mostrando melhor absorção de conteúdo.

  • Redução nos cliques de frustração conforme reportado pelo Clarity, confirmando uma experiência mais tranquila.

Vídeo 2: abertura do vídeo explicativo abaixo da resposta da questão

4. Melhor uso do espaço e mais engajamento no mobile

• Problema:

  • No mobile, 50% dos usuários não rolavam além do ponto médio, perdendo informações essenciais como explicações e feedback.

  • A interface não indicava visualmente mais conteúdo abaixo, levando a uma navegação prematura de abandono.

  • Filtros fixos no topo reduziram o espaço utilizável e empurraram conteúdo importante para baixo.

• Solução:

  • Reposicionamento dos filtros: Os filtros foram movidos para um menu fixo na parte inferior, permitindo ajustes sem perder a visualização do conteúdo atual.

  • Reestruturação da hierarquia visual: Conteúdos chave foram priorizados dentro dos 30% superiores da tela para encorajar a rolagem.

  • Melhorias na sinalização de conteúdo: Explicações e feedback foram redesenhados para maior visibilidade e percepção de valor.

• Impacto:

  • Aumento significativo na rolagem no mobile, com mais usuários acessando conteúdos cruciais.

  • Maior engajamento com explicações e feedback, aprimorando a aprendizagem.

  • Navegação mais suave, resultando em uma experiência mais intuitiva.

Vídeo 3: menu fixo na parte inferior na versão mobile

5. Redução da frustração do usuário

• Problema:

  • Muitos usuários clicaram em elementos não interativos, mostrando uma baixa indicação de ação.

  • Isso levou a cliques de raiva e aumento nas reclamações de suporte.

  • A interface carecia de feedback visual claro, reduzindo a previsibilidade.

• Solução:

  • Interatividade melhorada: Elementos interativos foram redesenhados com pistas visuais claras, como estados de hover e mudanças de cor.

  • Melhor feedback visual: Animações sutis e microinterações proporcionaram respostas imediatas às ações dos usuários.

  • Padronização de componentes: Botões e links tornaram-se visualmente distintos de elementos estáticos.

• Impacto:

  • 50% de redução nos cliques de frustração, indicando uma navegação mais intuitiva.

  • Menos reclamações ao suporte sobre elementos de interface pouco claros.

  • Melhor experiência geral do usuário, com fluxos mais suaves e previsíveis.

Imagem 2: redesenho das versões desktop e mobile

Impacto geral após 40 dias: melhor usabilidade, maior engajamento

Análise comportamental e insights do Clarity orientaram mudanças estratégicas, resultando em uma experiência mais tranquila e eficiente. A otimização da interface reduziu atritos e aumentou a interação dos estudantes com recursos essenciais.

Resultados principais

• Redução de 35% no tempo gasto procurando por configurações, graças aos filtros reorganizados e visíveis em todos os dispositivos.

• 21% mais estudantes refazendo questões após assistir ao feedback, refletindo melhor apoio para aprendizado contínuo.

• Aumento de 42% nas visualizações de vídeos, impulsionado pela remoção de modais e exibição em linha dos vídeos.

• Redução de 50% nos cliques de raiva, graças a feedbacks mais claros e interações mais responsivas.

• Aumento significativo na rolagem no mobile, garantindo acesso mais amplo ao conteúdo anteriormente ignorado.

• Maior tempo médio de sessão no Banco de Questões, sugerindo que a experiência se tornou mais envolvente.

• Queda significativa nas reclamações ao suporte sobre questões de navegação e usabilidade, validando as melhorias de design.

Imagem à esquerda (3): mapa de cliques atual, 40 dias após o lançamento. Imagem à direita (4): mapa de cliques antigo, 40 dias antes do lançamento.

O redesenho aprimorou não apenas a experiência do usuário, mas também o impacto educacional da plataforma, tornando a navegação mais intuitiva, sem descontinuidade e eficaz.