A responsive website for an association of animal shelters
Roles: User Research, UX Strategy, Branding, UI Design, Testing, Prototyping
to encourage people to adopt pets
In order to identify what kind of the website features can help people to find a pet fast and easy, I performed:
to find out what criteria were the most important when looking for a pet and what made the search hard and frustrating for people
to better apply the findings
to design ideas and validate them via users' feedback
where the high-fidelity design was fleshed out
To get insight into what job pet adoption online resources do. I took a look at some pet rehoming agency websites to learn their strengths and weaknesses. For clarity, I put together all findings in a spreadsheet.
The most valuable information came from conducting an online survey and four 1:1 interviews. In total, 20 participants adopted their pets because they didn't believe in purchasing pets while shelters were full.
When searching through websites, almost all the participants were frustrated with:
Knowing you're providing a loving safe home for an animal in need is a good feeling and you get the privilege of having a wonderful pet as part of your life.
I would like to store the list of favorites and share the link with friends. When searching, I kept a lot of pet profiles opened in my browser.
Gathered data became a good basis for creating an empathy map that helped me categorize users’ feelings, pain points, and motivations. It gave me insight into what my strategy should be in designing the GetPet website.
Based on the empathy map I synthesized the persona as a representation of users. Jessica has a family and adorable dog and cat that she has adopted at different times. The pets bring the family much joy and happiness. Jessica is sure pets help her 6-year old son to grow up kind, caring and responsible.
Creating a sitemap allowed me to ensure that content would be placed where potential adopters would expect to find it.
By using the sitemap as a guide, I constructed a user flow diagram identifying how a user would complete the core task of searching pets, collecting favorites and adopting.
Based on the user flow and the sitemap, I made quick sketches using a pen and paper and then created mid-fidelity wireframes of the key pages necessary to address users’ needs.
I have included elements, lack or shortage of which frustrated interviewees when they used similar websites:
Search Results Page
Pet Personal Page
I created a prototype using wireframe screens and then conducted usability tests with two adopters and one potential adopter. All the participants successfully completed the following tasks:
None of them had any difficulties, confusion or error. In addition, they found the website intuitive, easy to navigate, including lots of filters to search for, and enough information on the animal profile page.
Clicking on 'Adopt me!'-button, I would expect to find a shelter contact information. The adoption is a human-touch process and I'd rather speak with shelter staff and learn more about the dog at first-hand, and after that, I would fill out an application laundry list.
I can’t identify ‘Add to favorite’-button on the right sidebar. I want to see it above the picture or close to it. The same thing with share-buttons.
I do like ‘Must be good with…’ and ‘Has special needs’ options. It tells me that GetPet is attentive to animals and cares about them.
All users' feedback was gathered into an affinity map to identify the elements that needed the most work and reiterating.
To create the logo I considered the image of the animal face in the human hand. This conveyed the meaning of care and responsibility which could be the key words for this website.
These are some stages of the creating and polishing process.
I chose a rounded typeface for the word mark to support the outline style of the logo. Also, I picked up a teal color because this blend of blue and green colors emotionally means trustworthiness, calmness, and health.
Once I had the logo in place, I created a UI Kit with the color palette, font selection, and other key elements.
The high-fidelity wireframes and the prototype were created based on the test findings and the affinity map.
view the prototype
Pet Personal Page
Search Results Page
Designing the GetPet website was a very rewarding and fun experience. When I talked to adopters and realized their problems and needs, not only when they used shelters' websites, but what motivated them to adopt, I felt the deepest respect for them. I kept this feeling in mind for the entire design process and it helped me to successfully complete this project.
Around 6.5 million animals enter US animal shelters nationwide every year. There are a lot of pets! And every time someone purchases a puppy or kitten from a breeder instead of adopting them that number increases. GetPet is an association of animal shelters which wants to encourage people to adopt pets by creating a platform allowing people to see all the available animals in any shelter close (or not) to them and learn more about shelters.