Mochi: Facilitando doações de materiais escolares online

Um estudo de caso de UX realizado no Programa de Formação 2021 da FCamara.

Contexto e 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…”

E foi com esse problema em mente que a FCamara lançou seu desafio para o primeiro programa de formação de 2021.

Para ajudar esses pais precisávamos desenvolver uma aplicação, que poderia ser um site ou um aplicativo responsivos, no qual um responsável faria o cadastro do seu filho e um doador chegaria até esse determinado aluno por meio de filtros. Além disso era obrigatório entregar no mínimo 3 telas em até 15 dias. O hackathon iniciou com os participantes previamente divididos em squads, dessa maneira nosso grupo foi formado por 2 UX e 4 desenvolvedores.

#PraTodosVerem: Fotos de todos os membros do Squad, abaixo delas estão nome e a especialidade

Descoberta

Decidimos iniciar o primeiro dia com um brainstorming com a participação de todo o time, o que foi um bom modo de começar a explorar o desafio, pois toda a equipe teve a chance de compartilhar e falar um pouco das suas ideias.

#PraTodosVerem: 2 quadros feitos na plataforma Miro. Na esquerda, há o quadro de Brainstorming, e na direita o de Card Sorting, ambos com vários post-its amarelos.

Para essa etapa e as próximas, o nosso time escolheu utilizar a plataforma Miro, que foi escolhido pela facilidade de uso e por ser familiar para a maioria do time.

O passo seguinte foi uma sessão de Card Sorting, também realizada por todos, durante ela separamos nossas ideias em 5 categorias; Dados, Cadastramento, Materiais, Doação/Pagamento e Transporte. Essa etapa foi importante pois agrupamos ideias parecidas, nesse momento já conseguimos visualizar e tomarmos decisões sobre funcionalidades do projeto.

A seguir a dupla de UX montou a Matriz CSD, ela foi baseada nas reuniões em equipe. A matriz é uma interessante ferramenta em que podemos fazer alterações enquanto as dúvidas estão sendo sanadas e as suposições sendo esclarecidas no decorrer do projeto. Decidimos que ela seria realizada nesse momento pois nos direcionaria nos momentos de pesquisa.

#PraTodosVerem: Matriz CSD com post-its em azul para Certezas, amarelos para Suposições e vermelho para Dúvidas.

Partimos então para a Desk Research, nessa etapa fizemos uma pesquisa online bastante ampla sobre o tema em geral e buscando responder as dúvidas e suposições que levantamos na Matriz.

Coletamos diversas referências de interfaces, e encontramos sites com um objetivo similar ao nosso, como por exemplo o Amazon Smile, que direciona suas compras para instituições de caridade ao redor do mundo. Encontramos também listas de materiais escolares para cada ano escolar e confirmamos a necessidade do nosso trabalho com referências jornalísticas.

#PraTodosVerem: Desk Research com vários links agrupados de acordo com o tipo de referências encontradas. Por exemplo: Referências de Jornais, Acadêmicas e de User Interface.

Definição

#PraTodosVerem: Dois mapas de empatia com vários post-its espalhados.

Dando início à etapa de Definição, criamos duas proto-personas, que são como “usuários ideais”, uma delas representando o responsável que registraria seu filho, e outra representando a pessoa doadora. Com elas em mente, construímos os Mapas de Empatia, respondendo a quatro perguntas que nos ajudam a entender melhor nossos usuários. “O que ele pensa?”, “O que ele ouve?”, “O que ele vê?”, “O que ele diz?”, e quais suas dores, necessidades e desejos.

Tendo em vista o que precisávamos validar, partimos para a realização da pesquisa quantitativa. Decidimos utilizar o Google Forms para a criação do formulário de pesquisa, pois julgamos ser o mais conhecido e utilizado pela maioria das pessoas. O formulário foi divulgado em grupos de mães, comunidades de venda, troca e doação de materiais escolares e para público em geral, com perguntas específicas para donatários e potenciais doadores.

Durante as pesquisas, as pessoas demonstraram maior segurança em fazer doações através de instituições, sejam elas ONG´s, orfanatos e principalmente igrejas que prestam assistência social (independente da religião). Geralmente por já conhecerem o trabalho, ou por fazerem parte da comunidade em questão.

Isso pode ter relação com outro insight da nossa pesquisa, já que 67,4% dos potenciais doadores demonstraram se importar em saber quem receberá a doação. Quando são as instituições que fazem o intermédio da doação, há uma confiança maior de que sua doação será bem distribuída para quem de fato precisa. Com base nesses dados, modificamos uma das ideias do projeto, em que o doador faria a entrega diretamente para os responsáveis pelas crianças. Resolvemos então, que elas seriam entregues em pontos específicos, abrindo espaço no futuro para as próprias escolas ou instituições registrarem donatários.

Também com base na pesquisa criamos as nossas duas personas finais, que nomeamos de Cleonice e Isadora:

#PraTodosVerem: Imagem com o perfil da pessoa donatária, contendo uma pequena descrição, traços de personalidade, motivações e frustações
#PraTodosVerem: Imagem com o perfil da pessoa doadora, contendo uma pequena descrição, traços de personalidade, motivações e frustações

Desenvolvimento

