Como criamos o Design UX/UI da Plataforma de Aulas da Cubos Academy

1. Introdução

A Cubos Academy oferece cursos de tecnologia para todos os perfis, do iniciante ao avançado, em diversas áreas: Android, Backend, Frontend e Design UX/UI, com a experiência de quem vive o dia a dia do mercado há mais de 8 anos. Os cursos são um híbrido do presencial com o online: têm encontros síncronos que por vezes ocorrem em chamadas ao vivo e em outros momentos acontecem no formato LiveHelp. No LiveHelp, os estudantes assistem um conteúdo gravado previamente durante a aula, paralelamente os professores e monitores estão disponíveis no discord para tirar qualquer dúvida e orientar o estudante.

A primeira turma utilizava de vários produtos para poder acompanhar o curso (o Notion, o Google Meet e o Discord) e, com o intuito de reduzir o esforço cognitivo dos estudantes para encontrarem as informações que precisam, decidimos desenvolver a Plataforma de Aulas lançando o MVP para a turma seguinte do Programação do Zero (atual curso "Desenvolvimento de Software").

2. Começando

Objetivo: projetar um recurso que torne mais simples a jornada do usuário, centralizando as ações necessárias em um único lugar.

2.1 Pesquisas de usuário

Nossa etapa de pesquisa começou quando a primeira turma do curso Programação do Zero estava perto de se formar, com o objetivo de entender melhor o perfil dos estudantes, entender como se comportam e interagem com o curso em si, identificar o que enxergam de valor no curso e na Cubos Academy.

Conduzimos 15 entrevistas com estudantes do Programação do zero, sendo 5 usuários para cada modelo de aquisição do curso: Pagamento tradicional, Sucesso Compartilhado e Bolsistas.

Como os estudantes de diferentes modelos de aquisição poderiam ter comportamentos e necessidades diferentes, foi importante separar esses perfis para uma análise mais precisa e profunda.

2.2 Síntese das entrevistas

2.2.1 PRINCIPAIS INSIGHTS

A pesquisa indicou alguns padrões de interação e fluxo:

Revisão de aulas:

Usuários frequentemente reveem a aula do dia anterior antes do próximo dia de aula.

Tirar dúvidas:

Usuários relatam que tem receio de tirar dúvidas por achar que podem atrapalhar o fluxo da aula.

Intervalo:

Os usuários geralmente utilizam do intervalo entre as aulas para finalizar atividades da aula que acabou. Por vezes, isso faz com que se atrasem para a aula seguinte por perderem a noção de tempo.

2.2.2 PERSONA

A partir da análise dos resultados das entrevistas com estudantes, sintetizamos as informações com a criação de uma persona.

• Drive = Orientações e motivações dos estudantes.

De modo geral, a maioria dos estudantes que buscam a Cubos Academy são dedicados ao estudo e se sentem mais confortáveis em ter alguém de mais senioridade e referência na área para ensiná-los. Buscam, principalmente, estarem preparados para o mercado de trabalho.

• Goals & Needs = Objetivos e necessidades identificadas

Frequentemente precisam revisar assuntos anteriores, sendo bastante comum revisões diárias, reassistindo o conteúdo da aula do dia anterior, sendo assim, acompanhar o ritmo das aulas também é um desafio.

• Hesitations & Pain Points = Dores e frustrações identificadas

A maioria das motivações para migração de carreira identificada vem da insatisfação com o curso ou trabalho atual. A angústia de não conseguir encontrar informações que os capacitem profissionalmente é uma questão bastante comum. No que tange a experiência do curso, os estudantes têm vergonha de tirar dúvidas por ter receio de atrapalhar o professor e/ou o andamento da aula e do curso.

2.3 User Flow (ou Fluxo do usuário)

Mapeamos como era o fluxo de aulas padrão em reuniões com professores(as) e com a coordenadora de cursos. A ordem das etapas, e o que os estudantes fazem e precisam fazer em cada etapa no momento da aula, é fundamental para pensarmos a Arquitetura da Informação, afinal a hierarquia entre os elementos precisa fazer com que esse fluxo do usuário funcione da melhor forma.

2.4 Arquitetura da Informação

A arquitetura do site, baseada nas tarefas do usuário, foi estruturada inicialmente de uma maneira mais enxuta. Porém, no decorrer do processo, houve mudanças na estrutura da aula e novas limitações técnicas que exigiram adaptações.

2.5 Lançamento

Para conseguirmos lançar a versão 1 antes da abertura de nova turma, antecipamos a etapa de desenho de interface para assim obtermos feedbacks da plataforma em seu uso real paralelamente aos testes de usabilidade. Para isso, as aulas que acontecem ao vivo ainda seriam transmitidas pelo Google Meets e a atividade seria recebida como um link do GitHub.

2.6 Interface V.1

2.6.1 WIREFRAMES

Desenhamos alguns wireframes e apresentamos uma proposta estrutura para o professores do cursos, buscando entender se contemplava a dinâmica das aulas.

