IAFEI — Possibilitando apoio para a educação de crianças carentes

Visão geral

Este case é referente ao projeto desenvolvido durante um Hackathon da Fcamara.

Categoria

Web Design, Mobile Design, Design responsivo

Colaboradores

Sthefany Caires

Atuação

UX/UI Designer


Desafio


Criar uma aplicação onde os pais que não possuem condições de comprar todo o material escolar para os seus filhos pudessem realizar o cadastro da lista de material necessária, e os doadores, vendo essas necessidades, pudessem fazer a doação dos itens que os alunos precisam. Uma causa muito nobre, e me senti realizada por poder fazer parte de um projeto com esse objetivo.

Primeiros passos

Para realizar esse desafio, fomos divididos em squads e tivemos o prazo de 15 dias para a conclusão do MVP (Minimum Valuable Product). O meu squad era composto por 4 Desenvolvedores (Front-end e Back-end) e um UX Designer. Assim que o Hackathon teve início, já fizemos o planejamento do que a gente ia precisar entregar, e usamos a ferramenta Trello para fazer isso.

O site precisava ser web responsivo, com no mínimo três telas de desenvolvimento.

Processos e Pesquisas

Nosso primeiro passo foi fazer a imersão no problema, e nas nossas primeiras reuniões já discutimos várias ideias e fizemos um 5W1H para entender melhor o que nós teríamos que fazer.

  • Why? (Por quê?)
    Porque, com a crise econômica que o Brasil vem enfrentando, alguns pais não conseguem fazer a compra do material escolar necessário para os seus filhos, o que pode dificultar a aprendizagem deles.
  • What? (O quê?)
    Nosso produto seria uma forma de fazer o intermédio entre dois usuários (os pais necessitados e os doadores), juntando ambos num lugar só, possibilitando o cadastro da lista de materiais necessários pelos pais, e trazendo visibilidade para essa necessidade para os doadores.
  • Who? (Quem?)
    Para pais que possuam filhos que estudam em escolas estaduais e/ou municipais e não tenham condição de comprar todo material escolar necessário, e se importem com o ensino e a experiência educacional dos mesmos e para doadores que tenham interesse em ajudar uma causa relacionada à educação infantil.
  • Where? (Onde?)
    Em qualquer dispositivo que tenha acesso à internet, seja no celular ou no computador. No trabalho, em casa, na rua e nas escolas, para os pais que não possuem acesso à internet possam realizar o seu cadastro também.
  • When? (Quando?)
    Quando um pai/responsável não consiga realizar a compra de um ou mais materiais específicos que seu filho precisa, e perceba que isso está dificultando o seu ensino. Algumas crianças/adolescentes param até mesmo de acompanhar/frequentar as aulas por não terem o material necessário para realizar tal atividade.
  • How? (Como?)
    Colocando essas necessidades em evidência para os doadores, a doação do material escolar necessário poderá ser realizada, suprindo essa carência específica dos pais e seus filhos.

A partir disso, pude começar a buscar outros serviços que oferecem a solução para esse tipo de problema e realizar algumas pesquisas quantitativas para conhecer melhor quem são nossos usuários, e também já coletar algumas informações pessoais para poder realizar as pesquisas qualitativas, que foram feitas por meio de entrevistas.

Benchmarking/Pesquisa de mercado

Fazendo a análise de outros serviços que possuem funções similares, pude perceber que a maioria dos sites de doações possuíam duas formas para realizar tal ação: você pode doar dinheiro (e eles vão converter isso em itens necessários, possibilitar a continuidade do programa, etc.), ou fazer a doação de itens novos e/ou em bom estado no próprio endereço. Analisei também alguns sites de crowdfunding (vaquinha virtual), que funcionam por meio de campanhas publicadas pelos usuários para arrecadar dinheiro para determinada causa.

Os serviços analisados foram:

Corassol (site de doações voltado para ajudar crianças e adolescentes);

The Friendship Circle (site de doações voltado para ajudar crianças e adolescentes com deficiência);

Vakinha (site de crowdfunding);

Kickante (site de crowdfunding).

Pesquisa quantitativa

Usando alguns dados coletados previamente e o que a gente já sabia sobre o problema, fiz uma pesquisa quantitativa para descobrir mais sobre o que usuários reais pensavam sobre o problema, além de encontrar potenciais doadores e pais necessitados. Nos dois dias em que a pesquisa ficou aberta, obtivemos 58 respostas.

Dados coletados através de formulário de pesquisa com os usuários

Dados coletados através de formulário de pesquisa com os usuários

Após a obtenção de dados dessa pesquisa, eu e meu squad nos reunimos para montar uma Matriz CSD (Certezas, Suposições e Dúvidas).

Matriz CSD

Matriz CSD

Pesquisa qualitativa/Entrevistas com usuários

