Nova tela de aula

Contexto

A Alura é uma escola de tecnologia, e a tela de aula é onde ela cumpre sua promessa, uma aula de cada vez. Mudar essa tela significa mudar a experiência central de estudo de milhares de estudantes todos os dias.

Este case cobre toda a jornada:

• o diagnóstico quantitativo inicial, em setembro de 2024
• ideação, benchmarking e princípios de leitura
• o relançamento junto com o rebranding, em maio de 2026

Três princípios

O objetivo foi o mesmo do começo ao fim: aprender no próprio ritmo, estudar sem esforço e estudar sem distrações.

• No próprio ritmo: o estudante decide quando e em qual formato estudar.
• Sem esforço físico: reduzir atritos visuais, cognitivos e de interação.
• Sem distrações: manter na tela apenas o essencial.

Antes de redesenhar, ouvir

Toda mudança precisava partir de um diagnóstico honesto. Escolhemos o UMUX-Lite como termômetro por ser direto, comparável e leve o bastante para rodar dentro do fluxo real do estudante. Ele usa duas afirmações:

• "Esta tela me permite realizar minhas tarefas com eficiência"
• "Esta tela é fácil de usar"

Somamos a ele uma captura qualitativa complementar. Por que o UMUX-Lite:

• simplicidade
• se aplica a qualquer produto digital
• forte correlação com SUS e NPS
• foco em usabilidade

Resultado quantitativo

• 81,29 — resultado UMUX-Lite da tela antiga convertido para a escala SUS
• 68 — média de referência do mercado no SUS
• Nota A — posição da tela antiga na curva de Sauro/Lewis

A tela antiga já estava acima da média, então a base era sólida. O redesign precisava elevá-la, não reconstruí-la do zero.

Resultado qualitativo

Feedbacks dos estudantes, agrupados por tema:

1. UI e interface: ajustes visuais e hierarquia mais clara.
2. Botão de interação: estados, contraste e prioridade visual.
3. Interação com a Luri (IA): o quanto a assistente de IA é visível e convidativa.
4. Telas de diferentes tamanhos: comportamento responsivo inconsistente.
5. Menu lateral: precisa ser reorganizado e reposicionado.
6. Player de vídeo: controle, foco e integração com o conteúdo.
7. Ajustes e reposicionamentos: elementos de comando no lugar errado.
8. Design visual: uma interface datada, que reduz a percepção de qualidade e confiança.

Leitura da tela antiga

Uma avaliação da tela de aula antes do redesign.

Principais dores

• excesso de informação
• organização do conteúdo
• baixo contraste, principalmente no modo escuro

Insights

• O conteúdo deve ser o elemento principal.
• Reduzir distrações.
• Melhorar a disposição de todos os elementos.

Benchmarking

O que o mercado faz dentro da sala de aula. Analisamos salas de aula, players e camadas de interação em produtos variados, da educação formal ao conteúdo aberto e de plataformas generalistas às focadas em tecnologia: DevMedia, Tera, Udemy, ULife, YouTube, Coursera, Rocketseat, DIO, Tribo, Conquer e Bacharel.

Você não muda o comportamento das pessoas… você projeta a partir dele.

— Jakob Nielsen, sobre os padrões de leitura de leitores ocidentais

Padrões de leitura

Pesquisas de eye-tracking mostram que leitores ocidentais percorrem a página em padrões previsíveis e dedicam muito mais atenção ao lado esquerdo. Essa evidência justificou levar a aula para a área visual mais valiosa.

Do lançamento à reinvenção

O trabalho de 2024 ficou visualmente defasado com o rebranding da Alura, lançado em 25 de maio de 2026, o mesmo dia em que a tela de aula reformulada entrou no ar. Revisitamos a tela: os princípios ficaram e a linguagem visual foi renovada.

O conteúdo principal vai para a esquerda

Antes · versão antiga

O menu ficava à esquerda, na área mais valiosa, e o conteúdo principal era empurrado para a direita.

Depois · rebranding 2026

O conteúdo principal fica à esquerda, onde o olhar pousa primeiro. O menu e o suporte vão para a direita e ficam discretos até serem necessários, já com o novo design system aplicado.

O que mudou na interface

1. Hierarquia invertida: conteúdo à esquerda; menus e suporte à direita.
2. Menos ruído visual: só o essencial fica visível.
3. Luri (IA) reposicionada: uma presença clara, mas não invasiva.
4. Play e leitura: o player de vídeo e o texto ganham o mesmo peso.
5. Responsividade de verdade: comportamento consistente em todos os tamanhos de tela.

Solução

Uma tela mais moderna, mais limpa e mais alinhada ao estudante.

Resultado

O redesign leva os três princípios do início para a nova identidade da Alura.

Mais espaço para a aula. Menos espaço para tudo o que não é ela.

• Aprender no próprio ritmo: controles claros e navegação previsível.
• Estudar sem esforço físico: menos cliques e menos deslocamento do olhar.
• Estudar sem distrações: uma interface silenciosa, com foco no que importa.

O que vamos continuar medindo

A nova tela nasce instrumentada. Cada princípio tem uma métrica para acompanhar o impacto real na jornada do estudante.

• UMUX-Lite recorrente: repetir a pesquisa para comparar versões.
• Conclusão de aulas: buscar uma taxa de conclusão maior.
• Retorno em 7/30 dias: retenção e hábito de estudo.
• Tempo até a primeira interação: menos atrito antes de começar a estudar.
• Uso da Luri (IA): adoção e uso recorrente da assistente.
• Feedback qualitativo: um ciclo contínuo pelo campo de texto aberto.

Próximos passos

1. Comparar versões: testes A/B e coortes de antes e depois.
2. Priorização: ordenar as dores por impacto e esforço.
3. Monitoramento: instrumentar e acompanhar as métricas.
4. Feedback contínuo: ciclos recorrentes com estudantes.

Redesign não é redecoração… é reaprender o produto junto com o usuário.

Reflexão final

Este projeto foi, ao mesmo tempo, sobre UI, pesquisa, estratégia e marca. Cada decisão partiu de um dado, de um princípio ou de um comportamento observado. O critério nunca foi "ficou mais bonito". Foi "o estudante consegue aprender melhor aqui?"