Amigo não se Compra | ONG | Mobile First WebSite
Muitos defensores de animais resgatam cães e gatos abandonados nas ruas do Brasil. Muitas pessoas querem um animal de estimação e muitas vezes decidem comprar um. O “Amigo não se compra” oferece uma plataforma fácil para que os socorristas possam postar os animais que precisam de novos lares para que as pessoas possam adotar um animal de estimação, ao invés de comprar um.
Com a predominância do acesso à internet por aparelhos mobile, eles precisavam construir um website responsivo, considerando o princípio de "Mobile First", além de atualizar as funcionalidades da plataforma.
O processo de cadastro de um novo animal foi simplificado para 4 passos e os cuidadores são estimulados a postar diversas fotos e vídeos fofos do animal. A interação entre os cuidadores e as pessoas interessadas em adotar o animal se tornou mais interativa e dinâmica. Isso resultou em mais estímulo à adoção (quem resiste a fotos e vídeos fofos de gatinhos e cachorros?) e facilitou a interação entre os cuidadores e as pessoas interessadas em adotar um animal.
Este foi um trabalho voluntário.
Meu papel e responsabilidades:
UI Designer
-
Adaptar todo o layout do site para o princípio de "Mobile first" -
Criação de wireframes, layouts e protótipos de alta fidelidade -
Organização do Figma e handover para o time de desenvolvimento -
O Problema
A ONG, atuante desde 2012 e já possuia um site para o cadastro e adoção de animais resgatados. No entanto, este site era pensado para desktops e não tinha uma responsividade muito boa. E a maioria dos cuidadores já preferiam acessar o site usando o celular, já que isso facilitava o acesso e cadastro das fotos e vídeos dos animais, fator muito importante na divulgação para adoção.
O Objetivo
Redesenhar o site, passando o layout atual para o conceito de "mobile first". O principal objetivo era garantir que cadastro de cuidadores e abrigos, o cadastro de animais e a busca por animais se tornasse mais eficiente num smartphone.
Wireframes e Protótipo de alta fidelidade
A partir do site atual, desenhamos wireframes de alta fidelidade e construímos um protótipo para testar os fluxos de navegação no smartphone. Os principais fluxos eram:
Busca por animais
Este é o principal foco do site. Garantir que qualquer pessoa que deseje adotar um animal, possa encontrá-lo através da ONG e entrar em contato com o cuidador. Por isso a busca, com diversos filtros, é uma funcionalidade importante do site. E agora deveria funcionar bem nos acessos mobile também.
Cadastro de animal para adoção
Qualquer usuário cadastrado no site pode cadastrar um animal para adoção. A ONG sabe que quantos mais fotos e vídeos fofos e informações o cuidador cadastrar, maior será a possibilidade do animal ser adotado. Por isso a importância de um cadastro rápido e fácil pelo celular, onde é muito mais fácil encontrar fotos e vídeos na galeria do aparelho.
Cadastro de novo usuário
A ONG já tinha uma grande base de usuários, mas crescer sua base também significava aumentar a probabilidade de adoção para os animais cadastrados no site. Por isso estavam incluindo a possibilidade de cadastro com o número do celular já que muitos usuários não tem ou não usam e-mail.
Perfil do usuário
No perfil do usuário encontram-se informações importantes tais como as conversas sobre adoção, o cadastro dos animais, as doações realizadas. Era importante que o usuário tivesse essas informações centralizadas num só local, de fácil acesso e compreensão.
Fluxo para o Cadastro de animal para adoção
Os cuidadores ganharam acesso fácil e rápido aos seus animais cadastrados no menu lateral. Todo o fluxo de cadastro de animais para adoção foi simplificado para 4 passos, facilitando a adição de informações, inclusão de fotos da galeria do smartphone e vídeos do YouTube.
