Donate — estudo de caso de UX/UI

Um estudo sobre facilitar doações e aquisições de materiais escolares

Materiais escolares sempre foram essenciais para os alunos. Eles auxiliam em seu aprendizado e estão presentes em nossa vida por muitos anos. Por esse motivo, os gastos na compra dos mesmos representam 22% do salário médio brasileiro. No entanto, tem se tornado muito complicado para alguns pais adquirirem esses materiais para os seus filhos (especialmente aqueles que estudam em escolas públicas), pois os preços aumentam cada vez mais.

Considerando esse cenário atual onde alunos que fazem parte da rede de ensino público precisam de materiais escolares, pensamos: Como podemos utilizar a tecnologia a favor daqueles que precisam, facilitando a aquisição de materiais escolares para eles?

Essa foi a proposta que o time 22 do Programa de Formação do FCamara recebeu, e é isso que vamos explicar um pouquinho daqui para frente.

Descoberta

Como time de UX, usamos o duplo diamante ao nosso favor. Ele foi essencial para nos guiar em nossa jornada e nos fazer entender o que precisaria ser feito. Por isso, para ficarmos imersos dentro do tema, realizamos alguns processos.

Matriz CSD

Fizemos uma matriz CSD — Certezas, Suposições e Dúvidas para nos inteirarmos da situação. Com o intuito descobrimos o que já sabíamos sobre o assunto, fizemos uma Desk Research onde descobrimos alguns pontos importantes como:

Claro que precisávamos descobrir muito mais e, para nos nortear nesse processo, levantamos suposições e dúvidas que necessitavam de respostas concretas.

Matriz CSD. Para acessar a nossa matriz clique aqui

Pesquisa quantitativa

Foi feita uma pesquisa quantitativa para que pudéssemos levantar algumas dados a respeito do nosso público — pais de alunos do ensino público e possíveis doadores — e cenário em que se encontravam atualmente. Isso nos ajudaria validar algumas de nossas hipóteses levantadas na nossa matriz CSD.

Pais

Alguns dados importantes a respeito dos materiais mais usados e a situação em que os pais e alunos se encontram atualmente:

Dados levantados com pais de alunos de escolas públicas

Doadores

Alguns dados que consideramos importante a respeito de possíveis doadores e suas condições atuais.

Dados levantados com possíveis doadores

Pesquisa qualitativa

Depois que levantamos alguns dados sobre o nosso público, atualizamos a nossa matriz CSD e analisamos o que ainda precisaríamos descobrir que serviria de ajuda para criarmos uma possível solução. Levantamos mais algumas dúvidas e com base nelas criamos mais um guia de perguntas para realizarmos uma pesquisa qualitativa com pais de alunos de escolas públicas e possíveis doadores. Tivemos como base os seguintes objetivos:

Pais

Doadores

Fizemos um total de seis entrevistas — 3 pais e 3 possíveis doadores.
Alguns dos pensamentos que conseguimos extrair:

“Antes de comprar vejo o que pode ter sobrado de anos anteriores, e no caso de lápis, caneta, borracha, eu costumo comprar em maior quantidade para que o valor unitário fique mais barato.”

“…eu gasto com aquilo que é realmente necessário […] e tento passar isso para eles, que uma caneta de R$ 1,50 escreve igual a de uma de R$10.”

“Eu nunca recebi material escolar. Desde que eram pequenos, as escolas nunca doaram.”

“A maior dificuldade na verdade é encontrar locais confiáveis que estão comprometidos com uma causa humanitária de forma verdadeira.”

“Costumo pesquisar sobre a instituição a qual estou ajudando e assim tentar buscar informações sobre a veracidade das informações …”

“Em um mundo em que cada vez mais pessoas estão conectadas a objetos ‘’smart’’, a necessidade de se encontrar métodos eficientes […] se tornam cada vez mais interessantes para a sociedade como um todo.

“Primeiro eu converso, eu tento saber o que a pessoa realmente está necessitando até para a doação não ser em vão, e assim realmente fazer sentido na vida da pessoa.”

Personas

Com as informações coletadas em nossas pesquisas — quantitativas e qualitativas — conseguimos criar uma base de quem seria o nosso principal usuário. A partir disso, criamos as nossas personas. Elas nos ajudaram a ter empatia para com quem iriamos projetar uma possível solução, deixando tudo mais claro e objetivo.

Persona Mariana representando os pais entrevistados
Persona José Luiz representando os nossos possíveis doadores

Mapa da Jornada do Usuário

Com nossas personas criadas, fizemos uma jornada do usuário para cada uma. Assim, conseguimos ter uma projeção do que os nossos usuários poderiam vivenciar ao utilizarem a nossa possível solução e, a partir disso, criar uma melhor experiência.

Claro que existem outras jornadas que precisam ser feitas para ir mapeando a experiência do usuário com o produto.

Jornada da Mariana
Jornada do José Luis

Ideação

Na criação das nossas personas e jornadas, já fomos pensando em possíveis analgésicos para suas dores, mas para que se tornasse algo válido e nos direcionasse da melhor forma possível, usamos a método 5W1H.

— Why (por quê)

