To create a high-fidelity prototype for a  the dog adoption website CityPups within a 5-day design sprint challenge.

My Role
Summary
UX/UI Designer
Tools Used
Sketch, InVision

CityPups is a mock startup that was created to help urban residents find the perfect dog to suit their unique needs. Based on the research that was provided to me for the challenge, I determined that the solution to solve this issues was simple. By creating a filtering system that would serve as the MVP to help match people to the perfect dog it would give users the flexibility to give users the ability to customize their search results.

The Challenge

Design constraints included:

Designing with web browsers for large devices.

Once a user starts the adoption process, they’re required to contact a third-party site.

Focusing on helping users find the right dog to adopt.

My Role

Since I was working independently to design CityPups and most of the research was prepared for me in advance, my responsibilities mostly came down to synthesizing the research and then creating a working prototype and move through the design process within a condensed timeframe.

Other responsibilities included sourcing and conducting usability tests on Day 5.

citypups-wf.jpeg
citypup-screen-mockups_2500x1484.jpg

Research Methods

User Interviews
Personas
Prototype Testing
User Flows
Information Architecture
Market Analysis

As time was of the essence, one of the exciting milestones of the Design Sprint to me was trying to come up with a red route on Day One. After spending just a short time learning about and identifying the problem, I created a red route of a possible end-to-end user experience for users to go from landing on the page all the way through adoption.

Key Ideation Activities

Day One

Understanding the User

user_flow.jpeg

Red Route

Competitive Market Analysis

Solution Sketch

Day Two

Crazy 8 and Lightning Demo

Insights

Based off of a CMA of another website, I realized that current solutions in the marketplace were not solving the unique needs of urban pet owners. From a video walkthrough of a user interacting with "Adopt Pure Love," I was able to discern that people are having trouble trying to find dogs that specifically fit their lifestyles. Specifically, people felt that current solutions don't provide enough of a description as to whether or not a dog would be suitable for urban living.

Current Solutions
Establishing Search Criteria

For urban pet parents, one of their biggest complaints is that they could comb through endless amount of sites, find a dog that they were interested in and then hesitate due to being unsure if the dog would be right for them since most sites focused on the human-dog connection. Specific criteria people were searching for included how much size they need, whether or not they are good with public distractions, potty trained, etc. 

From the research provided to me, I was able to discern that a match making quiz would be my MVP as it served several purposes: 1) it would help people match with potential dogs based on preferred criteria and 2) it would be something fun to use.

This assumption was confirmed for me when I tested my prototype with five users on Day 5 who stated that my site was both easy to use and that the matching system made sense.

Design

Given the time constraints of the project, my goal for CityPups was to use the provided logo and color schemes to create a visual brand identity during on Days 3 & 4.

The colors purple was picked as my primary color scheme as it is the color of loyalty, something commonly associated with dogs.

citypups-logo.png
citypups-homepage.jpg

After performing competitive analysis, one of the key things that I wanted to focus on was being able to give users flexibility. While I wanted to focus my red route on the quiz, I wanted to make sure that people could enter their address and distance to see what dogs were available near them. In addition, it is my hope that adding information on the types of services CityPups would be offering and being transparent with users on adopting would add to consumer confidence.

Home Screen

Upon filling out the quiz, users would be matched to dogs based on their preferences on a 100-point scale. As users primarily wanted to be matched to the perfect dog to suit their individual needs, I chose to go with the highest to lowest matches based on their answers. Although it was not created for the prototype, users would be able to filter their answers furthering the ability to find the best dog for them even more.

Search Results
citypups-search.jpg
 
citypups-cookie-bio.jpg

As most users wanted to find dogs that matched a specific criteria, I placed the most commonly used criteria when searching up on top of the fold to give them high visibility. Paired with the match percentage, this made them easily accessible without having to read through the entire to find the most commonly searched dog characteristics.

Dog Profile

Since adoption tends to be a complicated process, I set the goal of wanting to give users the confidence that the shelter they were using was legitimate and that people could trust them. During my user testing, I learned that by adding an additional navigational path to contact the shelters, I would be able to appeal to two different levels of users.

Contacting the Shelter

“I love the Wag-approach that you took to dog adoption!”

- Participant during usability testing

Defining the MVP

Besides the 3 primary landing pages, the single most important is arguably my quiz. Not only did I design it to help people find the perfect dog based on some common characteristics, but I added some additional questions on the owner’s lifestyle such as how active they are, how much training they’d be willing to put in and how large their living space is.

 

Through a series of nine questions and matching system, I believe that I was able to come up with a solution that pairs people with the best dog suited for them.

 

Key Takeaways

Redundancy sometimes has its own merits

During my usability testing, one of my participants suggested that it would make for a better experience if I were to add an additional contact link beneath the dog's "feature" description in addition to the bottom of the page. Although it isn't something that is always practical, adding a redundant link can sometimes help improve the user experience if done correctly.

Being organized helps prevent being overwhelmed

As I knew that I only had 5 days to produce a working high-fidelity prototype, the assignment originally overwhelmed me when I thought of everything that I would have to do over the course of a week. Staying organized really helped my stay on track during this process and to produce the best work I could.

Next Project

QRail Sample Request