Dashboard para Voluntários — ONG Passos de Luz
Uma experiência mobile pensada para facilitar a participação em ações sociais, com foco em clareza, empatia e organização.
Sobre o projeto
Projeto desenvolvido com foco na criação de uma experiência digital simples e acolhedora para voluntários de uma ONG, facilitando a participação em ações sociais e o acompanhamento das atividades.
Meu papel
UX/UI Designer
Pesquisa, wireframes, prototipação e interface visual
Duração
10 dias (desafio prático)
Objetivo
Facilitar a organização e participação de voluntários em ações sociais
Ferramentas
Figma, FigJam
Contexto e desafio
O problema
Apesar do impacto social gerado pela ONG Passos de Luz, a organização das ações depende diretamente da disponibilidade e engajamento dos voluntários. No entanto, a falta de uma ferramenta centralizada dificulta o acesso às informações, a confirmação de presença e o acompanhamento das atividades.
Como resultado, voluntários enfrentam dificuldades para se organizar, entender rapidamente onde podem ajudar e manter um acompanhamento consistente das ações realizadas. Isso impacta não apenas a experiência do voluntário, mas também a eficiência das iniciativas da ONG.
Principais desafios identificados
-
Falta de visibilidade das próximas ações
-
Processo pouco prático para confirmar participação
-
Acesso limitado às informações dos assistidos
-
Ausência de um canal simples para feedback pós-ação
Solução
Diante desse cenário, surge a necessidade de uma solução digital simples, acessível e acolhedora, capaz de apoiar os voluntários em toda a sua jornada — desde a escolha de uma ação até o compartilhamento de sua experiência após o atendimento.
Quem é o voluntário
Para entender melhor as necessidades do público, foi considerado o perfil de voluntários que desejam contribuir com ações sociais, mas possuem rotinas dinâmicas e disponibilidade limitada.
Voluntários precisam de praticidade e clareza para transformar intenção em ação.
Como o voluntário vivencia a experiência
Para entender os principais pontos de contato e dificuldades ao longo da experiência, foi mapeada a jornada do voluntário desde o interesse inicial até o pós-ação.
1
Descoberta da ação
O voluntário busca oportunidades para participar de ações sociais
Não sabe onde encontrar ações disponíveis
2
Planejamento da participação
Avalia as informações e tenta se organizar para participar
Encontra informações confusas e dispersas
3
Confirmação e participação
Confirma presença e participa da ação
Sente falta de um processo claro para confirmar presença
4
Reflexão e feedback
Avalia a experiência e gostaria de compartilhar sua percepção
Não há um canal simples para registrar feedback
Problema e oportunidades de design
A partir da persona, defini o problema central e explorei oportunidades de solução utilizando a técnica How Might We.
Como a solução foi estruturada
O fluxo foi pensado para facilitar a participação do voluntário, desde a escolha da ação até o envio de feedback, com decisões claras e baixo atrito. Também contempla a possibilidade de cancelamento, garantindo uma experiência mais flexível e centrada no usuário.
Estratégia de solução
A partir dos insights levantados, desenvolvi uma solução focada em reduzir o atrito na confirmação de participação e tornar a experiência do voluntário mais clara, acessível e motivadora.
Clareza na tomada de decisão
Informações essenciais da ação organizadas de forma objetiva para facilitar a escolha do voluntário.
Redução de atrito
Fluxo simplificado com poucos passos para confirmar participação.
Acompanhamento da ação
Visualização dos assistidos e contexto antes e durante a atividade.
Feedback rápido e leve
Coleta de feedback simplificada com uso de emojis e texto opcional.
Da estratégia à interface
A partir da solução proposta, desenvolvi os wireframes e a interface do aplicativo, priorizando simplicidade, clareza e um tom acolhedor para engajar os voluntários ao longo de toda a jornada.
Dashboard
O dashboard foi projetado para apresentar as ações disponíveis de forma clara e escaneável, permitindo que o voluntário encontre rapidamente oportunidades de participação.
Decisões:
-
Uso de cards para leitura rápida
-
Informações essenciais visíveis (data, local, descrição)
-
Botão direto para ação (“Ver detalhes”)
-
Tom acolhedor na saudação
Detalhes da ação
A tela de detalhes reúne todas as informações necessárias para apoiar a decisão do voluntário, reduzindo dúvidas e aumentando a confiança na participação.
Decisões:
-
Hierarquia clara de informações
-
Descrição objetiva da ação
-
Preview dos assistidos (sem sobrecarregar)
-
CTAs bem definidos: confirmar ou desistir
Confirmação
Após confirmar a participação, o usuário recebe um feedback positivo imediato, reforçando o impacto da sua decisão.
Decisões:
-
Feedback visual claro
-
Mensagem motivacional
-
Redirecionamento simples
Lista de assistidos
No dia da ação, o voluntário pode visualizar a lista completa de assistidos, com informações essenciais para oferecer um atendimento mais empático e preparado.
Decisões:
-
Lista simples e legível
-
Informações sensíveis tratadas com cuidado
-
Layout focado em leitura rápida
-
Redução de carga cognitiva
Feedback
O envio de feedback foi simplificado para incentivar a participação, utilizando avaliação por emojis e campo opcional de texto.
Decisões:
Interação rápida (baixo esforço)
Uso de elementos visuais (emojis)
Campo opcional para reduzir atrito
Sucesso
A tela final reforça o impacto da contribuição do voluntário, encerrando a experiência de forma positiva e motivadora.
Decisões:
-
Mensagem emocional
-
Reforço de propósito
-
Encerramento simples
Decisões de design visual
A interface foi desenvolvida com base em princípios de design centrado no usuário, utilizando cores suaves, tipografia legível e espaçamento adequado para garantir uma experiência acessível e agradável em dispositivos móveis.
Tela de cancelamento (final do fluxo)
Mesmo ao cancelar, o usuário recebe uma experiência neutra e acolhedora, evitando frustração e incentivando futuras participações.
Decisões:
-
Linguagem não punitiva
-
Caminho claro de retorno
-
Manutenção do tom humano
Identidade Visual
Introdução
A identidade visual foi pensada para transmitir acolhimento, confiança e proximidade, alinhando-se ao propósito da ONG de apoiar pessoas em situação de vulnerabilidade.
Paleta de cores
Verde: representa comunidade e impacto social Tons claros: leveza e acessibilidade Tons escuros: hierarquia e legibilidade
Direção visual
A interface prioriza simplicidade e clareza, com elementos visuais limpos, espaçamento consistente e uso estratégico de cores para facilitar a navegação e reduzir a carga cognitiva.
Tom da interface
Linguagem simples e acolhedora, pensada para incentivar o engajamento e aproximar os voluntários das ações.
Sistema de design e consistência da interface
Para garantir consistência e escalabilidade na interface, organizei os principais elementos do produto com base em princípios de Design System.
Foram definidos padrões para componentes como botões, ícones e tipografia, além de estados de interação que ajudam o usuário a compreender ações e feedback da interface.
A definição de cores também foi pensada de forma funcional, apoiando ações principais, elementos de suporte e comunicação de estados como ativo e inativo.
Essa organização contribui para uma experiência mais previsível, facilita a evolução do produto e torna mais eficiente o processo de handoff para desenvolvimento.
Aprendizados e próximos passos
Durante o desenvolvimento deste projeto, percebi a importância de estruturar fluxos simples e objetivos, especialmente em contextos onde o usuário precisa tomar decisões rápidas, como a confirmação de participação em ações voluntárias.
Também ficou evidente como a organização da informação e o uso de uma linguagem acolhedora influenciam diretamente no engajamento do usuário ao longo da jornada.
Além disso, a construção desse projeto reforçou a importância de considerar não apenas a usabilidade, mas também o impacto emocional da experiência.
Desafios
Um dos principais desafios foi equilibrar a quantidade de informação apresentada sem sobrecarregar o usuário, principalmente na tela de detalhes da ação. A solução foi priorizar apenas as informações essenciais e organizar o restante de forma progressiva ao longo do fluxo.
Próximos passos
Como próximos passos, o projeto poderia evoluir com a inclusão de funcionalidades como:
-
Sistema de notificações para lembrar os voluntários das ações confirmadas
-
Filtro e busca por tipo de atividade ou localização
-
Histórico de participações do voluntário
-
Área de comunicação entre voluntários e equipe da ONG
Além disso, seria fundamental validar a solução com usuários reais por meio de testes de usabilidade, a fim de identificar pontos de melhoria e oportunidades de evolução.