top of page
Group 272 (9).png
Top

Petner

Pet Adoption Agency Website

UX/UI Designer

Participants observation, interviewing, synthesis, precedents research, design experiments, prototyping, usability test, and graphic design

Duration: Fall 2022

Team: Daniela Weng, Dominique Alvarado, Songlin Yuan

Tools: Figma, Adobe Illustrator, Google Docs, Miro

CourseNortheastern University - Research Methods for Design​

Overview

​

Problems

The main pain point is Communication, which is the process of exchanging information between users and adoption shelters. And the communication can be divided into 3 parts:

1. Productivity: Lack of clarity, users have to spend a lot of time figuring out how to apply for an adoption.

2. Support: Users are struggling to find real-time application status.

3. Process: Application redundancy, users have to fill out an application form each time they apply for a pet.

​

Solution

Migrate the different application forms into an intuitive website application process.

​

Results

User processing time: users spend about 50% less time operating our designed website than existing websites.​​

Design Concept

Design Concept

Provides an efficient application process for adopters and pet adoption counselor.

​​

  • Adopters | Expedite application process

We are currently targeting first-time adopters and want to expedite their application process.

​

  • Pet Adoption Shelter | Increase the scalability

Increase the scalability of the shelter, they can reply to most applicants with their application status with an easy click and check in the backend of the website.
Help counselors avoid spending hours on the phone and emails.

Participant Observation

We formulated a research question that directed towards the idea of researching the pet adoption process that is filled with a variety of parts we needed to find out along the way of what are we setting on to research.
Our investigation was realized by searching existing p
et adoption websites each following 3 types of categories:

  1. Official Website - MSPCA, Animal Haven

  2. Government Website - City of Boston

  3. Third-Party Website - PetFinder


We would do a thematic analysis for each specific site with giving a detailed response to the Action, Emotion, and an Improvement Opportunity. For each we would way-find the sites and take notes on experiences from browsing homepage to submitting the pet adopt application

Gathering the information for each site we were able to come up with pain points, pleasure points, and any other insights for the future resources that can help us plan the design and answer our research question.

Participant Observation
Group 275 (2).png

Pain Points

We categorized pain points based on our observational research.

Group 276.png

Interviewing

Since, we are non experts and new adopters we needed to start conducting interviews that could help us have a more clearer understanding of what happens in the process.

We formulated interview questions that would be asked for each interviewee, and gathered 4 experienced adopters who shared their personal experience and expressed their feelings towards the overall process. For each interview we gave each other tasks for none of us to miss anything as from one being the note-taker, timer, and the conductor.

Design 16.png
Design 18.png
Design 17.png
Design 22.png

Codebook

After the interview responses we went back in creating a transcript as smaller version of what was spoken in each interview that collaborated to make the codebook and see any common patterns each would fall on.

We then decided that "communication" would be the main pain point we designed to solve next.

Group 276 (2).png
Synthesis Research

Synthesis Research

After our previous interviews:
1.  We identified and created 3 personas that modeled our users.

Group 278.png
Group 276.png
Group 277.png

2.  Developed a scenario that model existing problems and design opportunities.

Group 277 (1).png

Design Proposal

Design Proposal

Design 34 (1).png
Design 35.png

We curated design concepts to select the most exciting options from the three.

Group 10 (3).png
Group 278 (3).png
Precedents Research

Precedents Research

With the following collected precedents we were able to identify, analyze each example and annotated the samples through our sketches with the provided evidence of each part we will be grasping for our website as from previous used and seen platforms from our daily lives.

​

Research Objectives

We started by listing similar comparison objects that can help us understand current UX design trends/logics, so as to suggest ideal solutions for each pet adoption process.

pet adoption research objetives.001.png

Petner, as a pet adoption agency website, want to deep dive into the adoption process. We then divided the whole adoption process into 3 parts-search approach, application process, and tracking approach.

1. Search Approach | Increase search ability

