CityPups
A website to help future adopters find their perfect pet companion.
A website to help future adopters find their perfect pet companion.
CityPups is a startup that helps people living in cities find the perfect dog to adopt. Their goals are to increase puppy adoption rate, have more satisfied owners, and provide dogs with better permanent homes.
In addition to finding a pup they like, city-dwellers who are looking to adopt new dogs need to take into consideration factors that impact their ability to care for their dog. Such factors include the size of their living space, work schedule and transportation habits, and access to dog-friendly outdoor spaces, just to name a few. The goal of this sprint was to help potential adopters use CityPups to find a dog that they not only liked, but could also properly care for based on their lifestyle habits and living situations.
In this modified GV design sprint, I synthesized research, constructed user flows, designed the UI, and conducted usability tests for the prototype. My task was to design a website for CityPups that would help users find the right dog to adopt and connect them to local shelters in their area.
This project was done as a modified GV design sprint over the course of 5 days. Each day has a different focus and builds on the previous day’s work. The purpose of the design sprint is to devise solutions for a problem, build out a minimum viable product (MVP), and test it, all over the span of one week. It’s a great way to gain valuable insights on the product before making big expensive commitments only to find out after release why it’s unsuccessful.
Day 1 began with the introduction of the problem and familiarizing myself with the problem space.
It can be a struggle for people who live in big cities to find the right dog to adopt due to their unique needs and constraints. These may include (but aren’t limited to) the size of their living space, their work schedule, commute habits, and access to dog-friendly outdoor spaces.
When looking for a dog to adopt, users obviously need to know the basic information (size, age, breed, etc.) and what the dog looks like. Just as important, they want to know more about the dog’s personality, such as its temperament, energy levels, prior training, and behavior around other dogs. These important details give the adopter a better idea of whether they can cater to the dog’s needs. All of this information should be easily searchable and comparable so adopters can decide which dog is the best fit for them.
After my initial research, I began the design process by familiarizing myself with the user persona:
Next, I collected notes from user interviews, writing down pain points, needs, and expectations. I then organized the notes by grouping them by theme and prioritized features based on what was mentioned more frequently:
Then, based on the persona and pain points collected from user research, I created a map indicating how I envisioned the user flow of the website to be:
The focus for day 2 was to ideate and generate possible solutions through rapid sketching.
Before putting pen to paper, however, I started off the day by looking for inspiration. There’s no need to reinvent the wheel, especially in a short design sprint. I looked at what other apps or services did well that I might be able to apply to my website.
Features I liked from Yelp, Amazon, PetFinder, and Mac OSX were:
Yelp
Amazon
PetFinder
OSX
With these sources of inspiration in mind, I conducted an activity called Crazy 8 Sketches, in which I sketched 8 different solutions in 8 minutes:
I ended up choosing the sketch on the bottom right corner. I chose this to be the critical screen because the user can view all the dog profiles and see all the available options for filtering their search. This was an easy decision because it is where all the activity happens. Here users can view different dogs, read about their details, favorite them, and ultimately make the decision to adopt one they like. As seen in the user map from day 1, this screen also leads to the final goal and others as well.
Next I sketched out a 3-panel storyboard, which consisted of the critical screen and the screens immediately before and after:
On day 3, I revisited the design sketches from the previous day and fully fleshed out the user flow in the form by sketching a complete storyboard.
The storyboard represents a sketched out version of the user map from day 1. It shows all the steps and screens a user would go through when using CityPups to find a dog to adopt, starting with arrival at the website and ending with a call to action, where they can call or message the local shelter to complete the adoption process. Technically there are only 3 screens (first 2 and last 1) that are essential to the user flow. The reason why the screens are not all presented linearly is because there are different paths a user can take to reach the same goal. It is likely (but not essential) that users would favorite dogs they liked for later viewing, compare dogs side-by-side, and also look into detailed profiles of individual dogs. Lastly, I included an error screen that teaches users how to use the Compare feature since it might not be immediately obvious.
On day 4, I turned the low-fidelity storyboard into digital wireframes and interactive prototypes.
I started off by using a Sketch UI kit to create digital wireframes from the storyboard sketches in day 3. Afterwards I added pictures and recolored the buttons and background to make the site more cohesive with the CityPups brand.
In this prototype, users can search for dogs in their area, click their profile to view a more in-depth bio, compare dogs, view favorited dogs, and ask about the dog for next steps in the adoption process. The user flow is actually very straightforward (search>select>ask), but I made 11 different screens (though some of them were basically repeats for the sake of prototyping smoothness) to provide users with the flexibility to navigate the page according to their own preferences.
I hoped to see what steps users would go through in order to go from browsing dogs online to being comfortable moving onto the next step and actually adopting a dog. I was testing to see if users felt like the process was natural and if by the end they had enough information to make a decision to ask about the dog.
I interviewed 5 university students, 2 males and 3 females. Each of them lived in downtown Los Angeles and were interested in adopting a dog in the future. Over the course of the day, I traveled to various locations around the university campus to meet up with each user for testing. Each testing session took approximately 20 minutes, beginning with a general introduction, briefing, and permission to record the session, followed by the usability test of the InVision prototype, and ending with a debrief where users were able to ask questions of their own.
During the tests, 5/5 users gravitated towards the Filters bar on the left and tried to filter search results as their first action. Although this feature was not included in the prototype, when asked what they were trying to achieve by adjusting the filters, one of the users said
“I’d normally skip through the home page because I’d usually figure that it’s some sort of filter catered to everyone not just me, so I’d try to refine my needs which is why I clicked on gender first before looking at anything here.”
From this I quickly learned that users prefer to save time by narrowing the search results to only show results they are looking for.
Another major finding was that the Compare feature I designed as a key part of the user flow was very unintuitive. 4/5 users didn’t even attempt to use the feature when initially navigating through the site. They only understood when I explained how it worked during the debrief. The function required a 2-step process of 1) selecting the dogs they wanted to compare, and 2) clicking the Compare button to actually view the comparison. The main issue for users was that they did not understand what the selector icon meant, as it was just an empty circle on the top left corner of each dog profile; this effectively barred users from completing step 1 of the process. I learned from this to avoid requiring features to have 2 or more steps to function. Instead, I could try making it so that clicking the Compare button gives users the option to immediately choose which dogs they are trying to compare. This would solve the issue of having an ambiguous icon on the corner of each profile card that users don’t know what to do with.
Looking back over the course of the past week, I had explored a problem, sketched out a solution, and tested it out all in the short span of 5 days. Since each day was quite structured and the activities had time constraints, I was forced into the mindset of rapidly generating solutions to try out instead of getting caught up in the details. As a result, I was never too attached to any idea, which allowed me to confidently move forward even though my ideas weren’t fully polished.
Like with all design, the design sprint is an ongoing process. With the learnings from user testing, I can go back to the drawing board to iterate on the previous design and formulate new hypotheses to test in the next sprint, thus repeating the cycle. Designs will never be perfect, but we can gain invaluable information from each iteration. The more we learn, the more efficiently we can design for our users. And that’s the beauty of the design sprint.
