Abaixo está o diagrama de fluxo de navegação entre as telas da plataforma PetMatch, representando o caminho que o usuário percorre desde a tela inicial até ações como login, cadastro, adoção de pets e interação com ONGs/voluntários.
🔗 Para ver detalhes como prototipação e navegação funcional do site, clique aqui para acessar no Figma.
📂 Para visualizar todas as telas do projeto Clique aqui para acessar no Figma
A página inicial do PetMatch apresenta a proposta da plataforma e incentiva a adoção responsável com uma interface amigável e intuitiva.
- Banner com chamada principal.
- Cards de pets disponíveis para adoção.
- Botões de ação rápida: "Quero adotar" e "Divulgar um animal".
- Sessão informativa sobre adoção e impacto social.
- Rodapé com links úteis e navegação.
- Acesso a páginas como cadastro, login, lista de pets, sobre e ajuda.
- Tela destinada à autenticação de usuários cadastrados na plataforma.
- Campos para preenchimento de e-mail e senha.
- Botões para "Continuar", "Esqueci minha senha" e "Voltar para Home".
- Opções visuais para cadastro de ONGs e voluntários.
- Contém cabeçalho e rodapé padrão da plataforma.
Página: Cadastro de Usuário
- Tela destinada ao registro de novos usuários na plataforma, com formulário completo de identificação.
- Campos para nome, e-mail, telefone, idade e senha (com confirmação).
- Upload de foto de perfil.
- Botões de ação: "Continuar" e "Voltar para Home".
- Contém cabeçalho e rodapé padrão da plataforma.
🔑 Página: Redefinir Senha
- Conjunto de telas destinadas à recuperação de senha de acesso à plataforma.
-
Solicitar redefinição:
- Campo para digitar o e-mail cadastrado.
- Botões: "Continuar" e "Voltar para Home".
-
Criar nova senha:
- Campos para digitar e confirmar nova senha.
- Botões: "Redefinir senha" e "Voltar para Home".
- Ambas as telas contêm cabeçalho e rodapé padrão da plataforma.
🐶 Página: Cadastro de Animal
- Tela para protetores e ONGs cadastrarem animais disponíveis para adoção.
-
Formulário com campos obrigatórios como: nome, idade, espécie, localização, sexo, castração e comportamento.
-
Informações sobre o histórico de vacinação.
-
Upload de imagem do pet.
-
Termo de uso com botão de aceite obrigatório.
-
Campo de observações adicionais.
-
Botão "Enviar cadastro".
-
-
Tela destinada ao registro de ONGs de proteção animal na plataforma.
-
Formulário com dados da instituição: nome, CNPJ, missão, endereço completo e contato.
-
Campos sobre situação legal da ONG e interesse em voluntariado.
-
Identificação do responsável legal.
-
Upload da logo da ONG.
-
Aceite obrigatório dos termos de uso.
-
Botão "Enviar cadastro".
-
-
Tela destinada ao registro de voluntários interessados em apoiar ONGs de proteção animal.
-
Formulário com dados da instituição e do voluntário.
-
Informações como nome, e-mail, telefone, CEP, endereço, cidade/estado e CPF.
-
Upload de foto do voluntário.
-
Campos sobre a situação legal da ONG e missão como voluntário.
-
Identificação do responsável legal e contato.
-
Termos de privacidade e aceite obrigatório.
-
Botão "Enviar cadastro".
-
-
Apresenta as informações completas de um animal disponível para adoção.
-
Exibição da imagem do pet.
-
Descrição introdutória do animal.
-
Informações detalhadas: nome, idade, sexo, castração, nível de energia, histórico de vacinação, comportamento, convivência com crianças e outros animais, localização, tutor e telefone.
-
Botões: "Voltar" e "Entrar em contato".
-
-
Lista organizações e protetores parceiros do PetMatch com informações básicas.
-
Visualização de cards com o nome e logotipo de cada ONG ou protetor parceiro.
-
Botão "Onde estamos?" para cada card, indicando a localização ou mais detalhes da ONG.
-
Texto introdutório explicando o objetivo da página e as diretrizes para participação.
-
-
Permite que o usuário visualize e atualize suas informações pessoais.
-
Edição de nome, e-mail, telefone e idade.
-
Upload de nova foto de perfil.
-
Exibição dos pets marcados como favoritos, com botão “Quero adotar”.
-
Menu suspenso no canto superior direito com opções: Meu perfil, Editar Perfil, Alterar Senha e Sair.
-
-
Apresenta uma galeria de pets cadastrados para adoção com filtros de busca.
-
Filtros por Estado, Cidade, Idade, Porte, Sexo e Energia.
-
Botão “Buscar” para aplicar filtros.
-
Cards dos pets com foto, nome, cidade/estado, ícone de gênero, botão de curtir e botão “Quero adotar”.
-
-
Apresenta publicações com informações e atualizações sobre eventos, feiras de adoção e conteúdos relevantes ao universo pet.
- Visualização de título do post, data e local.
- Imagem ilustrativa da postagem.
- Trecho do conteúdo do post.
- Link “Continue lendo...” para acessar o conteúdo completo.