Pular para o conteúdo
EdTech · 2024

Plataforma de ensino online Aladia

Plataforma italiana de EdTech para cursos em turma, aulas ao vivo e monetização para criadores, no ar em aladia.io com mais de 2.000 alunos cadastrados.

Função
Engenheiro frontend
Cliente
Aladia S.r.l. (Itália)
Ano
2024
Stack
  • React
  • EdTech
  • Stripe
  • OAuth
Plataforma de ensino online Aladia

O briefing

A Aladia é uma plataforma italiana de ensino online com cursos em turma, aulas ao vivo, criação de cursos com ajuda de IA e monetização para criadores. A direção, o design e a arquitetura da plataforma ficaram com a equipe de produto da Aladia. Eu construí as telas de frontend que alunos e instrutores usam, cerca de 800 horas de engenharia. A plataforma está no ar em aladia.io com mais de 2.000 alunos cadastrados.

A página de detalhes do curso
Lista de capítulos com o estado de bloqueio de cada aula e as datas das aulas ao vivo, sobre um vídeo de destaque, com preço e matrícula na mesma tela

Uma página com estados demais

A página de detalhes do curso, aí em cima, foi onde eu passei mais tempo, porque ela precisa mostrar várias coisas ao mesmo tempo sem confundir ninguém.

Repare na barra lateral. O capítulo 2 está aberto e em andamento: as duas primeiras aulas já terminaram, e as aulas 3 a 6 estão marcadas para datas e horários específicos. O capítulo 3 está bloqueado. Cada linha tem o seu próprio estado: disponível para assistir, encerrada, agendada para uma data ou bloqueada até a matrícula. Enquanto isso, o rodapé mostra avaliação, idioma, número de vagas, quantidade de aulas ao vivo, preço, desconto e uma contagem regressiva.

Isso é coisa de curso em turma. Um curso sob demanda é uma lista de vídeos, todos disponíveis, todos no mesmo estado. Um curso em turma tem calendário, então a mesma página precisa atender quem ainda está decidindo se vai se matricular, o aluno que procura a aula de hoje à noite e quem perdeu a aula 2 e quer a gravação. Deixar os estados de bloqueio e de agenda legíveis num relance levou mais iterações do que o player de vídeo, o chat ou o checkout.

O checkout dentro da decisão

O checkout do Stripe fica dentro da própria experiência de detalhes do curso, e não numa página separada. Quem está pesando um curso contra o preço e a data de início não deveria perder esse contexto indo para uma rota de checkout e, se voltar, ter que refazer todo o raciocínio.

A criação do lado do instrutor

Construí os dois fluxos de criação: a configuração de cursos sob demanda, com upload de conteúdo e organização dos capítulos, e o agendamento de aulas ao vivo.

São esses fluxos que decidem se o catálogo cresce. Se criar um curso é sofrido para os instrutores, a plataforma fica sem conteúdo, e nenhum capricho do lado do aluno resolve um marketplace vazio. O fluxo de aula ao vivo é o mais difícil dos dois, porque agendar tem consequências reais: um instrutor que erra o fuso horário deixa uma turma inteira na mão.

O que atravessa os módulos

Reprodução de mídia, login com Google OAuth e chat em tempo real, além do trabalho de responsividade em todos os módulos que ficaram comigo. OAuth e pagamento são os dois lugares onde um bug não piora a experiência: encerra a sessão. Por isso os dois receberam mais tempo de teste do que a quantidade de código sugere.

Galeria

Plataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screenPlataforma de ensino online Aladia screen
Acompanhe

Compartilho projetos, experimentos e aprendizados pelo caminho.

Vídeos novos no YouTube, notas curtas no X. Cada post aqui leva aos dois.

YouTube