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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
"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."
Director of Software Engineering at HLP, Inc.
Thought that was interesting? Check out my other featured projects.