Com base na pesquisa quantitativa e na Matriz CSD, pude montar um roteiro para realizar a pesquisa qualitativa, que foi realizada por meio de uma entrevista semiestruturada, utilizando os meios de comunicação que os usuários preferissem (ligação por Whatsapp, Google Meet, Discord, etc). As entrevistas nos auxiliaram a conhecer melhor quem realmente ia fazer uso do nosso produto, e também foi usada para fazer validação de conceito, para que nós pudéssemos coletar dados para possíveis features.

Através das respostas obtidas, conseguimos mapear as dores e necessidades dos usuários, assim como coletar dados e ter alguns insights.

Necessidades e dores dos usuários

-> Doadores

    • A doação é uma forma de ajudar o próximo;
    • Não conhecem muitos sites de doação de materiais escolares;
    • Querem doar para escolas de qualquer região, mas não sabem como;
    • Alguns já caíram em golpes de sites de doação, por isso eles têm medo e desistem de doar virtualmente;
    • A necessidade das pessoas está aumentando e eles querem contribuir de alguma forma.

-> Pais/responsáveis

    • Não têm condições de comprar todo o material escolar necessário para os filhos;
    • Alguns necessitam de outros itens além do material escolar;
    • Alguns pais tem mais de um filho estudando em escolas públicas
    • Alguns pais não possuem internet;
    • Querem poder atualizar a lista com o tempo.

Dados coletados e insights

-> Doadores

    • A maioria dos doadores já passou por necessidades e precisaram de doações também, por isso querem doar;
    • A maioria dos doadores fariam a doação de forma anônima;
    • Preferem doar o material diretamente na escola;
    • Não gostariam de saber para quem estão doando;
    • Gostariam de ver fotos dos materiais nas escolas;
    • Se o meio de pagamento for depósito é mais confiável (ter um registro da doação);
    • Doariam mais de uma vez;
    • Gostariam de fazer doações de outros itens além do material escolar;
    • Compareceriam à escola escolhida para a doação de itens novos e/ou em bom estado.

“A gente conta o milagre, mas não diz o nome do santo.”

“Todas as crianças são iguais.”

-> Pais/responsáveis

    • Gostariam de se identificar por nome de usuário ou nome e sobrenome;
    • Forneceriam telefone, endereço e/ou e-mail para saber sobre as doações;
    • Pais que não possuem internet ou telefone iriam na escola para conferir se algum material foi doado;
    • Compareceriam à escola para buscar o material doado.

“Gostaria de receber essa doação para que meu filho possa conseguir uma boa educação, fazer uma faculdade e assim ter um bom emprego”

Tanto os doadores quanto os pais/responsáveis relataram que se sentiriam mais seguros ao usar o site se ele fosse indicado por outras pessoas e se tivesse informações sobre ele e acham que a solução vai ajudar na educação das crianças, além de fazer os doadores se sentirem bem por estarem ajudando uma causa nobre.

A partir das entrevistas, foram criadas duas personas para melhor visualização de cada usuário, que representam o público alvo da nossa aplicação.

Perfil usuário pai/responsável

Persona usuário pai/responsável

Perfil usuário doador

Perfil usuário doador

As personas têm dores e necessidades bem diferentes, já que uma representa os pais que não tem condições de comprar o material escolar necessário, e a outra representa os doadores que querem ajudar causas relacionadas à educação infantil. Pensando nisso, criamos duas jornadas de usuário, para que pudéssemos identificar melhor as oportunidades de produto de cada persona.

Jornada do usuário — Maria Aparecida (pai/responsável necessitada)

Jornada do usuário — Maria Aparecida (pai/responsável necessitada)

Jornada do usuário — Guilherme Alves (doador)

Jornada do usuário — Guilherme Alves (doador)


Para ter uma melhor visualização das nossas jornadas de usuário, acesse o nosso Miro por esse link: https://miro.com/app/board/o9J_lOQ9HZQ=/


Com as jornadas dos usuários feitas, pudemos perceber que a maioria das dores dos pais/responsáveis eram relacionadas ao motivo (não ter condições para comprar os materiais), e a dos doadores eram em relação ao uso do nosso produto propriamente dito (falta de confiança, medo de cair em golpe).

Propostas de Valor

Tendo tudo isso em mente, foram criados dois canvas de Propostas de Valor, para melhor atender as dores e necessidades dos dois usuários. Esse canvas é uma forma de alinhar os problemas e necessidades dos usuários com o que nós realmente podemos entregar para resolver o que é necessário e todo mundo sair ganhando.

Canvas de Proposta de Valor — Pai/responsável necessitado

Canvas de Proposta de Valor — Pai/responsável necessitado

Canvas de Proposta de Valor — Doador

Canvas de Proposta de Valor — Doador

As Propostas de Valor do produto consistem em entregar aos dois usuários o que eles necessitam (doador: fazer a doação; pai necessitado: ter suas necessidades supridas) de uma forma prática e segura, onde os doadores irão fazer a doação de forma anônima, tendo a opção de comparecer diretamente à escola para fazer a doação desses e outros itens, e os pais não irão precisar fornecer muitas informações sensíveis no cadastro.

Roadmap de funcionalidades

