CityPups Design Sprint
A dog adoption website tailored for city dwellers who are looking for the perfect furry companion.
The problem
People living in cities have unique needs when it comes to finding the right dog to adopt, and these needs aren’t always addressed through traditional adoption sites.
The objective
Complete a solo, GV-inspired 5 day design sprint in order to help the user feel confident that they and their dog will be a great fit for each other both emotionally and practically, with the goal of increasing adoption rates, making happier owners, and finding better forever homes for dogs.
Constraints
The solution must be designed for desktop. The focus should be on helping users find the right dog and not on the adoption process itself.
My role
UI/UX Designer | UX Researcher
Day 1: Map
Problem Description and Insights
I began Day 1 of the design sprint by learning more about the goals of the company and the needs of our potential users. I found that potential adopters living in cities have unique needs that aren’t always met by traditional adoption sites . Cities are densely populated, and as a result many people live in apartments or other small living spaces. Potential adopters want to feel confident that their home will be a good fit for their future dog. Often people have many neighbors or travel using crowded public transport, meaning they want to make sure their dog is good in busy spaces around other people and animals.
Research highlights from the information provided by BitesizeUX
When browsing dogs that are available for adoption, pictures (and especially videos) are most likely to be the first thing that catches the user’s eye, and then they’ll consider age, size, etc. However, breed and size can’t always accurately predict temperament and activity level, and so users want to see dog-specific information on the listing. Overall, the typical user wants to feel confident that they and their dog will be a great fit for each other both emotionally and practically.
After thoroughly going through the design brief, I created a user map of a possible end-to-end user experience, from landing on the CityPups website to finding the perfect pup:
Day 2: Sketch
Lightning Demos
Day 2 of the sprint started with some competitor analysis. The goal of the lightning demos was to see how similar companies solve some of the same problems identified on Day 1. I looked at three pet adoption sites: Petfinder, Adopt a Pet, and Friends for Life. The first two compile adoptable pets from local shelters, and the third is a Houston-based rescue. I was most interested in seeing how users can tailor the results to only see dogs that match their lifestyle.
Petfinder
10 filter categories
No way to filter by temperament
Cannot view all filter options at once (need to scroll)
Quiz to match user with dogs suited to their lifestyle
Need an account to view matches
Some matches have no information listed, so I was unclear why I was matched with them
Many dogs have little information listed about them
Adopt a Pet
8 filter categories
No way to filter by temperament
Cannot view all filter options at once (need to scroll)
Some results don’t match filter selections
For example, when filtering by small size most results are puppies that will grow into big dogs
Many dogs have little information listed about them
Friends for Life
3 filter categories (animal type, gender, and does well with cats/dogs/kids)
Great summary to the right of the photos
Each animal has a lot of information written about them, including personality and temperament
Crazy 8s Exercise
After completing the solo lightning demos, my next step was to look back at the user map I made on Day 1 and choose the most critical screen to sketch eight times in eight minutes. The goal is to iterate quickly so that you can get your ideas onto paper and come up with a variety of solutions. I decided that the search results screen was the most important, since that would be where users are seeing the dogs and filtering the results. Based on the user research I believe users want more control over the results that they see, especially so that they don’t fall in love with a dog’s picture just to realize that they’re not a good fit.
At this point my next step was to choose my favorite iteration from the Crazy 8s exercise and create a storyboard consisting of the critical screen and the screens immediately before and after it. Given the short time frame of the design sprint I didn’t get to sit and ponder for a while- I just had to choose and keep going. Although daunting at first, I really appreciated how quickly I was able to make decisions. I decided that the best way to match a potential adopter with a dog is through a quiz. Upon completion, the user will be navigated to a search results page that displays all of the information in a clear and concise manner. Once the user sees a dog they want to learn more about they can click on it to go to its page and learn more about it.
Tiny Storyboard
The sketch above shows three screens: the last question of the preferences quiz, the search results page, and a dog’s profile page. I didn’t get to flesh the design out as much as I would have liked, but that’s the nature of the design sprint! In the above scenario the user would click “show my results” to navigate to the next screen, and then would click on Spot’s picture to see his whole profile. Additionally, I chose to hide the preferences/filters behind a sliding tab on the left side of the screen. When the user hovers over it, the tab would expand and give the user the option to edit their set preferences.
Day 3: Decide
The goal for Day 3 of the design sprint was to make the final decisions about the user journey and to sketch a 5 to 15-panel storyboard. I was feeling pretty confident about the quiz playing a central role in helping the user find the perfect dog. My thought was that by having users take a quiz to determine which filters to apply to the available dogs, users will only see the dogs that meet their needs, and that way they won’t fall in love with a dog’s photo before realizing that they’re incompatible. In addition, it was at this point that I had a conversation with my Springboard mentor about best practices for filters, since I wasn’t sure if my idea about hiding the filters behind a sliding tab was user friendly. After our conversation I decided to display the filters at the top of the search results screen, and I made sure to add a button to apply each filter so that users can select multiple choices before updating the results.
I used the note-taking app, GoodNotes, on my iPad to sketch out the storyboard. Doing the sketch digitally and utilizing a desktop template helped me get my ideas out quickly and clearly. I was happy with the way the sketches turned out, but I did note that I wanted to group some of the quiz questions together on a single screen in order to reduce the amount of screens the user has to click through. To address the city-specific factors that users may be looking out for if they live in a city, I created a question about those traits. As you can see in my notes next to the sketch, I thought about naming these traits CityPups CityFactors, and that’s an idea that I ran with in the prototype. CityPups goal is to address the needs of people who live in cities when it comes to adopting dogs, and so allowing users to choose which CityFactors are important to them gives them more control over which dogs they see and gives them a better chance of finding the perfect dog.
Day 4: Prototype
Day 4 was the day I was most looking forward to- I finally got to open up Figma and get to work! My goal was to build a realistic facade to represent the user journey I identified on Day 1. I stayed pretty true to the sketches I made on Day 3, making some updates along the way. I knew I wanted some sort of progress indicator for the quiz, but I wasn’t sure if I wanted a simple “Step blank of blank,” a plain progress bar, or something else. I decided to group the quiz questions into different categories, with a screen dedicated to each category. The progress indicator shows which category of questions you’re currently on and how many more you have left.
CityPups CityFactors
The screen to the right shows the CityFactors selection page, and I was really excited to hear what users thought about it on Day 5. I was curious to see if users would understand what CityFactors were without reading the definition in the mission statement on the homepage. I learned during usability testing for my first capstone project for Springboard that users don’t always read everything on each screen, and so my designs need to be understandable even at a glance.
Search Filters
Once the user completes the quiz, they’ll be taken to the search results screen with filters that correspond with their quiz answers already applied. One of the tasks that I wanted to test on Day 5 was the process of applying a new filter to the search results. In order to test this task, I needed to create a filter that could be updated on the prototype. To do this, I made a health filter that the user could interact and update the search results with. After spending the whole day creating the prototype, I was ready to start user testing the next day.
Day 5: Test
In preparation for user testing, I started recruiting participants on Day 1. Fortunately I got five participants to sign up for the same day, so I could get all of my usability testing completed on Day 5. I recruited fellow Springboard students via Slack, and my only requirement was that participants have lived in a city and have/have considered getting a dog. All five participants were women in their mid 20s to early 30s. Two lived in NYC, two lived in cities in Texas, and one lived in a city in California. I conducted the testing remotely over Zoom.
My goals for the usability testing were:
Identify any usability issues
Learn participants impressions of the interface
Find out if users feel confident that the dog they find using CityPups would be a good match both emotionally and practically
For the usability test, I had each user imagine they did a Google search for adoptable dogs, clicked on the CityPups search result, and landed on the homepage. From there users were instructed to take the quiz, and, on the search results screen, update the filters so that they only see dogs that have been spayed/neutered and have up-to-date vaccinations. Lastly, users selected the first search result and explored the dog’s profile page.
Findings:
All 5 users quickly pointed out main CTA (“Take the quiz” button).
Participant 1, who lived in Brooklyn, noted that a travel radius of up to 100+ miles was way too large for a city.
Participants 4 and 5 showed initial confusion about the CityFactors, but quickly figured it out.
Participant 3 was very excited by the CityFactors since she doesn’t have the time to train a dog herself, so those factors would help her narrow her search results.
No usability issues when applying the health filter.
Participant 4 noted that the search results only displayed six dogs at a time, didn’t show total # of matches, and lacked page numbers. I updated the prototype in response to address those issues.
Participant 4 said they’d like to know when a listing was last updated so that they wouldn’t get their hopes up about a dog that had already been adopted.
Reflections & Future Steps
I learned a lot by doing this design sprint. Some of the highlights are:
Solo design sprints are more difficult than I expected! I typically like working alone, but I highly value feedback. Since I am still new to the field, I found myself wanting validation in my design decisions and peers to bounce ideas off of. However, I grew so much as a designer in just five days, and moving forward I know I’ll feel much more confident in my decision making capabilities since I’m really pleased with how my end product turned out.
Putting time limits on the ideation stages helps me brainstorm better ideas. I’m the type of person who spends days thinking of different solutions to a problem, but forcing myself to do all the ideation in one day encouraged me to come up with ideas that I may not have thought of otherwise. This is something I plan to do for future projects since time is valuable, and ultimately the feedback I receive from user testing is going to be more important than a bunch of ideas that I have personally come up with.
Rest is important too. The design sprint was definitely a sprint, and I found myself exhausted after the fifth usability test on Day 5. By allowing myself some time to decompress afterwards I was able to take a step back and better analyze the results of the sprint as a whole.
If I were to move forward with this project I would want to spend time interviewing animal shelter employees to learn more about how they document information about available pets, with the goal of identifying pain points with their current process. I would love to create a system that makes it easier for shelters to collect and share information about each pet. The interviews conducted with potential adopters demonstrated that they want as much information about an animal as possible when viewing them online, but in practice most listings lack a lot of basic info. If I could create a way to streamline the process on the shelter’s end I firmly believe more dogs would get adopted and more people would feel confident that the dog they’re adopting is a good fit for them.