Since housing search websites have similar user experience design and logic, we conducted a comparative analysis with pet adoption agency websites. It turns out that the similarity between the two lies in the distance: distance is the first for these industries.

search 方法 1 (1).png

Then we spotted our design opportunity! By adding map-based location search, we can help users find shelter locations more easily. Also, we implemented search scrollbar to provide more precise searching options.

Group 279.png
Tabloid - 3.png
Dani_Precedent Library-2.png

2. Application Process | Expedite application process

The application process is the process we mainly want to optimize - speed up users' processing time. Therefore, we first compared the user process of pet adoption official website and agency website. It turns out that users typically spend twice as much time on agency sites than on official ones. As users have to submit their inquiries on the agency website and then submit the application form on the official website later.

1663801972.png
Tabloid - 4.png

In order to speed up the user experience time, we divided the comparison objectives into two directions:

1. Adoption website: pet adoption agency website, pet adoption official website, and child adoption website

2. Application website: job search website and school application

 

After analysis, we teased out the ideal solution: By providing a unified application form and clear guidelines, and implementing LInkedIn's "easy apply" logic in the process, we can minimize the processing time for users to adopt pets. The image below is an example of one of our research sites for adopting children.

​

Child Adoption-1 (1).png
1663801970.png

The picture below shows our process of optimizing user experience:

Search Approach (1).png

3. Tracking Approach | Summarize the whole application process

Based on our research, every pet adoption agency and official website currently does not provide an application tracking system for applicants. Therefore, we found the corresponding comparison object on the tracking system to develop a suitable one for our pet adoption website:
E-commerce, food delivery, and job research website

Design Experiments

Design Experiments

Based on the precedent research, we made some modifications accordingly, aiming to make our product more intuitive and logical. We then developed high-fidelity prototypes, especially for new adopters.

Usability Test Results
Group 5 (3).png

High-Fidelity Prototype

Usability Test

We reviewed our problem statement again to clarify the research direction.

​

The problem we are solving

New adopters feel lost and confused when it comes to the pet adoption process.

Our design hypothesis
New adopters are experiencing confusion towards the variety of existing application process being done in other organizations that needs to be more clearer, hierarchical, and reduce confusion.

Research question
How can "Petner" bring a hierarchical and less confusing way to organize information for new pet adopters' experience and a clearer pet adoption process that could improve this existing system?

How we tested the hypothesis

We conducted a monitored and non-monitored user testing method with 10 people for each website: Petfinder, an existing pet adoption site, and Petner, our design website. We chose Petfinder because we knew from our previous interview research that it is currently the most used pet adoption agency website.
​
We provided tasks, recorded time, and how many clicks were performed with a comparative analysis between an existing pet adoption site, Petfinder, and our site, Petner which highly focuses on the adoption process.

​

Results
1. User processing time: Overall, users spend less time operating our designed website than existing websites

Untitled 2.001.png

2. Positive feedbacks mentioned by testers:

123.001.png
Untitled 2.002.png

Take Away & Next Steps

Impact​

  • For adopters, especially new adopters, an intuitive user flow can help speed up the application process time.

  • For shelter staff, this design allows for greater scalability, as they can reply to most applicants with their application status by simply clicking and viewing in the background of the site. Plus, we help counselors avoid spending hours on the phone and email.

What I learned

  • What Pet Adopters' need: I learned that what specific areas they care, clarity, and specificity that can change their behaviors and commentary towards the effects of the experience.

  • How the Pet Adoption Process works: I gained a solid understanding of pet adoption application criteria, which also allowed me to understand the thinking of adopters and shelter staff.

  • Develop a Design System: Based on previous user research, I learned the logic of creating a more appropriate user flow for the pet adoption process. Also, since I also understand the user's mind, I create a design style that fits the user's mood and behavior.

​​

Next Steps

  • Measure effectiveness:Usability test for pet adoption counselor

Due to time constraints, we are currently unable to contact pet adoption counselors for usability tests, but we will continue to do the usability test in the future.

Next Steps
bottom of page