Petpal home page mock pon a mac book
UX Design
Graphic Design

Pet Adoption Website

petpal

Live Site

Challenge

Finding your BFF

We aim to provide potential pet owners the ability to search for and view pets that are available for adoption. They will then be matched with a pet that suits their lifestyle.

The Goal

Connection

To supply the need for anyone to search and/or view pets that suit their lifestyle which will enable a perfect match for both the pet and the owner.

Petpal home page
small white arrow facing right
Petpal adoption page
small white arrow facing right
Petpal appointment page

user research

Pain Points

Initial Research uncovered 4 pain points for users when searching for pets in their area. Providing solutions to these would be the basis for our design.

1.

Time frames to see the pets at the locations was difficult for people with a busy schedule.

Image of Shawn's avatarblue chat bubble
2.

Users with disabilities were not able to view pets that would suit their lifestyle, or be able to adapt.

Image of Cody's avatargreen chat bubble
3.

People wanting to adopt a pet found it difficult to gain information about certain breeds etc.

Image of Denise's avatarblue chat bubble
4.

Users were not able to spend any significant amount of time with the pet they chose, so they were not able to see the animals personality.

Image of Taylor's avatargreen chat bubble

user research

Persona

With the above comments fresh in our minds we have created a persona that combines those users and their views.

Pet pal web application slide image showing the user persona that the design will be based from.

ideation

Sitemap

Simplicity through navigation of the website was top priority. We wanted any and all users to have access to the sites resources.

Pet pal slide image showing the information architecture of the site

ideation

Wireframes

All pages of the main user flow have been quickly sketched and laid out to get our creativity in 2nd gear.

 Pet pal web application low fidelity wire frame that shows pricing, pets available, and success stories

Adoption Pricing

It is important for the users to know all the details about adopting a pet up front including the cost.

medium blue arrow facing left
large blue arrow facing left

Gestalt Principle - Proximity

We wanted to group pets nearby into their own category and space on the page so users can easily see which ones were available closest to their home.

medium blue arrow facing left

Success Stories

The users should feel confident when using the process we have designed on the website.

Pet pal web application low fidelity wire frame of the adoption page that shows the search results when searching for cats.
small blue arrow facing right

Favorites

Clicking on the heart will add that pet to your list.

Blue arrow facing right

Search Tools

Users can filter through the available pets according to breed, age, size etc

Description

Details of the pet will be listed in each card.

small blue arrow facing right

Usability Study

Low-fi Prototype

Main user flow in a low-fi prototype that will be utilized in our usability study.

KPI's

  • Time on task
  • Use of navigation vs. search
  • Drop off rates
  • Conversion rate
  • System usability scale

Participants

  • 5 participants
  • Two males, two females, and one nonbinary individual, between the ages of 20 and 75. One participant is a person with a mobility impairment.
  • The study is accessible for use with a screen reader and a switch device.

Usability Study

Findings

Usability studies were conducted on both the low-fi and hi-fi prototype.

1

Meeting the Pets

Users added that they would like to schedule an appointment for 1 on 1 time.

2

Search Function

Search function was too broad so we modified it to filter dogs and cats.

3

Pets Nearby

Users were not able to see the location of current pets so we added a distance marker.

design refined

Implement Findings

With usability studies completed we started to refine our designs, iterate, and create the mockups.

1

Meeting the Pets

Pet pal slide image showing the before and after mockup designed after the usability study with the appointment booking time improved.

2

Search Function

Pet pal slide image showing the before and after mockup designed after the usability study with the search function improved.

3

Pets Nearby

Pet pal slide image showing the before and after mockup designed after the usability study

design refined

Hi-Fi Prototype

A hi-fi prototype was created with the findings from the first study incorporated

Pet pal hi fidelity wireframe to show the user journey

design refined

Mockups

Website is responsive and accessible on all devices

Pet pal mockup up of home page on laptop

next steps

The Path Forward

01

The News

Sign up forms, newsletters, and email subscriptions will be incorportated in the next iteration.

02

Bring 'em Home

A more efficient way for users to make arrangements to meet the pets through a possible “bring em home” program.

03

Fostering

Programs for foster homes, and funding for care services will be evaluated.

More Case Studies