Alison G. Kline
FeatureImage_PetMatch2500px.png

PetMatch Case Study

FeatureImage_PetMatch2500px.png
 

PetMatch - Ethical Pet Adoption

Petmatch is an association of animal shelters. They partner with shelters all over the country to raise awareness about rescue animals and help match people to pets waiting for a home.

Problem: The organization does not have a website or web presence and is looking to expand awareness & discoverability of their services nationally, especially with young professionals in cities looking to adopt a pet responsibly.

Goal: Develop a responsive site and modernize its brand with a new logo & style guidelines.

Role:  UX/UI and Visual designer, responsible for user research, interaction design, user testing, wireframing, prototyping, UI design, and logo/brand design.

This project was completed as part of a Designlab capstone project.  

 

Research

My goal for the research phase were to gain an understanding of the online pet adoption industry and competitors in the space. I also wanted to gain an understanding of current & future pet owners’ thoughts, preferences, and struggles with pet adoption, online & in person.

Methodologies

PetMatch_methodologies.png

 

From the research, it was clear that the target demographic that wanted to adopt rescue animals preferred searching for pets online first to get access to a wide variety of pets and find information on each. These users also noted the importance of having a quick, convenient way to schedule an appointment with a shelter online so they could visit pets they liked in person. 

Because shelters are often understaffed and don't always have someone to answer the phones, the addition of an online appointment scheduling system would help make the process smoother for both the pet adopters and the shelters.

From the combined data from these interviews, my persona of Maya took form.

Persona

PetMarchPersona - Maya.png

Once the needs of the user were defined, it became clear what site features should be prioritized. Users felt it was important to have thorough pet profiles with photos and pet information, and an user-friendly online booking system to schedule appointment visits directly with the shelter. 

 

Sitemap

I created a sitemap based on the research findings from my surveys and interviews. The sitemap shows the top level navigation all the way down through the pet details page, as well as the shelter appointment booking system.

PetMatch Site Map V2.png

 

Task Flow

Next, I mapped out a simple task flow to visualize the core user task of searching for & viewing a pet profile, and then scheduling an appointment to visit that pet at a shelter. This quick visualization helped me determine which screens I would need to design out.

DYR Simple Task Flow.png

User Flow

I also created a user flow to show the various scenarios that could come up for a user on the site, to visualize all options and ensure that there were no dead ends.

PetMatch User Flow V2.png

Wireframes

After sketching out my ideas for the key screens in the user flow, I iterated on them and brought the strongest ideas into Sketch to re-create digitally. Some of the key components were the search bar on the home screen to make it easy for users to search for a pet in their area and the pet search results page with filtering by characteristics like breed, activity level, and size.

PetMatch_Wireframes_keyscreens.png
 

Prototype and Test

I focused on desktop screens and used them as a lo-fi prototype to test the information architecture and flow. The prototype was tested with 5 users in person and through usability tests online as well. My objective was to see how intuitive the designs were and if users would be able to complete key tasks like searching and viewing pet profiles, and completing the appointment scheduling process. 

The results of the tests illuminated elements of the design that needed improvement, and elements that worked.

 

Visual Design

 I worked on a few explorations of how PetMatch could be expressed visually. I wanted the brand to evoke the friendly, bright mood of the brand and it's mission, while still being modernly stylish.

Pet Match Logo Sketches.jpeg
PetMatch_Logo.png

Style Tile

PetMatch_Colors&Brand.png
PetMatch_Buttons.png

Style Tile

PetMatch_Typography.png
 

User Interface Design & Final User Testing

After the visual style was defined, I applied the styling to the user interface, ensuring the UI was consistent with the style guidelines.

I tested the final screens in a high fidelity prototype with 3 users to ensure the flow was easy to use. This allowed me to catch any other roadblocks or user issues and add any last iterations needed to polish the experience. Users had minimal issues searching dogs and scheduling a shelter appointment in this prototype.

Final Screens - High Fidelity Mockups

 
 
HomePage_Mock.png
 
 
PetSearchDropdown_Mock.png

PET SEARCH PAGE

 

Users can search through pets in their area using filters including breed, activity level, gender, and more.

PetDetails_Mock.png

PET DETAILS PAGE

 

Displays a full profile of a pets' characteristics and personality traits, and allows the user to schedule a visit at the shelter.

 
ScheduleCalendar_Mock.png

SHELTER APPOINTMENT SCHEDULE POP-UP

 

Allows user to select available date and time to schedule an in-person visit to the shelter.

ScheduleConfirmation_Mock.png

APPOINTMENT CONFIRMATION 

 

Confirms user's appointment information, and notifies them that they will receive an email reminder and invite after booking.

 

Summary & Next Steps

Going through the process from research to wireframes to final iterations taught me a lot about what young, urban professionals are looking for as first time pet adopters.  User testing of the high fidelity prototype showed that 95% of users could easily search for and browse for a specific dog, and schedule an in-person appointment with them online quickly.  Because this project was done in a short time period, I focused on the search, view, and appointment booking flows, but to continue the process I would develop wireframes for the rest of the site pages and user test them.  Once I have iterated on the design using my findings, I would apply the UI design to all pages and do a final round of testing.