Resgatou — Au Q Mia
Projeto de UX de ponta a ponta, da pesquisa ao protótipo navegável, de um app de adoção responsável de animais, cuidados e denúncia de maus-tratos, desenvolvido na formação UI/UX Design Specialist da Cubos Academy.
FASE 01Contexto e objetivo
Projeto de conclusão da formação UI/UX Design Specialist da Cubos Academy, desenvolvido em grupo em 2023. O Resgatou é um app mobile que reúne em um só lugar adoção responsável de animais, informação confiável sobre cuidados, apadrinhamento e um canal de denúncia de maus-tratos.
Atuei como UX/UI Designer na equipe, entre o quadro de pesquisa no Miro e as telas no Figma.
FASE 02Desafio
O Brasil tem milhares de animais abandonados e ONGs sobrecarregadas, enquanto quem quer ajudar encontra processos confusos e informação dispersa. A pergunta central do projeto: como facilitar a adoção responsável e o cuidado com os animais, conectando adotantes, tutores, ONGs e especialistas?
FASE 03Descoberta e pesquisa
Combinei pesquisa documental (desk research), um questionário online e entrevistas semiestruturadas com ONGs e com tutores (roteiros de 30 a 45 minutos, com consentimento para gravação). Objetivo geral: identificar os fatores que levam as pessoas a adotar, como funcionam os processos de adoção e qual o grau de conhecimento sobre denúncias e ONGs.
Matriz CSD: o que sabemos, supomos e não sabemos
Certezas
- Animais sofrem com abandono e maus-tratos
- A Lei 9.605/98 (art. 32) torna o maus-trato crime
- O RGA é obrigatório por lei na cidade de São Paulo
- Existem sites para denúncia de maus-tratos
- Dezembro Verde é o mês de conscientização contra o abandono
Suposições
- Animais mais velhos são abandonados com mais facilidade
- Adotar um pet pode melhorar a saúde mental do adotante
- As pessoas não denunciam porque o procedimento é complicado
- As pessoas preferem adotar pets mais jovens (filhotes)
- Campanhas aumentam a conscientização
Dúvidas
- Qual é o maior motivo para os abandonos?
- Qual é o custo médio de adotar um animal?
- As pessoas preferem cães ou gatos?
- Será que as pessoas confiam nas ONGs?
- Como uma denúncia pode ser mais efetiva e atendida com mais rapidez?
A matriz separa fatos, hipóteses e perguntas. As suposições e dúvidas viraram o roteiro do questionário e das entrevistas, em vez de decidir o produto por intuição.
Questionário: 57 respostas
- 57responderam ao questionário sobre ONGs e resgate animal
- 96,5%possuem pet em casa (55 pessoas)
- 83,6%relatam experiência positiva com a chegada do pet
- 27,3%dos pets foram comprados, não adotados
Entrevistas: diagrama de afinidade
Resgate
- Poucas pessoas conhecem mais de um canal de denúncia
- Todos os entrevistados já ajudaram ONGs (doação, voluntariado ou apoio)
- A maioria dos animais resgatados por pessoas são filhotes ou feridos graves
Adoção
- Muitos consideram o porte do animal e o espaço disponível antes de adotar
- Alguns pets foram devolvidos à ONG por problemas de adaptação
- A maioria relata ter adotado mais de um animal, para dar companhia mútua
Cuidados
- A maioria tem suporte confiável para cuidar do pet quando viaja
- Todos têm visão favorável à castração
- Alguns permitem acesso à rua, com relatos de gatos que se perderam
FASE 04Síntese: persona, empatia e proposta de valor
Os achados foram sintetizados em uma persona, um mapa de empatia e um canvas de proposta de valor, que alinham o que o app oferece ao que a usuária precisa.
Ayla Queiroz Martins
20 anos · Estudante e estagiária de Medicina Veterinária
“Meu propósito é ser a voz e o abrigo para aqueles que não podem falar por si mesmos.”
Sobre
Apaixonada por animais desde a infância, tem muito contato com bichos e conhecimento sobre cuidados. Gosta de compartilhar conteúdo e, quando pode, intermedeia adoções responsáveis.
Hábitos
- Lê muito sobre animais domésticos
- Cria e compartilha conteúdo sobre cuidados
- Militante da causa animal
- Resgata e adota para outras pessoas
Objetivos
- Garantir saúde e qualidade de vida dos animais
- Transmitir conhecimento de forma prática e ao público certo
Canais
- Redes sociais (incluindo WhatsApp)
- Blog
- Podcasts
Dores
- Falta de recursos para cuidar dos animais que resgata
- Dificuldade de encontrar adotantes qualificados
- Baixo engajamento em seus artigos
Vê
- Animais abandonados no bairro
- Abrigos superlotados
- Pessoas que preferem comprar a adotar
Faz
- Resgata e trata animais
- Compartilha vídeos e cuidados
- Trabalho voluntário em abrigos
Escuta
- “Você sozinha não vai fazer diferença no mundo”
- Histórias de quem adotou e teve boas experiências
Pensa
- Animais abandonados precisam de cuidado e amor
- Seria ótimo ter um sistema que facilitasse a busca por animais disponíveis
Necessidades
- Fornecer cuidados médicos adequados
- Ajudar animais abandonados a encontrar um lar
- Ter ajuda de outras pessoas engajadas no resgate
Mapa de valor (o app)
Produtos e serviços
- Artigos sobre cuidados com animais
- Comunidade de especialistas
- Vitrine de pets para adoção
- Doações e apadrinhamento
- Denúncias em tempo real
- Compatibilidade entre adotante e animal
Criadores de ganho
- Conectar novos amigos
- Combater a desinformação entre donos de pets
- Combater o abandono e os maus-tratos
- Facilitar a conexão entre animais e adotantes
Aliviadores de dor
- Conectar o usuário aos animais de rua que precisam de ajuda
- Promover apadrinhamento e doações
- Mediação de adoção responsável, com triagem e acompanhamento pós-adoção
Perfil do cliente (Ayla)
Ganhos
- Poder apresentar animais disponíveis para adoção
- Gerar conteúdo confiável sobre cuidados
- Manter uma comunidade engajada
Dores
- Preocupação com gastos e com a falta de responsabilidade nas adoções
- Falta de ajuda com animais de rua em estado crítico
- Superlotação e falta de apoio em ONGs
Tarefas
- Compartilhar a própria vivência
- Acompanhar campanhas das ONGs
- Ler conteúdo sobre animais domésticos
FASE 05Definição e arquitetura
As dores viraram perguntas How Might We, agrupadas em três eixos que organizam o app: denúncia e resgate, adoção e cuidados.
Denúncia e resgate
Como aumentar a efetividade das denúncias?
Como popularizar os canais de denúncia?
Como facilitar o processo de ajuda e doações às ONGs?
Adoção
Como conscientizar as pessoas a adotar, e não comprar?
Como mostrar as vantagens de adotar animais mais velhos?
Como diminuir a taxa de abandono?
Cuidados
Como conscientizar e auxiliar as pessoas a castrarem seus pets?
Como ajudar tutores a encontrar pets perdidos?
Como manter as pessoas informadas sobre leis e direitos dos animais?
Os primeiros wireframes foram rascunhos à mão de oito telas (login, cadastro, home, meus pets, adote um pet com swipe, detalhes, cuidados e perfil). Depois, a pesquisa acrescentou denúncia, chat, apadrinhamento e formulário de adoção ao mapa de navegação.
- 01Boas-vindas
- 02Login / Cadastro
- 03Home: novidades
- 04Adote um pet (swipe)
- 05Detalhes do pet
- 06Formulário de adoção
- 07Meus pets
- 08Cuidados e artigos
- 09Denúncias
- 10Chat e apadrinhamento
- 11Perfil
FASE 06Identidade e design system
A marca une um logotipo simples, com cão e gato abraçados por um coração, a um sistema de cores que transmite acolhimento e energia.
Teoria das cores. A base é uma escala monocromática de verde-azulado (matiz ~187°, cinco tons do escuro ao claro), que dá profundidade sem trazer novos matizes. O acento é o lima (~63°), a cerca de 125° no círculo cromático, uma relação próxima da tríade: tem tensão suficiente para chamar atenção e continua harmônico por ser uma cor vizinha do verde natural. Água e grama, calma e vitalidade. Verde, vermelho e amarelo ficam reservados à função (sucesso, erro, alerta), então a cor da marca nunca é confundida com feedback.
- #008A98Verde-azulado escuroBotões primários, cartões e navegação
- #00AEBAVerde-azulado médioBanners e destaques
- #A5E0E5Verde-azulado claroFundos de formulário e de cartões
- #CBD13ELimaCabeçalho, marca e ações secundárias
- #E5E891Lima claroCartões de pet e fundos suaves
- #232323GrafiteTexto principal
- #F7F7F7Off-whiteSuperfície das telas
- #2CA047VerdeSucesso, adotado e concluído
- #D40919VermelhoErro e obrigatoriedade
- #EFD437AmareloAlerta e destaque pontual
| Par | Uso | Contraste | WCAG |
|---|---|---|---|
| Aa | Texto grafite sobre o cabeçalho lima | 9.53:1 | AAA |
| Aa | Texto branco sobre botão verde-azulado | 4.13:1 | AA só texto grande/UI |
| Aa | Texto grafite sobre fundo de formulário | 10.77:1 | AAA |
| Aa | Texto branco sobre verde-azulado médio (banners) | 2.70:1 | não passa |
| Aa | Verde-azulado escuro como texto sobre branco | 4.13:1 | AA só texto grande/UI |
| Aa | Texto branco sobre lima | 1.65:1 | não passa |
Leitura crítica. O grafite sobre lima chega a 9,53:1 (AAA), o que valida o cabeçalho e os textos de apoio. O branco sobre o verde-azulado escuro dos botões fica em 4,13:1, no limite do AA. Já o branco sobre o verde-azulado médio dos banners (2,70:1) e sobre lima (1,65:1) não atinge o mínimo: em uma versão de produção, o texto desses banners passaria a grafite ou o fundo escureceria para #00838C, que chega a 4,5:1.
Tipografia. Uma única família sans-serif humanista e arredondada, que combina com o tom amigável, organizada em uma escala de H1 a H3, subtítulo, texto (16 e 14) e label, em regular e negrito. Hierarquia por tamanho e peso, sem depender de cor.
Fonte (Google Fonts): Ubuntu.- H1Encontre um amigo
- H2Encontre um amigo
- H3Encontre um amigo
- SubtítuloEncontre um amigo
- Texto 16Encontre um amigo
- Texto 14Encontre um amigo
- LabelEncontre um amigo
Biblioteca de componentes no Figma, com variantes e estados:
- Botões (primário, secundário, desabilitado)
- Campos de texto, e-mail e senha com mostrar/ocultar
- Checkbox, radio e switch
- Stepper de 3 etapas
- Abas de categoria
- Carrossel de categorias
- Cartões de pet, de artigo e Meu pet
- Calendário
- Barra inferior com 5 destinos
- Menu lateral
- Pop-ups
- Avaliação por estrelas
- Filtros
- Login social (Google e Facebook)
Hex amostrados da arte final publicada; podem diferir levemente dos tokens originais do Figma.
FASE 07Interface e protótipo
As telas aplicam princípios de design que sustentam o fluxo de ponta a ponta. Role para o lado para ver o app:
- Gestalt, similaridade e proximidade: cartões de pet com a mesma estrutura (foto, nome, faixa lima) são lidos como um grupo e comparados rapidamente.
- Hierarquia visual: fotos grandes e emocionais lideram a tela de adoção; os filtros e chips vêm depois, em segundo plano.
- Divulgação progressiva: o formulário de adoção é dividido em 3 etapas com stepper; o cadastro também, reduzindo a carga cognitiva (lei de Miller).
- Lei de Fitts e zona do polegar: barra de navegação inferior com 5 destinos e botões largos na base da tela.
- Reconhecimento e economia de esforço: abas de categoria (Saúde, Alimentação, Higiene, Recreação) e ícones consistentes.
- Gamificação leve: o swipe em “Adote um pet” transforma a busca em descoberta, e a agenda de tarefas em Meus pets cria hábito de cuidado.
O protótipo navegável em Figma liga as telas dos fluxos principais (cadastro, adoção, cuidados e denúncia).
FASE 08Heurísticas de Nielsen aplicadas
- Visibilidade do estado: stepper nos formulários, indicador de etapas no cadastro e status nas conversas.
- Prevenção de erros: campos obrigatórios sinalizados com asterisco e em vermelho, com opção “Sem raça definida” e “Ainda s/ nome”.
- Correspondência com o mundo real: linguagem de tutor (castrado, faixa etária, área de lazer) e categorias que o público já usa.
- Controle do usuário: botão Voltar nos formulários, Pular na introdução e login social para cadastro mais rápido.
- Consistência: componentes reutilizados do design system em todas as telas.
FASE 09Acessibilidade e evolução
- Corrigir o contraste do texto branco sobre os banners verde-azulado médio e lima (veja a análise).
- Revisar o tamanho dos textos de apoio nos cartões e formulários, que estão pequenos para uso em movimento.
- Adicionar rótulos de leitor de tela nos botões só com ícone (barra inferior, filtros, favoritar).
- Validar a triagem de adoção e o canal de denúncia com ONGs reais em teste de usabilidade.
FASE 10Resultado
O projeto entrega o ciclo completo de UX: pesquisa (questionário com 57 respostas e entrevistas), síntese (CSD, afinidade, persona, empatia e proposta de valor), definição (How Might We e mapa de navegação), design system e mais de 100 frames entre telas, estados e componentes no Figma, com protótipo navegável.