I love animals and pets, and a recent loss of a pet put into perspective what an important part of our lives a pet can be, so I was inspired to create an animal shelter website. I wanted to design an experience for pet adoption that would allow users to find the best pet for them, and allow them to focus on creating a connection with that pet.
The problem
Adopting a pet online can feel very impersonal and transactional. This is worsened by animal shelters lacking their own adoption process (and redirecting to another service), which makes the adoption experience feel inconsistent and disconnected from the specific shelter and pet. A convoluted adoption process may feel untrustworthy to users and hurt the shelter by losing potential adoptions.
The solution
Create a native, on-site adoption process that is specific to the animal shelter and selected pet, with a focus on providing users all the necessary information about the animal, pet ownership, and adoption process prior to committing to adopt. A straightforward on-site adoption process will make adopting pets easier, which should increase adoptions and benefit the shelter financially.
I arrived at the solution by:
Understanding user perspectives on adopting pets
Identifying essential website features
Creating a design that advocates for user needs
Making changes based on real user feedback
Understanding user perspectives on adopting pets
By researching users
My user research focused on understanding how users feel about adopting pets and what they need from the process. I found that users find the adoption process online to be impersonal, and want a better way to make a connection with a potential pet.
Jill's perspective
First-time pet owners, like my persona Jill, felt especially overwhelmed due to the number of choices, their lack of information, and their unfamiliarity with the adoption process. They need help choosing a pet, understanding the adoption process, and gaining a personal connection with a pet (all of which should be accessible).
Identifying essential website features
Through Jill's journey
I began to identify important features for the website by considering how Jill will go about using an animal shelter website to adopt a pet. Considering their steps and emotions at each part of the journey allowed me to spot opportunities along the way to help them achieve their goal.
Sketching out answers
Establishing the reputation of the animal shelter with success stories, filtering and sorting available pets, providing plenty of pet details, and clarifying the adoption process will all enhance Jill's experience.
Creating a design that advocates for user needs
By laying out the elements
Now that I knew which features to include to help Jill, I began to discern which kind of layout would best present the information.
I used paper wireframes to generate ideas and pick out the best features, while accounting for the site's responsive design with multiple sizes of sketch.
Through features users want
A dropdown menu with a search and profile button should make it easy for Jill to move around the site, and images of available pets let them start exploring right away. A competitive audit revealed gaps in competitor websites' accessibility and strength of branding, so I aimed to improve on these features as well.
Descriptions, photos, and videos on a pet's page will help Jill understand the pet's appearance, personality, and needs. Prominent buttons make it easy to visit a pet or file an adoption form.
Prominent filter options will let Jill narrow down possible pets so the list is less overwhelming. If they know a few qualities they want in a pet, they can begin with those.
Pages dedicated to first-time pet owners and the adoption process will provide information Jill will want to know, as a new pet owner who hasn't adopted before. Even longtime pet owners may need to know about this shelter's particular process.
Making changes based on real user feedback
Getting feedback from users
I performed two usability tests with real users. Initially I discovered that users thought there was missing information on the website, and that the navigation needed improvement.
I added more information to the pet pages so users like Jill can learn more at a glance, and increased support for first-time pet owners.
Since the navigation and processes were still unclear, I added details to the adoption process and reorganized the navigation for easier use and understanding.
The second study revealed that users wanted even more options on the site and for the details it provides to be more useful.
I added more types of filters for pets, based on participant suggestions, so finding a good fit is easier.
I also removed some information from the adoption interest page, which was overwhelming for users, and made it more focused and purposeful.
One accessibility consideration I made is to use different font styles and sizes to distinguish different elements of the site, so users can easily distinguish headings and links. I made sure to create a color palette that was tested for contrast accessibility, so it will be easier to use for individuals who have colorblindness or visual impairments. I also included landmarks on the website, so users who are visually scanning or using a screenreader can navigate the site easily.
Measuring success
I would measure the business success of this website by comparing the number of successful adoptions before and after it was implemented, and tracking the number of adoption and visit forms submitted.
Implementation
The site should be straightforward to implement, with a responsive design and CSS to target screen sizes, it would be easy to make the design adapt to different screen sizes.
Going Forward
Takeaways
Next Steps
Review the app for areas where any accessibility considerations may be missing, and make those areas more accessible.
Conduct a third usability study to check if there are any areas in the site that still aren't meeting users' needs.
Complete the phone and tablet sized iterations of the website, to complete the design and bring all elements of the responsive website to life.
Thank you for reviewing my case study!
If you would like to get in contact with me, please use the information listed in the footer below.
