Project Type
Coursework (individual)
Team members
Hannah Wu
Role
Ux Researcher & Designer & Developer
Duration
Nov 2020 - Dec 2020
Overview
This course project started with a given design prompt:
“Millions of animals are currently in shelters and foster homes awaiting adoption. Design an experience that will help connect people looking for a new pet with the right companion for them. Help an adopter find a pet that matches their lifestyle, considering factors including breed, gender, age, temperament, and health status.”
The prompt using the word 'connect' instead of "match" makes me think that this experience is not limited to FIND the right pet. It also includes the process of making a decision to adopt the pet or not, and the process of adopting the pet (namely, really bringing the pet home ). So I asked:
"How might we design an experience that helps adopters connect with their ideal pets?"
Solutions: An adoption website that ...
01.
Provides personalized pet recommendations based on adopters preferences
03.
Allows adopters to compare different pets side-by-side
02.
Shows pet profiles with information that adopters care most
04.
Offers online reservation option to improve efficiency
Process
Research
Two main questions I asked in the research phase was:
-
"How did adopters connect with their ideal pets currently?"
-
"What problems did they encounter? "
Research Methods
.png)
Surveys
Questions about pet preference, previous adoption experience, search platform
.png)
User Interviews
Semi-structured user interviews with adopters focused on previous adoption experience
Contextual Inquiry
Competitor website walkthrough with adopters during the interview
User Journey Mapping
To synthesize findings, I started by grouping the insights to identify common themes. But then I found that most of the user insights were tightly associated with 3 different phases in animal adoption - pet searching, decision making, and final adoption. In this case, journey mapping could be a useful tool to visualize this connection. I ended up using the user journey map to organize the actions, pain points, and needs in each phase.
Key Takeaways
User wants to...
01.
Go through as many pet profiles as possible to find potential candidates
Phase
Pet searching
User wants to...
02.
Compare all candidates and find one that fits most
Phase
Decision making
User wants to...
03.
Adopt the ideal pet ASAP
Phase
Final adoption
But...
It is time-consuming to review all the pets.
It is difficult to know what the pets really like only based on their online profiles
But...
It is hard to remember all the candidates that previously reviewed
It is difficult to decide which pet is suitable for adoption
But...
Ideal pets picked online might be adopted by other adopters very quickly
User Quotes
"
I don't want to go over this list one by one. I don't have that much time. Let's see if they have filters...(the website does not have the filter feature) Looks like I can only pick one based on their photos.
"
"
I don't really trust the profiles... I had to meet the cats in the shelter to see if they can get along with me.
"
Ideation
Finding root causes of the pain points and proposing solutions
Before jumping to the solution, I took a step back and investigated the root causes of these issues. Below shows a mapping between needs, pain points, causes, and the potential solutions for each pain point.
Design
User Flows
What level of granularity the preference assessment should have?
I have struggled with what kinds of questions should be included in the preference assessment. The difference between granularity led to two different flows to generate recommendations.
Solution
Ask for general preferences.
After consulting with a previous adopter, I found that adopters usually didn’t know about the exact requirements of pets (e.g. age range) they wanted at the beginning. Their expectations emerge and change over time (e.g., after seeing the recommendations). So I decided to embrace the loosely-matching plan.
Challenge 01.
Challenge 02.
What information should I put into the profile detail page?
Adopters expect the pet profiles to effectively communicate the information they care about. From the interviews, adopters mentioned that they care most about a pet's age, temperament, appearance, and health condition. They also said that they were not fond of long, wordy descriptions. Hence, I started exploring ways to concisely present the information mentioned above.
Solution
Show things that align or not align with users' preferences.
I selected the option 2 for the following reasons:
-
From the users' perspective, option 2 calls out the pet's pros/cons directly with plain language.
-
From a developer's perspective, the logic behind option 2 is clear. The results could be produced automatically based on answers to the preference assessment. On the contrary, ratings in option 1 are very subjective and the judgment criteria are unclear. Shelter staff might need to input the ratings manually, which makes it harder to control the completeness of the data.
Evaluate
Key Issues
01.
Choosing species after getting the recommendations is counterintuitive
Participants are clear about they want cats or dogs or others at the beginning. It makes no sense to ask participants to specify the pet type using a filter (after getting the recommendation).
Solution
Add species entries on the "available pets are here" section.
02.
The filter component is hard to find and not straightforward to read
Participants tended to locate the filter button somewhere close to the title and subtitle, instead of the bottom of the page.
"
I didn't notice that there's a button there...You know the Amazon filter? You can always find it on the left and closed to the section title.
"
Solution
Move the filter button closer to the title, and layout the filters vertically
03.
The entry for pet comparison is not recognizable
Participants confused with the bag icon since it looks like a shopping bag where they can add multiple pets into. The bag icon neither shows what features it is associated with nor prompts users to try out this feature.
"
It is too confusing since (the icon) looks like a shopping bag. I don't know what it is used for. It should be a heart or something else.
"
Solution
Use a text button labeling with “compare” instead.
Final Design
Show personalized pet recommendations based on assessment answers
Preference Quiz
A list of personalized recommendations are generated based on the adopter’s answer to a few general questions about their lifestyle, personal condition, etc.
Targeted Pain Point
It is time-consuming to review all the pets, especially when some of the websites do not even have a filter
Prioritize information that adopters care most in pet profiles
Profile Preview
The preview shows a pet’s photos, name, gender, age, which are important factors for initial screening.
Detailed Profile Page
Shows a comprehensive analysis of the selected pet's pros and cons, covering its age, temperament, health condition, size, breed, training status, and other highlights on its personality.
Similar Pets
Displays pets that are similar to current pet profiles.
Targeted Pain Point
It is difficult to know what the pet really like only based on their online profiles
Make an appointment to meet selected pets in person
Appointment for Visit
Adopters can schedule a time to meet with the selected pet using the appointment feature.
Targeted Pain Point
It is difficult to know what the pet really like only based on their online profiles
Compare with multiple candidates
side-by-side
Save
Save all preferred pets on one place
Side-by-side comparison
On the comparison page, users could add multiple saved pets to the comparison panel. The system will generate a list of pros and cons for each pet based on their pet profiles, and place them side-by-side to help adopters make decisions
Targeted Pain Points
It is hard to remember all the pets reviewed
It is difficult to decide which pet is suitable for adoption
Online reservation and waitlist
Online Reservation
Depending on the availability of the selected pet, users could find either the "reserve" or "join waitlist" button on the profile page.
Adoption Eligibility Screening
Adopters will be asked for a few more questions to prove their eligibility for adoption and provided necessary documentation for the shelter to review.
Targeted Pain Point
Ideal pets picked online might be adopted by other adopters very quickly
Coding it up
The preference assessment quiz is now live.
Technologies used
React
REST APIs
SCSS
Features
Recommend matched pets based on the answers of the assessment
Reflection
Learn from experienced adopters and existed adoption websites
It is extremely useful to learn about previous adopters’ adoption experience. Animal adoption is not a new thing, there are many animal shelter websites out there and most of the adopters have experience in using them. Adopters’ stories of interacting with these websites can reveal many design opportunities. It simplifies the challenge by improving the adoption experience instead of creating a new one.
Stay tune with feedback
I got a lot of feedback during the usability testing, and my intuition was to change everything that users have opinions about. But I realized that some opinions were more related to personal preferences. As a designer, it is always important to make logical decisions based on the research result.