e-learning · ui/ux

English OnBoard

Plataforma de e-learning de inglês para comissários de bordo: trilhas em módulos e unidades, EXP, ranking e o Re-check for Cabin Crew, um simulado cronometrado com áudio, resultado e gabarito.

papel
UI/UX: jornada, fluxos e telas
status
jornada e telas no Figma
disciplinas
interface
Mockup do English OnBoard: questão do Re-check no navegador, home com o mascote pinguim no celular e cartão de gabarito com 36 de 40 acertos
Mockup de apresentação com as telas do Figma; o cartão de gabarito foi redesenhado para a composição. As telas do Figma, com avatar e e-mail desfocados, estão em # interface.

# o produto

Inglês para quem trabalha a bordo. O aluno avança por seções, módulos e unidades, como o Module 1, Basic English Skills for Cabin Crew, separados em trilhas como Aviação e Cotidiano.

Cada lição rende EXP, as conquistas ficam no perfil e o ranking mostra os alunos pela quantidade de conquistas. Um pinguim comissário acompanha a home e o fim de cada lição.

# a jornada

Antes das telas, o mapa do produto em três frentes. A landing page tem hero, prova de qualidade com feedbacks, conteúdo oferecido, missão e FAQ, com chamadas para contratação.

O dashboard do aluno reúne o conteúdo progressivo, perfil e conquistas, o quiz misto e o ranking. O dashboard do admin cuida do controle de conteúdo, das aulas ao vivo, da carteira com pagamento e saque automatizados e do acompanhamento de alunos e contratantes.

# re-check for cabin crew

O recorte deste case. A home autenticada ganha um botão novo, Recheck for Cabin Crew. Antes da prova vem o billing: o Re-check faz parte do Premium ou pode ser contratado sozinho, e aí libera a prova só com o pagamento.

Depois vêm as regras (prova timada, número de questões e áudio), as questões, o resultado com tempo e acurácia e o gabarito. O fluxo foi desenhado para celular, com barra superior, e para desktop, com menu lateral.

# decisões de interface

Cada alternativa tem o próprio botão de ouvir: o treino é de compreensão oral, não só de leitura. Tempo e número da questão ficam sempre à vista, e a escolha marca o card inteiro na cor da marca.

No gabarito, as questões aparecem numeradas, com acertos em verde e erros em laranja, para o aluno achar o que revisar sem ler a prova de novo.

# sobre as capturas

Exportadas do Figma do projeto. A foto do avatar e o e-mail de exemplo foram desfocados. A questão que pede para descrever uma imagem usa uma foto de terceiros e ficou de fora, e o texto das regras ainda é provisório no arquivo.

# demonstração

Um recorte do Re-check com as duas primeiras questões do Figma. Ouça cada alternativa em inglês, escolha a resposta e confira o resultado e o gabarito.

english-onboard / re-checkProtótipo · gabarito definido para a demonstração
Re-check for Cabin Crew

Re-check for Cabin Crew

Duas perguntas de entrevista para comissários de bordo. Escolha a resposta mais profissional: é ela que a banca espera ouvir.

  • Será timado
  • 2 questões
  • Ouvir

Faz o simulado até o resultado. Depois eu te digo o que reparar.

# interface

Capturas e exportações originais. Abra uma para ver em tamanho real e passar pelas outras sem fechar.

  • Desktop: questão com a alternativa selecionada
  • Desktop: planos, Re-check no Premium ou avulso
  • Desktop: regras (texto provisório no Figma)
  • Celular: início, planos e regras
  • Celular: questão, resultado e gabarito

Quer algo assim no seu produto?

Me chama no LinkedIn e me conta o que você está construindo.

atalhos de teclado
j k
próximo / anterior projeto
enter
abrir o projeto selecionado
esc
voltar para a lista (dentro de um case)
/
terminal na home, busca em componentes
1–5 + enter
escolhe uma resposta no terminal
i
modo inspeção: caixas, grade e medidas
?
esta lista
atalhos de uma tecla