Free Learn - Estudo de Caso UX

Contexto

Graças à internet, muitas pessoas têm acesso à educação apesar de não terem a possibilidade de escolarização. Plataformas como YouTube, blogs, etc., ajudam a criar aprendizado. No entanto, a dificuldade de encontrar informação precisa para o que buscamos ou um guia do início ao fim sobre um tema geral como arquitetura, mecânica, química entre muitos, onde é necessária leitura, vídeo, imagens, tudo isso se torna difícil e a pessoa ao buscar se bloqueia gastando muito tempo, unindo informações de diferentes plataformas. Por isso nasceu o Free Learn, todo o aprendizado em uma única rede social.

Tudo em um

Isso é o que o Free Learn pretende oferecer. Um espaço para que os estudantes compartilhem seus guias de estudo, informações relacionadas ao aprendizado, e onde os professores possam compartilhar diversos tipos de informações: texto, imagens, vídeos, transmissões ao vivo, enquetes, grupos de aprendizagem e um filtro de aprendizagem personalizado. Isso beneficia uma indústria muito importante como a educação, que está um pouco atrasada no presente.

Pesquisa

Qual é o sentido de explorar esta solução? De quais interações do usuário estamos falando? Vejamos como os comportamentos e padrões habituais dos usuários podem ajudar a aplicar estes conceitos de design.

MÉTODO

• ENTREVISTAS DE USUÁRIO
• PESQUISA DE CAMPO

Objetivos

Entrevistamos 10 pessoas com perguntas de usabilidade. Utilizando o marco de empatia do usuário pudemos entender suas dificuldades, o fluxo comum para aprender e o fluxo para compartilhar informações com sua equipe.

Resultado

As pessoas que usam o YouTube para aprender, também usam o Office Word para se autoavaliar; as pessoas que aprendem online compartilham seu aprendizado em grupos de WhatsApp.

Criação de Personas

Mapa da Jornada do Usuário

Para empatizar com os usuários, também criamos mapas de empatia e um mapa de jornada do usuário para aprofundar em cada etapa pela qual passam nossas personas ao avaliar e encontrar a informação de que necessitam.

Fluxo do Usuário

Decidimos investir nosso esforço principalmente no fluxo de usuário mais utilizado; descobrimos que é encontrar informação. Baseando-nos na descoberta através do fluxo de usuário pudemos ver como as visualizações se vinculam desta maneira.

Design de Arquitetura

O design da arquitetura de informação foi fácil de criar porque conhecíamos o fluxo do usuário. Também foi acessível porque desde o princípio pensamos em um menu hambúrguer ou menu lateral.

Crazy Eight

Levando em conta a Arquitetura de Informação, começamos a organizar os elementos correspondentes em suas visualizações. Expandimos nosso leque de possibilidades com o exercício Crazy Eight e finalmente refinamos com base nos parâmetros de experiência do usuário (Acessibilidade, Simplicidade, Intuitivo e Inclusividade).

Wireframes

Tendo os wireframes prontos no papel, começamos a digitalizá-los, dando a cada elemento uma coordenada na tela segundo sua hierarquia e peso, para que o usuário possa ser guiado passo a passo através do design para completar o objetivo principal.

Protótipo de Baixa Fidelidade

Uma vez criados os wireframes digitais, começamos a prototipar. Isso nos ajudou a saber se nossa lógica de link interno funcionava bem, criar mais acessos ao mesmo lugar e descartar o que não funcionava.

Plano de Testes de Usabilidade

Queríamos saber como o usuário navega entre as visualizações, quanto tempo leva para acessar a informação, ver suas reações ao executar uma tarefa. Tudo isso foi feito durante o processo do Plano de Testes. Os participantes escolhidos foram 6 pessoas de diferentes idades, profissões e habilidades.

Durante a entrevista aprendemos que as perguntas que o usuário não pôde responder poderiam conter informação onde é mencionado no cartão para ser mais acessível e consequentemente economizar mais tempo de interação. Interpretamos o Wireframe e resolvemos o aviso.

📝 Enquete de estudo de usabilidade de design

Antecedentes e experiência:

• Poderia se apresentar brevemente e me contar sobre sua experiência com a tecnologia e os aplicativos móveis?
• Com que frequência você usa aplicativos de cursos online e redes sociais?
• Você já usou anteriormente aplicativos que combinem ambas as funcionalidades?

Experiência com o aplicativo:

• Poderia se apresentar brevemente e me contar sobre sua experiência com o aplicativo?
• Poderia descrever sua experiência geral usando o app até agora?
• Quais aspectos do aplicativo você achou mais fáceis de usar?
• Você encontrou alguma dificuldade ou problema usando o aplicativo? Se sim, poderia descrevê-los em detalhes?
• Como você classificaria a facilidade de uso geral do app em uma escala de 1 a 5 (1 sendo muito difícil e 5 sendo muito fácil)?
• Você usou o aplicativo para buscar e fazer cursos online?
• Poderia descrever o processo de buscar um curso específico? Foi fácil encontrar o que você procurava?
• Como você classificaria a facilidade de uso da seção de cursos online em uma escala de 1 a 5?
• Você completou alguma lição ou atividade dentro de um curso? Poderia descrever sua experiência nesse processo?
• Como você classificaria a facilidade de uso da seção de lições e atividades em uma escala de 1 a 5?
• Você interagiu com o professor ou colega em algum curso? Poderia descrever sua experiência nesse caso?
• Quais aspectos da seção de cursos online poderiam ser melhorados?

Mockups

Uma vez afinados os Wireframes, nos dedicamos a diagramar todos os elementos adicionando cores, pesos, sombras, tipografias, etc.

Sistema de Design

Tecnológico e Futurista

A combinação de azul e turquesa sob um fundo preto para dar contraste a algo novo e futurista, a tipografia Roboto para dar um tom elegante e tecnológico, os tamanhos em botões e o contraste neles para que as pessoas com visão cromática deficiente possam diferenciá-lo facilmente.

Conclusão

O produto é Free Learn, uma rede social para que todos aprendam fácil e grátis. Ainda estamos trabalhando nas visualizações e componentes para mostrar o produto final.