Pawfect

Things I did

User Research

Market Research

Wireframing

Interface Design

Usability Testing

Branding

Tools I used

Miro

Figma

Collaborator

Shih-Ju Fu

Duration

4 weeks

(Oct - Nov 2020)

Problem

When adopting cats and dogs, purebreds are preferred by the adopters, while mixed breed, animals with a disability, and senior animals need extended time to find new homes. Also, too much attention to the breed and less attention to compatibility raises the possibility of an unsustainable adoption and animal abandonment.

 

Solution

Pawfect is a dual interface app that connects animal adopters to animal caregivers to help rescue animals. Our goal is to provide an equal chance for cats and dogs with ambiguous breeds by focusing on the animals' characteristics, personal stories, etc. By giving extra exposure to disadvantaged pets(senior animals, etc.), Pawfect wants to give them better chances at finding new homes.

 

Research

To make every adoption a successful and sustainable one, I needed to know the potential constraints and the difficulties in adopting a pet. I interviewed pet owners and conducted secondary research to understand the current situation around pet rescue and adoption quickly. I defined our stakeholders as animal adopters, animal caregivers (and rescue animals).

 

Research Methods:

  • 15 Hours Secondary Research (market research, competitive research, etc.)

  • User Interview with 3 users (1 dog owners, 2 dog adopters)

  • Feature Critique with 3 users

  • Usability Test with 3 users

Competitive Research

I began by doing some research to see what's out there currently. I noted the unique point each service has and tried to find out the potential market vacancy.

 

Takeaways:

 

  • A simple and effective communication tool is needed. All websites utilize inquiry forms to connect adopters with animal caregivers and don't indicate how long users would(need to wait before receiving a) reply from animal caregivers. One of them only has an "adopt" button, and users can't even ask questions about the animal.

  • Websites are not compatible with smartphone browsers. All the websites are browser-based. I tried to see how they look on my smartphone, but 3 of these were not compatible with the smartphone's browser. 

Competitive.png

Pain Points and Frustrations

After finishing the competitive analysis, I moved on to the interview phase. I found out that each stakeholder has different frustrations and pain points. I categorized them into three groups.

 

Animal Adopters:

1

The adopting application process is too time-consuming and tedious. There is no guarantee that they can adopt until the end of the process.

2

The animal doesn't look how it was described. Some animal fosters use misleading Images or inadequate descriptions to promote their fostering animals.

3

Some animal rescues put up unrealistic and unreasonable requirements for animal adoption.

Animal Caregivers:

1

Taking care of animals is not a 9-to-5 job. It's 24 hours a day, 7 days a week, consistent commitment, which can easily become overwhelming mentally and financially.

2

It's really hard to find new homes for disadvantaged animals.

Rescue Animals:

1

Discrimination does exist. Age, size, color, and breed type largely affect the adoption rate.

Personas

After gathering all the pain points from the interviewees, I developed 2 personas to help me envision their stories. Besides, my collaborator, Shih-Ju, lived in a dfferent time zone at that time, so a clear documented persona helped us align our thoughts when we couldn't talk to each other.

 

Takeaways:

  • New Adopters don't have much knowledge on picking the animal that fit their lifestyles and taking care of animals, so a tool that they can easily reach out for help would be helpful.

 

  • Animal caregivers need an effective way to promote disadvantaged animals.

Persona _ Adopter.png
Persona _ Foster.png

Journey Maps

To grasp a better understanding of adopters and animal caregivers' behaviors. I created the journey maps. This process helped me look deeper into each section and highlighted the issues that need to be focused on. 

 
Frame 1.png
Frame 2.png

Key takeaways

To recap the insights in one sentence

  • Animal Adopters: A time saving application process is needed to match reliable fosters to find a pet that best matches their lifestyles.

  • Animal Caregivers: To promote their animals to find them forever homes, a system that can easily manage the adoption process is needed.

  • Rescue Animals: The goal is to find an owner that understands their characteristics and will be responsible and will never leave them. 

Ideation

After understanding the pain points and frustrations each stakeholder has. I brainstormed potential solutions and identified the primary feature set as below. 

  • Everyday new pet alert

  • Pet Filter

  • Chat

  • Memo

For Animal Adopters

For Animal Caregivers

  • Management dashboard

  • Pet promotion

  • Chat

  • Application Portal

 

Information

Architecture

To get a clear picture of both the primary feature and sub-features, I created a product feature roadmap. All the items below were created based on our user's needs and pain points.

 
Workflow.png

