Ryan Wichtendahl
Matching the Perfect Pair with CityPups
Introduction
​
How might we personalize the experience of finding a pet to adopt? Residents of densely populated cities face unique challenges when caring for an animal, especially a dog. Adoption search engines tend to focus on creating an emotional bond, but without narrowing results based on practical considerations, possible adopters are matched with several dogs they can’t care for. In a modified Google Ventures design sprint, I worked to design a better adoption matching platform over the course of five days. CityPups, a website dedicated to helping people in cities find the perfect dog, uses quiz questions and filters to match potential adopters with dogs uniquely suited to their metropolitan lifestyle.
Step 1: Understand the Problem
​
Cities offer some unique challenges for pet owners, such as compact living spaces, crowded outdoor areas, and public transit as a main method of getting from place to place. Current methods of finding an adoptable dog do not always take these factors into account, so potential owners can become frustrated or disillusioned with the adoption process. Improving the experience of searching for a dog would allow all types of people to efficiently find the companion best suited for their situation and personality.
Understand: User Interviews
​
At the beginning of the sprint, I was provided with user interview data courtesy of Bite Size UX. The brief included quotes from nine people familiar with the dog adoption experience, as well as a video interview of someone using a competitor's platform. From this data, I developed a few key insights:
1. People have to dig for information relevant to them.
Sites don’t feature practical considerations such as house training or temperament on initial search results. This requires users to spend time and effort reading the biographies of each dog.
2. Sites favor emotional connection.
Biographies are several paragraphs long and seek to make every dog sound like a great companion. Users found themselves growing attached to dogs only to discover they were unable to care for them. This caused disappointment and led to some users putting off the adoption process.
3. Photos and videos are appreciated once a good match is found.
Users appreciated being able to see the dog moving around or playing, as this gave a stronger idea of its size, personality, and temperament.
Understand: Experience Map
​
Using these insights, I mapped a possible end-to-end user experience for the site. I proposed a short quiz that would match potential adopters to the right dog by asking questions about lifestyle and ideal characteristics. Results would be automatically filtered, reducing the likelihood users would encounter a dog they liked but were incompatible with. This would streamline the search process, and hopefully encourage people to take the next step in adopting the dog.
Step 2: Sketch a Solution
​
Before beginning to ideate, I conducted lightning demos of competitor adoption websites. These reinforced some of the issues brought up during interviews. Overall, it seemed like the goal of these sites was to get users to expand a search result and establish an emotional connection with the dog. If every dog was compatible with the user, this would be less of a problem. However, users could find themselves loving a dog's personality only to discover that they required a lot of space or some other resource they weren't able to provide. Additionally, spending time reading rather than deciding could detract some busy users.
Search results contain minimal information, requiring users to click on a dog to learn more.
Some search filters, such as breed, contain overwhelming amounts of information.
Pet biographies are lengthy and calls to action don't come forward once users scroll down the page.
Search results contain minimal information, requiring users to click on a dog to learn more.
Sketch: Crazy 8s
​
Using my analyses and the end-to-end experience I had generated during step 1 of the sprint, I brainstormed some quick ideas for a dog matching quiz. The primary goal of the quiz was to remove dogs that weren't compatible with a person's resources or lifestyle, before they spent time reading biographies or developed an emotional bond from a photo. I spent only 1 minute sketching 8 potential quiz structures, from questionnaires to pet builders to dating app-style experiences. I concluded that a short questionnaire would be able to narrow results without overwhelming users at the beginning of the adoption search process.
Sketch: Screen Sequence
Moving forward with the questionnaire, I sketched a sequence of screens that took users from the beginning of matching to a single search result. The questions would be related to life in a city, and directly correspond to filters on the search results page. Result cards would display information related to each filter, to enable users to quickly glance and decide without having to read a lengthy biography.
Top menu for navigation and main page that prompts users to start the matching quiz
Users answer one question at a time and the site compiles answers into a narrative
User can click on a result to reveal a detailed biography and buttons to the next step in adoption
Top menu for navigation and main page that prompts users to start the matching quiz
Step 3: Storyboard a Direction
​
A matching quiz would provide users with a more efficient and enjoyable experience, but I wanted to know what structure of quiz would be the best approach. I reached out to a few users, and presented them with two options: a quiz with all questions on one page and a quiz with one question per page. They responded better to the quiz with one question per page, explaining that it felt less overwhelming and it was easier to see their progress. I used this insight to develop a storyboard for my upcoming prototype. Each screen would contain a single question, clear indications of progress, and results that were filtered based on the quiz results.
One question per page, user inputs answers using method best suited for the data (sliders, dropdowns, etc.)
Quiz answers inform search results
One question per page, user inputs answers using method best suited for the data (sliders, dropdowns, etc.)
Step 4: Prototype
​
Presented with the CityPups name, logo, and color scheme from Bite Size UX, I began transforming my sketches into an interactive prototype. To improve navigation and reduce the number of screens, I made some important digressions from the initial plans:
1. Questions were grouped together by subject matter.
Rather than one question per screen, I used six subjects with two or three questions per screen. This was meant to make the questions flow together naturally and to reduce the number of screens.
2. A question bank was added for reference and navigation.
I placed a list of the questions and answers along the left side of the screen, so users would know how far along they were in the quiz and what they had left to do. If necessary, they could click on an answer to go back and change it.
Prompts users to take matching quiz
Allows users to search a certain distance from a preferred location
Biographies place focus on calls to action such as contacting the shelter
Prompts users to take matching quiz
Step 5: Validate with Users
​
The final step of the design sprint was to test my prototype with potential users. I reached out to my social networks and found five test participants. Two of them lived in large cities, one of the two with a dog, and the other three had adopted dogs in suburban areas. I conducted all of the tests over Zoom, where I asked the user to go through the process of finding a golden retriever named Bella using the matching quiz. All five users were able to complete the task, but they brought up some aspects of the prototype that made their experience more challenging.
Critical Issue: Question Bank
Instead of being perceived as a reference or navigation element, the question bank was seen as part of the quiz. Two users tried to click into the question bank to start the quiz, and another said she almost did. She elaborated that because it was on the left side of the screen, she read it first. There were also two users who didn’t understand that the question bank was clickable. When I asked them how they would quickly navigate to a question from three or four screens ago, they said they’d click the back arrow several times.
Important Issue: Sliders
Questions about age, size, and temperament used sliders. Users expected that when presented with four options, they would choose only one, rather than be able to designate a range. Three users clicked the sliders like buttons, rather than clicking and dragging as intended. One user asked me if she was supposed to slide the circles along the bar, calling them “buttons.”
Important Issue: Adopt and Contact Buttons
On the last step of the task, I asked users to tell me how they would start the process of adopting Bella. Three users hesitated, with one of them asking me what the difference between the adopt and contact buttons was. He felt like both the contact and adopt buttons would perform the same action: contacting the shelter.
Analyzing Results
​
Creating and testing CityPups through a design sprint process provided me with great insights into how I might improve the site in future iterations:
1. De-emphasize the question bank.
It’s vital that the primary quiz questions come forward on each screen. Reducing the size of the question bank, moving it to a different part of the screen, or muting the colors could improve hierarchy. I could also remove the questions entirely, using dots to indicate progress as with the PetFinder quiz.
2. Clarify the slider elements.
The sliders aren’t appearing as if they can drag. Shading them to appear more three-dimensional could be one approach, or perhaps displaying them with a smaller range selected instead of extending them fully. If necessary, I could include an instruction screen at the start of the quiz.
3. Differentiate the call-to-action buttons.
It needs to be clearer that the contact button is used to ask the shelter a question or set up an appointment, while the adopt button begins the application process. Making them different colors was not enough. I need to change their size, add an icon to each button, or locate them on different parts of the expanded search result card.
Conclusion
​
People looking to adopt a dog in a large city need a customized search experience. Without listings that display critical information and are filtered effectively, users will spend too much time and effort looking at dogs they aren’t able to care for. CityPups tackled this problem in a five-step design sprint. I dove straight from problem to solution, sketching and prototyping an experience that would ask users what they were looking for. The new site prioritizes the aspects of a dog that may influence the decision to adopt before an emotional bond is formed. This is an experience that is hopefully better for both potential adopters and adoptable dogs. Through further development, CityPups could help make it possible for anyone anywhere to find the four-legged companion that’s perfect for them.