Nossa maior dificuldade aqui foi encontrar um modelo que conciliasse:

Visibilidade de status para os diversos modelos de aula.

Ou seja, para que o estudante não se atrapalhe com aulas Ao Vivo, LiveHelp ou gravações de aulas que aconteceram ao vivo e que estão disponíveis na plataforma para serem revistas.

Ordem de acontecimento de cada etapa da aula.

Modelos de aulas diferentes requerem jornadas diferentes para cada um deles. Aqui, precisamos de muita atenção na 6ª heurística de Nielsen: Reconhecimento em vez de memorização, que diz que é preferível dar ao usuário formas de reconhecer padrões do que ter que obrigá-lo a memorizar várias informações na medida que ele navega pela aplicação.

Possibilidade do professor entregar a aula com antecedência ou não.

Afinal, essa questão determina quais e quando vamos permitir algumas informações serem visíveis (como aulas futuras e cronogramas, por exemplo).

2.6.2 STYLE GUIDE

Começamos estruturando um Style Guide bem simples, componentizando estados de botão, estilos tipográficos a partir da tipografia definida no branding (Montserrat) e cores: variações shadow e tints das brand colors (Rosa e Azul Petróleo), cores neutras (grays, black e white) e cores semânticas (azul para information, verde para sucess, amarelo para warning e vermelho para danger).

2.6.3 USER INTERFACE

Ao fazer a matrícula em um curso da Cubos Academy o estudante recebe no e-mail informado na matrícula um link personalizado que dá acesso a página para criar sua senha para completar seu cadastro.

Com essa senha e o e-mail da matrícula o estudante pode fazer login na plataforma de aula, sendo o nome de usuário e e-mail pré-cadastrado internamente com as informações de matrícula.

Na home, o estudante pode acessar os cursos em que está matriculado ou pegar um atalho para a aula que está para acontecer (ou rever a última aula), tal como outros cursos oferecidos pela Cubos Academy que pode ser do seu interesse, ver os comunicados mais recentes de seus cursos ou acessar todos. Além, claro, de acessar configurações mais básicas de perfil, como alterar senha e foto.

Na página interna do curso as aulas são exibidas em uma timeline com visão semanal, os ícones informam: aulas vistas, aulas ainda não vistas pelo estudantes, aulas do dia/acontecendo, dias que não houve aula.

A sessão de Conteúdos contém todas as aulas que já aconteceram organizadas por disciplina.

Desafios são atividades avaliativas que acontecem por unidade, sua página interna é semelhante à página de Atividades, com uma única diferença funcional: não se pode enviar respostas ao Desafio depois do prazo, já a Atividade pode ser enviada a qualquer momento do curso.

2.7 TESTE COM USUÁRIOS

Aplicamos um teste de usabilidade para entender como nossos usuários usam nosso produto, dessa forma descobriríamos o que funciona e o que não funciona no design.

Conduzimos 6 sessões de teste de usabilidade com estudantes da Cubos Academy que não tiveram acesso ao MVP durante o curso.

2.7.1 OBJETIVOS DO TESTE:

• O usuário consegue encontrar uma aula?
• O usuário consegue enviar uma atividade?
• Como o usuário se sente utilizando a busca? Ele consegue fazer uma pesquisa?
• O usuário entende onde encontrar comunicados específicos?
• O usuário entende o que as aulas são um conjunto de tópicos? ou acham que cada tópico é uma aula?
• O usuário consegue identificar quais as aulas que ele não viu?

No processo, identificamos que os usuários tinham dificuldade para compreender o status das aulas, apesar de não termos esse objetivo no planejamento do teste. Acrescentamos essa descoberta na documentação da pesquisa, como uma das coisas que nem sabíamos que não sabíamos (Item 6 dos objetivos do teste)

2.7.2 ANÁLISE DOS RESULTADOS

Construímos uma matriz de hipóteses para conseguirmos trazer para nossa análise dados quantitativos do teste de usabilidade, mapeamos sucessos, fracassos e dificuldades de cada fluxo testado por cada usuário.

A interpretação desses dados e insights nos gerou acionáveis, que foram os próximos passos para melhorar a experiência no que chamamos de versão 2 da plataforma.

Os acionáveis, de forma resumida, correspondiam a permissões de respostas a alguns termos nas buscas e mudanças na interface, tais quais:

• Alterações na escolha de palavras de alguns conteúdos que foram confusos;
• Agrupamento de informações similares na interface, pois ter vários cursos e informações sobre todos eles dificultaram a busca do usuário por informações;
• Mudança no calendário de aula, pois os status de "Aula não assistida" e "Dia que não houve aula" foram confundidas;
• Informar ao usuário onde ele está e por onde ele passou (por meio de breadcrumbs, que em tradução livre significa "migalhas de pão" e são indicadores que representam o caminho percorrido pelo usuário dentro de uma aplicação), pois, além de ser um problema de heurísticas, dificultou que alguns usuários de se localizassem na interface e, consequentemente, encontrassem informações;
• Correções nas interações e links de botões.

