CityPups

Overview

City dwellers lead a special lifestyle, and face a unique set of challenges when navigating the dog adoption process—limited yard space, high population density, and apartment living, among other factors. In this design challenge from Bitesize UX, I was tasked with designing a website to facilitate the dog adoption process for urbanites.

Provided with user research, I followed the Google Ventures (GV) 5-day design sprint methodology (adapted for a sole designer) to craft a solution.

GV Design Sprint Timeline

I was first presented with user research in various forms—quotes, interviews, and a recording of a usability test of a competitor's product. From this provided information, I created an affinity map to parse out recurring themes and rough concepts.

Affinity Map

The major insights I gleaned were:

• Existing sites did not provide enough info about compatibility and personality
• Users needed more info on level of activity, space needs, and volume
• Communicating with shelters was a hassle (had find contact info to individually reach out and coordinate)
• Photos and videos are essential, along with the ability to filter by basic info (age, breed, etc.)

User Journeys

With this in mind, I began to roughly map out a few potential user journeys—the end goal being matching the user with their ideal four-legged friend.

Now with the insights and roadmap from Day 1, it was time to begin brainstorming solutions.

Lightning Demos

To get some inspiration and a better understanding of existing solutions, I conducted a solo version of “Lightning Demos.” I browsed a variety of sites, including other adoption sites, product sites, search- and match-based sites.

I noted certain features I thought would work well for CityPups such as checklist and dropdown filters, media carousels, and intake surveys.

Crazy 8's

I then carried out a round of Crazy 8’s to explore potential approaches to my own design, applying concepts from my Lightning Demos sketches.

I sketched out some ideas for important screens—I knew I would need:

• Extensive search, sort, and filter functionality
• Potentially, an onboarding questionnaire to understand the user's preferences and accordingly tailor their experience
• A results page or gallery of available dogs
• A dog display page with images and videos, clear and concise stats, and detailed description
• In-site messaging, or some centralized way to contact shelters

Key Screens

From my brainstorming exercises, I sketched the most important page (the dog results page, or "feed") and its preceding (the final onboarding question) and proceeding (dog display page) screens.

Now it was time to expand upon the key screens I sketched on Day 2. I mapped out a lightweight wireflow diagram to construct the scaffolding for the prototype I’d be building on Day 4.

I opted for the onboarding questionnaire model to gauge and store the user's preferences upfront for efficiency. Because there are so many parameters and criteria users by which customize their search, it would be tedious to input preferences every time they opened the site. This way, users could get a real-time "feed" of dog postings that fit their specific needs.

I decided to focus on the onboarding and “dog selection” flows for the scope of this sprint. I only drew a handful of screens from the onboarding portion (hence the “fast forward” arrows)—if the full prototype were to be built out, the questionnaire would consist of roughly 20 slides to more holistically evaluate the user’s needs and circumstances.

Now it was time to bring my ideas from sketch to Sketch. Because this was rapid prototyping, I had to make decisions and execute quickly. I adhered fairly closely to my storyboard from Day 3, only adding a few more onboarding screens. I adopted a minimal, “millennial” aesthetic to cater to my target audience.

Here are a handful of screens from my initial prototype (created with Marvel):

These were a few important design decisions I made during prototyping:

• Although I included the onboarding questionnaire to customize the user's experience, I also kept a "filter bar" (a la Airbnb) at the top of the results page to allow users to easily update their preferences—this way they maintain a sense of control over their experience
• I incorporated a "like/save" feature (the heart icon) for users to bookmark certain listings
• I added an in-app messaging feature (mail icon at the top right) for centralized communication—however, in the interest of time I did not create screens for it.

Check out the full prototype:

Now it was time to evaluate my lightweight prototype. I carried out remote, moderated testing with a group of five participants from my personal network, most of whom were millennial urbanites in the Bay Area. Two actually experienced immense difficulty in their dog adoption process a few months prior.

I presented participants with a scenario in which they are apartment-dwellers in San Francisco, and their only requirement was that the dog needed to be under 50 lb, as stipulated by their landlord.

Participants were tasked with completing the onboarding process, and viewing and bookmarking a particular dog.

• Completing the onboarding process (with provided preferences)
• Viewing a certain dog listing
• Bookmarking, sharing, and contacting the shelter about the listing

Findings

These were the main takeaways from my round of remote testing:

1. On the preference slides (age, size, breed) users needed a “no preference” or “select all” checkbox option
2. The star rating system was unclear—i.e. many thought that more stars for "Space Needs" meant less space required
3. For the < 50 lb requirement, some forgot to select XS and S in addition to M as the size preference
4. A few also struggled to locate the “share” icon, as they weren’t very familiar with the symbol
5. Most participants were able to easily figure out how to save a dog’s profile from the display page (heart button)
6. • However, these participants were millennials familiar with social media. The one participant who struggled to figure this out was a fifty-something with little social media exposure. She thought the heart meant “giving the dog a like”, and didn’t associate it with “favoriting” or “bookmarking.” I realized I made the assumption that the user would be familiar with this iconography.

Post-Sprint Iteration

Though testing on Day 5 “officially” concluded the design sprint, I took some time post-sprint to iterate on my initial design. This gave me an opportunity to implement some key feedback from testing and polish my prototype.

Here are a few examples of modifications I made:

"No Preference" Option

Reflections

This design challenge taught me the art of “packing light” and thinking on your feet when it comes to early stage UX development. Timeboxing is something I struggle with, as I tend to dwell on decisions and details—so this project was a good challenge and learning opportunity for me to work within constraints and practice the GV Design Sprint framework.