Canal Eleva
Rolar ↓

Eleva Educação · 2021

Canal Eleva.

Cliente
Eleva Educação
Papel
Design UX/UI
Stack
Angular · Figma · Fibo DS
Período
2021

O Canal Eleva é uma plataforma online que disponibiliza videoaulas para os alunos das escolas do grupo Eleva Educação e parceiras.

Como funciona o Canal Eleva?

Para acessar, os alunos passam pelo login unificado do Portal Eleva e depois clicam no link reservado do Canal Eleva da escola onde estudam. Por exemplo: um aluno do Colégio Pensi faz login no Portal Eleva e, já logado, vê o portal educacional do Colégio Pensi com um link de acesso ao Canal Eleva.

Para os professores o procedimento é o mesmo, com um acréscimo: a possibilidade de publicar videoaulas das suas disciplinas através de um link reservado no seu perfil.

O problema

O principal problema que o Canal Eleva resolve é disponibilizar o conteúdo educacional ao longo dos anos escolares, e ser uma base de conhecimento sólida para o aluno depois da sala de aula.

Canal Eleva 1.0

A primeira versão do Canal Eleva foi muito celebrada na Eleva Educação, e foi uma conquista. Ter praticamente todos os anos escolares com aulas digitalizadas foi fundamental no momento da pandemia (Covid-19), quando a população passou por restrições sanitárias e isso impactou o modelo de aula: presencial antes, aulas remotas no início da pandemia.

P.S.: eu não trabalhei no Canal Eleva v1, só no Canal Eleva v2.

Tecnologicamente falando, a plataforma foi construída com KnockoutJS no front end e C# no back end.

Canal Eleva 2.0

O Canal Eleva foi atualizado tecnologicamente para Angular 9/10 no front end e .NET Core no back end. Além disso, a identidade visual foi atualizada, com os componentes seguindo o novo padrão definido pelo Fibo, o novo Design System criado pela Eleva Educação.

O projeto de evolução tecnológica e redesign durou 1 mês. O processo de redesign em si durou 2 semanas.

Canal Eleva 2.0 — mockup da versão mobile
Canal Eleva 2.0 — mockup da versão mobile

Qual foi o meu papel neste projeto?

Fui o designer responsável pela UX e pela UI durante o processo de redesign do Canal Eleva. Levando em conta a janela de tempo disponível e a oportunidade de evoluir a experiência do usuário, optei por começar com um processo de discovery, entrevistando alunos e professores para descobrir qual era a dor no uso do Canal Eleva.

Cinco pessoas foram entrevistadas, dos seguintes perfis: alunos (3), professores (1) e analistas de help desk que dão suporte à plataforma (1).

Output da reunião com o aluno
Output da reunião com o aluno

Discovery

O resultado foi que a plataforma atual não era tão precisa no processo de localizar o vídeo que o aluno precisava assistir — e isso tornava pouco atraente continuar estudando assistindo a vídeos em casa.

Além disso, os alunos evitavam usar o celular para assistir aos vídeos, e não tinha nada a ver com a qualidade da gravação: era a experiência de localizar o vídeo que precisavam assistir, relacionado à aula que tinham estudado naquele dia.

A partir dessa informação, foram feitas perguntas sobre os sites, plataformas e apps que os usuários mais gostam, e o motivo dessa admiração. As respostas apontaram para a facilidade de uso que as principais plataformas de streaming oferecem.

Benchmarking — análise competitiva dos principais concorrentes
Benchmarking — análise competitiva dos principais concorrentes

Wireframe + decisão

Essa etapa de discovery guiou a coleta de informações sobre os concorrentes (via benchmarking), e facilitou decidir qual caminho seguir depois de esboçar (wireframing) e discutir com os desenvolvedores a viabilidade de implementar algumas funcionalidades novas.

E em termos de decisão, escolhemos colocar a ênfase no que todo mundo veria primeiro — o próprio Canal Eleva — em vez de construir ao mesmo tempo a parte administrativa, onde os vídeos são cadastrados.

Wireframe do Canal Eleva 2.0
Wireframe do Canal Eleva 2.0

Conclusão

Como havia um Design System com componentes prontos, as ideias levantadas no papel foram rapidamente traduzidas dentro do Figma — tão rápido que foram apresentadas imediatamente aos usuários e aos stakeholders que decidiam, permitindo coletar dados em tempo real e iterar sobre o que poderia ser modificado e implementado ali mesmo com o time.

O feedback visual e de experiência do usuário foi coletado em uma sessão com todos os envolvidos para a primeira apresentação do layout, e pela disponibilização de links específicos para que os usuários navegassem por conta própria depois.

Com isso, chegamos ao fluxo finalizado nas versões desktop e mobile, como se vê abaixo.

O fluxo finalizado — versão mobile
O fluxo finalizado — versão mobile
O fluxo finalizado — versão desktop
O fluxo finalizado — versão desktop

Quais foram os resultados desse trabalho?

Aumento da satisfação dos usuários (medida via NPS). O Canal Eleva virou case dentro do grupo Eleva Educação por velocidade de implementação, atualização de tecnologia e economia de recursos ao migrar a estrutura anterior para a nuvem.

O acesso aos vídeos foi otimizado para dispositivos móveis depois da troca do provedor de hospedagem. Os professores gravaram novas aulas com equipamentos novos, e a qualidade dos vídeos subiu.

Aumento da satisfação dos usuários, medida via NPS. O Canal Eleva virou case dentro do grupo Eleva Educação por velocidade de implementação, atualização de tecnologia e economia de recursos ao migrar a estrutura anterior para a nuvem.