CityPups Overview
Background
This case study follows a version of Google Ventures’ Design Sprint that has been modified to allow for independent work.
The work was completed over the course of five days and followed the basic structure of a design sprint, but without the collaborative problem-solving elements of the original.
To speed the process along and keep it contained to five days, Springboard partnered with Bitesize UX and created different prompts for students to choose from. Each prompt included a problem that needed solving and supporting material like recordings of user interviews.
Problem
People living in cities face unique challenges when it comes to dog ownership- tiny living spaces, limited access to dog friendly outdoor space, and public transportation with long commutes to name a few. Although finding the right dog is important for everyone, it can be crucial for city dwellers to find a dog that is a certain size, energy level, or temperament, since they will be coming in frequent contact with people as well as other dogs.
Constraints
There were a couple of design constraints that I had to keep in mind with this challenge. First, it was specified that the solution be designed as a website, starting with designs for larger screens like desktops. Second, because CityPups is not a physical shelter but a third party that connects available shelter dogs with potential owners, my focus was to be solely on finding the perfect dog-owner match, and not on the adoption process. Once a user finds a dog they want, the website will connect them to a third party where they can move forward with the adoption process.
Goals
-
Increase adoption rates
-
Make happier owners
-
Find better forever homes for dogs
Role
UX Designer
Tools
-
Pencil sketches
-
Figma
Timeline
-
Day One:Understand and Map
-
Day Two: Sketch
-
Day Three: Decide and Create a Storyboard
-
Day Four: Prototype
-
Day Five: Test and Validate
Solution
After exploring a few ideas during the sprint, I decided to design a search engine with many specific filters to help users find the perfect dog. Being detailed about needs and lifestyle is very important when choosing a dog, so the main priority of this solution is to allow users to be as specific as possible in their inquiries. The end product would be as visually interesting and interactive as possible, with dog profiles containing photos and videos in addition to informative bios.
Day One: Understand & Map
Research
Since this design sprint was modified, the user interviews and a persona were already prepared and ready for review. Below are some of the main takeaways from the user interviews.
Persona
.jpg)
Key points from a user interview with Jennifer as she looks for a dog on AdoptAPet.com
Map
On day one, I went over all of my supporting materials and created a map to help me brainstorm how the user might go through the steps to make it to their ultimate goal: contacting a shelter with the intention of adopting the perfect dog for them.
After launching the website, the next step would be to narrow their results by location. It was mentioned in one user interview that because many people in cities rely on public transportation, they needed to find adoptable dogs very close to their location. Then, users would fill in all the details of their search such as size, energy level, etc. to ensure they were seeing their best matches. After that, they would look through all of the dogs that were compatible with them and learn more about each dog from there. Once they found a dog they were serious about adopting, they would be able to see contact info for the shelter to make it easy to inquire about the dog.
%201.jpg)
Day Two: Sketch
Modified Lightning Demos
For this exercise, I chose to look at three websites: PetFinder, AdoptAPet, and OkCupid. Petfinder and AdoptAPet were obvious choices. Their ultimate goal is very similar to CityPups: help people find a pet to adopt, but without being narrowed specifically to finding a dog in the city. When I was trying to adopt a dog, I spent most of my time on Petfinder, so I knew that they had a great interface for finding a pet.
Petfinder
.jpg)
AdoptAPet.com
OkCupid
I chose OkCupid because I think adopting a pet is essentially just looking for the right relationship, so I was hoping to draw some inspiration from the compatibility questions they ask when you create a profile. At this point, I thought that my solution would probably include a questionnaire, so I wanted to see how a different website would structure that process.
Crazy 8's
After doing the Crazy 8’s exercise, I selected the search results and filters page as my critical screen because that’s where users fill out all the information that is important to them regarding their future dog. Since CityPups’ main focus is finding the best match between dog and owner, I think the page where users provide information and see available dogs that fit their needs would be the most important part of the product experience. I decided to make the screen a combination of search results and applying filters so that users could see the dogs while filling out their preferences. I also planned to add an “applied filters” section at the top of the page so that users can easily see what they have filled out and remove/change their answer if they feel like their perspective on that topic has changed.
CityPups Solution Sketches
Before
Key Screen
After
Day Three: Decide & Storyboard
I decided to go with the solution that included applying filters to help users find the perfect dog because I think it makes the search more interactive and appealing that the user can see the available dogs while filling out their preferences. Being detailed about needs and lifestyle is very important when choosing a dog, so the time spent solidifying those preferences should be easy and fun. I also think the applied filters section at the top of the page is a useful tool for easily changing preferences if the user changes their mind or makes a mistake.
Because most of the action with my solution takes place on a single interactive screen, I chose to sketch out a random selection on each filter to demonstrate how the screen would display applied filters. Once the user finds a dog they are interested in, they can click on its profile and look at pictures, videos, information, and biography. The user can click the video of the dog to watch it and scroll through the photo gallery. The shelter contact info will also be listed clearly on the dog’s profile page and the user can choose to call or email them directly or to visit their website for more information first. I made two extra panels in my storyboard but felt it was necessary to include all the interactions.
(Storyboard shown in condensed version, click for Figma file close up)
Day Five: Prototype
The prototyping process was time consuming but fairly simple since I only filled out one set of functioning options for search results. I wanted to include all the information that was brought up as important in the interviews I listened to earlier in the week, either through the filters on the search page or through the dog’s biography.
Welcome Screens
I think location is the most concrete elements in the search for a pet, and that most people have age in mind when they start looking for a pet so I made those the starting points feature on the welcome page. I tried not to spend too much time on the UI, but did want to include CityPups’ purple brand color and images of dogs just to make the usability test feel more real to the participants.
Search & Filter Screens
Dog Profiles & Links
Some factors like personality or training felt too cluttered and specific to include on the home page, so they are just included in the dog’s information or biography. A few users mentioned that it was time consuming to get in touch with shelters so I made sure to include a contact section with a phone, number, email address, and website link for the shelter holding the dog. I also listed the adoption fee and what it includes under the contact section.
%201.jpg)
%201.jpg)
High Fidelity Interactive Prototype
Click for fullscreen!
Day Five: Test & Validate
I recruited all of my testing participants through the Springboard Slack channel and conducted all of my user tests via Zoom calls. All participants were somewhat familiar with the dog adoption process, so they were able to give good feedback on what a potential dog owner might look for in this kind of product. One user had not tried to adopt a dog online before, but was familiar with the adoption process.
User Testing Key Takeaways
​
-
Users would like to see a vaccine status on the dog’s profile
-
Front page had too much whitespace and font was too small
-
Not enough visual hierarchy on the dog profile page
-
Users wanted a call to action on the dog’s info page like a button that said “contact now!” or “adopt Lola!”
-
Not all of the filters had a “no preference” or “any” option
-
Target age needed the option to be changed along with all the other filters
-
Users wanted suggested text in the drop down menus so that they could always tell what they were looking at
.jpg)
Final Thoughts
If I were to keep developing this product, I would add a few more functions such as
-
Sharable favorites - users can save a dog later and share it with a roommate, spouse, etc. easily
-
A quiz to ask users more questions about their ideal dog and allow them to save search settings
-
Breed information and pet care articles
The usability testing stage went smoothly, and I got some great feedback on how to improve my design. I would love to improve the UI and flesh it out if I had more time to do so, but even as it is now, I think it is easy to use could be a helpful tool for people in cities to address their specific obstacles and find the perfect dog.