As funcionalidades que desenvolvemos foram pensadas para resolver os problemas de usuário e entregar valor ao mesmo tempo. São elas: ver informações e indicações de outros usuários, fazer o cadastro e atualização da lista de materiais necessários, fazer a doação de forma anônima escolhendo uma escola e um valor para ser doado ou doando diretamente na escola (fornecimento de endereço das escolas) e cada escola poder ter controle dos cadastros que foram realizados e se os itens necessários já foram doados ou não.

Para atender os outros desejos e/ou necessidades dos usuários, funcionalidades futuras foram pensadas, como: postagem de fotos dos materiais doados, campanhas de doação de itens além dos materiais escolares, parcerias com papelarias para que os doadores obtenham descontos na hora de comprar os materiais escolares para doar diretamente nas escolas, notificação por e-mail para o doador quando uma doação fosse entregue, etc.

Wireframes

Os wireframes foram feitos pensando na organização de informações e nas suas hierarquias em cada tela.

Wireframes e protótipo de baixa fidelidade (desktop)

Wireframes e protótipo de baixa fidelidade (desktop)


Para ter uma melhor visualização dos wireframes, acesse esse link do Figma: https://www.figma.com/file/j21ftTft8OkxUqKS7mxjQ3/Prot%C3%B3tipo-em-baixa?node-id=0%3A1


Protótipo de alta fidelidade - Desktop


Para visualizar e navegar no protótipo de alta fidelidade (desktop), acesse esse link: https://www.figma.com/file/cPRCJPV7CBb77gwPLi6FJi/Prot%C3%B3tipo-em-alta-fidelidade?node-id=0%3A1


Protótipo de alta fidelidade - Mobile


Para visualizar e navegar no protótipo de alta fidelidade (mobile), acesse esse link:
https://www.figma.com/file/W650yfBQrJPEjbA5VwWrwx/Prot%C3%B3tipo-em-alta-fidelidade-mobile?node-id=0%3A1


O protótipo de alta fidelidade foi desenvolvido tendo como base alguns designs de outros sites com o mesmo propósito, e o Style Guide foi inspirado em alguns elementos da própria FCamara, como cores e tipografia.

Cores, tipografias e componentes

Cores, tipografias e componentes

Acessibilidade

Abaixo, apresento as análises de contraste feitos pelo site colorable.jxnblk.com, com todas as combinações obtendo bons resultados.

Resultados dos testes de contraste

Resultados dos testes de contraste

Teste de usabilidade

Após ter finalizado o protótipo de alta fidelidade e conversado com os desenvolvedores para fazer a validação de layout, realizei testes de usabilidade, onde consegui ver o que usuários faziam e quanto tempo levavam para a realização de cada tarefa. Durante os testes, os próprios usuários já apontaram algumas coisas que poderiam ser melhoradas, como a cor de um botão para tornar ele mais visível. Alguns se mostraram confusos na hora de escolher a escola, então tomei providências e alterei essas telas para que as ações ficassem mais claras. Fora isso, apenas outras pequenas alterações foram necessárias para melhorar a experiência dos usuários.

Resultado dos testes de usabilidade

Resultado dos testes de usabilidade

Análise das Heurísticas de Nielsen

As Heurísticas de Nielsen são muito importantes para avaliar a usabilidade da interface, para que possa ser desenvolvido algo que além de funcional, seja intuitivo e de fácil utilização também.

Análise Heurística

Análise Heurística

Retrospectiva e aprendizado

O Programa de Formação, do início ao fim, me proporcionou muitas experiências e aprendizados, além de eu ter conhecido várias pessoas incríveis que com certeza pretendo levar para fora do Hackathon. Meu squad foi simplesmente maravilhoso, sempre participando de tudo, querendo ajudar e me dando muita força. Os monitores também tiveram papel crucial para que essa jornada fosse tão linda, muito atenciosos e simpáticos e estavam sempre presentes para tirar dúvidas ou simplesmente para dar mais confiança pra gente.

A curva de aprendizado que eu tive no Hackathon é enorme, tanto na parte de UX/UI Design quanto nas outras também, como metodologias ágeis, processos, negócios e até mesmo de Front-end e Back-end. Durante o Hackathon também tivemos vários bate-papos que ajudaram muito, como o de Carreira, Git, Wireframes, e diversos outros.

Por ser meu primeiro Hackathon, tive algumas dificuldades e diversas vezes me perdi do que realmente precisava ser feito, mas sempre tive essas pessoas (tanto meu squad quanto os organizadores e mentores) para me dar apoio e me ensinar o que eu precisava saber. Com certeza foi algo que me marcou muito, e a experiência que eu tive nesses 15 dias vai permanecer pelo resto da minha vida.

Meus mais sinceros agradecimentos para a FCamara e para todos os envolvidos, muito obrigada por terem me dado a oportunidade de vivenciar essa experiência tão enriquecedora.

Mockup notebook e mobile

Outros projetos

sthefanycaires@outlook.com