Challenge: DYR, an association of animal shelters, has asked us to create a responsive website that allows people to see all cats and dogs available in shelters close to them or further away and that allows people to learn more about each shelter. The goal is to make pets more visible to increase the chance that these animals are adopted and that less are euthanized each year.
Strategy: To do this, I entered into the mind of its target users to understand how they think and arranged the website in a way that helps users find pets they want to adopt. Doing so will increase adoption rates and decrease the amount of animals euthanized.
About 1.5 million shelter animals are euthanized each year because they are not adopted. DYR, an association of animal shelters across the US wants to raise the chances that these animals will be seen and adopted rather than euthanized. To do this, DYR has asked us to create a responsive website that allows people to see cats and dogs available in shelters close to them or further way and that allows people to learn more about shelters.
I started my project by creating a timeline to stick to. I prioritized only creating deliverables that would help me best design the website and I allocated time based on how long I thought it would take, leaving room for unexpected problems that arise.
To increase the likelihood that pets are found online, DYR must enter into the mind of its target users to understand how they think and arrange the website in a way that helps our users find pets they want to adopt. Doing so will increase adoption rates and decrease the amount of animals euthanized.
I performed competitive analysis to better understand the pet adoption market. Petfinder and adopt-a-pet.com were the major industry leaders. They both had a large number of filters to aid in finding a pet. But they did not have a filter for certain criteria that interviewees used to pick their pet such as if it will be okay living in an apartment.
I wanted to understand why people adopt versus buying a pet from a breeder. I also wanted to make it as easy as possible to find the pets that people are looking for. I wanted to understand what people are looking for when they look for pets and that would help me design the website around that. I interviewed 6 people that have adopted pets to learn from them.
1) The biggest pattern that emerged is that interviewees looked for pets that fit their preferences in the following categories:
Plan based on this: Help users find pets via these criteria with the least amount of effort. ie: the click of a button
2) Seeing pets online isn't enough. Visiting them at the shelter and feeling wanted by them is what sealed the deal (such as half the people chose their pet because they jumped on them and communicated wanting them).
Plan based on this: The main CTA should be to visit the shelter. Also, it's important to choose pictures that convey interest and desire.
3) When hearing passerby’s mentioning liking the pet or finding out it’s on hold, interviewees acted fast to get the pet. They felt like there was an urgency that they might not be able to get it if they wait too long. However this sense of urgency is presently not felt online.
Plan based on this: List the number of people that have visited the pet page such as when viewing houses to show that others are thinking about it too.
I began by creating the sitemap
Next, was the user flow
Based on the research, I created the homepage to help users find pets that fit the criteria that the interviewees mentioned. I decided to create cards that will take them to a list of pets that fit their criteria. No more having to research if that cute Shiba Inu is apartment friendly. One button will take you to all the options so that you know all options you see will fit that category.
Here's some other pictures from the wireframes
After my mentor approved the wireframes, I moved to designing the User Interface.
I used visual hierarchy to emphasize the button cards by having it towards the top and also adding cute animals with a similar color palette.
How many times have you been in the process of researching something and then suddenly drop the whole process because it is taking so much time? I wanted to avoid this process as much as possible by providing the most common questions upfront so that users don't need to do much research elsewhere. The main goal is for them to go to the shelter, so I provided the research they need upfront, so that they can call the shelter with the energy they have.
On the product page, I simplified the amount of time the user needs to spend researching if the dog is a good fit for them in the following ways:
Because the goal of this website is to make all pets more viewable to people browsing, it's important to minimize any roadblocks. One is the name. It's hard for people to remember acronyms unless they are very familiar with them. I recommended the name "Shelter by DYR" because Shelter is very easy for people to remember and it still has the credibility of DYR in the name. How sad would it be if people cannot remember the name of the website and do not come back for that reason and some dogs that they could have supported have died in the process (so dramatic, I know).
As far as the colors, I chose navy because it is timeless and reliable. Coral orange adds a great pop and the urgency that red communicates without being too jarring.
Task: You live in an apartment and are looking for a pet that does not need much activity. You are in your late twenties, living in an apartment in Burbank, California. You have a pretty busy lifestyle and don’t have much time to go on long walks with your dog. Find dogs that fit your lifestyle.
Identify ease of navigating through the website, current pain points and whether the search by category cards makes it simpler to find a pet.
Interviewed 5 participants, age 23- 33. Users tested either the mobile prototype or web prototype. Tasks ranged from finding dogs suitable for an apartment with low exercise needs, to testing if the information on each pet page is clear.
”I search for dogs all the time and I wish other websites allowed you to search so easily.” - Lauren H., user tester
Understanding what is important to the user during the interview process is key. Designing the homepage around that criteria is what made the website such a success and so user friendly to our testers. It was designed in the way that they thought, rather than forcing them to translate what they thought into filters that do not match their thought process completely.