ESTUDO DE CASO DE UX/UI
Amaar: Criação de um website para uma ONG de animais
Projeto realizado para melhorar a divulgação das informações da ONG para que a comunidade tenha maior facilidade de ajudar a causa.
Introdução
No ano de 2018, tive o prazer de conhecer, através da sua rede social, uma ONG formada por garotas dedicadas à causa animal. Esta é a Amaar, ela atua em Maringá e realiza ações colaborativas visando à adoção e à guarda responsável dos animais acolhidos, além de arrecadação de alimentos, medicamentos e itens de necessidade para os pets. No dia 6 de agosto, a ONG postou em seu Facebook o cancelamento de uma de suas ações mais importantes, o resgate de animais, devido à falta de recursos.
Incentivada pela causa, tentei fazer uma doação em dinheiro. Para isso tive que procurar em sua linha do tempo o link que direciona o usuário para o site Vakinha Virtual. Posteriormente descobri que outras formas de doar seriam presencialmente, durante as feiras de domingo, ou solicitando o número da conta através das redes sociais. Estas ações poderiam ser facilitadas para que o usuário ajude com mais praticidade a instituição, ou no caso da doação presencial, isso acaba restringindo o público para a doação.
Desafio
Melhorar a divulgação das informações da ONG para que a comunidade tenha maior facilidade de ajudar a causa.
Metodologia utilizada
Matriz CSD
O processo começou com a documentação das certezas, suposições e dúvidas. Pesquisei as informações nas redes sociais da Amaar e notícias publicadas em jornais da região. Logo após este processo, entrei em contato com a voluntária Giovanna que me ajudou a organizar melhor a Matriz CSD.
Entrevistas com usuários
A pesquisa presencial foi realizada no dia 14/07 e iniciou com uma dificuldade. Não consegui localizar onde a feira de adoção estava sendo realizada. No Facebook, eles divulgam o endereço como Praça do Bem próximo ao ATI do Parque do Ingá. Ao procurar “Praça do Bem Maringá” no Google Maps, ele não reconhece o local. E ao colocar “ATI do Parque do Ingá”, o Maps aponta para um local diferente de onde a feira é realizada. Só consegui encontrar a feira através de uma foto postada no Facebook, onde vi ao fundo, o nome de um dos prédios que fica atrás da praça.
A pesquisa presencial foi realizada com as voluntárias da ONG, com pessoas que estavam dando lar temporário e com quem estava interessado em adotar algum animal. Com isso descobri que a comunidade pode ajudar a instituição de 5 formas:
1. Sendo voluntário: O trabalho voluntário requer tempo e dedicação. Este deve cuidar das mídias sociais, realizar entregas de ração, levar os animais para cirurgias e fazer o acompanhamento, além de ajudar na montagem e adoção nas feiras de domingo. Para ser um voluntário você deve entrar em contato com a Amaar através de suas redes sociais ou presencialmente.
2. Realizando uma doação: Você poderá ajudar doando jornais, brinquedos, coleiras, caminhas, ração ou dinheiro. Para se realizar uma doação em dinheiro, você deve ir até a feira de adoção que ocorre aos domingos ou fazer via internet, solicitando o número do banco através de uma das mídias sociais ou então através do link Vakinha Virtual que é postada na linha do tempo da ONG.
3. Dando um lar temporário: A Amaar não possui um abrigo para os animais. Para isso conta com o auxílio da comunidade. A ONG fica responsável por todas as despesas dos animais. Para dar lar temporário é necessário entrar em contato com a Amaar, esta irá verificar se o local é adequado para receber um pet.
4. Sendo um parceiro: Através das parcerias, a ONG conseguiu pagar muitas das suas dívidas. Para se realizar uma parceria é necessário ter uma empresa. Você pode ajudar com descontos para serviços prestados a Amaar, doando um produto para rifa, doando uma porcentagem do lucro de algum produto, etc.
5. Realizando uma adoção: A adoção é fundamental para o funcionamento da ONG. Alguns animais ficam muito tempo nos lares temporários, o que gera custos para a manutenção dos mesmos e impede o abrigo de outros animais. Para se realizar uma adoção você deve ir às feiras da Amaar, levar seus documentos e assinar um termo de compromisso.
Questionário Online:
A pesquisa online foi realizada através de um questionário no site Typeforms. O número de perguntas variou de acordo com as respostas dadas pelos usuários. A ideia era entender a motivação para se realizar uma doação e qual era o critério para escolha de uma ONG. Além disso, foram feitas perguntas específicas para a Amaar.
Para obter as respostas, contei com a ajuda de uma das voluntárias que me ajudou a repassar o questionário e o mesmo também foi espalhado em páginas de diferentes redes sociais de ONGs de Maringá.
Obtive 27 respostas no total, alguns dos dados mais relevantes foram:
- 66,7% conheceram a instituição que auxilia através de amigos e familiares e 28,6%, através da internet.
- 66,7% acreditam que a transparência nos resultados traz mais confiabilidade a uma ONG e 19%, que é importante possuir um site e ter presença nas mídias sociais.
- 50% dizem que não realizam doações porque é muito complicado e 33,3%, por não possuírem dinheiro.
- 36,4% conheceram a ONG Amaar visitando as feiras de adoção; 36,4%, através da internet; 18.2% através de conhecidos e 9,1% através de reportagens.
- 66,7% realizaram uma doação para a Amaar presencialmente e 33,3% através da internet.
A última pergunta foi aberta, onde deixei um espaço para que a comunidade pudesse dar sugestões para a ONG. Além dos elogios, foram apontados também alguns problemas, como: a demora nas respostas via mídia social e a dificuldade de se realizar uma doação, por não encontrarem a conta para depósito.
Personas e Mapas de Empatia:
Após a realização dos questionários e entrevistas, foi possível criar o perfil das personas. Defini 2 personas principais: A voluntária e o adotante.
Benchmark
Através do benchmark, consegui entender quais são as práticas utilizadas por ONGs de diferentes países.
Os sites pesquisados possuem um botão no topo à direita que convida o usuário a fazer uma doação. Este call to action facilita a navegação e permite que a pessoa encontre com maior facilidade a página de doação. A Amaar não possui ajuda financeira do governo, toda a verba vem da comunidade. A repetição de um link para direcionar o usuário até a página de ajuda é essencial para o bom funcionamento da ONG.
Muitos dos sites possuem fotos e registros do que foi feito com o dinheiro arrecadado e as transformações que foram possíveis graças às doações. Ter o registro do emprego do dinheiro com fotos ou planilhas é importante para trazer mais transparência para os doadores. A ONG Amaar disponibiliza as fotos dos boletos nos stories de seu Instagram. O ideal seria ter uma página organizada por meses e anos, com um relatório completo dos gastos.
Alguns sites possuem uma página para doação, outros, apenas o número da conta para depósito. De qualquer forma, é importante que o site transmita segurança ao usuário. No caso das ONGs com a possibilidade de doação no próprio website, é interessante a adoção de barras de progresso. Isso permite que o doador consiga identificar o passo que se encontra. Enxugar a quantidade de informações para cadastro também é uma boa prática, além disso, todos os sites com a presença do checkout tinham algo em comum, a não utilização do cabeçalho e do rodapé presentes na inicial. A página do formulário deve ser limpa a fim de evitar distrações para o usuário.
Wireframe:
A criação do wireframe teve como objetivo deixar as informações mais acessíveis e fáceis de se compreender. De acordo com a pesquisa realizada, muitas das pessoas que conhecem a Amaar não têm conhecimento que é possível realizar outras ações além da doação em dinheiro e adoção de animais.
O conjunto das 5 possibilidades de auxiliar a ONG faz com que a instituição continue trabalhando. Todas as ações são importantes para que o todo funcione.
A página inicial do wireframe foi planejada de forma que, já na primeira tela, fosse possível entender que para ajudar a Amaar, o usuário pode: Adotar um animal, dar um lar temporário, realizar uma doação, ser um parceiro e ser um voluntário. Abaixo, na mesma página, há um resumo com a história da Amaar, com fotos e registros dos adotantes e adotados.
O foco também foi tirar todos os ruídos que atrapalham a ação para ajudar a causa. Para isso, foi acrescentado um espaço de Dúvidas Frequentes. Uma das reclamações presentes na pesquisa realizada, foi a demora para a resposta da ONG. Ter um espaço com as principais dúvidas, já respondidas, fará com que a comunidade não dependa exclusivamente das voluntárias. E para facilitar a ação para ajudar a causa, foi colocado um botão call to action para a comunidade se inscrever ou mostrar algum tipo de interesse.
O contato também foi facilitado, estando presente em todas as páginas, no rodapé. Lá consta o endereço e formas de contato. Um mapa também foi colocado com a localização da feira de adoção, para que não surjam dúvidas em relação à sua localização.
Teste de Usabilidade:
O teste de usabilidade foi aplicado com 10 pessoas. 5 utilizaram o mobile e 5 o desktop.
O desktop causou mais dúvidas em sua utilização. O botão “Quer ajudar?” foi confundido com um botão de ajuda para a utilização do site. Os sites de referência pesquisados utilizam a frase de forma afirmativa em seu botão. Devido a isso, foi feita a alteração da frase para “Quero ajudar”.
Uma sugestão dada pelo usuário foi facilitar a navegação com um botão de início em todas as páginas. Apesar da própria logo levar para a página inicial, isso não é algo intuitivo para todos. A solução foi o acréscimo do breadcrumb nas páginas internas. Além do acesso facilitado à página de início, ele mostra a hierarquia para o usuário, fornecendo uma ajuda adicional.
O teste de usabilidade aplicado ao mobile não gerou dúvidas, pois o botão quero ajudar não estava presente no mesmo. Os usuários navegaram com facilidade no site mobile e cumpriram todas as tarefas.
Resultado Final
O resultado final foi um site organizado e com ênfase no entendimento do usuário sobre as formas de se auxiliar a ONG.
No desktop, ao passar o mouse acima das imagens, o usuário terá uma breve descrição do que se trata cada uma das ações, e ao clicar, o mesmo será direcionado para a página correspondente.
Um botão “Quero ajudar” foi colocado no topo à direita, fixo à rolagem da página, para que o acesso às informações de auxílio ficassem presentes em toda navegação. Além disso, estas mesmas informações podem ser encontradas no botão do menu, à esquerda.
Na segunda rolagem, a história da ONG foi contada e fotos de antes e depois dos resgates e depoimentos foram colocados para mostrar que os resultados da Amaar são reais.
No rodapé é possível encontrar as redes sociais e o endereço da feira de adoção. Um mapa também foi colocado para que o usuário consiga se localizar com mais facilidade. O acesso ao contato é possível através do botão que se encontra no topo à esquerda e também no menu. Todos estes links possuem uma âncora que levam direto para o rodapé da página correspondente.
As páginas internas possuem um espaço de dúvidas e um botão para se inscrever. A página prestação de contas dá acesso aos gastos da ONG.
A página de adoção permite que o usuário filtre o animalzinho por espécie, gênero, porte e idade. É possível compartilhar a página com o animal escolhido através das redes sociais e registrar seu interesse na adoção através do botão “Quero Adotar”.
Conclusão
O projeto de criação do website foi muito intenso. Tive a sorte de contar com profissionais incríveis e muito inspiradores que me orientaram em todo o processo. Agradeço muito o Lucas Otsuka, a Andressa Siegel e o Fabio Muniz. E também a ONG Amaar, em especial a voluntária Giovanna que me recebeu na ONG e me ajudou a conhecer melhor um pouco do trabalho que eles realizam.
Após a conclusão do projeto, recebi um feedback positivo da Amaar. Por isso, a ideia é colocar o site no ar. Já conto com um programador para a realização deste projeto. Espero que todo esse processo traga bons frutos para a ONG Amaar.
Referências
- Muniz, Fabio— Curso de UX Design Awari. 2019
- Teixeira, Fabricio — Introdução e boas práticas em UX Design. 2017
- Krug, Steve — Não me faça pensar. 2014
