The adoption process involves questionnaires, meetings with adoption counselors, and evaluations of resources such as time, finances, and physical space.
But before we get started with the paperwork, how do we find our future best friend in the first place? Every dog has its own unique combination of genetics, medical history, personality, and behaviors that make it a great match for some people and a nightmare for others. To avoid having the dog brought back to the shelter shortly after its adoption, everyone involved in the adoption process should prioritize finding the best match between dog and human.
The often tedious process of finding and adopting the right dog can deter perfectly capable pet parents from searching for a new companion amongst their busy schedules. With these issues top of mind, I created a responsive website using Adobe XD to help users find adoptable dogs at their local shelter, apply for adoption, and set up a meet and greet with the dog.
Many animal adoption websites contain out-of-date information and unclear processes for moving forward with an adoption. Users don’t have time in their busy schedules to travel to a shelter, only to find out that the animal is no longer there.
The goal of the project is to create an efficient way for users to apply for adoption and set up time to meet a dog. The website will be designed to display clear, concise information about adopting and caring for a dog.
My user research included user interviews, empathy maps, user journey maps, and personas to ultimately define the problems and pain points users face when trying to adopt a pet.
Many target users are balancing combinations of busy work schedules, relationships, family life, and other commitments. Additionally, target users live in a variety of locations, some far away from an animal shelter. Users experience frustration when they cannot easily find clear information about which dogs are up for adoption and how to prepare to bring a dog into their home.
From these interviews, I discovered 3 user pain points:
From these findings, I created a user persona and journey map for Thom:
“I had a dog when I was a kid, and I want my kids to have that same experience.”
I started by sketching my ideas out on paper, focusing on clear navigation and minimal visual distractions. After brainstorming, I created digital wireframes in Adobe XD. I designed multiple iterations for different screen sizes such as desktop, tablet, and mobile.
I created a low-fidelity prototype for the main user flow, which is applying for adoption and setting up an appointment to visit the shelter and meet one or more dogs. During this time I also received feedback from other designers. I used this feedback along with my own observations of other designers’ work to iterate on my initial wireframes.
After creating the digital wireframes and low-fidelity prototype in Adobe XD, it was time to get some user feedback. I conducted an in-person, moderated usability study with 5 participants to test how well the desktop website solves the problem defined in my initial user research.
Based on the feedback I received, I continued to iterate on my designs while creating mockups for each screen. One of the changes I made was simplifying the Browse page. Usability study participants saw the pet preview section as superfluous, so I removed the preview and gave the other elements on the screen more breathing room.
The high-fidelity prototype followed the same user flow as the low-fidelity prototype. The mockups and high-fidelity prototype include feedback that I received from other designers and usability study participants.
According to usability study findings, users had trouble identifying a clear path for setting up a Meet and Greet with a dog or beginning the adoption process. While this was partially due to the location and appearance of the button, the button label of "I'm interested" didn't clearly indicate the next step in the flow. I changed the button label to "Set Up a Meet and Greet" to tell the user exactly what would happen if they clicked the button. As I also changed the location of the button, I kept the word "interested" in some body text near the button to provide additional clarity.
I noticed that several competing websites used conversational, enthusiastic tone throughout their copy. This stood out to me because it brings the lively atmosphere of a shelter to the user's digital experience, as well as emphasizes the adopters' and shelter's shared passion for finding loving homes for animals.
While the following accessibility considerations only scrape the surface of ways that designers can make technology more inclusive, I still felt like they were worth mentioning.
Users stated that this website design makes it easy to find the information they need, especially for people who are new to dog adoption and ownership. Intentional and user-centered design is always important, especially with more serious commitments such as adopting a pet.
I learned the importance of simplicity in design, and how easy it is for websites to get too cluttered and distracting. I am grateful for the feedback I received and I will continue to be mindful of this in the future.
As with any project, there is always room for improvement. Some ideas to improve the Wisconsin Rescue responsive website include:
© 2023 Katelen Dusek
