Quem cuida desse animal?
A dificuldade de encontrar ONGs de confiança levou a dar visibilidade à organização responsável pelo pet.
UX/UI DESIGN / APLICATIVO MOBILE
PETMATCH.
UX/UI para descoberta de pets
e contato com ONGs.
Uma proposta digital para aproximar animais resgatados, pessoas que querem adotar e ONGs. Da descoberta de um pet à compreensão dos cuidados que ele precisa.
VEJA AS TELAS ↓PETMATCH / ESTUDO DE CASOEncontrar.
Conhecer.
Acolher.
Conhecer.
Acolher.
Uma experiência de adoção que coloca o animal e suas necessidades em primeiro plano.
01 / CONTEXTO E PAPELO desafio: apoiar a escolha
O desafio: apoiar a escolha
e o contato para adoção.
O desafio do PetMatch foi criar uma solução digital para apoiar a adoção de animais resgatados por ONGs.
Encontrar um animal é parte da jornada. Entender seu comportamento, os cuidados necessários e quem está responsável por ele também influencia a decisão de adotar.
Estruturei o estudo com matriz CSD, desk research, persona, blueprint de serviço, wireframes e protótipo de alta fidelidade. O processo conectou a compreensão do problema à organização das telas.
- CONTEXTO
- Estudo de caso
Adoção de animais - MEU PAPEL
- Pesquisa exploratória
Fluxos e interface UX/UI - FERRAMENTAS
- Figma
Photoshop e Illustrator - ENTREGA
- Jornada de serviço
e protótipo mobile
MINHA CONTRIBUIÇÃO
Estruturei a jornada de serviço e a navegação do aplicativo para conectar descoberta, informações de convivência e contato com a ONG. O perfil do pet concentra os dados que apoiam uma escolha responsável.
02 / DESCOBRIR E DEFINIRPesquisa exploratória sobre
Pesquisa exploratória sobre
confiança, convivência e contato.
A matriz CSD organizou o que parecia conhecido, o que era hipótese e o que precisava de investigação.
Confiança na plataforma, capacidade das ONGs para usá-la e critérios de adoção apareceram como dúvidas. A possibilidade de simplificar a jornada com tecnologia foi tratada como hipótese de projeto.
A pesquisa documental examinou iniciativas de adoção e divulgação em redes sociais. A leitura desse material orientou uma proposta que reunisse descoberta, informação e contato com as organizações.
Ele combina com minha rotina?
Comportamento e condições de convivência ajudam a ir além da escolha pela fotografia.
Como dar o próximo passo?
A jornada explorou contato, agendamento e apoio às causas para conectar o interesse à organização.
Ver a matriz CSD original +
As conclusões são exploratórias. A apresentação não documenta entrevistas com participantes nem resultados de testes de usabilidade.
03 / DA NECESSIDADE AO FLUXOJornada de adoção conectada
Jornada de adoção conectada
à operação das ONGs.
A persona Joana sintetizou três necessidades: companhia, clareza sobre o animal e um processo compatível com uma rotina agitada.
Essa representação orientou o foco em informações úteis para decidir. Ela funciona como uma síntese de projeto, sem substituir a validação com pessoas que adotam e equipes de ONGs.
O blueprint ampliou a visão para o serviço: além do que aparece na tela, há cadastro de animais, atualização de eventos, atendimento e acompanhamento pelas organizações.
Conhecer a persona do estudo +
- 01Descobrir
Animais, eventos e conteúdo.
- 02Conhecer
Perfil, convivência e ONG.
- 03Conversar
Contato e agendamento previstos.
- 04Apoiar
Adoção ou ajuda a uma causa.
ARQUITETURA DA EXPERIÊNCIA
Arquitetura de navegação: adoção, ONGs e apoio.
O cadastro leva à Home. A partir dela, o estudo organiza três caminhos: conhecer um animal, encontrar uma ONG ou apoiar uma causa.
01 / ACESSOCadastro e login
Entrada no aplicativo
02 / EXPLORAÇÃOHome
Animais, eventos e notícias
Conhecer um pet
Lista de animais → perfil → contato ou agendamento
Encontrar uma organização
Lista de ONGs → perfil → conversa ou apoio a um projeto
Ajudar uma causa
Causas → detalhe do projeto → contribuição
Ver os wireframes e as conexões originais +
04 / A EXPERIÊNCIA NAS TELASDo onboarding
Do onboarding
ao perfil do animal.
Quatro interfaces originais mostram a evolução da proposta. Toque em uma tela para ampliar.
01 / Entrar
A identidade apresenta o produto. Acesso e cadastro ficam reunidos no primeiro contato.
02 / Entender
A apresentação inicial explica a proposta com fotografia, mensagem curta e indicação de sequência.
03 / Descobrir
Animais, eventos e dicas compartilham a Home. A navegação reúne Chat, Apoie, Home, Adoção e ONGs.
04 / Conhecer
O perfil aproxima o animal pela foto e acrescenta idade, ONG e cuidados antes da ação de adotar.
DECISÃO EM DESTAQUEPerfil com cuidados e condições
Perfil com cuidados e condições
de convivência antes de adotar.
No perfil da Luna, a hierarquia começa na imagem e no nome. Em seguida, identifica a ONG e apresenta condições de convivência: aceitar crianças, não aceitar outros animais, nível de atividade e necessidade de proteção na casa.
Essas informações tornam explícitas responsabilidades que uma foto sozinha não comunica. O botão “Adotar” vem depois desse contexto.
LINGUAGEM VISUAL
Proximidade e hierarquia.
Fotografias dão protagonismo aos animais. Verde-lima e laranja diferenciam blocos e ações, enquanto o azul escuro marca títulos. Cards arredondados agrupam conteúdo e ícones acompanham a navegação.
Verde-limaLaranjaAzul escuroBranco
05 / RESULTADO E APRENDIZADOSFluxos de adoção
Fluxos de adoção
e protótipo de alta fidelidade.
O estudo resultou em uma jornada de serviço, fluxos de navegação e interfaces de alta fidelidade para o PetMatch.
A principal contribuição da proposta é incluir cuidados e condições de convivência na escolha do pet, junto à identificação da ONG responsável. O blueprint também explicita que a experiência depende de cadastros atualizados e da capacidade de atendimento das organizações.
Uma próxima etapa seria testar a descoberta de um pet, a compreensão dos cuidados e o contato com a ONG, incluindo a perspectiva das equipes responsáveis pelo atendimento.
A entrega é um protótipo de estudo de caso; o efeito sobre adoções e atendimento ainda precisa ser validado.
Explore a apresentação original.
Pesquisa, artefatos e mockups que deram origem a este case.
Jorge Yasuo / Product Designer
Todos os projetos ↗