Educa.doe: serviço de doações de materiais escolares de forma digital

O processo de UX Design para a criação de um serviço de doação de materiais escolares de forma digital. Serviço voltado para pais de alunos de escolas públicas e potenciais doadores. Esse case é parte do Programa de Formação do Grupo FCamara, desenvolvido por Renata Cristina e Cristiene Menezes.

Contexto e problema

Segundo dados do módulo Educação da PNAD Contínua 2019, divulgada pelo IBGE, das 50 milhões de pessoas com idades entre 14 e 29 anos, dez milhões, o equivalente a 20% delas, não concluíram todos os anos da educação básica. Entre os adolescentes de 11 a 14 anos, 12,5% estavam atrasados ou tinham abandonado os estudos. Já entre as pessoas de 15 a 17 anos, esse número era de 28,6%. Ainda de acordo com o estudo, a falta de motivação e os problemas socioeconômicos figuram entre os principais fatores para a evasão escolar.

Para agravar ainda mais a situação, somente no ano de 2021, o preço dos materiais escolares fabricados no Brasil teve um aumento estimado entre 8% a 10%, conforme informado pela Associação Brasileira dos Fabricantes e Importadores de Artigos Escolares (Abfiae) em matéria veiculada no site Terra.

O desafio

“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…”

Diante desse quadro, e como parte do Programa de Formação do Grupo FCamara, nos foi proposto criar uma aplicação em que os pais e responsáveis por alunos das redes municipal e estadual de ensino pudessem cadastrar a lista de materiais escolares de seus dependentes e, a partir daí, doadores avulsos e anônimos pudessem acessá-las e doar os itens solicitados.

A solução deveria ser entregue em 15 dias, na forma de uma aplicação web responsiva ou de um aplicativo, com no mínimo 3 telas de desenvolvimento.

Os primeiros passos

Primeiramente, fomos divididos em squads compostas por desenvolvedores e UX’s. Nossa squad, a de número 3, era composta por dois desenvolvedores front-end, dois desenvolvedores back-end e dois UX Designers. Cientes de nossa problemática, começamos a nos organizar para dar andamento ao projeto. Criamos um quadro colaborativo no Trello e no Miro para que todos pudessem acompanhar as etapas do processo. Como passos iniciais, todos os membros da squad participaram de uma brainstorming para explorarmos o potencial criativo do grupo e imergimos no problema. Em seguida, fizemos uma Desk Research que auxiliou na obtenção de insights para a confecção da Matriz CSD, que ficou da seguinte forma:

Benchmark

Com as certezas, suposições e dúvidas definidas, fizemos o benchmark com alguns sites e aplicativos de arrecadação de doações e que trabalham de forma colaborativa com os usuários para conhecer um pouco mais do cenário e entender melhor o nosso problema. A etapa foi importante para sinalizar os pontos fortes e fracos de produtos semelhantes e, de acordo com isso, traçarmos estratégias para o desenvolvimento da solução.

Com isso, percebemos algumas fraquezas tanto em comum entre eles quanto pontuais, que ajudaram a nortear nossas ações na busca por diferenciais.

Processo

O método de design aplicado para este projeto foi o Double Diamond, processo de Design Thinking, que inicia pela etapa de imersão, seguindo para a empatia, definição, desenvolvimento até chegar aos testes.

Pesquisas

As pesquisas qualitativas e quantitativas nos ajudaram a ter uma melhor compreensão do contexto do problema e também a conhecer mais detalhadamente o nosso público-alvo. Dessa forma, e baseado na prevalência de respostas vindas do estado de São Paulo, concluímos que o nosso público-alvo vem da região. Além disso, percebemos também que a maioria dos doadores é do sexo feminino, com idade entre 18 e 28 anos, e que doam esporadicamente. Seguido de mulheres com idade entre 29 e 39 anos.

Ainda de acordo com as pesquisas, para 58,1% dos entrevistados não faz diferença conhecer ou não quem vai receber a doação. Além disso, na hora de decidir fazer uma doação, 39,5% buscam informações com familiares e amigos a respeito de onde doar.

Para fazer a entrega de doações de materiais usados, mas em bom estado, nossas pesquisas indicaram que 63,2% preferiam levar em pontos de coleta próximos da residência.

Confira o restante dos gráficos aqui.

Como os principais fatores que dificultavam e/ou faziam com que desistissem do processo de doação, os usuários apontaram a falta de transparência das instituições, a logística para a entrega dos itens e também a burocracia para o preenchimento de formulários. Assim, analisando as pesquisas para determinar qual o tipo de aplicação responderia às necessidades de nosso público, constatamos que 94,6% dos entrevistados acessam a internet através de dispositivos móveis. No entanto, quando questionado a respeito de sua preferência para fazer doações, 59,6% afirmaram que tanto aplicativos quanto aplicações web atendiam a essas necessidades. Então, com base nesses dados, optamos por desenvolver uma aplicação web responsiva, por contemplar a todos igualmente.

