PetMe
Pet adoption website
for local animal shelters
OVERVIEW
PetMe is a website where people can find animals to adopt from local shelters. Users are able to browse animals available in their area, and PetMe's filtering function allows users to find the best match for their lifestyle. Users can get an appointment for a specific animal, or PetMe's "Love at First Sight" feature lets users create an appointment with the staff at shelters, where they can see the available pets in the shelter in person.
This project is a part of my journey through Google’s UX Design Professional Certificate Program. Its purpose is to further my education as a UX designer.
ROLE
RESPONSIBILITIES
UX designer & researcher designing Jammy App from concept to delivery
Conducting online research (primary & secondary research)
Conducting online usability studies
Paper and digital wireframing
Low and high-fidelity prototyping
Accounting for accessibility
Iterating on designs
PROJECT DURATION
December 2021 to January 2022
TOOLS
Adobe XD
Figma (FigJam)
Paper & Pencil
My brain 🧠
💭 THE PROBLEM
PetMe's primary goal is to provide users with a smooth and exciting adopting experience. The ultimate goal is to find every animal a loving home, but we must also make sure that they find an educated and responsible owner. Adopting a pet is a big deal because they are going to spend many years together. It's very important to make sure that they are a good match and that the owner is ready to welcome a new family member with enough care and knowledge.
According to ASPCA, approximately 6.3 million companion animals enter U.S. animal shelters nationwide every year, but only about 4.1 million shelter animals are adopted each year. We want the number to be equal so that everyone can get a forever home. In the online research process through existing website reviews, I found out that it is hard for future pet owners to get an appointment because many shelters don't reply to their inquiries. If those who want to adopt a pet cannot even make an appointment, how could the number be equal?
🌟 THE GOAL
DESIGN CHALLENGE
How might we make the adoption experience easier, less overwhelming, and more exciting for future pet owners?
Understanding the User
For PetMe user research, I started with desk research and an online survey (Google Form) to get an idea of the animal adoption industry. Then, I created empathy maps for fictional characters to identify pain points. Below is some of the feedback I got from online survey participants who currently used pet adoption websites:
Most people think about adopting animals when they are happy and ready to be a pet owners
The target audience's age varies from teenagers to elders. Lots of opportunities to gain users!
Many survey participants admitted that they gave up adopting pets more than once
Business-like design can be intimidating to new pet owners
Some people have returned the animal they adopted to the shelter
User Research: Summary
Lifestyle: Some busy adults are worried if their new pet would feel lonely - they want to make sure that their new pet is happy with their lifestyle.
Adoption Process: Some participants said they have given up on the adoption process because they were asked to fill out too many questions or it was too complicated - especially for those who were not tech-savvy.
Available Options: Some potential adopters are not sure what kind of animals would be the best match - it can be hard for them to find one online.
Pain Points
I wanted to form a deeper understanding of our users’ goal, needs, experiences, and behaviors. So, I created two personas based on user interviews and surveys. I used these personas whenever we needed to step out of myself and make sure that PetMe prioritizes users.
Persona
Hanna’s User Story
“As a non-tech-savvy person, I want to have a clear navigation and simple design so that I can feel confident throughout the adopting process.”
Problem Statement
Hannah is a mother of two kids and a dog who needs to find a good match for the dog she already has because she wants both dogs to feel comfortable and get along with each other.
Hannah needs a simple pet adopting process because it can be challenging for her to use the Internet sometimes.
Hypothesis Statement
“IF-THEN” Format
If Hannah uses PetMe website then she can adopt a dog with a simple process without feeling frustrated or nervous.
“WE BELIEVE” Format
We believe that PetMe website’s simple design and adoption process will help Hannah to find a dog easily and comfortably.
Kento’s User Story
“As a busy software engineer, I want to make sure that I can find the best match that I can take care of so that the pet I’m adopting won’t feel uncomfortable or lonely.”
Problem Statement
Hannah is a mother of two kids and a dog who needs to find a good match for the dog she already has because she wants both dogs to feel comfortable and get along with each other.
Hypothesis Statement
“IF-THEN” Format
If Kento downloads PetMe website then he can adopt a pet that matches his lifestyle.
“WE BELIEVE” Format
We believe that easy access to the available animals up for adoption will give Kento more opportunities to find a pet that matches his lifestyle.
The user journey map shown on right is the user journey users would take in the adoption process. This helped me to highlight pain points and identify improvement opportunities as I start designing PetMe website.
User Journey Map
In this project, I researched three pet adoption websites: Petfinder, the County of Los Angeles Department of Animal Care and Control, and Adopt-a-Pet.com. By understanding the competition, I got an idea of products that were already in the market, their design, what they did well, and what they could do better.
Although all three companies I researched were direct competitors, I found that the County of Los Angeles Department of Animal Care and Control would be the closest competitor I would have. While other sites are mostly just allowing users to send a request for inquiries, the County of Los Angeles Department of Animal Care and Control allows users to schedule an appointment directly through their website. It saves users time and solves the issue of many shelters not replying to users' messages or inquiries.
Competitive Analysis: Summary
Using the problem statement I created for my two personas, Hannah and Kento, I reframed the statements into questions that will help me come up with ideas to solve the problem.
The more "How Might We?" questions I have, the more solutions I can come up with. So I wrote as many questions as I can to let my creativity shine,
How might we make the adoption process fun by adding a poll function?
How might we create a way to discourage animals from a shelter?
How might we require users not to browse animals online but to see them in person?
How might we consider the user’s lifestyle when they are searching for a pet and find a good match?
How might we make it easier for shelters to process adoption requests?
How might we make a simple online adopting process without confusion?
How might we ask users some basic lifestyle questions and sort animals automatically for them?
How might we make the adoption process exciting and encouraging?
How might we remove the animal browsing process online?
How might we gamify the adoption process?
How might we encourage users to complete the adoption process with their family and friends?
How might we let users put detailed information on their current pets and sort animals based on that information?
“How Might We? Exercise
Starting the Design
As shown below, I designed about four pages for each screen of the main user flow where users find a dog they want to see and schedule an appointment.
Creating paper wireframes helped me stay creative and think outside of the box. Paper wireframing is a great way to start designing because it saves designers lots of time. Even though some of the ideas seem unrealistic, we would never know what possibilities our ideas have!
Paper & Digital Wireframe
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Here are some of the findings I actually had a chance to incorporate into my design.
Round 1 Findings
Some screens are wasting white space
Unsure where to click
The navigation bar doesn't have to be fixed when scrolling
Round 2 Findings
Need a more consistent color scheme
More recommendations might be appreciated
Usability Study Insights
Pet adoption should be easy, but responsible.
The Solution
Hi-Fi Prototype Overview
To try out my interactive hi-fi prototype, visit PetMe Hi-Fidelity Prototype
Alt Texts: Provided access to users who are vision-impaired through adding alt text to images for screen readers.
Icons: Used icons to help make navigation easier.
Size: Made changes to designs for improving accessibility (ie font size, button size, icon size, etc).
Accessibility Considerations
Going Forward
Takeaways
The key to becoming a good UX designer is to come up with new ideas that can improve the overall user experience and keep iterating. Let's see what my takeaways are from PetMe.
Impact
PetMe provides smooth and exciting browsing and scheduling process which eventually solves some problems we have: overpacked shelters and animals with no permanent home.
PetMe is not just a simple and focused website that allows users to find their new family member, but also a place that future pet owners can use to educate themselves before they actually become a pet owner.
What I Learned
PetMe is the first website I designed as a UX designer. It was challenging for me to design a website because it has much more space that needs to be filled up, while at the same time being cautious not to put excess or unnecessary information that might confuse users.
I learned that designing a website is completely different from designing an app, and that I have to keep up with recent trends and accessibility standards.
Next Steps
Design Whole Website: Keep designing more pages that I didn't have the opportunity to design (ex. "Love at First Sight" and "Before Adoption..." pages).
Research & Iterating: Conduct more online user research and usability studies to determine any new areas of need. Also, I will iterate on designs constantly to meet user needs better, improve accessibility, and keep it up-to-date.
Make It Responsive: Design PetMe content for mobile and tablet users. It is very likely that many target users prefer to access from their mobile devices, which I should meet this need.
Thanks for listening!
Do you have any questions? Please don’t hesitate, reach me out :)
seike.yuka@gmail.com
(424) 625-1367
Based in Los Angeles, California
