Uma ponte entre propósito e necessidade

Facilitando a doação de materiais escolares para alunos do ensino público

Como o foco se tornou Mobile, deixamos um “preview” de algumas telas.

O desafio

O Hackathon

Com o intuito de resolver um problema, recebemos a proposta de criar uma solução prática voltada para ajudar alunos do ensino público a ter acesso facilitado de doações de materiais escolares.

Trello usado para organizar diariamente o que temos que fazer, em andamento e concluído.
Discord e como organizamos nosso dia-a-dia após cada daily do projeto.

O contexto do problema

A oportunidade de estudo é o ponto crucial para o desenvolvimento do aluno e deveria ser um direito fundamental, porém nas escolas públicas brasileiras os alunos podem acabar enfrentando muitas dificuldades, seja por problemas em casa, falta de apoio do governo e - principalmente cerne do nosso problema -, a falta de material escolar.

Objetivo do projeto

Essa situação descrita provoca os responsáveis a procurarem meios alternativos de conseguir materiais pros filhos, seja por boca-a-boca, ONGs, campanhas de arrecadação ou projetos sociais. O que numa época de pandemia se torna até mesmo arriscado pelo tamanho da exposição que podem estar enfrentando.

Benchmarking

Após a análise das pesquisas e observar algumas necessidades que foram relatadas, demos início ao Benchmarking, para tentar compreender outras plataformas de doações e aplicativos de temática parecida que estão promovendo objetivos próximos dos nossos.

Investigação de plataformas parecidas com a proposta.
  • Existem várias sites e plataformas de ONGs, porém estão lá para informar sobre elas e apenas aceitam doações pessoalmente.

Plano de Pesquisa

Com o objetivo de criar um foco no contexto do problema, resolvemos elaborar um plano de pesquisa para nortear as entrevistas quantitativas que faremos.

Os objetivos discriminados são a primária parte das entrevistas.
A maneira como iremos abordar a situação irá elucidar os objetivos acima.

Matriz CSD

Dividimos nessa imagem abaixo todas as certezas, suposições e dúvidas que irão complementar nossas entrevistas.

Entrevistas quantitativas

Através do desenvolvimento de um questionário no Google Forms com perguntas objetivas para obter dados sobre o perfil dos possíveis usuários, identificar suas motivações, comportamentos referentes a doações e recebimentos de materiais escolares. Compartilhamos o formulário em grupos do WhatsApp, Telegram e redes sociais.

Quantidade máxima que conseguimos com as entrevistas.
  • Para a usabilidade, é curioso notar que a maioria das pessoas passam mais de 4 horas na internet diariamente, além de utilizarem aplicativos constantemente.
  • Dessa forma é possível notar que a compreensão geral de UI para ícones e outras opções é comum, então aliado aos dados postos e estudos de que o Android é o sistema operacional mais usado no mundo, podemos colocar que o Design System da Google é a melhor escolha para a UI da solução.

Entrevistas Qualitativas

Com o fim das entrevistas quantitativas, fomos para as qualitativas com o intuito de nos aprofundarmos nas questões descobertas. Os porquês eram necessários para descobrir e entender sua vida, sua rotina e os pensamentos do usuário acerca das doações.

Insights

  • Há muita desconfiança em relação às instituições e as pessoas tendem a ir de acordo com outras pessoas que confiam, e não no lugar.
  • As pessoas gostam de fazer o bem, não só pelos outros mas também por elas mesmas.
  • Sentimento de pertencimento incentiva muito a doar, como fazer parte de uma comunidade ou ter estudado no mesmo colégio.
  • Doações são movidas pelo sentimento de necessidade do outro, pela certeza de que alunos desses colégios são de baixa renda e costumam ser precisar de doações.
  • Por estarem se formando, doam materiais antigos sem uso. Colégios públicos possuem o costume de aconselhar alunos a doarem materiais escolares após se formarem.
  • Preferência por material novo ou dinheiro (sempre é comentado em relação a confiança), depende da situação.

Persona — Doador

As entrevistas nos proporcionaram uma base sólida para a construção das personas. Conseguimos encontrar padrões organizando respostas similares pelo que extraímos do formulário. Desta forma, para sintetizar os conhecimentos obtidos, montamos a persona que representa o usuário doador do nosso produto final.

Personas podem ser criadas a partir de pesquisas e permitem o entendimento de como as pessoas se comportam, quais são as suas dores, seus desejos e como utilizam os produtos e serviços estudados.

Proto-persona — Recebe doação

Apesar de conseguirmos dados dos usuários que precisam de doações, a quantidade foi deficitária para desenvolver uma persona, já que não houve como entrevistá-los qualitativamente. Portanto, iremos utilizar uma proto-persona baseada apenas nos dados das entrevistas quantitativas e retirados de alguns doadores.

Proto-persona costuma ser com dados de stakeholders, porém no nosso caso será uma mescla de vários dados.

Jornada do usuário

Através do uso das personas e de dados discriminados nas pesquisas, podemos traçar uma jornada de usuário que contemple o desconhecimento total da plataforma até a doação feita.

Doador

Recebe doação

Ideias e Priorização da solução

Crazy 8s

