EstuDoar: facilitando a doação de materiais escolares com UX
Estudo de caso para o Programa de Formação & Hackathon do Grupo FCamara. Projeto elaborado em equipe com UX Designer e desenvolvedores back/front-end.
A proposta
Com o propósito de aliar teoria e prática, o hackathon tinha como finalidade a criação de uma solução que viabilize a doação de materiais escolares aos estudantes de colégio público que enfrentam dificuldade de acesso à esses itens por diversos fatores, principalmente devido ao aumento constante dos preços.
Para atuar frente a essa problemática, foi realizada uma divisão aleatória entre os participantes do programa em vários squads formados necessariamente por UXs e desenvolvedores. No meu time havia dois desenvolvedores back-end, um desenvolvedor front-end e duas UXs.
Durante todo o processo do desafio nos organizamos a partir de dailys e colaboração contínua com o objetivo de desenvolver um trabalho coerente e conseguir entregar o mínimo produto viável (MVP) de uma aplicação responsiva e que solucione o problema de maneira inovadora dentro do prazo de 15 dias.
Primeiros passos
Para iniciar e estruturar o projeto, desenvolvemos uma organização do seu escopo a partir do que foi apresentado no desafio e um esboço do planejamento das atividades a serem realizadas: as tarefas de cada integrante, as expectativas de desenvolvimento da aplicação, tempo estimado de execução de algumas tarefas e um ordenamento do próprio squad em termos de conhecimento técnico.
A ferramenta Trello foi utilizada como meio de organização e a metodologia do Design Thinking chamada Duplo Diamante foi a diretriz do processo, que é dividida em 4 fases: descobrir, definir, desenvolver e entregar.
Nas fases de descoberta e definição do Duplo Diamante, procuramos descobrir a real problemática do desafio proposto, sendo muito importante a utilização da empatia para compreender o que o usuário realmente precisa e não o que achamos que ele quer.
Na primeira etapa consideramos essencial o trabalho em equipe com os desenvolvedores, então o ponto de partida foi um brainstorming com eles para propiciar o surgimento de insights e ideias disruptivas com o objetivo de agregar na proposta de valor da solução. A partir disso, minha parceira e eu desenvolvemos juntas a aplicação de diversas técnicas de UX e as demais etapas do Double Diamond para manter o usuário sempre no foco do nosso trabalho, como será apresentado ao decorrer deste artigo.
Desk Research
Para avançar nas fases do desenvolvimento do projeto era necessário compreender o contexto em que o problema está inserido, isto é, analisar por meio de uma pesquisa exploratória as informações já existentes sobre a relação entre alunos da educação pública e materiais escolares para depois seguir com as pesquisas primárias.
O cenário do problema
A educação é um direito fundamental garantido na Constituição e o processo de escolarização contribui com o desenvolvimento das pessoas ao promover o exercício da cidadania e propiciar acesso ao mercado de trabalho. Contudo, na educação pública existem diversos obstáculos que atrapalham a continuidade da formação dos estudantes, como o sucateamento dos colégios, desvalorização dos professores, mais atualmente dificuldade de acesso às aulas remotas e também falta de materiais escolares — obstáculo que é o foco da nossa solução.
Todos os anos as famílias costumam gastar um valor considerável de material escolar para continuidade da formação dos alunos, mas sofrem com o aumento constante de preços.
Uma pesquisa indica que o custo dos materiais escolares chega a 22% do salário médio do país, o que denota o impacto causado na renda das classes menos abastadas.
Para garantir a manutenção do direito à educação de todos, o MEC disponibiliza mais de 3 milhões de kits escolares para todos os níveis de ensino, porém, na prática isso não é efetivo. Ao depender dos materiais fornecidos pelo governo, a maioria dos alunos é prejudicada por atraso na logística e entrega dos materiais e escassez ou falta de materiais didáticos impressos, comprometendo assim o andamento das aulas e a prática dos estudantes.
Com o advento da pandemia, agora além da preocupação com os materiais comuns do cotidiano escolar, mais de 60% das famílias de crianças na escola pública afirmam não ter acesso à internet ou ter baixa qualidade na conexão, o que acentua a desigualdade educacional, prejudica o desenvolvimento escolar e cria mais um item na lista de materiais já dispendiosa dos estudantes mais pobres.
Matriz CSD
Após a imersão contextual sobre o problema, realizamos uma discussão em equipe sobre os pontos relevantes encontrados e conseguimos desenvolver a matriz CSD como ponto inicial para alcançar novas perspectivas sobre o projeto. A elaboração da matriz com nossas certezas, suposições e dúvidas foi primordial para construção do questionário utilizado na pesquisa quantitativa com o usuário.
A partir das constatações obtidas com a matriz CSD, foi possível elaborar um plano de pesquisa atitudinal com o propósito de detalhar as convicções, compreensões e relação dos usuários com a prática de doações.
Metodologias utilizadas:
- Questionário online por meio do Google Forms para a pesquisa quantitativa;
- Entrevista via telefone com uma amostra dos usuários respondentes do questionário online como pesquisa qualitativa.
Pesquisa quantitativa
O formulário do Google Forms foi divulgado por todo o squad em redes sociais e levantou dados essenciais para estruturação do projeto e aplicação das demais técnicas necessárias.
As respostas foram analisadas a partir das hipóteses formuladas pela matriz CSD com o objetivo de gerar insights significativos sobre a pesquisa.
- Os dados comprovam a suposição de que a solução será voltada para pessoas que já praticam a doação;
- Oferecer diversos meios de realizar a doação é relevante para o público doador, podendo ser um diferencial da plataforma;
- A maioria dos usuários fornece doações esporadicamente, então levantar formas de incentivar a utilização da solução é importante;
- Dentre os usuários que não doaram, a maioria foi por falta de condições financeiras, mas nenhum apresentou necessidade de receber doação.
Pesquisa qualitativa
Após análise dos dados quantitativos, foi verificada a necessidade de conhecer mais detalhadamente as dores e convicções do usuário doador, uma vez que ele seria o agente principal da solução em termos de experiência e usabilidade, principalmente pela quantidade de potenciais doadores.
Após realizar o roteiro da entrevista, minha parceira conversou com 10 respondentes da pesquisa quantitativa que possibilitou as seguintes contribuições para o projeto:
- As pessoas costumam realizar doações de alimentos, roupas ou ajuda financeira — necessidades mais básicas do ser humano -, não havendo uma preocupação sobre a possível falta de outros itens;
- Sobre a doação de materiais escolares, a maioria dos usuários acha importante devido à distribuição deficitária oferecida pelo governo nesse sentido;
- Uma parcela dos usuários não acredita na relevância da doação de materiais, pois dizem que as escolas já oferecem o suficiente, demonstrando assim a importância de informar e sensibilizar sobre o contexto do objetivo da solução;
- Grande parte dos respondentes consideraram essencial saber que a doação online chegou até quem realmente precisa, ressaltando uma das certezas que já tínhamos.
Diante dos dados alcançados, ficou constatado que a pesquisa não atingiu o usuário que seria receptor da doação. Considerando o prazo para a entrega do projeto, não foi possível viabilizar outras formas de chegar até esse público, então idealizamos uma protopersona e sua jornada de usuário com base em pesquisas secundárias.
Proposta para a solução
A partir dos dados coletados nas pesquisas, realizamos um brainstorming envolvendo os desenvolvedores para analisar os insights e assim identificar as melhores alternativas para a nossa solução. Toda a análise foi pautada em priorizar a entrega do MVP, mas sem perder a qualidade na busca de uma solução para as dores dos usuários. Registramos as principais ideias considerando funcionalidades básicas e principalmente inovações com o objetivo de agregar valor à nossa proposta.
Matriz Impacto x Esforço
Para uma melhor elucidação sobre como alcançar o MVP, distribuímos as ideias de acordo com o tipo de usuário (e aquelas que envolviam ambos) em uma matriz impacto x esforço. Dessa forma, a ferramenta ilustrou de maneira mais clara quais seriam os requisitos e funcionalidades que gerariam maior impacto no projeto, facilitando a organização da equipe para a entrega de resultados.
Definição do MVP
Ao identificar as funcionalidades executáveis para entrega do mínimo produto viável (MVP), foi possível focar nossos esforços em ações de alto impacto para agregar valor à plataforma a curto prazo:
- Agilidade: o cadastro e a navegação dentro da plataforma são rápidos com o objetivo de acelerar o processo para evitar possíveis desistências, conforme a Lei de Parkinson;
- Praticidade: a plataforma oferece três meios diferentes de efetivar a doação, facilitando a intermediação por ampliar as opções do usuário do doador e possibilitar mais chances do estudante receber doação;
- Incentivo: a plataforma conta com espaço para relatos de pessoas beneficiadas e um sistema de recompensas baseado em medalhas para estimular mais doações;
- Contexto: o doador tem acesso à história por trás da necessidade da doação, incluindo a escola e porquê o estudante não tem materiais, reforçando a veracidade e possível urgência dos pedidos.
- Integralidade: a plataforma possibilita que o usuário receptor crie lista de materiais com pedido de doação que contemple objetos de papelaria, livros didáticos e recursos tecnológicos com o propósito de abranger toda a necessidade do aluno.
Persona — Doador
Com base nas pesquisas realizadas, foi possível desenvolver a persona do doador para embasamento de toda construção da solução:
Protopersona — estudante
Como não foi possível coletar dados primários sobre os receptores das doações, idealizamos uma protopersona a partir da perspectiva da desk research:
Jornadas dos usuários
A jornada do usuário é essencial para demonstrar de forma mais esclarecedora como o usuário pode se relacionar com a plataforma. É uma técnica muito rica por viabilizar a descoberta de oportunidades voltadas para engajamento e melhorias, evidenciando possíveis gaps antes da implantação da solução.
Jornada do usuário — doador
Jornada do usuário — estudante
Prototipação
Após todo o percurso realizado nas etapas de pesquisa e a definição do MVP a ser entregue, começamos a colocar em prática as ideias no papel.
Crazy’s 8
O ponto de partida para desenvolvimento do protótipo foi a aplicação da técnica Crazy’s 8 com o objetivo de expandir nossas ideias de forma criativa. Essa técnica ajuda a explorar problemas de forma rápida e visual, encaixando perfeitamente nessa etapa voltada para a interface da plataforma.
A partir do esboço realizado com essa técnica conseguimos ilustrar as principais telas da plataforma que a princípio foi idealizada em formato desktop. Entretanto, considerando que o celular é o principal meio de acesso à internet da população brasileira, decidimos desenvolver a solução no método mobile first para atingir a maioria dos usuários.
Não utilizamos o formato aplicativo porque a instalação e consumo de memória do celular/tablet acabaria sendo um obstáculo, considerando que a maioria dos usuários tem interesse em uma solução prática e rápida, conforme concluímos nas funcionalidades do MVP.
Wireframes
Com base nas ideias geradas durante a aplicação do Crazy’s 8, idealizamos as telas iniciais do fluxo do usuário doador por meio do MarvelApp com o objetivo de desenvolver um protótipo de média fidelidade a fim de realizar testes com usuários e já analisar o que deve ser mantido ou aprimorado na aplicação.
Protótipo de média fidelidade: testes com usuários
Após criação do protótipo de média fidelidade, realizamos testes com 5 usuários que precisaram cumprir uma tarefa com o perfil de doador que envolvia a principal ação da plataforma.
Os testes auxiliaram a validar o fluxo do usuário e propiciaram observações importantes sobre a experiência com a plataforma:
- UX writing: é necessário evitar palavras em inglês para não causar confusão em alguns usuários, como por exemplo a palavra “feed” para a tela com as informações dos estudantes;
- Botões: os usuários tendem a clicar em fotos ou na tela toda e não necessariamente no botão ao tentar efetivar uma ação, então é importante implementar essas possibilidades ou evidenciar mais o botão como prevenção de erros;
- Tela inicial: a maioria dos usuários visualizou a homepage até o fim antes de realizar a ação, sendo uma oportunidade para gatilhos que incentivem a doação.
Guia de Estilos
Cores
O propósito ao escolher a paleta de cores era despertar bem estar e conforto durante a navegação na plataforma, mas também transmitir segurança por lidar com ações que envolvem dinheiro.
Sob a ótica da psicodinâmica das cores, escolhemos lilás, verde e suas variações como as cores principais da solução.
O lilás simboliza respeito, dignidade e sinceridade, sendo associada também a simpatia; já o verde apresenta associação afetiva com bem-estar, esperança e segurança.
Segundo a teoria das cores de J. Bamz, a cor verde inclusive é a preferida entre pessoas na faixa etária de 30–40 anos, contemplando grande parte dos usuários que nas pesquisas se identificaram como potenciais doadores.
Botões
Os botões utilizados foram do estilo almost flat para indicar que são elementos clicáveis sem perder a sutileza, sendo inclusive essa estilização mandatória após o teste com usuários.
Tipografia
Decidimos utilizar duas fontes: Public Sans para títulos e botões e PT Serif para o corpo do texto. Elas possibilitam uma leitura fácil e possuem variedades de estilos interessantes para a estilização das páginas.
Branding e logotipo
O nome da plataforma foi idealizada logo no início do projeto durante a etapa de desk research. Fizemos a aglutinação das palavras “estudo” + “doar”, formando assim a “EstuDoar”. É um nome de fácil entendimento e que remete de forma objetiva, porém extrovertida, qual é o propósito da solução.
Já a logotipo surgiu durante a aplicação da técnicas Crazy’s 8, sendo possível ver o rascunho da ideia em um dos esboços das UXs. Foi utilizado o símbolo da mão que é diretamente relacionado à qualquer tipo de doação e dentro dela incluímos um caderno para simbolizar qual é o foco da EstuDoar. Para dar destaque à ilustração, colocamos dentro de um círculo com uma das cores primárias da plataforma.
Protótipo de alta fidelidade
Com base no styleguide e nas funcionalidades definidas, foi possível desenvolver o protótipo de alta fidelidade através do Figma.
Dedicamos a maior parte do nosso tempo na criação da versão mobile, implementando o máximo de navegações possíveis para uma compreensão mais próxima do real sobre tudo que a plataforma pode oferecer. Portanto, a versão desktop contempla apenas o fluxo do doador e uma das possibilidades de doação.
Tela da versão desktop
Acesse aqui o protótipo de alta fidelidade — versão desktop.
Telas da versão mobile
Acesse aqui o protótipo de alta fidelidade — versão mobile.
Teste de usabilidade
Já com o protótipo rodando todas as funcionalidades viáveis para a aplicação, decidimos realizar teste com o usuário para identificar possíveis melhorias e ratificar se a navegação estava intuitiva e objetiva.
Realizamos testes com dois usuários que deveriam realizar a mesma tarefa solicitada no protótipo de média fidelidade (concluir uma doação). Ao observar a realização da tarefa, identificamos as seguintes melhorias:
- Necessidade de uma orientação sobre a doação através de ONGs (já implementada);
- Modernizar o filtro para localizar os estudantes, pois quando houver uma gama maior de opções o usuário pode acabar perdendo um tempo além do esperado para realizar sua escolha (a longo prazo).
Análise de heurísticas
É importante lembrar que uma interface atrativa é interessante, mas antes de qualquer tela bonita é necessário a aplicação ser funcional e eficiente. Dessa forma, as heurísticas de Nielsen são essenciais para embasamento de todo trabalho de UI (user interface). Após a finalização do protótipo e o teste com usuários, destacamos então como algumas heurísticas foram aplicadas em nossa solução:
Pensando a longo prazo
Devido a necessidade de priorizar as funcionalidades para entrega do MVP, algumas ideias não puderam ser aproveitadas nessa primeira versão da solução, mas podem ser consideradas para futuras melhorias:
- Possibilitar a habilitação notificações sobre o andamento do status da doação;
- Incluir a possibilidade de apadrinhar o pacote de internet;
- Possibilitar arrecadação financeira através de ONGs para doação de aparelhos eletrônicos (tablets, notebooks…);
- Disponibilizar ponto de acesso nas escolas para realizar o cadastro na plataforma;
- Modernizar o filtro para localização dos estudantes;
- Realizar mais pesquisas a fim de alcançar o usuário receptor da plataforma.
Considerações finais
Uau! Foram 15 dias incrivelmente intensos e é um grande orgulho ter conseguido chegar até aqui.
O hackathon possibilitou uma imersão vivencial em práticas e técnicas de UX, metodologias ágeis e trabalho em equipe que se assemelham a uma rotina de uma empresa. O exercício de solucionar problemas reais tornou a dinâmica da aplicação dos conceitos ainda mais desafiadora. Apesar das dificuldades por estar executando tudo na prática pela primeira vez, os estudos e mentorias foram determinantes para a evolução do projeto.
A área de UX requer aplicação de leis, conceitos e técnicas que abarcam uma multidisciplinaridade essencial para o desenvolvimento do projeto e das métricas de negócio, sendo importante a interação e conhecimento de outras áreas — no nosso caso, a parceria com os desenvolvedores foi crucial.
Ao final de tudo, quando olhamos para trás, conseguimos perceber nossa evolução como profissionais que agora sabem lidar melhor com um problema real e usar as devidas ferramentas para fazer a solução acontecer.
Agradeço muito à FCamara pela oportunidade de participar desse Hackathon, principalmente pelo apoio dos mentores e todo acolhimento proporcionado durante o período do programa de formação.
E obrigada à você por me acompanhar até aqui :)
Conheça e conecte-se com nosso squad!
Bruno Brolesi, desenvolvedor front-end.
Giancarlo Gomes, desenvolvedor back-end.
João Gutierre, desenvolvedor back-end.
Joyce Alves, UX designer.
Natacha de Andrade, UX designer.
