Mochila Cheia — Um caso de UX/UI

Olá, meu nome é Luis Felipe e nesse artigo vou contar como foi o meu primeiro projeto na área de UX. O 1º Hackathon de 2021 da FCamara.

O Problema

“Nós sabemos o quanto é complicado para os pais poderem comprar material escolar para seus filhos. Os preços aumentam de semestre para semestre. Principalmente quando falamos de educação pública, onde a dificuldade é ainda maior e vem por diversos fatores…”

Abordagem

Nesse projeto eu utilizei a abordagem do Design Thinking para conseguir desenvolver um processo criativo que foi desde entender o problema até desenvolver de fato meu prototipo em alta fidelidade. Para auxiliar na visualização das etapas desse processo eu me baseei no diagrama de Duplo Diamante.

Duplo Diamante do Design Thinking

Entendendo o problema

Antes de tudo meu time e eu tinhamos que entender o problema. Aqui discutimos sobre o tema passado, lemos e relemos a proposta e fizemos diversas pesquisas.

Brainstorm Inicial

Fizemos uma primeira reunião para nos alinharmos, aí todos estariamos na mesma página e saberiamos o que realmente era o problema. Nessa reunião fizemos um brainstorming inicial e a partir daí veio diversas ideias gerais sobre a nossa aplicação. Tudo foi anotado em post its online que seriam melhor trabalhados em outra ocasião.

Não utilizamos todas as idéias no final

Matriz CSD

Com uma grande base no que discutimos nessa reunião, conseguimos montar a Matriz CSD. Ela nos ajudou a ter um entendimento sobre o desafio que estávamos buscando superar. Além disso ajudou na gestão da informação criando um referencial visual.

Fizemos a Matriz CSD pelo Trello

Benchmarking

Fizemos uma pesquisa em sites com temáticas semelhantes e assim começamos a entender como eles funcionam. Isso nos ajudou a saber como desenvolveriamos o nosso site, pois essas informações auxiliaram na nossa tomada de decisões. Pesquisei alguns sites de doações nacionais, mas como não encontrei tanto conteúdo útil em língua portuguesa, decidi abrir um pouco os horizontes e pesquisar sites em inglês. Conseguimos tirar algo de cada um, seja positivo ou negativo e direcionar o nosso projeto. Além disso, percebemos que as doações são feitas normalmente em dinheiro, e quando é dado a possibilidade de doar o material, não é prático e facilitado pelo site.

Sites observados: Donors Choose, Education Foundation, Classroom Central, Friendship Circle, Corassol.

5W1H

Após toda essa pesquisa decidi fazer o 5W1H pois com essas 6 perguntinhas teríamos uma ideia geral do que pretendiamos ter como produto dessa aplicação, o que ela seria, quem a utilizaria, quando utilizaria, etc.

WHY: Porque muitos alunos tem uma carência nos seus materiais escolares e não existe uma plataforma que de maneira fácil e simples de a opção de poder doar materiais ou solicitar uma doação.

WHAT: Uma plataforma onde o usuário possa doar com base na escola em que o aluno necessitado estuda e selecionar os materiais para doar ou solicitar doações. Tudo isso de uma maneira fácil, rápida e interativa.

WHO:

  • Pai, mãe ou responsável de um aluno que necessita de materiais escolares;
  • Qualquer pessoa disposta a fazer uma doação de materiais escolares.

WHERE|WHEN: Aonde e quando o usuário quiser, com um maior número de usos no início dos semestres escolares.

HOW: Ajudando tanto quem quer se desfazer de seus materiais escolares quanto de quem precisa deles.

Personas

MVP

Para o MVP precisávamos saber o que era o mínimo que poderíamos fazer para o nosso projeto funcionar, e como isso era um Hackathon, nosso tempo e recursos eram muito limitados. Após as etapas anteriores agora sabíamos o que definitivamente iria ter no site: Uma página home com uma descriçao do problema, tela para logar, área de usuário, opção de doar para um aluno com base numa pesquisa e opção de cadastrar um estudante que precisa de materiais.

Implementações Futuras

Para o futuro pensamos em diversas implementações, tais como:

  • Inclusão de um Chat no sistema para facilitar a comunicação entre os doadores e as escolas.
  • Parceria com lojas que vendem materiais, com opção de na própria plataforma o usuário poder comprar o que os estudantes precisam.

Primeiros esboços e Crazy Eights

Eu me juntei ao meu squad para fazer uma dinâmica em grupo e agora ja começar a imaginar as telas que serão feitas. O nome dessa dinâmica é crazy eights. Ela foi criada pelo Google e a ideia é colocar no papel o que vier a cabeça em relação as telas a serem desenvolvidas em poucos minutos para assim estimular a criatividade. Todos do grupo fizeram a sua própria versão das telas, e após isso fizemos uma votação para decidir quais iriam evoluir para estar no wireframe.

Wireframe

Protótipo em Alta Fidelidade

Link do Protótipo em alta fidelidade navegavel:

https://www.figma.com/file/H0BKKwtnUlI116KM6mFQ53/Untitled?node-id=0%3A1

Análise Heuristica do Protótipo

1º Heuristica: Visibilidade de Status do Sistema

Aqui eu me preocupei com isso, é mostrado ao usuário exatamente aonde ele está e aonde ele pode ir a partir de uma barra de navegação que indica. Também sempre me preocupei em mostrar, com um título, em que tela o usuário se encontra.

2º Heuristica: Compatibilidade com o sistema e o mundo real

Utilizei icones que facilitam a visibilidade e o reconhecimento pela parte do usuário e botões bem visiveis para não gerar duvida.

3º Heuristica: Controle e liberdade para o usuário

O usuário tem a liberdade de voltar sempre que quiser para as telas anteriores caso tenha clicado errado em alguma. Tem a possibilidade de reeditar depois diversas coisas, como por exemplo a lista de materiais do estudante.

4º Heuristica: Consistencia e Padronização

Utilizei o mesmo padrão de cores, de tipografia, de layout de forma padronizada para não deixar o usuário perdido ou confuso ao utilizar nossa plataforma.

5º Heuristica: Prevenção de erros

Há uma janela que indica ao usuário se ele tem certeza que quer sair da página ou se clicou por engano e deseja ficar para salvar as alterações.

6º Heuristica: Reconhecimento em vez de memorização

Utilizei icones e um layout familiar ao usuário. Ele irá se sentir confortavel por não sentir dificuldades em se adaptar e reconhecer praticamente tudo.

7º Heuristica: Eficiencia e flexibilidade de uso

Nós pensamos em um uso simples, não será necessario atalhos para facilitar o uso para um usuário mais experiente pois a idéia é o uso sempre ser facil e rápido.

8º Heuristica: Estética e design minimalista

Foram colocadas poucas coisas na tela para não confundir o usuário e faze-lo perder tempo, deixamos um visual bem limpo sem muitos elementos dispersos na tela.

9º Heuristica: Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros

Aqui na plataforma caso o usuário erre sua senha ou digite um email que seja invalido nós indicamos para ele em vermelho para que o mesmo saiba que está errado.

10º Heuristica: Ajuda e documentação
Nós colocamos na home uma explicação passo a passo que indicará como utilizar a plataforma tanto para doar quanto para solicitar doação

Muito obrigado por tudo FCamara!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store