Length:
90 hours
Role:
UI/UX Designer
Platform:
Responsive Website
Industry:
Non-profit
Tools Used
Sketch, Invision, Photoshop
Date
February 2019

Shelter

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.

Scope of Work

Strategy
Research
Competitive Research
Qualitative Interviews
Research Summary
Strategy
Strategy
Created Timeline
User Flow
Strategy
UX Design
Wireframes
Site Map
Prototype
Usability Testing
Strategy
UI Design
Visual Design
Style Guide

Background

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.

Goals

  • Design a responsive website that allows users to see what pets near them or further away are available for adoption.
  • Create a website that allows people to learn more about shelters.

Organization

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.

Phase 1: Research

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.

Competitive research

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.

Qualitative Interviews

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.

Research Findings

1) The biggest pattern that emerged is that interviewees looked for pets that fit their preferences in the following categories:

  • Size (small, med, large) – Will it fit in an apartment?
  • Energy level ( does not require much activity vs active)
  • Cuteness
  • Interacts well with dogs or humans
  • Age

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.

Phase 2: Strategy & Design

Information architecture

I began by creating the sitemap

Next, was the user flow

Wireframes

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.

Phase 3: User Interface Design

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:

  • I listed easy access to important pet criteria mentioned in the interview (good with other pets, lives in an apartment, etc.)
  • I added a link for breed info that takes the user to a partner website that gives ratings for just about any criteria people are looking for. This should cover any other criteria they are looking for. It opens in a new tab, so that they can have it for reference.

Branding

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.

Phase 4: Interaction and Implementation

Mobile Prototype

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.

Desktop Prototype

User testing

Goals: 

Identify ease of navigating through the website, current pain points and whether the search by category cards makes it simpler to find a pet.

Methodology

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.

Affinity Map

Findings

  1. Users LOVED the module on the homepage that allows people to search via apartment, energy levels, etc.
  2. The website is easy to navigate, clean, positive and hopeful.
  3. Users are not likely to learn more about the pet unless they like what the pet looks like. Thus, it’s important for the pet thumbnail to be clear.
  4. Users liked having multiple images on each pet’s section, so they can see the different sides of the animal.
  5. Pictures of pets outside of the cages conveys that the shelters take good care of the pets. Outside pictures tend to go over best.
  6. Many users said the goal of the website seems to be to make sure owners get a good match for their pet to find their “forever friend” that they don’t part with soon after realizing they are not a good fit for their situation.
  7. The website seems very dog focused, so we need to add more cats to search cards in order to make sure those searching for cats have access to the same features as those searching for dogs have.
”I search for dogs all the time and I wish other websites allowed you to search so easily.” - Lauren H., user tester

Next Steps

  1. Prioritize adjustments: Prioritize based on how severely it impacts the users from completing calls to action, browsing and adopting dogs.
  2. Make adjustments: This includes to make the homepage helpful for people that search for cats, to enhance image quality and to make it very clear who DYR is.
  3. Test: Once the prototype is updated, we will do user testing to see if the solutions solved the problem and gather more info to improve the website.

Lessons learned

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.