A responsive website for an association of animal shelters

Roles: User Research, UX Strategy, Branding, UI Design, Testing, Prototyping

•Problem

O1

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.

•Solution

O2

In order to identify what kind of the website features can help people to find a pet  fast and easy, I performed:

Research

to find out what criteria were the most important when looking for a pet and what made the search hard and frustrating for people

Analysis

to better apply the findings

Exploration

to design ideas and validate them via users' feedback

Production

where the high-fidelity design was fleshed out

•Process

O3

Research

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:

  • few search options
  • smallish and low-quality pet snaps
  • little information about a pet and its history
  • the lack of information for the first-time owners about pet care, training or behavioral issues
 

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.

Analysis

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.

Exploration

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:

  • More filters: by breed, gender, age, size, color, behavior
  • 3+ pet photos and video
  • Detailed information about a pet
  • Favorite list

Home Page

Search Results Page

Pet Personal Page

Favorite List

Testing

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:

  • Find a dog and complete the adoption application process
  • Add to favorite
  • Sponsor a dog

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.

Production

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.

Final Design

The high-fidelity wireframes and the prototype were created based on the test findings and the affinity map.

view the prototype

Home Page

Pet Personal Page

Search Results Page

Sponsorship Application

•Thoughts

O4

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.

Next project → Citibank Mobile App

© 2017 • Olga Bolshchikova

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.

 
  

 
  

 
  

 
  