Sketching and

Design Iterations

Below are processes I went through before I reaching the final design. I started from sketching, Low-Fi prototypes to Hi-Fi prototypes. This process helped me shape the product quickly.

 
iteration1.png

I went through many design iterations. Tested with interviewees to find out the best one. Below is an example of me exploring the most suitable card design for the animal's profile. I narrow down my criteria based on:

  • Is it visually appealing?

  • Does it include all the necessary information?

  • Is the hierarchy clear?

UI card.png

Design Process

Low-Fi Prototypes

lofi.png
 

Final Design

Pawfect has 2 major interfaces. One for the adopters and one for the foster volunteers. Adopters and Fosters can use the chat feature to communicate. Adopters can filter to find out a specific pet that meets their lifestyle on the adopter's interface. They can also ask fosters for more detail about the pet. On the foster's interface, fosters can easily check out the status of all the animals they are currently taking care of.

 

Onboarding

Adopter Interface

Homepage

Explore

Filter

Foster Caregiver's Profile

Memo

Mypage

Individual Chat

Animal's Profile

Chat

Animal Caregiver Interface

1-3.png

Foster Caregiver's Profile

Adopter's Profile

Individual Chat

Chat

Dashboard

Animal's Profile

Highlighted Features

After identifying the basic structure, I ideated the key features that would solve each stakeholder's problems. Below is a demo of how they work and the intention of creating them.

 

Adopter's Homepage

Every time users open the app, Pawfect will show the most recently added animals as well as the animals that have been waiting in the shelter for a long time. This feature keeps users up to date, and at the same time, helps give exposure to pets that have been waiting with foster families for a long time.

Adopter's Interface

Foster.png

Animal caregiver's Profile

Foster Profile is a page where adopters can get more information about the pet and the foster. Users can see the reviews from other adopters to see if this foster is a good match with them. In the Dwelling section, users can see the fostering environment and in the Posts section, users can see the most up-to-date information about the foster and the animals.

Adopter's Interface

Adopter's Memo

Memo is a feature that helps users organize information about the pet that they want to adopt. Users can easily long tap a message and add it to the memo. Also, users can create a new text-only memo or memo with photos on the page. To keep the memo nicely organized, users can create tags such as food, health, behavior, etc. to help them categorize different information about their pets. Also, this feature prevents adopters from asking the same question, again and again, to help reduce foster's unnecessary workload.

Adopter's Interface

Animal Caregiver's Dashboard

The dashboard gives the foster an overview of the status of all the animals they are currently fostering. Fosters can see what they need to do next, new messages, etc. Also, more experienced fosters can apply for more animals to take care of through this page.

Adopter's Interface

Visual Identity

Color Palette

HEX FFC700

HEX 353535

HEX C4C4C4

HEX EEEEEE

HEX FFFFFF

The color palette reflects the concept of Pawfect: clean, simple, friendly, and delightful. Even though rescue dogs and cats might have sad stories, Pawfect wants to focus more on the joy of finding them new homes.

 

Typeface

Roboto Regular

Aa Bb Cc Dd Ee Ff Gg
Hh Ii Jj Kk Ll Mm Nn Oo
Pp Qq Rr Ss Tt Uu Vv
Ww Xx Yy Zz
1234567890

Illustration

Instead of perfectly shot photography or abstract illustration, Pawfect uses realistic, detailed drawings to indicate that each rescue pet is unique, lovely, and has its own story.

Logo

On Pawfect, all the pets share major roles, so instead of using a specific pet as the face of this app, Yi decided to use a text logo and give the attention equally to all the rescue dogs and cats. When deciding the typeface of the logo, Yi wanted it to be clean, recognizable, and at the same time, contain the cuteness of dogs and cats. She decided to use Arial Rounded MT Bold, which is bold, and its roundness matches the concept perfectly.

Reflections

  • Making design decisions based on the primary needs of each stakeholder

Making an app is continually making decisions, and I always get lost because I want to include all the ideas I had. However, more is less. Too many ideas can only make the app look messy and chaotic. After going through making this app, I learned to always keep the app clean and simple. If I need to pick one idea over another, I think about the essential needs that the stakeholder has and decide.

 
  • Archiving all the design iterations

I tended to redo the design directly on the old file and forgot to save it as another copy, which made me lose some of the design processes that I went through. Next time, I would keep all the processes organized for the case-study.

balloon_1f388.png