Tendo as ideias, as personas, e os insumos das pesquisas, iniciamos a etapa de prototipação e construção da interface. Juntamente com o time de desenvolvedores, fizemos wireframes rápidos no Miro, e em seguida passamos à limpo no Figma( que você pode acessar clicando aqui). Construímos também o fluxo de dados e telas da aplicação, sempre levando em conta a viabilidade técnica e o tempo limitado que teríamos.

#PraTodosVerem: Wireframes iniciais do projeto, e logo abaixo o fluxo de dados e telas.

Como estaríamos trabalhando com uma aplicação web responsiva, iniciamos os protótipos pela versão desktop, e em seguida desenvolvermos a versão mobile.

#PraTodosVerem: Imagem do protótipo em formato mobile
#PraTodosVerem: Imagem com o Style Guide do projeto, contendo as cores, fontes e ilustrações utilizadas

Página Inicial

Na primeira página do nosso site, optamos por uma página mais direta, com uma frase que resuma o objetivo e chame para ação, sendo ela “Doe materiais escolares na sua região”, e logo abaixo a barra de busca que foi configurada na aplicação real com um autocomplete baseado nas cidades do Brasil, não sendo necessário um campo apenas para estados. Ao rodar o scroll, haveria as escolas com maior número de alunos precisando de doações, independente da localização.

Concluímos que a localização seria a principal chave para às demais informações, com base nas pesquisas qualitativas, que indicaram que a maioria dos usuários doam para conhecidos ou instituições da sua comunidade, e na premissa de que quanto mais perto for o ponto de entrega dos materiais, mais fácil será o transporte ou frete.

Escolas

Ao preencher o campo de cidade, o doador tem acesso às escolas da cidade, ou regiões próximas em que há estudantes registrados precisando de doações. Nos cards das escolas haverá uma imagem da escola, o nome, a cidade, e o número de estudantes donatários. Então por exemplo, caso haja 12 estudantes registrados, abaixo das informações sobre a escola estará escrito “12 mochilas precisam da sua doação.” e ao lado o botão de “Quero doar”.

#PraTodosVerem: Na imagem há duas telas da interface. Na da esquerda, está a página inicial, contendo o rodapé com a logo, a ferramenta de busca e uma ilustração, além de exibir escolas com maior número de donatários. A tela da direita, mostra o resultado da busca pela cidade de Pinhais, Paraná, com as fotos das instituições, nome e quantos alunos solicitaram doações.

Estudantes

Logo após há a relação de estudantes cadastrados, onde aparecerá os cards representando suas mochilas. No topo os dizeres “Ajude a encher a mochila de:”, e nos cards constará o primeiro nome, letra inicial do sobrenome, e o grau de ensino que está cursando. As cores das mochilas também indicam se o estudante está atualmente nos anos iniciais ou finais do ensino fundamental, ou ensino médio e EJA. Sendo a mochila azul para Ensino Fundamental I, amarelo para Ensino Fundamental II e vermelho para Ensino Médio e EJA.

Lista de Materiais

Ao escolher quem receberá a doação, aparecerá um modal com a lista de materiais que o donatário preencheu no cadastramento. Tanto na área de cadastro quanto no protótipo utilizamos como base a lista de materiais fornecidos pelo Fundo Nacional de Educação, para evitar que se peça materiais que não condizem com o momento escolar atual do estudante, ou que haja algum tipo de desvio.

Confirmação

Após selecionar os materiais que doará, e confirmar no botão embaixo, há uma tela de feedback agradecendo a contribuição, e indicando o endereço a ser entregue ou enviado.

#PraTodosVerem: Três imagens, a primeira contendo a página com a lista de alunos que precisam de doação, a segunda contem o modal com a lista de materiais a serem doados, a ultima é a página de agradecimento pela doação, que também mostra o endereço para a entrega.

Próximos passos

Pelo prazo apertado o time precisou priorizar a entrega do MVP (produto minimamente viável), porém durante o processo houveram diversas funcionalidades que não pudemos considerar nesse primeiro momento, mas seriam possíveis atualizações futuras.

Uma delas seria a expansão do público alvo donatário, sabemos que professores sofrem com uma constante falta de material para trabalho, nosso objetivo seria que houvesse também a opção de doar para esses profissionais, com isso acrescentaríamos a opção de doar coisas como materiais lúdicos e kits educacionais, além de livros para serem usados em sala de aula.

Pelas pesquisas e também pela experiência pessoal de integrantes do grupo também notamos uma outra necessidade comum para alunos; muitas cidades não disponibilizam uniformes gratuitamente, mesmo que sejam obrigatórios para a entrada na escola, pensando nisso também acrescentaríamos a opção de doar esses uniformes, como eles costumam ser personalizados por escola, essa doação poderia ser feita de duas formas, a primeira seria através do valor do uniforme, a outra forma seria uma possível parceria do site com empresas que confeccionam esses uniformes, permitindo que o doador faça o pagamento diretamente, impossibilitando desvios.

Outro detalhe que achamos que adicionaria valor ao nosso projeto seria a integração do site com o Google, assim as imagens das escolas seriam feitas através do Street View, o que daria aumentaria as chances de termos imagens atualizadas.

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