Visão geral do projeto: como criei um site para facilitar adoções na ONG Ampara
Adotar um animal é um ato de amor, mas o caminho até a adoção pode ser repleto de desafios. Pensando nisso, desenvolvemos uma plataforma digital para a ONG Ampara, com o objetivo de tornar esse processo mais simples, acessível e intuitivo. Neste artigo, compartilho os bastidores desse projeto, os desafios enfrentados e as soluções adotadas para criar uma experiência eficiente para adotantes e voluntários.
O propósito do projeto
A adoção de animais resgatados pode ser um processo complicado. Muitas pessoas interessadas enfrentam dificuldades para encontrar informações claras sobre os pets disponíveis, como fotos, descrições detalhadas e requisitos para adoção. Além disso, o excesso de burocracia pode desmotivar potenciais adotantes, fazendo com que os animais passem mais tempo em abrigos.
A solução? Criar uma plataforma digital eficiente, capaz de conectar adotantes a animais de forma clara e intuitiva. A proposta do projeto foi desenvolver um site responsivo e acessível, garantindo que qualquer pessoa, independentemente do dispositivo utilizado, pudesse navegar facilmente e encontrar o animal ideal para adoção.
O caminho até a solução
O desenvolvimento da plataforma ocorreu entre 28 de setembro de 2024 a 25 de fevereiro de 2025, passando por todas as etapas do processo de design, desde a pesquisa inicial até a finalização dos protótipos de alta fidelidade.
Para que o site atendesse bem às necessidades dos usuários, algumas diretrizes foram seguidas desde o início:
1. Design intuitivo, facilitando a navegação e a busca por animais;
2. Processo de adoção simplificado, reduzindo a burocracia;
3. Interface acessível, seguindo as diretrizes WCAG para garantir inclusão digital.
Desafios e soluções
Durante o projeto, dois desafios principais surgiram:
1. Tempo e Recursos Limitados
Com um prazo curto e poucos recursos disponíveis, foi essencial priorizar funcionalidades. A solução foi adotar um design minimalista e funcional, garantindo que as principais ações — como encontrar animais e se inscrever como voluntário — fossem rápidas e eficazes.
2. Acessibilidade e Responsividade
Queríamos que qualquer pessoa pudesse utilizar o site sem dificuldades. Para isso, seguimos as diretrizes de acessibilidade (WCAG), garantindo um bom contraste de cores, hierarquia visual clara e navegação simplificada.
Essas decisões impactaram diretamente a experiência do usuário, tornando o site mais inclusivo e fácil de usar.
Meu papel no projeto
Como designer de UX/UI, conduzi todo o processo de design, desde a pesquisa inicial até a entrega dos protótipos finais. Minhas responsabilidades incluíram:
🔸Levantamento de necessidades dos usuários;
🔸Condução de pesquisas para mapear problemas e oportunidades;
🔸Desenvolvimento de conceitos e protótipos interativos;
🔸Testes de usabilidade para validar soluções e otimizar a experiência.
Esse projeto me permitiu explorar cada etapa do design de produto e aplicar estratégias para criar uma plataforma funcional e acessível. O resultado? Um site que realmente faz a diferença, conectando adotantes e animais de forma simples e eficiente.
Criar essa plataforma para a ONG Ampara foi uma experiência enriquecedora. Conseguimos desenvolver um produto digital que facilita a adoção e promove um impacto positivo na vida dos animais e das famílias que os acolhem.
Se você tem interesse em UX Design para impacto social, esse é um ótimo exemplo de como boas soluções podem transformar realidades!
Pesquisa com usuários: entendendo as necessidades dos adotantes
Criar uma plataforma digital eficiente para adoção de animais exigiu um entendimento profundo das dores e expectativas dos usuários. Para isso, a pesquisa foi a etapa essencial que guiou todas as decisões de design. Através de entrevistas e mapeamento da jornada do adotante, identifiquei desafios e oportunidades que impactaram diretamente a solução final.
Descobrindo os obstáculos no processo de adoção
Ao conversar com potenciais adotantes, percebi que o processo de adoção, em vez de ser motivador, muitas vezes era frustrante. Os principais problemas identificados foram:
1. Falta de Informações Claras
Muitos entrevistados mencionaram dificuldades para encontrar informações completas sobre os animais disponíveis. Dados essenciais como temperamento, histórico de saúde e requisitos para adoção não estavam facilmente acessíveis, resultando em desistências.
2. Processo Burocrático e Complexo
Formulários longos e falta de clareza nas etapas geravam insegurança e desmotivavam adotantes em potencial. Muitas pessoas relatavam sentir-se perdidas no meio do processo, o que tornava a experiência desgastante.
3. Acessibilidade e Responsividade Inadequadas
A pesquisa apontou que a maioria dos usuários acessa o site por dispositivos móveis. No entanto, sem um design responsivo adequado, a navegação era complicada e pouco intuitiva. Além disso, a falta de recursos de acessibilidade excluía um público que poderia se beneficiar da plataforma.
Construindo um caminho mais fluido para a adoção
Para humanizar o processo e entender melhor a perspectiva do adotante, criei a persona de Joana, uma jovem apaixonada por animais que deseja adotar, mas se sente insegura sobre como proceder.
🔸História do Usuário:
"Como uma pessoa interessada em adotar um animal, quero acessar informações claras e confiáveis sobre o processo de adoção para que eu possa me preparar adequadamente."
🔸Declaração do problema:
Joana é uma jovem apaixonada por animais que precisa de um processo de adoção claro e acessível porque deseja oferecer um lar responsável e amoroso, mas se sente insegura sobre como começar e realizar o processo corretamente.
Através do mapeamento da jornada da Joana, foi possível identificar momentos críticos da experiência do usuário: desde a empolgação inicial ao encontrar um animal até a ansiedade ao lidar com formulários confusos e, finalmente, a alegria ao concluir o processo. Esses insights foram fundamentais para redesenhar o fluxo do site, garantindo uma experiência mais clara e acolhedora.
O resultado? Uma plataforma que não apenas facilita a adoção, mas também cria um vínculo mais forte entre adotantes e animais, reduzindo barreiras e promovendo adoções mais conscientes e responsáveis.
Iniciando o design do site: da arquitetura à primeira versão
Com os requisitos e objetivos do projeto bem definidos, chegou a hora de iniciar a construção do site. O processo de design foi dividido em várias etapas para garantir uma experiência do usuário fluida e intuitiva. Cada decisão tomada visava atender às necessidades dos usuários e à missão da ONG.
Sitemap: estruturando a navegação
A navegação do site foi um dos pontos mais importantes do processo de design. A principal prioridade foi garantir que os usuários pudessem encontrar as informações que precisavam de forma rápida e eficiente. Para isso, desenvolvi um sitemap que prioriza a busca por animais para adoção, além de tornar fácil o acesso a informações sobre a ONG e as oportunidades de voluntariado.
A estrutura do sitemap foi cuidadosamente planejada, levando em consideração os fluxos de usuários e as necessidades específicas do público-alvo. O objetivo era criar uma navegação simples, clara e intuitiva, sem sobrecarregar o usuário com opções desnecessárias.
Wireframes de papel: a primeira visão
Antes de partir para a versão digital, criei wireframes de baixa fidelidade no papel. Essa abordagem permitiu uma visualização rápida da estrutura do site, sem a necessidade de ferramentas digitais. O foco aqui foi planejar e testar a disposição dos elementos e os fluxos de navegação, garantindo que a arquitetura da informação estivesse bem definida.
Os wireframes de papel ajudaram a refinar a estrutura básica do site e a identificar potenciais problemas de usabilidade de forma ágil e econômica.
Wireframes Digitais: refinando a estrutura
A transição para os wireframes digitais foi um passo importante. Agora, com a estrutura inicial definida, comecei a trabalhar nos wireframes digitais, ajustando a hierarquia visual e a navegação com mais detalhes. Essa etapa permitiu explorar diferentes opções de layout e interações, facilitando ajustes rápidos com base em feedbacks.
Ao criar os wireframes digitais, pude testar como os diferentes elementos interagiam entre si, o que foi fundamental para refinar a experiência do usuário. A clareza na disposição dos elementos visuais foi uma prioridade para que os usuários tivessem uma navegação sem obstáculos.
Protótipo de baixa fidelidade: visualizando a experiência
Com os wireframes prontos, avancei para a criação de um protótipo de baixa fidelidade. Essa etapa tinha como objetivo mapear a estrutura do site de forma mais concreta, permitindo visualizar os fluxos de interação e testar a navegação sem me preocupar com detalhes visuais.
O protótipo de baixa fidelidade foi fundamental para validar rapidamente as decisões de design, ajustando elementos como botões e menus. O objetivo era otimizar a experiência do usuário antes de seguir para versões mais avançadas e visuais.
Veja o protótipo de baixa fidelidade e explore como a navegação foi estruturada. Link Completo:
https://www.figma.com/proto/TFKnw6K7qDsgekrkQMhmQS/Site-ONG?page-id=17%3A2&node-id=70-2725&p=f&viewport=489%2C272%2C0.04&t=qvLft1VeoG2Sum69-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=70%3A2725
Estudo de usabilidade: parâmetros e metodologia
Antes de finalizar o design, realizei um estudo de usabilidade não moderado para avaliar a eficácia do site com os usuários reais. O estudo foi realizado remotamente com seis participantes no Brasil e teve duração de 30 minutos. O objetivo foi identificar pontos de melhoria na navegação e avaliar a clareza das interações.
Descobertas do estudo de usabilidade
Durante o estudo, foram feitas algumas descobertas que ajudaram a refinar o design:
🔸Filtros de busca: Os participantes sugeriram que os filtros de busca fossem mais visíveis. Fizemos esse ajuste, tornando-os mais destacados e facilitando a busca por animais.
🔸Formulário de adoção: O formulário foi simplificado para reduzir a quantidade de campos obrigatórios e tornar o processo mais ágil e direto.
🔸Página de voluntariado: Os participantes pediram mais informações sobre as atividades de voluntariado. Com isso, a página foi ajustada para incluir detalhes mais claros sobre as oportunidades disponíveis.
Essas mudanças não só melhoraram a usabilidade do site, mas também garantiram que o site fosse fácil de usar, eficiente e alinhado com as expectativas dos usuários.
Refinando a experiência com base no feedback
Após realizar o estudo de usabilidade, implementei mudanças importantes para aprimorar a experiência do usuário no site. A primeira alteração foi em relação aos filtros de busca, que passaram a ser mais visíveis e de fácil acesso na página de adoção. Essa mudança foi feita para garantir que os usuários conseguissem encontrar rapidamente os animais disponíveis, sem perder tempo na navegação.
Além disso, o formulário de adoção foi otimizado, com a redução de campos obrigatórios e instruções mais claras, visando tornar o processo de adoção mais ágil e simples. Também revisei a página de voluntariado, adicionando informações detalhadas sobre as atividades e incluindo um guia para ajudar novos voluntários a entender melhor como se envolver, de forma direta e sem complicações.
Essas modificações visaram tornar o site mais intuitivo e acessível, alinhando-o às necessidades reais dos usuários.
Variações de Tamanho de Tela
O design responsivo foi um ponto crucial no desenvolvimento do site. Como a acessibilidade é uma prioridade, o layout foi criado para se adaptar automaticamente a diferentes tamanhos de tela. Isso garante que a experiência do usuário seja consistente, seja em dispositivos móveis ou desktops.
O design inclui navegação simplificada em dispositivos móveis, imagens e elementos visuais responsivos, além de filtros e formulários otimizados para toque, o que facilita a interação em telas menores. O site passou por testes em várias resoluções para garantir uma experiência fluida, sem comprometer a usabilidade em nenhum dispositivo.
Protótipo de Alta Fidelidade
Após as alterações e ajustes no design, o protótipo de alta fidelidade foi criado. Ele segue o mesmo fluxo de usuário que o protótipo de baixa fidelidade, mas agora com as modificações feitas a partir do estudo de usabilidade. O objetivo foi refinar a interface e a interação, mantendo a simplicidade e funcionalidade, enquanto assegurava uma experiência mais agradável.
Confira o protótipo de alta fidelidade e veja as melhorias implementadas no design. Link Completo:
https://www.figma.com/proto/TFKnw6K7qDsgekrkQMhmQS/Site-ONG?page-id=232%3A745&node-id=232-1212&p=f&viewport=148%2C98%2C0.06&t=u1qBATUdbcIBVXtF-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=232%3A1212&show-proto-sidebar=1
Considerações de acessibilidade
A acessibilidade foi uma prioridade importante durante o desenvolvimento do site. Algumas das práticas adotadas incluem:
🔸Contraste alto: Para garantir legibilidade para pessoas com baixa visão, o contraste entre o texto e o fundo foi ajustado de acordo com as diretrizes WCAG (Web Content Accessibility Guidelines).
🔸Elementos interativos: Botões e textos foram dimensionados para garantir acessibilidade em dispositivos de diferentes tamanhos de tela, além de ajustes para uso com zoom.
🔸Formulários claros: Rótulos e instruções nos formulários foram elaborados de forma objetiva e compreensível, com o intuito de facilitar o preenchimento por todos os usuários, independentemente de suas necessidades.
Essas considerações foram fundamentais para garantir que o site fosse acessível e inclusivo, atendendo às diversas necessidades dos usuários e oferecendo uma experiência positiva a todos.
Reflexões e impacto: o caminho adiante
Pontos importantes: impacto
O site desenvolvido teve um impacto significativo na maneira como a ONG se conecta com potenciais adotantes e voluntários. A navegação intuitiva e o fluxo simplificado permitiram que mais usuários encontrassem e se engajassem no processo de adoção de forma rápida e acessível. As modificações também incluíram informações adicionais sobre o voluntariado, o que incentivou novas inscrições, ampliando assim o apoio à ONG. Esses aprimoramentos contribuíram diretamente para aumentar tanto o número de adoções quanto de voluntários engajados com a causa, fortalecendo a missão da organização.
O que eu aprendi
Desenvolver este projeto me proporcionou aprendizados valiosos sobre design centrado no usuário e a importância da acessibilidade. A experiência mostrou a relevância de testar e iterar constantemente: mudanças simples, como o reposicionamento dos filtros e a simplificação dos formulários, impactaram diretamente a experiência do usuário, tornando o processo mais intuitivo e eficiente. Além disso, trabalhar dentro de restrições de tempo e recursos me ensinou a importância de priorizar funcionalidades essenciais, sem comprometer a usabilidade. Por fim, aprendi que um design eficaz vai além da estética — ele precisa resolver problemas reais e facilitar a interação dos usuários com a plataforma, sempre colocando suas necessidades em primeiro lugar.
Próximas etapas
Após a implementação das mudanças e a análise dos resultados obtidos, é hora de seguir em frente com o aprimoramento contínuo do site. Embora o design já tenha alcançado resultados positivos, a evolução do projeto não para aqui. A fase de testes e ajustes é essencial para garantir que as necessidades dos usuários continuem sendo atendidas de forma eficiente e intuitiva. Como próximos passo, eu gostaria de:
1. Conduzir novos testes de usabilidade: Embora as alterações já tenham gerado melhorias significativas, o próximo passo será realizar novos testes com um grupo diverso de usuários para avaliar a usabilidade do site nas diferentes funcionalidades. O objetivo é garantir que todas as mudanças implementadas atendam às expectativas dos usuários e que o processo de adoção continue sendo intuitivo e eficiente, além de identificar possíveis áreas para ajustes finos.
2. Ampliar a acessibilidade e otimizar para diferentes dispositivos: Embora o site já esteja otimizado para dispositivos móveis, é importante continuar monitorando o desempenho em diversos tipos de telas e garantir que ele continue acessível para todos, independentemente de suas condições ou recursos tecnológicos. Isso inclui verificar a responsividade em resoluções menores e testar a interação com tecnologias assistivas.
3. Desenvolver novas funcionalidades: Para manter o site dinâmico e sempre atraente, será essencial adicionar novas funcionalidades que incentivem o engajamento contínuo dos usuários, como atualizações sobre os animais adotados, um sistema de feedback para voluntários e recursos interativos que envolvam a comunidade de maneira mais ativa.
Essas próximas etapas serão fundamentais para garantir que o site continue evoluindo e atendendo às necessidades de sua comunidade. Cada ação será tomada com o objetivo de melhorar a experiência do usuário e fortalecer a missão da ONG, promovendo mais adoções e aumentando o número de voluntários. Com isso, esperamos não apenas resolver os desafios atuais, mas também antecipar as necessidades futuras e manter o site sempre relevante e acessível.
Vamos nos conectar.
Se você gostaria de entrar em contato ou explorar mais sobre o meu trabalho, fique à vontade para acessar meu site tainanomar.com ou enviar um e-mail para tainanovaesmartins@gmail.com. Será um prazer compartilhar mais sobre meus projetos e experiências!