CityPups

We help people and dogs to find the right companion and give them a forever home.

UX/UI Webpage Design | Non-profit | Pet Adoption | Design Sprint Project

Overview

CityPups is a startup that wants to help people search for the right dog for adoption across the city.

My Role

As the sole UX/UI designer, I successfully completed the adoption webpage project by utilizing the 5-day design sprint approach and incorporating the company's pre-existing style guide.

The Problem

#1 People struggle to find the right dog to adopt

The size of the living place can affect a person's choice of their preferred pet size.

#2 Matching people's unique lifestyle

Everyone has different lifestyles and responsibilities, and the accompanying level of the pet’s needs should be taken into consideration for finding the right match for a lifelong companion.

Design Constraints

#1 Solution should be designed as a website on larger screens (desktop & laptop).

#2 CityPups is not a physical adoption agency or shelter, it is an online platform for all local organizations and shelters to share information with the public about available dogs for adoption in the city.

Design Process: Design Sprint

Research Insight:

To define the problem further, a user interview was conducted to understand how to help people find the right dog for adoption, this includes people’s priorities and considerations, points and frustrations on adopting a dog. It is not limited to:

Space of living location
Owners family size
Energy level
Friendliness towards other pets, kids or seniors.
Health
Personality
Age of the dog
Size of the dog
Trained level

User Personas

Ellie

Age: 27 years old
Location: New York City
House type: Studio apartment
Household members: 0

Goals

Wants to find a dog to adopt
Feel confident that they will be a great fit for each other- both in emotional connection and practical factors related to her lifestyle.

Behavior

Ellie lives alone in a studio apartment in NYC
She follows some adoption agencies on social media, and even “saves” some dogs she wants to adopt.
She has spoken with an agency representative to ask questions but is time-consuming for her to make an appointment.
She asks people who have dogs with similar lifestyles for advice.

Frustrations

Hesitates to take action because she is not confident that she will be a good fit for both the dog and herself.
Most adoption sites did not filter out the choice with the matching lifestyle leading her to fall in love with a dog that she could not provide for its needs.
Descriptions of dogs are too general.

Day 1 - Map

By designing the map, I have focused on how the webpage can collect all necessary information about people’s unique requirements so that the webpage can auto-filter the closest results for people to find the right pet.

I have brainstormed the map below:

USER ➜ HOMEPAGE (with questionnaire & weekly pets) ➜ QUESTIONAIRE ➜ FILTERED RESULT HOMEPAGE WITH PET PHOTOS ➜ PET PROFILE (with video on top) ➜ REQUEST CONFIRMATION PAGE ➜ SUCESS PAGE (with request sent

Crazy 8's

Critical screen: Pet profile page

During the user interview, some users did mention videos can be provided to show the pet’s interaction before meeting the pet. This led me to decide the pet profile page would be the critical screen that helps users decide whether they would like to adopt a pet. If the profile page does not show enough information, the users might hesitate to proceed with the adoption process.

Since this is a page containing all the information about the pet, I have used Crazy 8’s method to brainstorm and sketch out the variations of how the page could appeal to the webpage.

Solution Sketch (2 hours)

Next, I have sketched a before and after screen for one of the critical screens from the brainstorm above.

Day 3 - Decide

Storyboard on CityPups

During the user interview, they indicated that they felt the page lacked details, such information could help them gain a better understanding of how the dog reacts or behaves after adoption.

The homepage includes a questionnaire for users to find the right match for them, and the bottom section will feature weekly top stars.
The Questionnaire is broken down into 3 pages and the data collected has mainly two purposes.
- Firstly to recommend a suitable match for the user;
- and secondly to provide a basic information to the pet rescue and shelter to assess the suitability of the applicants.
- Page 1 of the Questionnaire mainly collects users' demographic information
Page 2 of the Questionnaire continues to collect demographic information and to users' preferences allowing us to recommend the right match for them.
Page 3 of the Questionnaire continues to ask users’ preferences and also to understand the reason for adoption.
Loading Screen
After knowing the user preferences for adopting pets, the search information would show recommended results of pets that we think are suitable for the user to adopt.
The pet profile will divided into 3 sections:
- Top section: a carousel slider showing video of the pet’s interaction and photos
- Second section (left): Pet’s background and personality with an indicator bar and energy level with rating bar. Pet’s Location.
- Second section (right): Flowing Container with a summary of the pet's age, breed, size, health and whether it is vaccinated and trained.
- Bottom section: “Adopt Me!” button.
A screen with a confirmation of the user who would like to adopt a pet and provide the right information for proceeding second screening to the local shelter.
Success and thank you screen.

Day 4 - Prototype

It was a challenge to complete the prototype within a day. While this prototype was to recreate the screens that appear in my sketches, I spent the most time on how to make the transitions and animations on my prototype so that users could feel visualized what it is like when browsing CityPups as an actual website.

Day 5 - Test

For the usability test, I have decided to make it an open-ended scenario to let users have the freedom to browse around. I have done 3 face-to-face interviews and 2 remote usability tests online. All 5 users can locate the buttons and go to the next page of the prototype without assistance. All of them think the scale display on the pet profile personality is clear and easy to read.

However, here are some suggestions that can be improved further:

#1 Some users prefer to have more filters such as dog breed, age, and gender on the top while browsing.

#2 One user mentioned there’s no clear back button on the profile page, the breadcrumbs as a back button were not obvious to users.

#3 The homepage or questionnaire can be more precise about the purpose of collecting personal information and encouraging users to fill in.

What's Next

There are still areas to enhance the user experience such as how to make the landing page more appealing and encourage users to browse through CityPups. And some of the future updates, I would work on are:

Make an additional frame for the advanced filter to show how users can sort out the information.
Create a map screen on the pet profile to show the shelter location.
Additional explanation on the purpose of collecting personal information.

Reflection

The design sprint was an intense yet exciting journey with such a limited amount of time. The experience throughout the design sprint was successful, especially working with the crazy 8’s method, and rapid prototyping able to push my limits to complete the task in time. While it was a project for a startup, working within the constraints allowed me to brainstorm and plan what kind of elements I would need to include or exclude in the design process. In addition to that, it was necessary for me to take business processes and requirements into consideration throughout the design sprint. To conclude, I think this was a good learning experience for me to design the UX and UI for an existing business.