Based on a collection of user research and personas that CityPups had on hand, I took a closer look into what users report as important factors during the dog adoption process.
I would never want to adopt a dog that needed more activity or space than I could provide.
The key insight from these data informed me that:
I set out to find a better way for CityPups to connect people with dogs that they not only have an emotional connection with, but also realistically fit their lifestyles. I created a user map to represent the end-to-end dog adoption process that might provide a solution to the problem at hand:
Next I conducted a comparative analysis to examine websites that aim to solve similar design problems. I looked at Petfinder.com, a pet adoption website; LinkedIn.com, a job search website; and OKCupid.com, a dating website.
I then sketched out eight versions of the CityPups results page using the Crazy8s brainstorming method. This generated rapid design ideas and pushed me to think outside the box. I combined design elements from some of the competitive research I had conducted to decide the best placement for the important elements of the screen such as dog profiles and filter options.
After sketching out some options I decided on a design. The solution sketch (below) demonstrates the primary flow of the CityPups adoption process which provides the user with two options:
The results page for either option would be the same, however filters would be pre-selected for users who took the quiz, generating a curated list of dog matches based on user preferences and needs.
With my sketches from day two in mind, I moved forward with the design. The most critical screen was the results page showing all adoptable dogs, so I created a storyboard with two red routes leading to that page:
I then transformed my sketches into a high-fidelity interactive prototype and tweaked my design to ensure better functionality. The flow takes the user through one of two routes:
From either results page, the user can click on individual dog profiles to view more photos, learn more about them, and obtain important information about behavior, needs, and adoption.
I designed the UI of this prototype by basing it on the CityPups brand as shown in the project prompt. The bright purple color is utilized throughout as a contrasting pop of color against an otherwise minimalistically white background and draws attention to CTA buttons. See the prototype in action here
This is the landing page with two routes to find dogs
Users can take a quiz with their preferences and lifestyle which help to pre-filter the search. Helpful for users who don't exactly know what breeds or sizes would be a good fit
The results page filters for dogs that match the criteria from the quiz
The profile pages organize information so it's easy to read and learn about each dog
To validate the new CityPups design, I set out to test whether the prototype functions as expected by real users. More specifically I wanted to see how users responded to the proposed user flow as a way to search for adoptable dogs in a city.
I conducted remote, moderated usability tests via Zoom with five participants who live in cities and were either interested in pet adoption or had adopted a pet in the past. The tasks included:
After completing the tasks, I then asked each participant if they would feel confident adopting a dog using this website. I also asked if the participants felt informed about the dog’s needs from viewing their profiles, and whether they would still follow-up with the shelter to ask additional questions.
The usability test participants successfully completed all tasks and reported only minor errors.
Some errors reported included:
Overall, participants responded positively to the user flow while also providing insightful feedback as to how the site could be improved.
Two different users said the following of their experience using the prototype:
As a young urbanite who is unsure about what kind of dog -- and has definitely not done research into what dog -- she wants, this would be a good place to start!
I feel like I have the information that I would want for going into a conversation with the rescue about this dog
As for my next steps, I would fix the aforementioned errors and would consider adding more detailed questions to the quiz to curate better search results. Furthermore, while users responded positively towards the prototype, identifying it as “a good first step” for adopting a dog, I would take the following steps to ensure higher confidence in potential adopters: