PetHarbor

How might we help PetHarbor users accurately fill out a Lost Animal Request?

During our research for Paw Prints, an ios concept app, I came across PetHarbor, an online database to reunite or adopt animals nationwide. I got in contact with the Director of Software Engineering of their parent company, HLP, Inc. Aligning with my team’s goal to reunite owners with their missing pets, we joined forces with PetHarbor for a 1-week design sprint, and I was tasked with redesigning a crucial part of the Lost Animal Request form on their website.

Role: UX/UI Design and Research

Team: 2 Product Designers, 1 Business Stakeholder

Platform: Desktop - Form and Website Embed

Tools: Figma, Miro, Zoom, Procreate

The Problem

I needed to understand how this form worked, and why it included what it did. Speaking to the client and an animal shelter specialist, I learned that animals are best identified by SCENT (Size, Coat, Ears, Nose, Tail), which were present in the Lost Animal Request form on PetHarbor.

S-C-E-N-T Markings on an animal

Breeds are also used by shelters and owners, but “Size, Coat, Ears, Nose, and Tail” provided the most accurate matches, especially with mixed breed animals. These traits were attached to animal listings in the database, and the more accurate the report, the better the match.

Pet Owner's Journey Map using PetHarbor

Because SCENT was a lot to remember, especially with terms like “Brachycephalic,” I hypothesized that this was a pain point on the PetHarbor Lost Animal Request form. To validate this hypothesis, my teammate and I sat with 3 different pet owners to ask them to go through the existing form.

SCENT as it appears on PetHarbor

Users expressed the following frustrations:

• Confusion with labels on the Lost Animal Request form

• Unsure what each SCENT option meant because of lack of pictures

• Fear of filling in the wrong information on the form

I took the results of these frustrations and drew a storyboard to help the team empathize with the user.

Storyboard of Pet Owner's experience filling out PetHarbor's form

From here, I worked with the team to narrow down our problem statement:

As people who care about their missing pet, owners want to quickly fill out an animal report, and feel confident that accurately matches the database because they want to be reunited.

Problem: Petharbor's animal intake form was overwhelming with how many inputs there were.

Solution: Rearranging the questions along with a website embed to scan for animal properties to break up the form as well as make it easier for users to report their missing pet.

Outcome: 80% of test participants reported preferring the redesign because of the reduced cognitive overload.

The Solution

Understanding the problem, I discussed possible routes for solution with the client and my team. In reworking the Lost Animal Request form, we decided that including an image scanner that would scan a photo of an animal to pull SCENT information would be a strong potential solution to the problem. The client suggested that I create this scanner in the form of an embedded element, so that it has the flexibility to be used on PetHarbor as well as other products.

Pulling SCENT info from an image to autofill the form

To narrow the scope though, I worked with the existing form on PetHarbor. Looking at the Lost Animal Information section specifically, all of the criteria were either drop downs or text form fields with no pictures.

SCENT and Image Upload as it appears on PetHarbor

Using this as a base, I brainstormed the general layout on low fidelity to understand which form fields to put where. This allowed me to decide what to include in the pet image scanner embed.

Low Fidelity of Proposed Redesign

Testing

I turned my low fidelity into a mid fidelity wireframe on Figma for testing. Given that we had 1 day to test with very little resources, my team and I conducted preference testing over Zoom with a total of 5 people, consisting of pet owners, other designers, and a developer.

Side by side of: Existing Form and Proposed Redesign

Overall, the users were pleased with the addition of the embedded pet image scanner. However, test also revealed the following:

Reorder for Priority

Users believed wanted to see certain items first.

Unclear Labeling

Users weren’t clear that the embed scanned the photos.

Ability to Edit

Users weren’t clear that they could edit the autofill.

The Solution, Revised

I made iterations to the wireframe to accommodate results of the preference test above.

Form Fields Reordered
Considering the problem is that the pet is missing, location and date last seen were important to the users when tested, so I moved them up to the top of the form.

Iterations on the beginning portion of Lost Animal Request form

Context Clues
I renamed the Pet Scanner to “Animal Image Scanner” to make it clear to users that the embed will scan photos.
I also added an extra line in the description to let users know they can edit. Giving users the option to get similar breed matches also lessens the pressure for user error.

Iterations on the embedded image scanner

To see it holistically, below is the final mid fidelity wireframe, broken into 3 main sections.

1. Basic animal information and descriptors lead up to the embed.

2. Animal Image Scanner was renamed from “Pet Scanner” to clarify its use. This is our actual embedded element.

3. Additional details about the animal that cannot easily be taken from a photo.

Proposed Lost Animal Section of Lost Animal Request form

High Fidelity

Understanding how our embed works in the big picture, I took it to high fidelity to give the client a better understanding of how it would look with the existing branding of PetHarbor.

High Fidelity of Image Scanner embed

Outcome

Given more time and resources, I would bring this to a developer to create a functioning prototype for further usability testing. While this was an exploratory endeavor for our client, it revealed ways in which the existing form could be improved even without the addition of the image scanner.

“First off, congratulations and well done! Nice work, both of you. I will circulate your work with our staff, who I am sure will be interested to see and discuss it. We would need a larger team as well as engineers to develop and test this further.”

- Evan, Client

Despite the fact that there are not enough resources to continue, I am proud to have been part of this. It allowed my team and I to take our concept project into potential application in our mission to help animals reunite with their loving owners all in the short time frame of 1 week. It also impacts such a large audience, given that PetHarbor is used nationwide, partnering with shelters all over the USA.

Client Testimonial

"Martha helped my company for a project during her studies at the Flatiron school. Given a very short time-frame, she and her team established a meaningful problem-space, performed an in-depth and multi-layered analysis, and produced professional results that were valuable to my team, our products, and our clients. At all times she was courteous, professional, thorough, creative, and eager to learn and understand. She was a real pleasure to work with, and I recommend her wholeheartedly for any endeavor."

Evan Bowen

Director of Software Engineering at HLP, Inc.

Big kudos to my UX teammate, Kristen Sunny, etiquette queen.
All illustrations and animation done by me.