PetBound

A responsive website for clients and shelters to communicate with local shelters and adopt animals with ease.
Overview

In the United States, about 6-8 million dogs and cats enter animal shelters nationwide every year, and approximately 3-4 million of them are euthanized. This means there’s about a 50% mortality rate for animals who stay in shelters. However, it can be very difficult and tedious to adopt, and a lot of that can come from both bad website/app design and bad communication between client and shelter volunteer.

Role
UX/UI
Designer
UX Researcher

Time
10 Weeks

Tools
Figma
Adobe Illustrator
Photoshop

Challenge

How can we enhance the adopter’s experience through the website so that they feel more connected to their communities?

Goal

Design a pet adoption website with a simple and intuitive flow that enables users to communicate with local shelters and adopt pets with ease. The platform should bridge the gap between the potential adopter and the shelter(s)/organization(s).

. Process Overview .

01 Research, User Interviews, User Pains, Primary Goals, Competitive Analysis
02 Synthesize: User Persona, User Journey, User Flows, Sitemap
03 Ideate, Sketches, Wireframes
04 Prototype: Hi fidelity Sketches, First Prototype
05 Test: Usability Test, UI Kit, Interactive Prototypes, Final Screens

01 .
Research

User Interviews

To understand the state of shelter adoption better, I interviewed 11 people, age ranging from 20-33, who have adopted a range of animals: from cats, dogs, to even rabbits. My focus was to develop an understanding of the user’s perspective on adopting their animal, their stressors, and what they would like to see improved to make the adoption process easier.

Two Boxes, User pains on the left and primary goals on the right. Underneath User pains, there are five bullet points. The five bullet points are: Website not updating often, so there's old outdated information being shown, lack of communication between shelter and user, history not being true/being unknown, lack of description with pricing, flat fee, no support from shelter after adopting a pet. On the right, underneath primary goals, there are three bullet points. They say: More communication between the user and the shelter (Booking an interview after being with the pet), Foster to adopt programs, and websites actually being updated and easy to use.

. Competitive Analysis .

There's a competitive analysis chart, with five different topics: Adopt all kinds of animals, volunteer/foster programs, adoption newbie friendly, easy to navigate, and inquiring/sponsoring. The companies being compared are petfinder, adopt a pet, best friends, and north shore animal league.
Competitor Summary


I started by analyzing competitors of popular adoption websites as well as other indirect competitors like The North Shore Animal League to see what made their websites so popular with users.

After analyzing four of them, I found what made them so successful was how easy it was to navigate and find animals from these websites. However, what these website lacked was what a lot of the user interviewers’ pain points were: The information of the animals provided on these websites are limited or outdated. These websites also require users to do most actions like inquiring through external sites and not directly on the platform.

02.
Synthesize

02 SYNTHESIZE ||| USER PERSONA ||| USER JOURNEY ||| USER FLOWS ||| SITE MAP ||| 02 SYNTHESIZE ||| USER PERSONA ||| USER JOURNEY ||| USER FLOWS ||| SITE MAP ||| 02 SYNTHESIZE ||| USER PERSONA ||| USER JOURNEY ||| USER FLOWS ||| SITE MAP ||| 02 SYNTHESIZE ||| USER PERSONA ||| USER JOURNEY ||| USER FLOWS ||| SITE MAP ||| 02 SYNTHESIZE ||| USER PERSONA ||| USER JOURNEY ||| USER FLOWS ||| SITE MAP ||| 02 SYNTHESIZE ||| USER PERSONA ||| USER JOURNEY ||| USER FLOWS ||| SITE MAP ||| 02 SYNTHESIZE ||| USER PERSONA ||| USER JOURNEY ||| USER FLOWS ||| SITE MAP |||
User Persona

After developing a deeper understanding of the users’ needs and goals through interviews and competitive analysis, I was able to create a user persona based on those insights. Meet Lynn!

Lynn Yildiz is biology professor.
Age: 33
Gender: Nonbinary
Status: Married
Education: Bachelors
Location: Savannah Georgia

Tags: Sensitive, Caring, Calm, Helpful, Heartfelt

Quote: "I want a new furry companion for our family, but with all these options, it's hard to know where to look."

Underneath Biography: Lynn is a 33 year old biology professor who resides in a house with their WFH wife and child in Savannah, Georgia. For the first time in their life, Lynn feels financially stable enough to have an animal companion. They were specifically looking for a puppy from a shelter, as they feel that is more affordable than buying. However, shelter websites can be frustrating to navigate, and Lynn doesn’t know where to start looking.

