Contexto
A ONG Mais nasceu em Porto Alegre com um propósito poderoso: levar dignidade e oportunidades a crianças e adolescentes do Morro da Polícia, uma comunidade marcada pela vulnerabilidade social. Com ações transformadoras — como a distribuição de cestas básicas, oficinas de artes, culinária, esportes e muito mais — a ONG tem mudado a vida de jovens, oferecendo-lhes novas perspectivas.
No entanto, sem presença digital, suas ações ficavam limitadas a um círculo restrito. A organização precisava de uma maneira de compartilhar sua missão e conectar-se com aqueles que poderiam apoiar, para continuar fazendo a diferença.
Visão geral
Site institucional da ONG
Equipe
3 UX Designer
1 Desenvolvedor
1 Product Manager
Duração
Junho de 2023 à janeiro de 2025
O Desafio
Problema
Apesar de seu trabalho transformador, a ONG MAIS enfrentava uma barreira invisível: a falta de visibilidade. Suas ações, essenciais para a comunidade, não chegavam ao público que poderia fazer a diferença: doadores, voluntários e parceiros.
Como a ONG poderia ampliar seu alcance e garantir que sua mensagem chegasse a quem realmente queria ajudar?
A ausência de uma presença digital estruturada limitava as possibilidades de engajamento e impedia a ONG de expandir seu impacto, dificultando também a confiança de novos apoiadores.
Objetivo
Criar um site institucional que:
Estabeleça uma presença digital para a ONG Mais.
Traduza o impacto social da ONG para o público online.
Conecte a ONG a doadores, voluntários e parceiros de forma clara e eficiente.
Processo
Pesquisas e Descobertas
Desk Research
Realizamos uma pesquisa secundária para compreender o cenário das ONGs no Brasil. A partir disso, compreendemos os motivos para muitas ONGs encerrarem suas atividades, a situação do público-alvo da ONG Mais e o perfil do voluntário brasileiro.
Benchmark
Matriz CSD
Pesquisa Quantitativa
Para tirar dúvidas e validar algumas hipóteses que surgiram durante o projeto, criamos uma pesquisa usando o Google Forms. Compartilhamos o formulário em grupos de redes sociais como Instagram, Facebook e WhatsApp, além da comunidade da ONG Mais. A ideia era alcançar o maior número possível de pessoas com perfis diferentes — tanto em relação à experiência quanto ao contexto social e econômico.
Recebemos 91 respostas e conseguimos traçar um perfil bem interessante dos participantes:
64% eram mulheres
81% não tinham filhos
45% tinham entre 18 e 25 anos
41% entre 26 e 35 anos
36% já tinham ensino superior completo
33% estavam com o superior em andamento
31% tinham renda anual acima de R$ 50 mil
29% tinham renda anual de até R$ 10 mil
Essas informações ajudaram bastante a entender quem estávamos querendo ajudar e a tomar decisões mais conscientes ao longo do projeto.
Entrevistas
Realizamos 3 entrevistas em profundidade com o objetivo de entender melhor:
As motivações para atuar como voluntário
Os obstáculos que dificultam o ato de doar
Os fatores que geram ou comprometem a confiança nas ONGs
Durante as conversas, dois pontos se destacaram como os principais empecilhos para colaborar com o trabalho das organizações: falta de tempo e falta de confiança.
O tempo está relacionado à rotina puxada de trabalho e às responsabilidades em casa, enquanto a desconfiança surge, principalmente, devido a casos de fraude envolvendo ONGs.
Principais insights da fase de descoberta
Com base nas entrevistas, na pesquisa quantitativa, no benchmark e no desk research, identificamos oportunidades que podem ajudar a ONG MAIS a gerar mais confiança e facilitar o engajamento dos usuários, mesmo com rotinas corridas:
CTA de doação direto na home
Atividades organizadas por categoria
Botões com acesso rápido às redes sociais
Página exclusiva para parcerias
Carrossel com depoimentos reais em vídeo e imagem
Banco de vagas para voluntariado
Doação com experiência de loja online
Página com história, missão e valores da ONG
Página de transparência financeira, com dados acessíveis e atualizados
Personas
Mapa de empatia
Jornada do usuário
Ideação e solução proposta
Proposta de valor
Matriz Moscow
Diversas ideias emergiram da etapa de descoberta, impulsionadas pelas pesquisas realizadas. A aplicação da Matriz Moscow foi crucial para determinar o que é possível e viável para a ONG Mais neste momento. Isso nos permitiu estabelecer com precisão as funcionalidades que o site inicialmente incorporará.
Fluxo do usuário
Legenda
Desenvolvimento do design
Teste de usabilidade e Protótipo de baixa fidelidade
Com base nos insights da pesquisa e nas boas práticas de usabilidade, desenvolvemos os wireframes iniciais e realizamos um teste com três participantes.
A partir dos resultados, identificamos melhorias importantes:
“Como ajudar” no menu: alguns usuários tiveram dificuldade para encontrar as formas de apoio à ONG. Adicionamos essa opção no menu para facilitar o acesso.
Botão de voluntariado mais visível: o botão estava no final da página “Sobre nós” e passou despercebido. Realocamos para o topo da página.
Ajustes nas formas de doação: a página oferecia Pix e plataformas de pagamento, mas a ONG ainda não tem estrutura para isso. Mantivemos, por ora, apenas Pix e depósito bancário.
Com as alterações feitas, validamos novamente com a ONG para garantir que as soluções estivessem alinhadas às suas necessidades reais.
Antes
Depois
Antes
Depois
Antes
Depois
Guia de estilos
Para selecionar as cores e fontes ideais, usamos o logotipo da ONG como ponto de partida. Seguindo as melhores práticas de design, optamos por cores que oferecessem contraste adequado. Enfrentamos um desafio significativo devido à variedade de cores primárias e vibrantes presentes no logotipo da ONG. Conforme nos foi apresentado, o objetivo era transmitir a alegria das crianças, o que orientou nossa abordagem ao aplicar os princípios da teoria das cores. Optamos por utilizar verde e azul, cores análogas, como principais e secundárias, respectivamente. Além disso, incorporamos o vermelho e o amarelo em alguns elementos, em contextos mais neutros. Nosso objetivo era preservar a identidade visual da marca da ONG e criar um design limpo, ao mesmo tempo em que nos preocupamos com a acessibilidade dessas escolhas.
Tipografia
Paleta de Cores
Iconografia
Botões
Teste de usabilidade e Protótipo de alta fidelidade
Realizamos um novo estudo de usabilidade com a participação de três usuários. Durante a sessão, os participantes foram solicitados a realizar uma série de seis tarefas no site. Não houveram observações para realizar alterações no protótipo. Confira, clicando no botão abaixo das imagens, o protótipo versão desktop e mobile elaborado no figma.
Conclusão e aprendizado
O que eu aprendi
O trabalho voluntário para a ONG Mais proporcionou-me uma experiência enriquecedora, permitindo-me aprender e aplicar uma variedade de conhecimentos que ainda não havia colocado em prática. Durante este projeto, tive a oportunidade de utilizar a metodologia Double Diamond para conduzir o processo de design. Além disso, desenvolvi e aprimorei habilidades essenciais de trabalho em equipe, como colaboração, escuta ativa e liderança.
Um dos aprendizados mais significativos foi a interação com um cliente real, compreendendo as necessidades de seu negócio e mantendo uma comunicação eficaz ao longo de todo o processo. Isso incluiu a habilidade de discernir entre os resultados da pesquisa e as limitações ou restrições do negócio. Além disso, foi crucial explicar e justificar nossas decisões de design de maneira clara e acessível para os membros da equipe da ONG, garantindo uma compreensão mútua e alinhamento de objetivos.
Próximos passos
O projeto do site da ONG Mais está em sua fase inicial. Atualmente, a ONG está em busca de voluntários para auxiliar no desenvolvimento do site, com grandes chances de concretização. Os próximos passos incluem:
- Transferência para a equipe de desenvolvimento.
- Monitoramento e análise das interações dos usuários com o site visando possíveis melhorias.
- Medir a performance do site através do cadastro de novos voluntários e parceiros, contatos através do formulário e whatsApp, acesso das mídias sociais através do site e número de doações.
- À medida que a ONG obtiver mais recursos financeiros e voluntários, será viável implementar novas funcionalidades, tais como: integração de plataforma de pagamento para doações, criação de um banco de vagas para voluntários, seção de notícias e eventos da ONG, entre outras.