Edux, uma nova experiência no ensino remoto — Estudo de caso de UX
Como o UX Design foi utilizado para entender as principais dificuldades enfrentadas por turmas do ensino médio durante a pandemia e nos ajudou a desenvolver uma solução interativa de aprendizagem.
O desafio
Durante a pandemia de COVID-19, a equipe composta por Érika Heim, João Verdun e Bruna Gomes aceitou o desafio de colaborarem juntos, cada um contribuindo com a sua bagagem de experiências, para ajudar escolas à se adaptarem à modalidade remota, sem que percam a qualidade no ensino e o engajamento dos alunos.
Como, mesmo diante de um período de distanciamento social, promover o ensino, a aprendizagem e o senso de comunidade entre professores e alunos do ensino médio?
O cenário atual
Com a vinda da pandemia causada pelo COVID-19 as escolas precisaram fechar suas portas, alunos e professores foram obrigados a se distanciar fisicamente e o processo de educação, que já apresentava certas carências, entrou em sua maior crise da última década.
Os professores se viam pressionados para apresentar bons resultados no ano letivo, fazendo uso de plataformas digitais variadas e muitas vezes sem ter o domínio delas; já os alunos se encontravam desmotivados pela mudança súbita no modelo de ensino e por considerarem as aulas remotas mais monótonas. O nível de desinteresse aumentou, assim como as dúvidas e a insegurança.
Considerando que o processo de educação não podia simplesmente parar, boa parte das escolas trabalharam com o que tinham: aulas assíncronas (gravadas) disponibilizadas no YouTube, aulas síncronas (“ao vivo”) acontecendo através de chamadas de vídeo pelo Google Meet ou Zoom e avaliações sendo enviadas em formato de formulários virtuais do Google. Sem uma uniformidade e uma ferramenta específica para suprir as necessidades como um todo, as interações e rendimento de alunos e professores foi bastante afetada. Tudo virou um verdadeiro caos, afetando a saúde mental de muitos.
Objetivo do projeto
Tendo em vista a situação atual mostrada pela desk research, pensamos em construir uma ferramenta de ensino remoto voltada para turmas do ensino médio.
Atualmente, esses usuários fazem uso de diversos tipos de plataformas em sua rotina escolar, o que causa bastante confusão e desconforto, gerando um sentimento de desmotivação. Com a nossa ferramenta, esses usuários encontrariam os principais recursos em um único aplicativo, tornando sua rotina mais prática e aumentando sua satisfação.
Melhorar a experiência de estudantes e professores no ensino remoto através de uma ferramenta digital que agrega os principais recursos de suporte à rotina escolar.
Usuários
O nicho da educação é bastante amplo, abrangendo desde crianças a idosos. Para o nosso estudo, optamos por focá-lo no ensino médio, tendo como nossos possíveis usuários os alunos e professores dessa etapa escolar.
Primeiramente, montamos as “proto-personas”, que são os possíveis usuários da nossa ferramenta mas que ainda não estavam validados, ou seja, ainda não tínhamos realizado as pesquisas e entrevistas para verificar se as informações que imaginávamos eram compatíveis com os depoimentos reais.
Após validar essas informações, ajustamos nossos dados e os condensamos em algumas imagens onde apresentamos as personas (que são as “proto-personas” validadas), mapeamos os estágios de suas jornadas, as tarefas que realizam, seus sentimentos e as oportunidades de negócio que identificamos.
Pixar StoryTelling
Como complemento das informações já apresentadas, optamos por realizar também a técnica de Storytelling da Pixar, que apresenta a contação de história através de uma narrativa de fácil compreensão, que ajuda a engajar a equipe de trabalho e que resume o perfil dos usuários, suas rotinas e como o nosso produto impactaria suas vidas.
Primeira etapa de validação
Após definir as personas e suas jornadas, refletimos sobre nossas certezas, suposições e dúvidas através de uma matriz CSD. Ela nos possibilitou analisar melhor o cenário em questão, nossos conhecimentos de como montaríamos a nossa pesquisa quantitativa com perguntas que realmente fossem diretas e úteis para o sucesso do trabalho.
Observação: pela sigla “AVA” deve-se entender “Ambiente Virtual de Aprendizagem”.
Pesquisa quantitativa
Nesta etapa nós organizamos um questionário com o intuito de esclarecer nossas dúvidas, afirmar ou não as nossas suposições e confirmar nossas certezas sobre o cenário escolar na modalidade remota. Ele foi foi enviado a grupos de professores e alunos do ensino médio e conseguimos 87 respostas, das quais 55 foram de estudantes e 32 de professores.
Ficamos muito satisfeitos com o perfil dos respondentes pois conseguimos um público bastante diverso se trantando de gênero, faixa etária, ano escolar e rede de ensino, o que contribuiu para que tivessemos resultados mais sólidos e não focados apenas em uma única realidade.
Nas imagens abaixo está o resumo dos dados obtidos:
Pesquisa qualitativa
Esta etapa foi realizada após as pesquisas quantitativas e definimos perguntas para entender melhor as experiências dos entrevistados. Dentre elas, questionamos os usuários sobre sua motivação de lecionar ou assistir às aulas, sobre as dificuldades que enfrentavam nesse processo e pedimos mais detalhes de como aconteciam as rotinas escolares.
Essa etapa foi realizada através do Google Meet onde entrevistamos 10 pessoas, das quais 6 foram estudantes e 4 professores, e os principais aprendizados foram:
Alternativas de solução
Após os dados coletados até o momento, decidimos utilizar a ferramenta de design thinking “Como Poderíamos?” (How might we, ou HMW) para nos ajudar no direcionamento da nossa atuação:
Utilizamos também, em uma reunião do grupo, a técnica de brainstorming para descobrir ideias que poderiam ajudar a resolver os problemas encontrados. Elas foram dispostas em uma matriz de impacto X esforço para facilitar e orientar nossas escolhas.
Escolhemos priorizar as ideias que causariam maior impacto com o menor esforço possível, desta forma, tornaríamos possível a rotina de uma escola “em casa”, trazendo os processos e ferramentas relacionados ao ensino-aprendizagem para um único ambiente virtual e tornando a experiência de nossos usuários mais agradável, intuitiva e simples.
A solução
Após observarmos as informações adquiridas até o momento, debatemos e priorizamos o que seria construído em nossa ferramenta, que a princípio, foi pensada no formato de aplicativo para celulares. Começamos a fazer desenhos livres de como poderiam ser as telas, utilizamos a técnica do Crazy 8’s e também os Rabiscoframes. Cada integrante da equipe fez seus desenhos separadamente e depois os apresentamos, analisamos e extraímos as ideias que melhor representaram o que queríamos criar.
Baseado nos relatos que ouvimos sobre a rotina de estudantes e professores, optamos por setorizar o aplicativo em 4 áreas principais, estas que estariam dispostas na barra de menu inferior:
- Tela de Início: sendo a primeira área de contato do usuário com o aplicativo, lá ele teria um panorama geral do que iria acontecer em seu dia, incluindo as aulas, entregas de atividades e avaliações.
- Mural: área para publicação de avisos dos professores.
- Disciplinas: cada disciplina teria uma área específica para agregar tudo o que fosse relativo a ela: aulas gravadas, atividades, materiais complementares, avaliações e a indicação de novos avisos de professores.
- Mensagens: onde poderia haver a troca de mensagens entre alunos, professores e psicólogos do colégio, já que vimos que esse recurso foi bastante votado pelos alunos em nossa pesquisa quantitativa.
Realizamos então novos desenhos e criamos dois protótipos, um para alunos e outro para professores, no Marvel App, e nele realizamos o nosso primeiro teste de usabilidade.
Wireframes e fluxos do aplicativo
Após a criação e testes do protótipo de baixa fidelidade, nós demos início ao desenvolvimento de wireframes para assim, construirmos um protótipo de média fidelidade e analisarmos melhor os fluxos dos usuários:
Estudos de UX Writing
Através de estudos de UX Writing nós definimos o Tom de Voz da nossa ferramenta e, também, avaliamos quais as melhores palavras que poderíamos utilizar para estabelecer uma boa comunicação com nossos usuários.
✍️ Para conferir o artigo complementar sobre esse tema, clique aqui!
Testes de usabilidade
Para analisar os nossos protótipos, realizamos 3 testes de usabilidade e, devido à pandemia, eles foram realizados por videoconferências no Google Meet, onde o participante compartilhou a tela de seu computador e podíamos observar a sua utilização do protótipo. Além do participante, tínhamos um integrante da equipe para coordenar o teste e outro para fazer anotações.
- Primeiro teste — Protótipo de baixa fidelidade
Participantes: 6 pessoas
(4 alunos e 2 professores)
📲 Confira o protótipo dos alunos e dos professores
- Segundo teste — Protótipo de média fidelidade
Participantes: 11 pessoas
(5 alunos e 6 professores)
📲 Confira o protótipo
- Terceiro teste — Protótipo de alta fidelidade
Participantes: 48 pessoas
(27 alunos e 21 professores)
📲 Confira o protótipo
Para informações detalhadas sobre os testes que realizamos, envolvendo as missões e os aprendizados de cada etapa, acesse:
Branding e guia de estilos
Finalmente, o momento de definir o guia de estilos e a identidade visual do aplicativo tinha chegado. Optamos então por construir uma interface que passasse segurança mas que também fosse descontraída e que cativasse os seus usuários.
O nome
Para representar a nossa ferramenta nós escolhemos o nome “Edux” e utilizamos a fonte Fredoka One para o logotipo, que adquirimos gratuitamente no Google Fonts. Sua escolha se deu por acharmos que ela consegue transmitir a identidade de nossa ferramenta: ela é robusta, o que demonstra um peso visual, mas também apresenta as extremidades arredondadas, que reforçam um caráter mais contemporâneo e jovial.
Cores e arte
As tonalidades escolhidas foram pensadas com o intuito de seguirem princípios de acessibilidade e promoverem níveis de contraste que facilitam a leitura e identificação dos conteúdos. A análise das cores pode ser vista no nosso artigo complementar de acessibilidade.
Pelas nossas pesquisas, observamos que a cor azul é bastante utilizada na composição da identidade visual de escolas, e, por querermos estabelecer uma familiaridade visual com o padrão escolar, optamos por utilizar um tom de azul marinho (#252A58) como uma das cores da nossa marca. Essa tonalidade promove uma sensação de elegância, estabilidade, segurança e remete à tecnologia.
Escolhemos também uma tonalidade de azul mais claro (#6DC6CE) para contribuir com uma sensação de energia, jovialidade e positividade.
Perto de concluirmos o case, descobrimos que a PANTONE em parceria com a marca de chá, Twinings, criou em 2018 a cor “otimismo natural”. Essa descoberta nos alegrou pois esse tom se assemelha bastante ao azul claro (#6DC6CE) que escolhemos e só reforçou a ideia de que, com ela, estaríamos transmitindo uma boa sensação aos nossos usuários.
Em parceria com os tons já citados, optamos por trazer um maior divertimento e quebra de monotonia às interfaces ao atribuir tonalidades específicas para cada disciplina (no fluxo dos alunos) e para cada turma (no fluxo dos professores).
Apesar do uso de diversas cores, nós as configuramos de modo que suas tonalidades são amenas, promovendo uma suavidade e conforto visual. Em parceria com elas, foram criadas artes personalizadas, envolvendo fotos e desenhos digitais produzidos no Figma, pela integrante Érika Heim. Desta forma, geramos 3 meios de associação: texto, cor e imagem.
Acreditamos que a arte, as cores e um pouco de diversão podem contribuir bastante para estabelecermos um vínculo com nossos usuários e proporcionar um sentimento de satisfação ao utilizar o Edux.
Tipografia, botões, formulários e ícones
A fonte padrão escolhida foi a Noto Sans KR e ela pode ser encontrada gratuitamente no Google Fonts. Além de ter agradado a equipe em termos estéticos que se alinham à identidade do Edux, ela preenche pré-requisitos que promovem a acessibilidade:
Fonte sem serifa: para conteúdo digital, as fontes sem serifa são consideradas mais acessíveis, pois são visualmente mais limpas e promovem uma melhor distinção entre os caracteres.
Caracteres não ambíguos: algumas fontes podem apresentar caracteres diferentes de forma igual, como é o caso da letra “I” (i maiúsculo) e a consoante “l”, assim como a letra “O” e o número zero “0”. A mesma representação deles pode ser bastante confusa para a leitura de pessoas com dislexia, baixa visão ou para qualquer um que lerá um texto muito longo.
Protótipo de alta fidelidade
Por fim, após todo o trajeto descrito, chegamos à versão final do Edux:
Para melhor visualização, sugerimos clicar no canto superior direito em “Options” e depois em “Fit — Scale Down to Fit” ou:
📲 Acesse o protótipo diretamente no Figma por aqui
🎬 Confira também o protótipo para as telas horizontais da aula “ao vivo”
Soluções oferecidas
Acessibilidade
Procuramos, em todo o processo de construção da nossa ferramenta, discutir sobre acessibilidade digital e implementar medidas que promovessem a inclusão dos mais diversos usuários. Desenvolvemos um artigo complementar abordando nossas pesquisas, referências e as ações que tomamos. Recomendamos imensamente a leitura deste material para que a compreensão sobre a nossa postura em relação ao Edux seja completa.
🤝 Acesse nosso artigo complementar sobre acessibilidade aqui
Notificações personalizadas
Para ajudar nossos usuários a lembrarem de seus compromissos escolares e avisá-los das novidades que acontecem no Edux, nós criamos algumas notificações personalizadas:
Feebacks
No teste final de usabilidade nós anotamos algumas falas dos participantes e selecionamos alguns comentários que foram escritos na última questão como feedback. Ficamos muito contentes em ver a ótima aceitação! 🙌
Próximos passos
Ao longo do estudo nós observamos que, mesmo que seja criada uma ferramenta digital que agregue os principais recursos de suporte ao ensino remoto, é essencial que, em parceria, haja uma postura adequada por parte das escolas, ao promover capacitações aos professores; dos professores, ao montarem aulas com algum diferencial que cative; e dos alunos, ao tentarem interagir mais durante as aulas e serem mais colaborativos.
Essa foi a trajetória do Edux como um estudo de caso e, se ele fosse de fato implementado, haveria a necessidade de serem feitos testes periódicos e mais pesquisas visando o seu melhoramento constante. Entretanto, ficamos muito felizes com o resultado final e com o ganho que ele traria para o setor da educação.
Listamos alguns pontos principais que poderiam ser desenvolvidos caso o estudo continuasse:
- Interface para computadores, assim como a criação do recurso de gravação e edição de aulas pelos professores.
- Desenvolvimento dos recursos indicados no Menu superior da tela de Início, além de outras funções, caso fosse constatada a utilidade delas.
- A opção de um modo “escuro”, assim como a possibilidade de ajustes da parte visual pelo usuário, promovendo desta forma uma melhor legibilidade para pessoas que apresentam dificuldades na visão.
- Implementação de um tradutor virtual de LIBRAS e das notificações personalizadas previamente mostradas.
- Desenvolvimento de recursos específicos para tornar o ensino e aprendizagem de línguas estrangeiras (inglês e espanhol) mais interativo.
Conclusão e agradecimentos
Acreditamos que essa experiência foi extremamente enriquecedora pois aprendemos muito sobre UX/UI Design, envolvendo o exercício de soft skills pelo trabalho ter sido realizado em grupo e também o desenvolvimento de habilidades em ferramentas digitais que até então desconhecíamos.
Criar uma solução pensada para solucionar um problema social tão urgente não foi fácil, mas foi muito gratificante. Todo o nosso envolvimento e os feedbacks positivos que recebemos contribuíram para que sonhássemos que o Edux pudesse se tornar, de fato, real e utilizado por diversas escolas.
Por fim, agradecemos a todos os participantes das nossas pesquisas, à equipe de suporte do curso e principalmente ao nosso professor, Leandro Rezende, por todo o rico conhecimento passado ao longos das inúmeras aulas. Graças ao UX Unicórnio nós podemos dizer que hoje somos UX Designers! 🎉