2.8 INTERFACE PLATAFORMA V.2

2.8.1 WIREFRAMES

Construímos novos wireframes de estruturas que resolvessem os problemas encontrados e contemplassem as necessidades identificadas.

2.8.1 USER INTERFACE

A nova Home, chamada de Visão Geral, apresenta os conteúdos gerais do curso.

Simplificamos a visualização das aulas seguintes mostrando apenas os conteúdos mais importantes: as 3 aulas seguintes, para que o estudante consiga se organizar.

Como percebemos nas entrevistas, os estudantes revisam quase que diariamente o conteúdo de uma aula passada, então destacamos também, em um outro bloco, um atalho para a última aula disponibilizada na plataforma.

Utilizamos um menu lateral para facilitar o acesso a páginas acessadas com mais frequência (como a de aulas e exercícios) e otimizar o fluxo de navegação e busca.

Pelo Google Analytics percebemos que a maioria dos nossos usuários (25,89%) utilizavam telas pequenas (1366px X 768px), então optamos por utilizar um menu colapsável, para que o usuário possa esconder informações que não lhe são uteis.

Por uma decisão de negócios, implementamos avisos que informam ao estudante sobre seu andamento no curso, informando que há aulas pendentes e lembrando-os de assistir em dias que não há aula, por exemplo.

A página com todas as aulas deixou de ter exibição modular para uma exibição em lista para facilitar encontrar informações por categorias específicas (ex.: por data, por disciplina, por status) e facilitar o ordenamento entre esses elementos

Para poder fazer buscas mais complexas que envolvam mais de uma variável (ex.: aulas pendentes do mês de abril de Front end), acrescentamos filtros de busca

Fluxo de envio de atividades

O maior gargalo identificado na página da aula foi a antiga barra lateral que listava todas as aulas da plataforma. Facilitando o acesso às outras aulas por meio do menu lateral, deixamos na página da aula somente as informações pertencentes a ela.

Dessa forma o Cronograma de aulas é apenas informativo, que guia o usuário na cronologia da aula, indicando o que deve ser visto na sequência.

No teste de usabilidade, percebemos um padrão de procurar os exercícios da aula no final da página. Por isso, trouxemos essa informação pra esse lugar onde os usuários tinham a expectativa de encontrar.

2.9 TESTE COM USUÁRIOS

Realizamos um outro teste de usabilidade com estudantes atuais do curso Programação do Zero, que utilizavam o MVP da plataforma no curso, com objetivos muito semelhantes ao teste anterior, uma vez que queríamos entender se nossa solução foi efetiva a partir do entendimento de como os usuários utilizam o produto.

Como a solução mudou bastante a estrutura do produto, precisávamos também entender se o que estávamos propondo não acabou prejudicando a interação com algo que, no teste anterior, não foi um problema.

Conduzimos 5 sessões de teste de usabilidade com estudantes do curso Programação do Zero.

2.9.1 OBJETIVOS DO TESTE:

• Como o usuário procura uma aula antiga?
• O usuário entende e utiliza o filtro de busca?
• O usuário consegue enviar uma atividade?
• O usuário sabe como alternar entre seus cursos?
• O usuário entende como se orientar dentro de uma aula pelo cronograma da aula?
• O usuário compreende a playlist de vídeos dentro da aula?
• O usuário sabe ir para a monitoria?
• O usuário compreende o conceito de aula concluída?
• O usuário sabe identificar quais aulas ele não assistiu?

2.9.2 ANÁLISE DOS RESULTADOS

Construímos uma matriz de hipóteses para termos uma análise quantitativa dos resultados.

2.9.3 ACIONÁVEIS:

• O ponto mais crítico identificado foi que os usuários não entendiam a ordem no cronograma de aulas. Apesar de conseguirem realizar as etapas, não percebiam que elas tinham uma ordem específica a ser seguida. Então a urgência é tornar compreensível que existe um ordenamento entre as etapas de uma aula.
• Outros pontos foram mudanças no Writing de alguns títulos para tornar a comunicação mais efetiva e alimentar nosso backlog com algumas sugestões dos usuários para validações futuras.

2.10 Resultados

• Melhoramos a média de facilidade percebida pelo usuário de 3 para 4,5 (em uma escala de 1 a 5) da primeira para a segunda versão. Ao final da sessão dos teste de usabilidade os testers foram perguntados se, em uma escala de 1 a 5 (sendo 1 = muito difícil e 5 = muito fácil) como eles avaliavam a facilidade de encontrar as informações que precisavam.
• Dos 3 fluxos com problemas mapeados, resolvemos de forma eficaz e eficiente 2 deles. Apesar de um dos fluxos ter sido melhorado, ainda apresenta problemas que serão reavaliados na próxima iteração.

2.11 Próximos passos:

Como nossa solução para um dos fluxos não teve a melhora esperada, o próximo passo é o ajuste no cronograma de aula para melhorar a compreensão da ordem de cada etapa da aula.