As pesquisas quantitativas e qualitativas nos indicaram a melhor direção a seguir e também definiram as formas de nossas personas. Dizemos personas porque depois de avaliarmos os questionários e conversarmos com os desenvolvedores, percebemos que nossa solução seria voltada para os pais — aos quais denominamos beneficiários -, e às pessoas que fariam as doações — os doadores.

Seguindo o processo, precisaríamos dar um recorte em nosso campo de observação, por isso, e devido ao pouco tempo para a conclusão do projeto, optamos por fazer um aprofundamento de nossa Desk Research (disponível em nosso painel no Miro). Dessa vez, para conhecer um pouco mais a respeito de quem seriam as pessoas beneficiadas por nossa solução. Com isso, partindo das informações obtidas, pudemos traçar o alcance inicial de nossa proposta. Então, em um primeiro momento, tomando como base dados a respeito da recorrência de problemas na distribuição de materiais escolares do governo para estudantes de escolas públicas da região de Sumaré (município do estado de São Paulo), optamos por utilizá-la como área de alcance da solução.

Matéria retirada do site Portal CBN Campinas
Depoimentos de responsáveis retirados do Facebook da Prefeitura Municipal de Sumaré

As pesquisas indicaram, entre outras coisas, que nosso beneficiário é mulher, entre 40 e 50 anos de idade, que trabalha fora de casa, é casada, tem dois filhos e rendimentos entre 1 e 2 salários mínimos. Uma de suas dores é a impossibilidade de comprar produtos de qualidade devido ao aumento dos preços percebido entre os anos de 2019 e 2021. Assim, chegamos até Elisa, nossa doadora, e Simone, nossa beneficiária.

Personas

Golden Circle

Após o processo de pesquisa quantitativa e qualitativa com os usuários, optamos por aplicar o Círculo Dourado, conceito criado por Simon Sinke, a fim de entender melhor o produto e o propósito, também buscando engajar o nosso público-alvo e fazer com que se identifique com a solução.

O conceito inclui três etapas, e para cada uma delas obtivemos as seguintes respostas:

Por quê? (Why)

-Oferecer uma solução aos pais preocupados com a continuação dos estudos dos filhos, pois não possuem condições de comprar materiais escolares.

- Buscar uma maneira prática e intuitiva para pessoas interessadas em fazer doações através de um serviço online

- Oferecer a melhor solução na entrega de doações a ambos os lados, doadores e responsáveis de alunos que recebem doações

- Proporcionar transparência sobre o serviço e sobre as doações que serão feitas

Como? (How)

- Através da criação de uma plataforma web responsiva.

O quê? (What)

- Doação de materiais escolares online

Proposta de valor + Perfil do Cliente

A partir do Canvas de Proposta de Valor, buscamos analisar como as funcionalidades do nosso serviço poderiam sanar as dificuldades de nossas Personas, o Doador e o Beneficiário.

Proposta de valor + Perfil do Cliente: Doador

Proposta de valor + Perfil do Cliente: Beneficiário

Mapa da Jornada do Usuário

Para aprofundar ainda mais o nosso conhecimento sobre as personas para as quais estamos desenvolvendo a solução, recorremos ao Mapa da Jornada do Usuário. A ferramenta é bastante eficaz para entendermos o antes, o durante e o depois de o usuário utilizar o produto ou serviço. Através dela conseguimos traçar mais estratégias para o nosso negócio por meio da identificação dos pontos de dor e de contato de nosso público.

Mapa da Jornada do perfil do doador.
Mapa da Jornada do perfil do beneficiário

MVP -> Roadmap de funcionalidades

Com base nas pesquisas e as necessidades de nossas personas, definimos as funcionalidades do mínimo produto viável a fim de entregar um produto de valor, restringindo features e hipóteses a serem validadas, dessa forma, seria possível balancear as necessidades e analisar a satisfação do nosso público.

- Páginas internas: receba doações, seja um doador e pontos de coleta
- Cadastro como beneficiário + dependentes e também e como doador
- Cadastro de pontos de coleta
- Login como beneficiário e como doador
- Painéis do usuário
- Cadastro de lista de materiais
- Escolha do ponto de coleta disponível próximo ao endereço da residência
- Busca por doações através da localização
- Seleção dos materiais a serem doados e quantidade
- Status da doação: painel que indica se a coleta já foi feita pelo beneficiário e também, indica ao beneficiário que a coleta já foi enviada a partir da data final do prazo estipulado no serviço.
- Alterar dados de cadastro.

