CityPups

Helping people living in cities find the right dog to adopt for their specific needs.

My Role: UI/UX Designer

Tools: Miro, Marvel POP Prototype

Timeline: Two weeks for the modified 5 Day Google Venture’s Design Sprint

The Challenge

CityPups aims to solve the problem of users searching for the right dog to adopt online and not seeing enough information about a selected dog on its profile as the users do not feel confident that the users and the dog will be a great fit for each other in terms of emotional connection and the practical factors of the users’ lifestyle. CityPups conducted a design sprint to find a possible solution through an online website suited for desktop and laptop.

The Outcome

After reading the user research in the CityPups challenge brief, I designed a website for larger screens by making a quiz to get answers about the user’s needs and built a smooth process that recommended the best dog to the user who can make a confident adoption decision.

Day 1: Map

Evaluating User Needs

I organized the user research highlights and realized that they were summarized in the persona, Ellie. I identified the main user needs as:

More specific and accurate information about the dog in the categories: living spaces, schedule and transportation, outdoor space, and other city specific criteria
Description about the dog breed and the dog’s personality
Assuring, time-efficient advice for which dog to adopt
A way to view the dog visually through social media accounts

Persona First Page

Persona Second Page

Persona Third Page

Persona Fourth Page

Mapping User Experience

Then, I integrated the user needs into mapping the potential end-to-end user experience. I brainstormed ideas for the steps the user could take on the CityPups website and put them in an order that made sense to the user.

User Experience Map

Day 2: Sketch

Lightning Demos

I conducted a round of lightning demos in order to research other competitors that have produced similar dog adoption or dog breed information websites. I was inspired by the modern, streamlined design of the adoption websites, and I was able to learn from any difficult obstacles I encountered while using the websites.

Petfinder

Petfinder is a widespread North America organization that helps users find dogs, cats, and other animals to adopt from local organizations and shelters and offers helpful information about the animal breeds to the users.

Findings from Petfinder were:

Quiz to find the best matches as a feature in the main search bar
Account is required to access the matches from the quiz
Modern and clean layout presented with consistent style of elements
Articles about different dog breeds highlighted important information using

descriptions and icons
Icons with not much visual difference
Repetitive and cluttered structure of elements across the page
Profiles with little basic information and personality description

Petfinder Screen

Purina

Purina is widely known for selling pet products to pet owners. The website provides articles about pet advice and pet breeds.

Findings from Purina were:

Article organizes layout into simple structure
Icons and short text descriptions so user is not overwhelmed with information
Visual hierarchy shows which information is important

Purina Screen

Rover

Rover provides dog sitter and walker services to dog owners. The website has articles about dog breeds and dog care for the owners.

Findings from Rover were:

Article about a dog breed included a small section describing the breed and a combination of icons and short text
A condensed section with icons summarized information about the breed
Accurate information presented to user

Rover Screen

Crazy 8s Solution

Once I researched other solutions, I sketched my crazy 8s solution. I chose the quiz page that evaluates the user’s needs about adopting a dog as my critical screen since users had trouble getting matched with the right dog. I then created 8 different versions of the quiz page on paper. I decided to choose the version that avoids any overload of information and a simple way to choose the answer with icons and text.

Crazy 8s Sketch

Solution Sketch

I sketched 3 screens for my solution sketch to show how the main screens work in real life. The first screen is the home screen which is the step before the critical screen, the second screen is the quiz page to evaluate the user needs, and the third screen is the screen showing the user’s dog matches which is the step after the critical screen.

Solution Sketch

Day 3: Decide

Storyboard

After my brainstorm of solutions, I selected the 1 solution with a clear and organized design so the layout does not overwhelm the user with information. I sketched a 7-panel storyboard including the 3 important screens from the solution sketch. By focusing on the user goal, I created the user flow for the website.

Storyboard

Day 4: Prototype

The Solution

Next, I used the Marvel POP Prototype to make a realistic prototype of the storyboard screens, focusing on the user needs and pain points. I combined a couple of screens and had a total of 5 screens at the end. I rebranded the design system and changed the style guide of a purple background, white text, and teal buttons to a green background, dark gray text, and orange and yellow icons. The new color palette helped with the readability and visual hierarchy of information.

Challenge Brief Style Guide

Prototype First Screen

Prototype Second Screen

Prototype Third Screen

Prototype Fourth Screen

Prototype Fifth Screen

Day 5: Test

Usability Testing

I held 5 usability tests with 5 participants who were interested in adopting a dog. After I gained important insights from the tests, I decided to implement the changes in the next iteration:

Home screen: make size of element with description and button smaller and more transparent in color

Home Screen

2. Matches page: improve readability of layout by changing size of text based on importance

Matches Screen

3. Dog profile: add a summary of the dog’s description before the requirements section

Profile Screen First Page

4. Dog profile: improve visual hierarchy of the text and buttons section so it is easier to understand

Profile Screen Third Page

Result

The modified design sprint allowed me to see the connection between the research and the design process at a faster pace, and CityPups topic fascinated me as I dived into the reason behind the user needs. Brainstorming, ideating, and testing the prototype guided me to work on the design in a structured way to find the best solution. I discovered how important iteration is when building a prototype because users could give valuable insight about my design. For the next iterations, I would interview more users about what visuals of the dog they are looking for in the dog profile page and add supporting media to make any changes. In the future, I look forward to doing design sprints on topics that I am passionate and excited to learn about.

Prototype Design

CityPups Prototype is where you can use the prototype.