Os pais sempre querem dar o melhor para os seus filhos e isso também se aplica no quesito educação. Materiais escolares são essenciais e muitos pais não tem recursos para providenciarem os mesmos. O tão famoso “novo normal” só piorou a situação. Agora eles estão se preocupando em ter dispositivos móveis para que seus filhos consigam acessar as aulas. Por isso, uma plataforma que venha a unir pessoas dispostas a doar e pais de alunos de escolas públicas é uma ótima solução para tornar esse materiais mais acessíveis.

— Who (quem)

Os usuários dessa plataforma são:

— When & Where (onde e quando)

Os usuários utilizarão a plataforma em momentos como:

Um dos benefícios de pensarmos em um site responsivo como solução é que não necessita da presença física do usuário, tornando-o acessível para uso em qualquer lugar e horário desde que tenha acesso a internet e a um dispositivo móvel.

— What (o quê)

Plataformas de doações não é nenhuma novidade, mas muitas vezes elas não são bem exploradas. Em alguns casos, devido a falta de informação, muitos ficam com dúvida de sua credibilidade. Por isso, nossa proposta de solução é um site responsivo que:

— How (Como)

Foi definido algumas métricas para validar se o projeto está no caminho certo. Entre estas estão:

Definição

Depois de analisarmos o que seria mais viável de projetarmos nesse momento — para isso usamos a Matriz de Impacto x Esforço — e cautelosamente analisarmos nossos concorrentes diretos por meio do Bechmark, começamos a desenvolver o protótipo de baixa de nossa solução.

Wireframes

Fizemos o “esqueleto” das telas para ter mais agilidade e nos sujeitarmos a possíveis mudanças sem ter alterações de grande peso que nos desperdiçaria mais tempo. Essas telas foram fundamentais para analisarmos com a equipe de desenvolvimento o nosso userflow sem que fossemos para um caminho muito difícil e que, ao mesmo tempo, estivesse dentro de nosso MVP.

Wireframe evoluído com média fidelidade e conteúdo de copy incluso

Nome & Logotipo

O nome Donate vem da palavra em inglês que significa “doar”. Ele tem uma pronuncia dupla onde pode ser falado como Do — ná — te.
Para o logotipo pensamos em algo simples, minimalista e que se enquadrasse na boa ação de fazer uma doação.

A fonte usada em nosso logo foi a Now Bold, que transmite a ideia que estávamos querendo passar.

Logotipo da Donate

Tipografia

Escolhemos como a nossa fonte a Mulish. Ela se enquadra no padrão minimalista, facilitando a leitura. Além disso, ela tem todos os pesos tipográficos disponíveis ao seu favor. Isso nos ajudou muito na hierarquia de informações. Com uma única fonte conseguimos identificar as informações de maior relevância para o usuário.

Tipografia e pesos utilizados na Donate

Cores

As nossas cores primárias são: Roxo, amarelo mostarda e rosa claro. Os motivos por trás dessas cores são:

São cores que se complementam e contrastam umas com as outras.

Também criamos uma escala de cinza e cores de suporte pensando em problemas, erros e alertas.

Paleta de cores da Donate

Style Guide & Design System

Documentamos todos os componentes da interface como campos, botões e seus estados, ícones, paleta de cores, tipografias, etc. Facilitou no processo de desenvolvimento.

Style Guide da Donate

Protótipo em Alta Fidelidade

Para tangibilizarmos a nossa ideia, criamos um protótipo de alta fidelidade com todo o fluxo que já havíamos previamente decidido.
Obrigada por ter esperado para ver algumas das telas que criamos para a Donate.

Tela “Home” da Donate
Telas de solicitação de materiais

Gostaria de testar os nossos protótipos? Aqui estão os nossos links:

Teste de usabilidade

Para validarmos se o que criamos de fato iria ser útil para o nosso público, fizemos um teste de usabilidade com 7 pessoas. Definimos previamente um caminho que gostaríamos que fosse seguido e obtivemos algumas informações importantes:

Pontos positivos destacados:

Próximos passos

Definimos como próximos passos o ajuste de nosso protótipo para que melhor atenda as expectativas de nossos usuários (com novos testes inclusos). Também faremos uma validação de métricas e buscaremos informações sobre custos e viabilidade para investidores. Acreditamos muito nessa causa.

Conclusão

Todo o processo de solucionar problemas e pensar em quais passos poderíamos tomar (sempre pensando no que é mais viável para o negócio e para o usuário) foi extremamente gratificante e desafiador. Nos preocupamos muito com em proporcionar a melhor experiência para aqueles que utilizarão de nosso produto e buscamos sempre melhorar o nosso desempenho para que possamos beneficiar essas pessoas.

Foi incrível ver como cada um tem um papel fundamental dentro da equipe e a nossa sintonia faz toda a diferença. Todos — UXs e Devs — trabalhamos em conjunto para que tudo funcionasse. Nós só temos a agradecer pela grande oportunidade e aprendizado.

Esperamos que tenha tido uma boa experiência lendo sobre nosso projeto.

Squad United — uma equipe maravilhosa:

Ux:

Devs:

Nosso Pitch

Veja mais um pouco do nosso projeto clicando aqui.

Uma UX/UI designer apaixonada por tudo que transmite leveza.

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