Solução do projeto

A partir das dificuldades estabelecidas pelas personas, desenvolvemos algumas soluções para o projeto.

Junto com toda a equipe, analisamos quais ideias seriam possíveis para o projeto considerando as funcionalidades básicas que precisaríamos entregar no MVP dentro do período de tempo estabelecido pelo Programa.

• Sistema de cadastramento aos beneficiários e seus dependentes, onde possam solicitar os materiais necessários e escolher um ponto de coleta próximo de seu endereço

• Sistema de cadastramento aos doadores, que podem pesquisar por alunos de escolas públicas pré cadastrados por seus responsáveis, sendo eles, também próximos de suas residências ou região.

• Sistema de ponto de coleta que possa ser viável a ambos, ao doador e ao beneficiário. Os pontos de coleta serão comércios da região pré cadastrados no serviço. Deste modo, além de ser de próxima localidade para ambos os usuários, incentivamos o consumo do comércio local.

• Não precisar ir ao encontro direto com o beneficiário e nem enfrentar filas e aglomerações. A entrega será agendada.

Após as pesquisas e notarmos que nossos usuários-alvo não possuem preferência para realizar doações online entre sites ou aplicativos, conversamos com os desenvolvedores da Squad, que concordaram com a aplicação do sistema online responsivo por questões de afinidade e conhecimento.

Dentro das ideias discutidas com o time, tivemos que priorizar as funcionalidades principais que respondessem ao problema. Diante disso, criamos o serviço Educa.doe, um site que possibilita a doação de materiais escolares a pais e dependentes de escolas públicas cadastrados no serviço.

A princípio, o site é segmentado em uma única região, Sumaré, na Zona Oeste de São Paulo. Após inúmeras pesquisas, coletamos dados sobre a instabilidade de distribuição de materiais escolares por parte da Prefeitura nos anos de 2018 e 2019.

Pontos de coleta

Também é segmentado a um único ponto de coleta, no qual conseguimos a autorização do dono do estabelecimento Red Cell, loja de Assistência Técnica de aparelhos celulares localizada em Sumaré, em uma entrevista através do Google Forms, que declarou vendas instáveis durante a pandemia. Tivemos a autorização de dois pontos de coleta, mas preferimos trabalhar somente com um, a princípio.

Os pontos de coleta são a peça-chave do projeto. Eles conectam doadores e beneficiários, ajudando a aumentar o fluxo e a movimentação nos locais. Dessa forma, se o ponto de coleta for no nicho estudantil — livrarias ou papelarias-, ser parceiro será muito vantajoso em questões de marketing e divulgação para o estabelecimento, ajudando a movimentar a economia local.

Diferenciais

- Notificações por e-mail, onde o beneficiário e o doador podem acompanhar o destino das doações. Com isso, focamos na transparência do processo, uma das dores da persona doadora.
- Pontos de coleta próximos
- Sistema de busca de doações da região
- Opção de privacidade dos dados no momento da doação

Fluxo do usuário/User Flow:

A Arquitetura de Informação nos ajudou a ter uma visão ampla de todas as etapas do serviço e, assim, a entregar uma boa experiência para os usuários. Com isso, é possível encontrar as informações necessárias de forma eficiente.

O User flow ajuda a compreender a transição das informações em cada tela, bem como os objetivos e as interações de cada função de determinadas telas. Através do user flow, conseguimos executar a criação dos rabiscoframes, wireframes e protótipos.

Fluxo do Doador:

Fluxo do Beneficiário

Protótipo em Baixa (Rabiscoframes)

Após estruturarmos a arquitetura de informação do Educa.doe, pudemos iniciar o protótipo de baixa fidelidade com os Rabiscoframes, a fim de entender melhor as interações que precisávamos incluir em cada tela. Foi a partir dessa etapa, na qual conseguimos validar o layout com nossos desenvolvedores, que participaram de todo o processo, que vimos o que era possível ou não desenvolver em tempo hábil.

Protótipo em Média (Wireframes)

Os Wireframes de média fidelidade nos ajudaram na ideação das possíveis soluções antes da prototipação, reduzindo tempo na hora da prototipação e re-trabalho.

Style guide

Criamos o guia de estilo do nosso serviço, incluindo a identidade visual. Buscamos utilizar cores básicas e não tão agressivas, já que iríamos utilizar ilustrações e as mesmas, poderiam trazer mais cores ao site responsivo. Acesse o nosso Style Guide aqui.

Protótipo em Alta (Navegável)

