Introduction
There are many animals with various conditions in the shelter. The users often have trouble finding the ones that best match their lifestyle and living conditions. So I decided to create a web site that help users quickly find the ideal animals and apply for adoptions.
The final products is a responsive website for an animal shelter located in NYC that focuses on the adoption process. .
The tools used are Adobe Photoshop and XD.
User Research
Interviews are conducted with potential pet owners, and people who have experiences adopting from a shelter. Secondary research is also conducted by researching animal shelters, other pet adoption agencies, articles about rescued animals and pet adoptions, and tips for getting a new pet.
Pain points
Some of the pain points identifiled based on the research are:
1
Too many animals with too many different conditions.2
There might be multiple applications for the same animal. So the user might need to repeat the process until they can take an animal home.3
People don’t want to fill out the same form over and over. They also need to track the status of the application.4
New pet owners need tips and guidance for keeping the animal healthy.Persona
A personas was created as the result of the research:
Persona: Molly Gregg
Problem statement:
Molly is Busy single-mom living in Manhattan who needs to easily find a pet and apply for adoption from the shelter’s website because it’s time-consuming to find pets that fit her lifestyle and housing situation.
User Journey Map
The user journey map is based on the persona I created and it helps to put me in the user’s shoes to better understand their needs.
Sitemap, Wireframing and Prototyping
Paper wireframes were created to quickly demonstrate the user flow. After that, a sitemap was created to demostrate the structure of the website. The goal is to make the navigation simple and easy.
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of finding the right animal and apply for adoption.
View the prototype on Adobe XD.
Some of the findings from the usability test are:
1
Users need more ways to find animals.2
Users need to move between the detailed pages for the animals.3
Users need guidance when they apply for adoption.High-fidelity Mockups
High-fidelity designs then were created based the wireframes and modified according to the findings from the usability test. Mobile version of the design was also inlucded.
The final prototype demonstrates the user-flow of searching for animals and adoption application
View the prototype on Adobe XD.
Takeaways
Some study participants report that this could be a very useful tool for potential pet owners. This site allows users to filter the animals with many options to find the best match.
This project allows me to go through all steps of UX/UI design process with new knowledge and skills gained in accessibility, user research, and usability test.
Thank you!
If you're interested in this project and want to hear more, please feel free to contact me.