6 minute read
Project Summary
The Petfinder Foundation's new Pet Supplies Donation Feature is a hypothetical addition to the platform. It is designed to facilitate and encourage the donation of much-needed pet supplies to animal shelters and rescue groups. This feature enables pet owners and compassionate individuals to contribute essential supplies to support the welfare of animals in need.
Task: Research and design a new feature within an 80-hour time constraint.
Role:
UX/UI Designer
Duration:
4 weeks
Tools:
Figma, Adobe Photoshop, Maze
Deliverables:
Competitive analysis, User interviews, Personas, Wireframes,
Flow diagrams, Prototype, Usability study, High-fidelity
Discover
Problem
There exists a pressing need for a seamless and effective solution to connect pet enthusiasts with their local animal shelters and rescue groups for the purpose of donating pet supplies. The current challenges in this process include:
Solution
To address these issues, I propose a new feature that seamlessly integrates into the Petfinder Foundation, facilitating the process of donating pet supplies to local animal shelters and rescue groups. This feature should provide a user-friendly interface for donors, offering insight into the specific needs of each shelter and rescue group, and streamlining the donation process. By doing so, it not only empowers communities to support local shelters but also enhances the sustainability of these organizations, ultimately improving the well-being of the animals under their care.
Discover
Research Insights
I came to the solution by conducting user research, competitive analysis, and secondary research( View: Research Ramp-Up). I first looked into Petfinder.com because they have a directory of 11,000 animal shelters and adoption organizations across the U.S., Canada, and Mexico. Their partner, PetfinderFoundation.com, is the only national organization that provides grants to adoption groups. Their mission is primarily supported by cash donations, but they also provide other means to help homeless animals. Since Petfinder focuses on adoptions, I decided to add another way to support local shelters specifically on Petfinder Foundation. Secondary research helped me discover more insights from animal welfare professionals and animal charity groups who dedicate their time to helping homeless pets. Lastly, after conducting user interviews with four pet owners and receiving responses from 10 people on a survey, I was able to define any frustrations they faced while donating and came to a solution to make that process easier.
Through my research, I:
Empathized with people who are looking to donate their unwanted animal supplies.
Discovered what animal shelters and rescues need urgently and what items aren’t donatable.
Observed Petfinder’s brand identity.
Click here to see more
100%
of people agree there needs to be an easier way to find out what products local shelters need.
35%
of people hesitate to bring their items directly to a shelter because they are unsure if they will accept used supplies.
64%
of people said they don’t donate pet supplies that often. It’s more common for people to throw out their unused pet supplies.
Define
Define the Feature
I explored Petfiner a bit more to learn more about their Pro members (shelters & rescue groups) and what can be seen on their profiles. Interestingly, Petfinder.com helps connect users to their large pool of shelters, however, there is very little information on the profile (see below). I thought back to when I spoke to people who volunteer at shelters and how they sometimes get supplies they cannot use or not enough of a specific item. I decided to test out the idea of adding wishlists to the pro member’s profile so that when users search for their local shelter, they will know exactly what the shelter does or doesn’t need, what their pick-up/drop-off hours are, or any other special requirements. Ideally, the feature will reduce the time and effort it takes for a user to get their donation supplies to the animals in need.
Defining the story helped me determine the following key features to test on Petfinder Foundation:
Wishlist Profile: Pro members will now have a new profile specifically for their donation wishlists located on PetfinderFoundation.com. They can add what kind of supplies they need for each animal group (Cat, Dog, Bird, etc.), what items they cannot accept, links to online donation options, and drop-off locations & info.
Search Tool: Petfinder already has an intuitive search database on their adoption website. Adding the same function to their donation website feels right.
Personas: I used the insights I gathered from my research to understand a user's motivations, frustrations, and overall goals. In addition, I mentally explored the world of an animal welfare professional to help me understand what they need on a day-to-day basis.
HMW: After taking a journey through my personas day-to-day with their pets, I structured my Point of View (POV) statements to frame the problem from the user’s perspective. I used these statements to identify How Might We (HMW) questions.
I created a list of animal products for each type of animal that can be adopted through Petfinder.
Brainstorming the Architecture
Once I was in the development stage, I navigated through Petfinder Foundation’s website to get more familiar with the current look and feel. Understanding the existing structure helped in integrating the new functionality cohesively. It ensured that the new feature aligns with the overall organization of the site.
To share the look and feel of the current website, I created a video walkthrough.
Define the new blueprint
Exploring the current website helped me start to think about flow and how the new feature will be accessed. Since the new feature would impact the navigation, I used a task flow to ensure that the navigation menu and links were updated to accommodate the new feature, preventing confusion for users trying to locate it. I believe this step contributed to a seamless and positive user experience.
Design
Visual Design
To remain true to the current brand and structure of the website, I created a mini-style guide. I took extra care to study the typography, imagery, color palette, and overall look and feel. My goal was to integrate the new feature seamlessly, so it feels like it belongs with the existing style.
Wireframes
By using Figma, I mocked up a couple of new wireframes to create a prototype. Using my understanding of my persona’s needs, the established brand guidelines, and the new navigation structure; I worked on making informed decisions on how the new feature would look and behave. I added buttons on existing pages to help link users to the new feature and created a new introduction page to help further reinforce the need to donate animal supplies. These steps ensured better accessibility and a clearer flow for users to accomplish their goals. During this time, I also participated in group critiques with a UX community on Discord and discussed my design decisions with a mentor.
Thinking responsively
Responsive web design is fundamental for providing a consistent, accessible, and user-friendly experience across the diverse landscape of devices. That is why I felt it was important to make sure the new feature on Perfinder Foundation’s website also supports a mobile experience.
Prototype for Web
I created a second video of a high-fidelity prototype I built in preparation for usability testing. The video demonstrates the different paths to get to the Donate Pet Supplies page and how the new search feature will lead the user to Petfinder’s Pro members’ donation profiles.
Usability Testing
Using the high-fidelity prototype, I tested my designs with users to measure their usability and identify any areas of improvement. I built the test on Maze and received responses from 14 participants who either were experienced pet owners or had donated before. Three moderated tests were also done with Zoom so I could watch how the user navigated through the prototype. All 17 participants helped me determine if the new feature blended in with the current user interface and if they could successfully find an animal rescue group’s donation wish list. View the testing result graphic here.
64.3%
of users were successful at finding the newly added “Donate Pet Supplies” page. Most were drawn by the large purple donate button.
78%
of users were successful at filling out the filter to find which shelter accepts cat scratchers.
100%
of users found out if the Animal Rescue League of Boston accepts the dry cat food brand, Purina ONE.
Pain point
The hang-ups on the donate screen may have been due to the participants’ lack of experience using the website, the hyperlink being hidden below the CTA, or participants’ misunderstanding of donating money vs supplies.
10 people chose a direct path by clicking the purple donate button on the home screen, then found the “Donate Pet Supplies” link under More Ways to Give.
4 testers tried using the inactive donate money feature instead of locating the donate pet supplies page. They clicked sporadically in frustration.
Priority Revisions
Overall, I gathered positive results and 100% of users found the overall interface clear, clean and easy to use. I addressed small hangups by adjusting a few headlines and adding a button to the donate money page.
Since a handful of participants got lost looking for the “Donate Pet Supplies” when on the donate page, I added an extra button below the dog photo. I decided to leave the purple button on the navigation alone since Petfinder Foundation is more focused on money donations.
I adjusted some headlines to provide more information about the new pages. The headline “Animal Shelters & Rescue Groups” was changed to “Find Animal Shelter & Rescue Groups” so the button to start searching for animal groups would b clear. There was also confusion about the “Donatable Pet Item” headline so I updated it to read “What Supplies Can I Donate?” instead. The button will take the user to a page about what pet products are commonly acceptable and what is not.
Reflection & Next Steps
I took on the challenge of seamlessly integrating a new feature into an existing design to give Petfinder’s users another way to help animals in need. I learned the importance of understanding the design and flow of the current site to introduce a new feature that felt intentional. The new feature is another way to help not only bring awareness to animal rescue groups but also to encourage more generosity.
Next, I would explore how to introduce the new feature to the Petfinder Pro members. I would like to learn more about what they see on their dashboards on Petfinder.com. What are the steps pro members would take to add their wish lists to the Petfinder Foundation website?