Pusemos em prática a ferramenta Crazy 8s para que fossem colocadas várias ideias em votação e entrarmos em consenso nas funcionalidades que irão ser implementadas enquanto protótipo de baixa fidelidade.

Exemplo de uma das telas.

Matriz de Impacto x Esforço

Essa ferramenta irá servir para ajudar na priorização das funcionalidades. Assim, dividiremos algumas funcionalidades que iremos implementar agora e outras para um futuro próximo.

Nesse momento ficou decidido que seria desenvolvido um website responsivo que ajudasse doadores e alunos do ensino público que precisam de materiais escolares a se conectarem de maneira virtual.

Definição do MVP

Através da nossa proposta de valor iremos colocar em prática como definiremos o MVP e como as priorizações nos ajudaram a focar no mais importante.

  • O usuário precisa se sentir confiante de que a doação é comprovada para que seja incentivado a doar.
  • O usuário tem a opção de utilizar tanto Mobile quanto Desktop.
  • Oferecer opções ao usuário para que ele possa escolher tanto seu perfil quanto para quem doar baseado em filtros como quais materiais precisa.

Implementações e ideias para o futuro:

  • Área do usuário para que o perfil de usuário em questão possa ver seus dados pessoais e configurações.
  • Notificação de doação para as pessoas que irão receber doação.
  • Área conheça mais para que o usuário veja várias histórias e resultados acerca das doações.
  • Tela para demonstrar que o cadastro de materiais foi um sucesso para alunos que irão receber doação, assim como o compartilhamento.
  • Ícones representando os materiais para facilitar a compreensão do que é doado e recebido.
  • Prevenção de erros do usuário.

A solução

Primeiro teste de usabilidade e feedbacks

Utilizando Marvel, foi possível realizar o teste do protótipo de baixa fidelidade com 5 usuários. O protótipo foi baseado em cadastro e doação para doadores, cadastro e inserção de materiais para alunos receberem doação. Os usuários conseguiram completar o fluxo com demora e alguns ficaram confusos, essas situações serão melhoradas.

Wireframes

Utilizando as ideias do Crazy 8s, criamos esboços simples do Wireframe no Photoshop e demos continuidade a ele no Figma, por fim criando um protótipo de média fidelidade para melhor representar o que pensávamos.

Telas desenvolvidas para uma amostra do protótipo de baixa fidelidade.

Guia de Estilos

Cores

Botões

Formulários

Tipografia

UX Writing

Na solução, implementamos um tom de voz que fosse próximo do nosso usuário e de sua faixa etária, assim, pensamos numa abordagem Casual, Entusiasmada, Respeitosa e Didática. Dessa maneira, essa ponte visa não só criar uma espécie de conversa bate-papo para guiá-lo, mas que também não seja de difícil compreensão.

Protótipo de Alta Fidelidade

Após a demonstração dos Styleguides, podemos demonstrar a estrutura final do projeto.

Página principal da versão Desktop

Página principal da versão Mobile

Versão Mobile precisou ser dividida em duas telas para melhor visualização, porém é uma linha contínua a apresentação do site.

Métricas de usuário e métricas de negócio

Eu irei usar o Framework HEART e colocá-lo de acordo com meu projeto, para que meu sucesso seja medido seguindo as diretrizes exigidas:

  • Engajamento: Irei medir o envolvimento pelo número de usuários que voltam para a plataforma.
  • Adoção: Será medido pelo uso regular dos usuários da plataforma, de que maneira estão completando o Golden Path.
  • Retenção: Esse quesito é determinado pela quantidade de usuários já cadastrados que retornam para utilizar a ferramenta para doações ou receber doações.
  • Sucesso da tarefa: Se o usuário conseguir compreender o porque de cadastrar, logar e após isso completar o fluxo de doação em 5 minutos, a plataforma é um sucesso.

Segundo teste de usabilidade

Com a primeira versão dos Wireframes terminadas, estruturamos um roteiro de teste de usabilidade com o objetivo de validar os fluxos do usuário e problemas que eles poderiam encontrar durante suas jornadas.

Tarefas para os testes

  • Usuários não encontravam facilmente o botão de cadastro.

Protótipo Desktop

https://www.figma.com/proto/RAUKZBylrz4Gxp1XBd8EOh/Wireframe-Prototipo?node-id=101%3A6&viewport=-395%2C18%2C0.14355944097042084&scaling=scale-down&page-id=0%3A1

Protótipo Mobile

https://www.figma.com/proto/FSj3YP1IX8ecZEqYu91k9h/Fcamara-Squad-48?node-id=176%3A1218&viewport=-6797%2C69%2C0.11838465183973312&scaling=scale-down&page-id=0%3A1

Conclusão e aprendizados

Ufa! Chegamos ao término desse case comentando que o trabalho em equipe poderia se mostrar bastante desafiador. Ainda mais com um squad de pessoas que nunca havia se conhecido antes e precisou rapidamente trabalharem juntos numa solução.

Conheça nosso Squad!

Bianca Ruiz Fialho, Desenvolvedora Front-End: https://www.linkedin.com/in/bianca13overjoyed/

Olá! Sou um UX Designer apaixonado pela capacidade humana de inovar e trazer valor para o mundo, focando no que o outro necessita.

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