Chegamos ao momento de fazer o protótipo em alta fidelidade. Para ambas de nós, UX’s, foi uma oportunidade de aprimorar os conhecimentos em ferramenta de prototipação, no qual não tínhamos muita afinidade. Optamos por criar um layout apenas com ilustrações, por se tratar de uma solução com temática crianças, preferimos não utilizar imagens reais por questões de exposição.

As ilustrações têm a vantagem de comunicar uma ideia de maneira universal, são, portanto, inclusivas, atingindo a compreensão de um maior número de pessoas. São também úteis para influenciar o usuário ou ajudá-lo a tomar decisões. (Fonte: UX Collective)

Em relação aos rabiscoframes e wireframes, o protótipo de alta fidelidade passou por poucas alterações que fomos percebendo ao construí-lo e notarmos melhorias de usabilidade.

Veja o protótipo navegável da versão desktop aqui.

Veja o protótipo navegável da versão mobile aqui.

Algumas telas da versão Desktop
Algumas telas da versão mobile

Teste de Usabilidade

Após a conclusão dos protótipos e validação com os desenvolvedores, seguimos para o teste de usabilidade. A técnica é utilizada com o objetivo de avaliar se há pontos de melhoria ou problemas no produto. Em função de estarmos em período de distanciamento social por causa da pandemia de Covid-19, os testes foram feitos de modo remoto. Para isso, convidamos cinco usuários pertencentes ao nosso público-alvo e pedimos que navegassem no protótipo enquanto compartilhavam suas telas.

Seguimos um roteiro no qual foi criado o cenário e sugerimos que o usuário pensasse em voz alta enquanto realizava as tarefas propostas. Depois disso, ainda poderiam fazer críticas ou sugestões ao produto. O resultado pode ser conferido aqui.

Próximos passos

Pensando nos próximos passos do nosso MVP, gostaríamos de aplicar novas funcionalidades. Como planos futuros, e por estarmos diante uma situação atípica, como a da pandemia de COVID-19, consideramos manter o processo de doação o mais online possível. Para isso, pensamos em adotar um sistema de parcerias com lojas online. Nesse caso, o doador, ao acessar a lista de materiais e selecionar os itens que deseja doar, será redirecionado ao site de uma dessas lojas. Assim, poderá comprar os materiais e vincular o endereço de entrega ao cadastrado pelo beneficiário. Outros próximos passos:

-Incluir novos pontos de coleta
-Melhorar a interface e incluir mais informações sobre a causa, trazendo mais apelo ao público
-Incluir métodos de pré aprovação dos beneficiários ao serviço
-Parcerias com escolas públicas
-Expandir a outras regiões
-Aprimorar o sistema de login para dois usuários diferentes
-Realizar mais testes de usabilidade

Aprendizados

Chegamos ao final do Hackathon Season 1, online (2021), porém o Educa.doe não para por aqui. Ao longo do processo, é natural que surjam novos feedbacks, por essa razão, o projeto continua vivo, sujeito a aperfeiçoamentos e melhorias. Uma das principais lições que aprendemos dentro do UX Design é que não existe produto final. Estamos sempre buscando melhorias e melhores experiências. Nos apaixonamos pelo problema e assim, buscamos a solução.

Foram 15 dias ricos em conteúdo e troca de experiência. Não tínhamos a dimensão do que estava por vir, porém, nosso saldo foi extremamente positivo. Somos gratos ao Grupo FCamara por nos proporcionar a oportunidade de vivenciar o dia a dia em uma empresa de tecnologia, trabalhando em equipe com o time de desenvolvedores e compartilhando ideias e possíveis soluções. E não só isso. Agradecemos também pelas mentorias, bate-papos e toda a organização do evento. Saímos com a sensação de dever cumprido, cientes de que demos o nosso melhor, e com a bagagem cheia de aprendizados, que levaremos para a vida.

SQUAD 3

UX/UI Designer

Renata Cristina (Linkedin: www.linkedin.com/in/renatacristinasantos/)

Cristiene Menezes (Linkedin: www.linkedin.com/in/cristienemenezes/)

Devs Frontend/Backend

Isabela Duarte (Github: https://github.com/dmisabela)

Ramon Vasquez (Github: https://github.com/ramonvm18)

Luiz Rebellato (Github: https://github.com/Luizrebelatto/)

Rodrigo Andrey (Github: https://github.com/rodrigoandrey)

Gratidão a todos que acompanharam o processo até aqui. Em caso de dúvidas ou sugestões, estamos à disposição através dos e-mails: renatacssantos13@gmail.com ou cristiene.menezes@gmail.com

Analista de Mídias Sociais / UX Designer

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