There are three bullet points underneath goals, they say: Finding and adopting a puppy that would react well to their child.

Learn about the local animal shelters.

Understand the needs and concerns of the animal before adopting the puppy.

There are three bullet points underneath frustrations, they say:

Having a lack of knowledge in raising a dog, much less a puppy.

No extra support for a first time pet adopter.

Worried about the complications of adopting.
User Journey

Using Lynn, I created a journey map to better illustrate the user journey and illuminate any pain points and opportunities.

Through this process, I was able to create “How Might We” questions:

  • How might we help users better understand not just the adoption process, but the process for taking care of animals?
  • How might we motivate users to go back to shelters for more support?
User Flows

Starting from the home screen, I created a User Flow Chart that illustrates the various navigation paths a user could to either adopt an animal or to foster/sponsor one.

It was important to me for a user to understand that there was more than one way to get to their goal.

Site Map

I brainstormed, compiled, and restructured the adoption flow to provide clear navigation and intuitive categorization of pets by species, age, and location. This insured that users could easily filter and sort the available pets.

03.
Ideate

01 EMPATHIZE ||| USER INTERVIEWS ||| USER PAINS|  ||| || 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES ||| 03 IDEATE ||| SKETCHES ||| WIREFRAMES |||
Sketches

I roughly sketched out ideas for all the desktop and responsive screens. Like the other websites in the competitive analysis, I wanted to create something that was simple for any user of any computer experience to use.

WireFrames
After defining the sketches , I began designing the first set of low-fidelity wireframes.

04.
Prototype

04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE ||| 04 PROTOYPE ||| HI FIDELITY SKETCH ||| FIRST PROTOTYPE |||
Hi Fidelity Sketches and First Prototype
Once the wireframes were created, I turned them into my first high-fidelity prototype. I tested this first prototype on my first group to identify any major issues.

05.
Test

05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT ||| 05 TEST ||| USABILITY TEST ||| UI KIT |||
Usability Tests

I conducted 5 usability tests with people from ages 19-45 including individuals with varying levels of technical proficiency and experience with pet adoption. Below are the main redesign challenges that I encountered.

Final UI Kit

After user testing, I created the final UI Kit. Since the imagery is very simple, the colors are what I wanted to make the website stand out most. The Branding of “Pet Bound” relates to being soul mates, so the logo represents a cat and a dog being connected by “the string of faith”.

Using a reddish pink color as the website’s main brand was also important to me, since it’s the color of love. I also used a brown color instead of black for the typography so it wouldn’t look so harsh against the white background evoke positive emotions within the user.

. Interactive Prototypes .

. Desktop .

. Mobile .

. Final Screens .

Browse through any Animal with Ease

Petbound makes it easy for the user to browse through any kind of pet. If the user creates an account, they can save any pets they are interested in to look at later.

Each pet has a small biography as well as essential information such as their: weight, height, vaccinations, etc.

Under every single pet’s page, there is a link with an adoption guide for any user who is not familiar with adoption and its processes. If adoption is too difficult, there is an option to foster any pet of the user’s choosing.

Inquiring About an Animal

After logging in, the user is able to start an inquiry about any animal of their choice before adopting them.

Petbound lets the user browse through different animals and inquire to their respective shelter about any information not present in the pet’s bio. Petbound sends a transcript of the inquiry to the email connected to the user’s account.

Fostering An Animal

If the user would like to foster an animal instead, there are a few steps to take beforehand. The user will be entered in Petbound’s database of associated shelters/rescues to get alerts of new animals needing a foster home.

However, they need to complete an adoption form to choose what preference of animals they’d like to adopt. The user also needs to answer questions about what their lifestyle is like so as to pick the best animal to suit the user’s needs.

.Future Considerations/ Takeaways.

Figuring Out How to Schedule Adoptions Inside the Website

Right now, the adopt me buttons send the user to the shelter’s adoption forms, but if there’s a way to make it easier to connect to client and shelter by making everything connect to one website so where as the user does not need to leave the website at all.

Understanding That Simple is Better

I was initially using more colors and fonts than I needed before, and my usability testings have taught me that simple has been better in the long run for Pet bound. Less colors, less fonts, etc.

Removing My Own Biases as a Designer

By taking and implementing the feedback from my testings and other peers, I learned how essential maintaining good communication is with my users, especially when it came to removing my own biases as a designer.

Over all, the creation of Petbound has been a great learning experience that kept me creatively driven. I hope to work on more projects like this in the future.