City Pups
A website dedicated to helping people living in cities find the perfect dog.
Product
City Pups
GV Design Sprint
Role
UX/UI Designer, User Researcher
Tools
Figma, Marvel, Canva, Zoom
Overview
CityPups aims to address the challenges urban residents face in finding suitable dogs for adoption. City living requires specific criteria for pet selection, but current solutions are often time-consuming and lack essential information. This case study documents my modified GV design sprint process, which I undertook independently in 5 days, to develop a website solution for CityPups.
Day 1: Understand and Map
The Problem
Urban residents struggle to find dogs that match their lifestyle and living conditions. Current adoption processes are inefficient and lack detailed information on potential pets.
The Solution
With many dogs awaiting adoption, there must be a way for urban residents with unique living conditions to find compatible pets. My solution is to create a detailed matchmaking questionnaire that users complete to find dogs that align with their unique lifestyles and preferences.
I was able to come to my solution through empathizing and gaining a deeper understanding of the user painpoints through some primary research.
Research Insights
My research insights revealed that urban residents prioritize practical factors such as size, age, and personality when choosing a dog. Many users expressed frustration with the inefficiency and lack of detailed information on current adoption websites, which often leads to mismatches. There was a clear need for a solution that offers a personalized, efficient, and detailed approach to finding compatible dogs for urban living.
Maria: Prioritizes size and space considerations.
Dan: Needs basic info and attention needs.
Anna & Anthony: Focus on personality.
Lindsey: Needs dog to adapt to busy city life.
Others: Emphasize breed, size, training, and behavior.
Persona
.jpg)
Ellie: 27, lives in NYC, seeks a compatible dog for her small studio. Feels unsure about adopting due to lack of detailed information.
End-to-End Experience Map
_edited.png)
Day 2: Sketched Solution
To first start brainstorming possible solutions, I conducted a round of lightning demos in which I looked at what possible solutions already existed from competitors. I wanted to get inspired from great and not-so-great interactions from different websites with similar functionalities. Competitors utilized filters and even questionnaires to narrow down search results, however, seemed to lack seamless experiences that were attractive and easy to use.
Lightning Demos
Best Friends bestfriends.org
Use of clear filters on search page to narrow down results.
Filter section is very minimal and focused on dog's appearance.
Pets available "snippets" lack context and even photos.
Adopt A Pet adoptapet.com
Use of a clear side bar to display a variety of filters.
Large range of filters, including pet behavioral attributes.
Clear location search and distance preference for user.
Pet Finder petfinder.com
Use of a clear side bar to display a long variety of filters.
Use of a matching quiz for users which is key in solving our issue.
Matching quiz isn't given that much weight and looks like an ad.
Crazy 8s
Using the Crazy 8s method, I sketched multiple possible solutions for my critical screen. It was imperative to me that the user has a personalized experience, which translated into the form of a questionnaire to "get to know" the user.
I ultimately chose my 5th possible solution, as I felt it had the cleanest UI and clear process visualization.
Solution Sketch
My solution screen guides the user from the home screen to a detailed questionnaire and then to their matched dogs. The rationale behind this flow is to create a seamless, intuitive user experience. The home screen offers clear navigation, the questionnaire uses a step-by-step format to keep the interface clean and user-friendly, and the matching process employs real-time feedback to keep users engaged.
Day 3: Storyboard
Storyboard Solution
My solution sketch was chosen to ensure users can answer specific questions that lead to potential dog matches one screen at a time, maintaining a clean and purposeful UI. I included a matching screen to indicate the website's process of configuring and searching its database for dogs that fit the user's criteria. This approach enhances the user experience by keeping the interface streamlined and focused, guiding users through each step of the matching process efficiently.
When creating my storyboard, I initially aimed for a personalized experience without requiring a quiz. Screen two shows the user entering the site through the main page, where they can adjust filters for the dogs independently. However, a pop-up encourages taking the matching quiz for a truly tailored experience. After completing the quiz, users receive updated results, view individual dog profiles, and schedule visits to potentially adopt. This approach balances user autonomy with personalized recommendations to enhance their experience.
Day 4: Prototype
Mid Fidelity
Now that I had a clear vision for the final design based on my sketches, I needed to prototype it to address any usability and design issues. Working on a tight schedule for the design sprint, I applied Agile principles to rapidly iterate and refine the design. Using Marvel, I created a prototype that guides the user from the welcome screen to scheduling a visit with a selected dog. The user finds their match by taking the quiz. My goals for testing this prototype were to ensure a smooth experience for users finding a dog tailored to their needs and to confirm that the process is intuitive and easy to follow without feeling cluttered or confusing.
Day 5: Validate
Usability Testing
I conducted usability testing with five participants using the Five Act Interview framework, which included a friendly welcome, context questions, prototype introduction, task completion, and a debrief. Four of these sessions were semi-structured and conducted remotely, while one was conducted in person.
Throughout the interviews, participants were tasked with specific actions to gather comprehensive feedback to confirm that my flow is optimal for the user:
Get Matched with Dogs: Users started by navigating the home screen to take a quiz that matches them with potential dogs.
View a Dog's Profile: From their matches, users were asked to view a specific dog's profile, focusing on details and user interface elements.
Schedule a Visit: Finally, users were instructed to schedule a visit with their selected dog, assessing the clarity and ease of this process.
These tasks provided a clear understanding of the user journey and highlighted areas for improvement.
Findings
Positive Feedback:
-
Users appreciated the categories in the "about" section on the dog's profile.
-
The picture carousel was intuitive and well-received.
-
The schedule visit page was viewed as straightforward and clean.
-
Buttons were found to be logical for the next steps.
Negative Feedback:
-
Two users clicked "get matched" instead of "take quiz," indicating a need for clearer navigation.
-
The "view my matches" button should be grayed out until matches are found.
-
The first screen was perceived as too busy, with suggestions to make everything smaller to fit a desktop screen.
-
Requests location details on the dog's profile and more context for the calendar when scheduling a visit were common.
-
The quiz banner was mistaken for an ad by some users, suggesting it should be better integrated.
-
The grey button was viewed as non-functional, prompting suggestions to change its color or add a border for clarity.
Implementation:
-
Quiz taken as soon as user signs up, got rid of "ad-like" banner.
-
"View my matches" button only available once matches are found.
-
Matches screen more aesthetically laid out to make it easier for the user to absorb all the information.
-
More context on dog's profile such as location of dog.
-
Got rid of "select time" button on scheduling page.
-
Confirmation page much more detailed to give the user confidence in their confirmed visit.
Through my testing, I realized my designs lacked context and required me to dig deeper and empathize more with the user's core concerns. These findings will guide the next steps in refining the UI/UX design, ensuring a more intuitive and enjoyable user experience.
Final Design
My high-fidelity designs show the implementations I made from my user testing to fill in the gaps and make the interface feel like a seamless experience.
Final Prototype
