A responsive website for a fictitious animal shelter association.
Role: UX, UI, and Visual Design | Prototyping | User Testing
A Designlab UX Academy course project
A Designlab UX Academy course project
Overview
DYR is an association of animal shelters. By partnering with shelters and rescues nationwide, they hope to raise awareness about pet adoption and increase discoverability of adoptable pets.
The Challenge
DYR needed a responsive website that allows people to see all available animals in any shelter or rescue in their nationwide network. They did not have a logo or any visual assets to leverage, so a brand identity design was also required.
DYR needed a responsive website that allows people to see all available animals in any shelter or rescue in their nationwide network. They did not have a logo or any visual assets to leverage, so a brand identity design was also required.
The Solution
Whether someone’s adopting for the first time or they’ve already welcomed several pets into their home, DYR is focused on connecting the right pets to the right people. To accomplish this, the website features a Find Your Match compatibility survey and detailed search filters to help potential adopters narrow down the pets that best fit their lifestyle. The website also has a streamlined application process that allows people to complete one application that can be used at any shelter or rescue in the network.
Whether someone’s adopting for the first time or they’ve already welcomed several pets into their home, DYR is focused on connecting the right pets to the right people. To accomplish this, the website features a Find Your Match compatibility survey and detailed search filters to help potential adopters narrow down the pets that best fit their lifestyle. The website also has a streamlined application process that allows people to complete one application that can be used at any shelter or rescue in the network.
User Research
I talked to five people about their experiences with adopting pets. Three of them currently had rescue dogs or cats and had adopted in the past. The other two were looking to adopt a dog for the first time.
The biggest challenges they faced:
• It’s difficult to gauge a pet’s personality only by photos and a brief description online. Meeting them in person is a big part of knowing they’re the right fit.
• People do want to make sure a pet is compatible with their home when considering adoption. But shelters can be understaffed and aren’t always able to provide counseling on which pet may be best for someone’s situation.
• Shelter/rescue websites tend to be outdated on which pets are available. There’s also often a lack of information, like any health issues they may have.
• The adoption and application process can be time consuming and inefficient. Some rescues are disorganized and low-tech when it comes to communication.
Personas: The First-Time Dog Seeker and The Experienced Owner
With the data from my user interviews, I formed two personas. Jason has never owned a dog before and is looking to adopt his first one, while Susan has had dogs throughout her life and is looking to adopt a second dog to join her family.
Matchmaking Made Simple
Compatibility between a pet and its potential family carries the most weight when people are deciding to adopt. This insight overlaps with DYR's goal of placing pets in their forever homes and avoiding returned animals. So how might DYR help people find a pet that best fits their home and lifestyle?
By testing a low fidelity prototype with users early in the process, I gathered user feedback to iterate on the following features and content.
Find Your Match Survey
By answering a few questions about their lifestyle and experience with dogs or cats, users can get matched with compatible pets in their area.
By answering a few questions about their lifestyle and experience with dogs or cats, users can get matched with compatible pets in their area.
When the user views their matches from the survey, filters will be populated based on their survey results.
Search
Users also have the option to perform a search from the landing page instead of taking the survey. They can then narrow down pets with the detailed filters on the results page that include behavior characteristics and grooming needs.
Users also have the option to perform a search from the landing page instead of taking the survey. They can then narrow down pets with the detailed filters on the results page that include behavior characteristics and grooming needs.
Pet Profile Page
A pet's profile includes important information about the them and the organization where they are currently being cared for. Rescues and shelters would be responsible for evaluating pets and entering this information into a separate portal.
A pet's profile includes important information about the them and the organization where they are currently being cared for. Rescues and shelters would be responsible for evaluating pets and entering this information into a separate portal.
Streamlined Application Process
An application is required for both shelters and rescues when one is ready to adopt a pet. Rescues even require potential adopters to fill out an application in order to meet animals.
Users would be able to apply for a pet at any shelter or rescue in the DYR network directly on the website. If they decided to take the Find Your Match survey, their responses would be populated in the application if they created an account after taking the survey.
Landing Page
The survey is featured more prominently than the search feature to encourage users to think through their needs and requirements, so they can be more mindful of the type of animal they're most willing to care for. Educational resources on the adoption process and pet care help to position DYR as an authority on the subject, leading to more user trust in the organization. And a social media presence provides another way for users to view available animals and also helps increase awareness of DYR and their mission.
The survey is featured more prominently than the search feature to encourage users to think through their needs and requirements, so they can be more mindful of the type of animal they're most willing to care for. Educational resources on the adoption process and pet care help to position DYR as an authority on the subject, leading to more user trust in the organization. And a social media presence provides another way for users to view available animals and also helps increase awareness of DYR and their mission.
Logo and Style Tile
When designing the logo, I wanted to incorporate some element of dogs and/or cats since DYR is a pretty generic-sounding name, but I also didn't want it to be too cutesy. I tried to strike a balance between a sense of warmth and friendliness with a modern, sophisticated feel.
The brand personality is warm and uplifting so I chose a bright, friendly palette and created some fun illustrations to draw people into the How It Works section on the landing page and other banners in the site.
High Fidelity Prototypes
I created a high fidelity desktop prototype with InVision and a mobile prototype with Marvel.
Next Steps
• Design adopter dashboard that includes application status tracker, messaging with shelters/rescues, and home check/meet and greet scheduler
• Design rescue/shelter portal for uploading pet profile information and tracking messages and applications
• Build out full survey and application
• User testing of high fidelity prototype