Loading...

BUDDY PAWS

Filtering System, Mobile App, Material Design
Project Intro

This is a side project/ design challenge that I finished recently within 3 days. I did research in the first place about pet adoption and then ideate solutions to the problems I identified.

Design Goal

A mobile app which helps pets adopters with different levels of knowledge to quickly find the best match, according to their personal preference and lifestyle.

Deliverables

By the end of day 3, I created a series of high fidelity user interfaces using material design which demonstrate key features that I was focusing on and trying to solve.

How Pet Adopters Make Decisions?

I interviewed friends who had ever adopted a pet before, read online articles about pet adoption, and looked at existing pet adoption apps.
Project Image

How does the pet look?

People go to websites and mobile apps to check the availabilities and the looks of pets.

Project Image

Is the pet a fit to my lifestyle?

People set up filters to figure out if there is a fit, according to their needs and lifestyle.

Project Image

Could the pet get along well with me?

If they find a fit, they will spend some time staying together with the pet, in order to know if the pet could get alone well with them.

Key Findings & Pain Points

Project Image

Most people have a clear idea of what they want before taking actions. And they barely change their mind.

“When I say I want to adopt a dog, I don’t consider other pets like cats, birds or rabbits.”

Project Image

Pets in photos look dramatically different from real life because of the inappropriate use of images, including poor quality photos and stock images.

"I found some pretty nice looking dogs in the shelter which look terrible online. I guess it might because the low quality of images."

Project Image

Existing apps only provide filters on pets feature, but adopters can make wrong assumptions when translating their needs to pet features.

“I need a small size dog because I live in a small apartment.”

Assumption: Small dogs don’t need much space.

Fact: Some small dogs also need large activity space, whereas some big guys are pretty quiet.

Actual Need: A dog who doesn’t need much activity space.

Project Image

Staying together for a short time in the shelter makes it hard to get thorough understanding of pets daily behaviors, especially when pets get stressed out or over excited.

“I cannot believe he is so crazy and destructive when he is alone at home. Nobody told me about that before, even in the shelter.”

Three Types of Users

Project Image

How do we design an app which helps pet adopters to…

Bridge the knowledge gap between user needs and pet features

Get thorough understanding of pets before making decisions

Task Flow

Project Image

Key Features in Final Design

High fidelity with detailed design rationale.

1. Moving a part of filter functionality into initial setup page for the sake of efficiency

Given that once people decide to adopt a pet, they don’t change their mind and consider other pet types or breeds, I moved three filter parameters into the initial setup page which could be skipped over the next time users return to the app. So users return to the “Pet List“ page whenever they come back. Filter parameters could be further modified at anytime.

Project Image
Project Image
Project Image
Project Image

2. Including two filters that work together for different user types and use cases

Considering multiple user types with different needs, there are so many filter parameters needed to be included. Some of them are on the pets side, some others are on the user lifestyle side. However, simply putting them together is not a good solution because professional users will never use the lifestyle filter, whereas newcomers will never understand the jargons. So I split them up into two filters.

Lifestyle Filter:

Learning about user’s status and expectation, thinking on the user side and providing suggestions that fit their lifestyle.

Pet Filter:

Including all aspects of pets, such as features, characteristics, temperaments, etc., finding results based on the conditions that users set up.

Side pane VS. full page

Side pane gives more context when pet list gets updated in the background, whereas full page filter has more space to avoid infinite scrolling. In this case, I chose the side pane because it gives real time feedbacks to users as they set up filters, especially when it comes to the situation that users set up so many filters and there is no match found. As for the risk of infinite scrolling, I used the checkbox to hide items which doesn’t apply to the users, in order to save space.

Floating Action buttons VS. Tabs

As shown below, when users click the filter button, two filters pop up. Each filter has two status - selected/unselected, which is cool but confusing. Some people cannot tell the difference between two status and wonder if the two filters could work together. When they finished setting up one filter, they have to exit to the pet list to select the other one, which increases the number of clicks. So I decided to use two filter tabs in the side panel where users could freely switch in between with no confusion.

Project Image
Project Image
Project Image

3. Using videos and GIFs to show the real look and natural behaviors of pets

I decided to encourage shelter volunteers to shoot more videos about pets, such as when interacting with people, getting along with other pets, as well as staying alone, and then publish them in the app. In “Pet List” page, I would use video-converted GIFs which gives the accurate first impression (appearance) of pets to adopters. In “Pet Details” page, adopters could watch different videos and decide whether they want them by seeing their most natural behaviors in daily life.

Project Image
Project Image

4. Other Interfaces

I decided to encourage shelter volunteers to shoot more videos about pets, such as when interacting with people, getting along with other pets, as well as staying alone, and then publish them in the app. In “Pet List” page, I would use video-converted GIFs which gives the accurate first impression (appearance) of pets to adopters. In “Pet Details” page, adopters could watch different videos and decide whether they want them by seeing their most natural behaviors in daily life.

Project Image
Project Image
Project Image

User Flow

Project Image