CityPups: a pet adoption website

CityPups Landing page

Problem

Dogs are referred to as man’s best friend. But adopting a dog is more than just love at first sight. While many of those living in cities with huge populations, hectic work schedules, limited living space, it can be a task to find a dog. So how do people find the right dog to adopt that fits within the constraints of their lifestyle?

The goal of this project is to develop a system that provides a platform that is easy and fun to adopt a dog while keeping in mind the limitations of the user.

My role

The project is a modified version of the Google Venture Design Sprint method. The CityPups project provided us with research insights, interview notes, and the personas created by the startup.

As an independent designer, my role was to analyze the gathered research, map out an ideal user flow, design the user interface, and test the design with real users.

Design process

I used the modified version of the Google Ventures Design Sprint which followed the below schedule.

Design process

Day-1

Research

I took a closer look into the existing research provided by CityPups to identify some of the top concerns that people were experiencing when trying to find the perfect dog to adopt.

Persona

Ellie wants to find the perfect dog that fits her lifestyle and her preferences. Due to her unique lifestyle, she is struggling to identify a dog for her.

Persona

Affinity Map

Affinity Mapping

Key Insights

The below key insights were obtained from the research and the interviews which helped us to shape the initial version of the product.

• Users Complex Lifestyle Needs

Users want to be careful of what they can provide for the dog to ensure the utmost safety and care.

• Lack of Confidence

Users want to be sure whether a dog fits their lifestyle, which includes hectic work schedules, compact living spaces, and other constraints.

• Show me more

Visual images like videos and photos would give the user a sense of the size and personality of the dog.

• Dog Profile

The user wants to know the dog's story and view other information such as size, age, breed, and vaccinations required.

• Dogs Behavior

The user wants to know what are the needs of the dog, whether they are comfortable around other dogs and people. Are they potty trained do they know basic commands.

• Adoption Process

They want to be able to clarify queries with adoption representatives about the process involved in adopting a dog.

HMW Statements

1. How might we be able to help a potential dog owner to find a dog based on their needs and wants?
2. How might we help potential dog owners feel confident about a dog that they want to adopt?
3. How might we help potential dog owners feel informed about the needs and requirements of a dog?

User Map

I came up with a better way for people to connect with dogs that match their lifestyle. The below user map shows the end — to — end adoption process.

Day-2

Competitor Research (Lightning Demos)

The next process involves conducting competitor research to see how a similar problem was addressed by other competitors.

I have reviewed two direct competitor websites to learn about dog adoption and dog care, while the other two are non-competitors who utilize a similar functionality to address finding jobs and lodging accommodation.

Competitor Analysis

Crazy 8s Sketching

Once I have an idea of how to structure the website, I then sketch out eight versions of the most critical screen.

In this case, the CityPups results page will be sketched using the Crazy 8s brainstorming method. This brainstorming method helped me to generate rapid design ideas.

Crazy 8s

Three Panel Board

This section will select one of the crazy 8s screen sketches of our critical screen, which we think would best suit the problem. Then we will create a three-panel board using the critical screen which will consist of the following:

1) The screen that comes before the critical screen.

2) The critical screen itself

3) The screen that comes after the critical screen.

Three Panel Board

Day-3

Storyboard

With my sketches from day 2 in mind, I moved forward with my storyboard design. With the help of my critical screen, I created a storyboard that helps us to view the end-to-end process of adopting a dog.

· Landing Screen — The initial touchpoint of the user.

· Match with a dog — This will enable users to fill a small interactive quiz that will match the user with a dog that fits the users' requirements.

· Results Page — The users can now view all the dogs that they have matched with.

· Dog Profile Screen — In this screen, the user can view all the information related to a particular dog and also can add them to their favorites.

· Favorites screen — Once the user is done looking at all the dogs, they can then go to the favorites screen to view all the dogs that they have liked.

· Comparision of dogs — With the help of the like profiles in the favorite’s screen, they can then compare dogs to better understand which dog will better suit them.

Story Board

Day-4

High Fidelity Designs and Prototype

I then transformed my wireframes into High — Fidelity Designs and tweaked them simultaneously to ensure better functionality.

I designed the UI of this product by basing it on the CityPups brand as shown in the design prompt. The contrast of the bright purple color against the white background draws attention to the CTA buttons.

(a) Landing screen

(b) Matching quiz

c) Matched Results

(d) Dog Details

(e) Favorites

(f) Comparison Between Saved Profiles

Day-5

Usability Testing

To validate the effectiveness of my design solution, I conducted usability testing with five participants, some of them were already dog owners, while the remaining were potential dog owners. The goal was to observe if users were able to find their desired dog, find the relevant information about the dog, and feel confident with the dog that they have selected to adopt.

I conducted remote usability tests via Zoom as participants live at different places.

More Specifically, I wanted to see how users respond to the proposed user flow and complete the task that they had. The tasks included were –

• Explore the Home page and speak out about what they feel
• Search for Dog
• Try to get matched with a dog
• Edit filters
• Review matches and select dog profile
• View Favorites
• Compare between dogs

Findings and Takeaways

1. Users wanted to know the history of the dog.
2. Users wanted an option to filter out dogs with special needs.
3. As few were first-time users they weren’t sure about few terms so they wanted a better understanding of them.
4. The users felt a bit overwhelmed as they were many search and filter options.
5. The UI of the comparison page could be better as it was boring and repetitive.

Overall, participants responded positively to the user flow while also providing insightful feedback that can be used to improve the site.