PawMatch
Bringing People and Pets Together
Overview
My Role
UX Designer
UI Designer
UX Researcher
Otter.ai
Photoshop
Tools
Figma
Timeframe
10 weeks
Platform
IOS Mobile App
PawMatch is an app designed to connect potential pet adopters with nearby animal shelters, helping people find pets that they are compatible with.
It aims to simplify the adoption process and increase successful adoptions by making it easier to find the perfect pet.
Goal
The Heartbreaking Reality
Pet shelters are currently overwhelmed with an excess amount of pets that aren't finding their way to potential adopters. The Greater Toronto Area animal shelters are seeking community support, saying its facilities are at full capacity as more and more pets are being surrendered.
Animals enter shelters each year.
40,000 +
30,000
fewer pet adoptions in North America from 2022 to 2023.
35%
of pets are euthanized annually due to capacity issues.
75%
increase in pet surrenders in Toronto shelters in 2022.
Design Process
I used the Double Diamond process to ensure a user-centered approach. This methodology helps me fully understand the challenges, define the core problem, and develop well researched and tested solutions. It enables me to explore innovative ideas while arriving at clear and impactful solutions.
Interviews
I conducted 3 interviews with potential pet adopters in their 20s who are interested in adopting from a shelter. I wanted to gain insights into the problem and understand my potential users' behaviours, motivations, and pain points.
“ I definitely want to go through a fostering period before adopting.”
“People shouldn’t adopt a pet just for the sake of doing something good.”
“I spend so much time just getting from one shelter website to another.”
Key Findings
From my interviews, I gathered key data points that reflect the behaviours, motivations, and pain points of potential pet adopters. I then conducted affinity mapping to identify main themes.
I found that pet adopters and potential pet adopters really struggles to navigate all the pet profiles on different pet adoption websites.
this made it hard to find a pet they were compatible with.
It was also a very time consuming process.
The Challenge
How might we help potential pet adopters navigate through the abundance of pet options, allowing them to find a compatible match for their desired pet?
Defining the Target User
My goal is to create a digital solution for a specific user who has specific needs. I created a persona to help develop empathy towards what my main user’s behaviours, pain points, and motivations are. This allows me to design the best possible solution for them.
Experience Mapping
Now that I identified my persona, I have a clearer understanding of what my target user’s goal is.
To visualize what my target user would go through to complete a task, I can use an experience map. This will help me better empathize with the experience my user goes through and identify opportunities for design intervention.
Design Solution
I decided to intervene at the very beginning of the user journey when my user start researching different shelter websites. At this stage, users often feel frustrated as they have to open multiple sites to see all the available pets nearby.
By addressing this point, I aim to alleviate frustration early on and provide a smoother experience. This intervention will also allow me to address multiple pain points later in the process, ensuring a more efficient and satisfying adoption journey for the user.
based on the key findings from the interviews, I wanted to create a solution that would target the problem of users struggling to find a pet they were really compatible with.
I wrote over 25 user stories defining potential features and functionalities I could potentially solve this problem.
I focused my design on creating a task flow that would allow users to navigate pet profiles and find the pet they were compatible with.
Ideating a Solution
UI Inspiration Board
Now that I defined the functionality and tasks for my solution, I created a UI Inspiration board to explore various layouts for my features and screens. I often used dating apps as inspiration for my design because they primarily also target finding compatible matches for their users.
Sketching a Solution
Once I had curated my inspiration board, I drew exploratory sketches and selected solution sketches for each screen. I then designed each screen into greyscale wireframes.
Usability Testing
As part of the app design process, I conducted 2 rounds of a usability tests with 5 users each round to gather real-time feedback.
To conduct user testing, I organized a test plan. First, I prepared a brief introduction explaining the product, the testing process, and the purpose of the test. Next, I created a scenario for testers based on my persona and target user role, helping them understand the app's context and the tasks they need to complete.
Once I completed usability testing, I made a priority matrix to help me map out usability issues based on effort and impact to determine which usability issues I should focus on solving first.
Round 1 Testing
Round 2 Testing
Based on the feedback I received during the two rounds of user testing, I made design iterations to be revised versions of my prototype. I changed some of the layout, spacing, information architecture, and I designed a revised version of the prototype, making refinements to the copy, layout, and interactivity.
Design Iterations
Here are some of the design iterations I made from the 2 rounds of user testing:
1. Added onboarding section at the beginning
2. Introductory text to make the design more user friendly and welcoming
3. Quick filters to make the search function more convenient.
4. Added more content to the cards
Onboarding
1. Removed the search bar from the filter screen based on user feedback, as it didn’t align with conventional filter options. Users preferred searching for breeds through the home screen search bar.
2. I adjusted the spacing and increased the font size on the filter screen for better accessibility.
Removed the slider because user testing showed it was impractical.
Filters
Removed the tutorial from the profile screen as it confused users during testing.
1. Redesigned the top of the profile screen to show key information. Made the profile image smaller, allowing user to notice more information below.
3. Changed the CTA button to a full width button, making the layout of the screen more intuitive.
Home Screen
1. Split the original single screen into two separate screens. Now, users can clearly view the shelter information on the first screen without needing to scroll.
2. On the new scheduling screen, users can book their visit without the need to scrolling
Shelter Scheduling
Brand Development
I brainstormed key words that matched the mood, ambiance, and atmosphere I wanted my app to convey. I aimed to create a brand identity that resonates with potential pet adopters.
I also explored a veriety of name options for my app and decided to go with PawMatch.
I liked that the word Paw does not refer to specific animal, allowing the term to remain general to any pet.
the word Match implies suitability between 2 identities, which matches the purpose of my app.
Name Exploration
FurFriends
PetFinder
Pawnder
PetMatch
PawSeek
PawPal
PawMatch
PetAdopt
PetPicker
PetLink
Moodboard & Colour Pallet
Having defined my app’s atmosphere, I created a moodboard to convey that ambiance and feeling. I wanted my app to have an affectionate yet playful feeling to it. This is why my primary is a mix of affectionate red with a playful peachy tone.
I extracted colours from my moodboard, which I then used as testers for colour injection in my designs and choose my primary colour.
I chose the paw icon as part of my logo, matching the app name PawMatch. The wordmark is simple and versatile, with a white background for light mode and a colorful background for dark mode. The paw icon alongside the text makes it memorable and cohesive.
To align the wordmark with the app's branding, I used the primary colour #FF5A60. This warm, vibrant hue enhances the visual appeal and conveys a friendly and inviting nature. Consistently using this colour across the app creates a cohesive and modern look.
WordMark Design
Final Prototype
After defining my brand identity, implementing my colours, receiving more feedback, and making some final design iterations, I transformed my prototype from mid-fidelity to a final high-fidelity design!
Future Impact
PawMatch's innovative approach will not only increase adoption rates but also reduce shelter overcrowding and euthanasia rates. By focusing on compatibility and user experience, PawMatch empowers young adopters to find pets that match their lifestyle, encouraging lasting connections and responsible pet ownership.
Key Learnings & Next Steps
Through this project, I learned that just because other apps use a specific feature does not mean it is suitable for my project. Originally I wanted to included a tutorial because a lot of my UI inspo included tutorials. However, through testing I realized the feature was hindering my app’s usability. Removing the feature made my product much more intuitive.
My Next Steps are:
More Flows: Create flows for other functionalities, such as the chat to communicate with shelters, or a tracker for the user’s booked visits to shelters.
Test Product: conduct user testing on potential pet adopters to ensure the app has all the functions they currently need.
