City Pups
The Problem
Dog adoption agencies often strive to create a connection between a person and a dog as fast as possible with hopes that the person will walk away with a new member of their family. The flaw that comes from this approach is that the dog is not always a perfect fit; the adopter may not have enough space for the dog, a yard for their high energy, or the schedule to compensate for their high maintenance. People that live in cities tend to have more restrictions, such as smaller living spaces, use of public transportation, etc. A dog that doesn’t end up being the right fit may be rehomed, or even taken back to a shelter. When sifting through most adoption websites, users also sift through a sea of dogs that don’t fit their criteria as well.
How might we give users the opportunity to refine their search to avoid being exposed to incompatible dogs?
How might we improve the efficiency of filling out information and examining dogs so that users are more likely to follow through with the adoption process?
How might we identify the best match for a user so that they are happier with their adoption and the dog finds its permanent home?
The Solution
CityPups is a company whose goal is to find the perfect dog that fits within the user’s requirements. Their goal is to design a website that increases adoption rate, outputs happier owners, and finds better “forever homes” for dogs. The website will walk the user through the process of finding a dog that best matches their criteria, through an aggregate of local orgs and shelters, and connect them to the best contact for inquiring with intention to adopt.
I approached this problem from the perspective of a dating app. The user is prompted with filling out information concerning their living arrangements, work, and lifestyle. They then fill out a simple list of general requirements for the dog and are shown one dog at a time based on their criteria. Once the user has exhausted the list of dogs they’ve received, they have a chance to review the dogs they approved of to consider for adoption. If the user is not pleased with their list, they can broaden their scope just a bit to see the dogs that fell short of meeting all of the criteria.
My Role
I performed a solo design sprint for this website prototype, working through understanding the problem through given UX research, Ideating, Storyboarding, Prototyping, and Usability Testing.
Understanding the Problem
I prioritized approaching the problem from the user’s needs and preferences for the right fit since they’re the one that’s making a life-changing decision. With the given assumption that the user lives in the city, living space, outdoor space, use of public transportation, and work schedule/situation are going to fall under basic location details. Qualities of the dog that will be important to the user will be size, temperament, if they’re good with kids, other animals or roommates, their energy level, noise level, health concerns, breed preference, and then whether or not they’re hypoallergenic.
Overall, the users preferred the streamline look and feel of the MVP. They all had no problems going through the screening questions and following the instructions to assess the dogs and narrow their final selection. The issues that arose were through identifying the Advanced Preferences button earlier and not having earlier access to it. Users mentioned the desire to filter based on Energy Level and Health Concerns up front and wanting to see them front and center on the profiles. The “out of state” dog came with mixed but positive reviews, where users would like to have seen more detail from the location (e.g. city, state, name of org/shelter, map).
“It’s a matter of finding the right one”
Ideating
I decided that the “Dog Search Results” was the most critical screen of the process from my Day 1 problem mapping. While there’s emphasis on the user’s preferences and I believe that giving them those questions and options up front before showing the dogs is dire to keeping the user focused, this screen will present the dogs to the user that fit their criteria the most, and will be the screen where the user will decide to look at a dog for more information and make the decision to inquire or not.
In a crazy 8s ideation session, I slowly mutated “finding the perfect fit” into “finding the dream dog” and started fixating on approaching this from a dating app perspective. This gives the user the chance to observe one dog at a time, but it was necessary to make sure that the user was able to get through the list of dogs as well before making an impulsive inquiry.
Drawing from Inspirations
I recalled a website I’ve used in the past to look at potential apartments called ApartmentList.com. I loved their approach to the overwhelming nature of apartment hunting, which resembled a desktop version of a dating app for apartments. The user has the option to go through the full list of available listings, and then even broaden the scope if they’re curious or weren’t satisfied with the initial list of options.
I decided on adopting the Apartment List/”Tinder” style for the Search Results screen. I love how it gives the user the opportunity to review each individual dog with a quick “Yes, No, Maybe” selection to save them in their final list so that they can eliminate all of the white noise. With this, I also like giving them the option to look at the dogs that fall right outside of their scope to see if there’s a dog out there that has better “chemistry” but may need the user to make one small adjustment to their lifestyle/preferences to adopt them.
Setting up the Story
Using the 7 step process I identified in my problem mapping, no step should exceed 2 screens to keep the MVP as light as possible. I consolidated the “Searches Dog”, “Finds Dog”, and “Opens Profile” into one step that the website performs for the user based on the information they provided in the initial screens. This removes the mental overhead that a user would experience when gazing upon a large list of dogs.
When I sketched out the storyboard, I realized how difficult it was to include so much information on each screen, so a simple presentation spiked in priority. The users will be exposed to every dog’s profile that’s within their scope, so it’s imperative to not overwhelm them with every single detail immediately.
Using the prompts and resources I received from the client, I utilized their logo and its purple for the personality of the prototype. I used a Varela Round to try and match the font on the logo. When designing the “swipe right or left” buttons, I avoided any negative connotations that would guilt trip the user into feeling bad for rejecting a dog. I moved forward with a “Not for Me” option to keep the focus on the user first and foremost.
I limited the number of questions on each screening page to 5 to avoid occupying too much of the user’s time upfront, so I made a call to consolidate Energy Level under Maintenance Level, and left off questions such as noise level and health concerns. Despite my concerns early on for elements like this, I chose to create an Advanced Preferences option that the user can access during the dog assessment phase of the prototype. I only placed this button on the profile of each dog and not on the review screen, which I failed to foresee as an issue.
The Prototype
In listening to user interviews and understanding the persona Ellie, it would make sense to let the user set their scope on dogs before they got overwhelmed or distracted with a large list of unfit dogs. The user needs to feel confident that the dog will be a good fit so they’re more willing to follow through with the inquiry.
Usability Testing
Right before the start of the usability testing, I panicked and when I realized that I didn’t use an opportunity in the prototype to explain to the users how to progress through the dog profiles. I made a quick change to the Loading screen to explain how each of the buttons worked. I also added an “out of state” asterisk to the distance on one of the dogs as part of the user’s tasks to identify a dog that was far outside their preferred distance but could be brought within their proximity.
“I see a dating profile for a dog!”
4 of the 5 usability tests were conducted as moderated remote tests via Discord, while the 5th one was conducted as a moderated in-person test.
Conclusion/Final Thoughts
In conclusion, the high-level approach to the problem feels successful. Simplifying the ability to refine the user’s search upfront and then streamlining the process into an actionable assessment of dogs engages the users without overwhelming them. While significant elements were missing from the details and description of the screenings and the profiles, these feel like minor additions that wouldn’t take up too much real estate and wouldn’t compromise the simplicity of the design.
My main regret in my approach to this solution was that I lost sight of the scope of the problem. The goal was to create a product that assisted users living in the city, and simplifying the preferences was the root cause of that. With more time, I’d add 1-2 questions on the “Tell me about yourself” screen to cover transportation and lifestyle. I’d then like to place more emphasis on the living constraints that the user has by making inferences from them. One example would be how a user doesn’t have a large outside area for the dog to use, so the website could explain to them that high energy dogs may not be advisable even if they selected that.
The big picture was discernible, but it was just missing a few pieces to make it clear enough for every city slicker to see their bright future with their perfect dog.