PetMach enhances the pet adoption experience with an intuitive, user-centered digital platform. It allows users to find pets based on compatibility, making it easier to select a pet that suits their needs and those of their current pet. With clear navigation and a responsive design, it ensures a seamless experience across all devices. PetMach supports adopters throughout the entire process with adoption tools, an online store, veterinarian directories, and a supportive community.
ROLE
UX Design, User Research, Information Design
TOOLS
Figma, Wireframing, Adobe Suite, User Interview, Research, Prototyping
DURATION
5 mo
PROBLEM
The pet adoption process is complex and lacks personalization. Adopters have different needs and concerns, such as finding a pet that matches their lifestyle or is compatible with their existing pets. The lack of clear information and guidance makes decision-making and the integration of a new pet into the home more challenging.
SOLUTION & OBJECTIVES
Design an intuitive and responsive digital platform that streamlines the adoption process through a compatibility system, advanced filters, and step-by-step guidance. The platform will help users find the ideal pet, receive post-adoption support, and access key resources to ensure a successful integration.
User Research
To better understand adopters' needs, I conducted interviews and empathy maps, identifying two main profiles: those looking for their first pet and those wanting to integrate a new member into their home.
I discovered that many adopters feel overwhelmed by unclear adoption processes, lack of information about the animals, and uncertainty about compatibility with their lifestyle or existing pets. Additionally, they value a guided process and post-adoption support to ensure a successful transition.
These findings highlighted the need for a platform that not only simplifies pet search and adoption but also provides interactive tools, personalized guidance, and a supportive community, making the adoption experience both safe and exciting.
PAIN POINTS
There are no tools available to determine whether a pet will adapt well to an adopter’s lifestyle or, in the case of pet owners, to their existing pet.
Compatibility
Adopters perceive the adoption process as complicated, with unclear requirements that can discourage them.
Processes
Navigation on existing platforms is unclear, with scattered information and no clear guidance on the adoption journey.
Intuition
Adopters feel alone, lacking guidance or a supportive community after adoption.
Post-Adoption
PERSONA development
Francisco is a graphic designer who works from home and shares his life with Max, a dog he adopted three years ago. Now, he wants to give another dog a chance, preferably an adult, but he faces doubts about compatibility between them and the clarity of the adoption process.
Creating a user journey map for Francisco helped identify his needs, concerns, and expectations at each stage—from researching information to integrating the new pet into his home. His experience highlights the need for a platform that builds trust, simplifies the adoption process, and provides tools to assess pet compatibility, ensuring a responsible adoption.
Design and Concept
The design process began with the creation of a clear and accessible information architecture, ensuring that users could navigate the platform intuitively. The main sections were defined, and an optimized adoption flow was designed, prioritizing personalization and ease of use.
PetMach’s interface allows users to find compatible pets through smart filters and interactive tools. Additionally, a visually appealing and responsive experience was developed, ensuring accessibility across all devices. The design focused on providing clear information, enhancing decision-making, and making the adoption process both efficient and informative.
Iterations for the Home Page with Possible Components for the Website
Components
Responsive
Lo-fi PROTOTYPE
Low-fidelity prototypes were created to structure navigation and define the information hierarchy within PetMach. The main action, “matching with a compatible pet,” was positioned as the central focus, ensuring that users could filter options based on their preferences or their current pet’s characteristics.
A clear navigation system was prioritized, with a guided flow that simplifies the adoption process—from selecting a pet to integration into the home. Additionally, quick access to key information, such as adoption requirements, compatibility, and post-adoption support, was incorporated. These prototypes were essential for validating the user journey, optimizing the experience, and ensuring an intuitive flow for the initial user testing.
Clear Visual Hierarchy
A well-organized structure with a header, a central area focused on adoption, and a fixed menu. Smooth and structured navigation.
Fixed Navigation Menu
The top-right menu provides direct access to key sections: Home, Adopt, Post-Adoption, Support Us, About Us, Cart, and Profile, ensuring intuitive navigation.
Adoption as the Main Focus
The "Find Your Companion" and "Compatibility with Your Current Pet" sections are placed at the center of the design to facilitate pet search and selection.
Visual Feedback
Visual indicators were added to highlight the active section and help users stay oriented within the adoption process.
Flowchart
A flowchart was developed to map key interactions and ensure intuitive navigation within the platform. This process helped structure the connections between sections and optimize the user experience. Based on this foundation, a low-fidelity prototype was created to validate the initial flows and functionalities through user testing.
Usability Study
I conducted two rounds of usability studies to assess the effectiveness and accessibility of the PetMach platform at different stages of development. In the first round, low-fidelity prototypes were analyzed, which helped identify issues in navigation, interaction, and the presentation of essential information.
In the second round, a high-fidelity prototype was used to evaluate the adoption flow. Although the "match" function for assessing compatibility between the current and new pet was not yet implemented, users emphasized its importance. Additionally, feedback from this round revealed UI design details, such as the need to improve interactive buttons and optimize images to create a more intuitive and visually appealing experience.
Round 1 Findings
Clarity in Interaction
Users were unsure which elements were clickable (e.g., whether they should click on the title or the background of pet profiles), leading to confusion.
Round 2 Findings
Need for a "Match" Function
Participants emphasized their desire to engage with this feature and see how compatibility between their current pet and the new one is assessed.
Unintuitive Adoption Flow
It was detected that the way pet profiles and adoption process steps were displayed was confusing and needed improvements in the arrangement of images and buttons.
Lack of Visual Feedback
Some participants did not receive clear confirmations when scheduling appointments or completing forms, which affected their confidence in the system.
Style Guide
I developed a visual style guide for PetMach that blends warmth and modernity in its design. Comfortaa is used for titles, providing a welcoming feel, while Inter ensures readability and professionalism for content. The color palette features orange as the primary tone, complemented by a deep blue for text and pastel purple for buttons, enhancing interaction. Additionally, photographs highlight the pets’ unique qualities, and a beveled effect with an iridescent gradient is applied to title backgrounds and cards, adding a contemporary touch.
hi-fi Prototype
After gathering and analyzing feedback from usability studies, key iterations were made to the high-fidelity prototype of PetMach. Accessibility was improved, and interactive elements were optimized by incorporating more intuitive buttons and immediate visual feedback to enhance navigation. Additionally, high-quality images and dynamic graphic elements were integrated to highlight essential information and guide users throughout the adoption process.
Although the "match" functionality was not implemented in this version, users were thoroughly introduced to its logic. They were shown how each pet is profiled based on characteristics such as personality, energy level, and special needs, and how this data would be matched with adopters' preferences and requirements to provide personalized recommendations.
The final high-fidelity prototype of PetMach integrates more intuitive user flows that streamline navigation, pet selection, and each stage of the adoption process. These improvements allow users to quickly find compatible pets, understand the adoption journey, and access post-adoption resources, ensuring a seamless, personalized experience aligned with their needs and expectations.
Personalized Adoption Process
PetMatch Refuge offers a simple, efficient, and tailored linear adoption flow that adapts to each user’s specific needs, from the homepage to the final adoption confirmation. The platform emphasizes the importance of matching with the ideal pet, allowing adopters to filter options and access detailed profiles intuitively.
Your Profile
Create and manage a personal profile for full control over the adoption process. With this profile, adopters can save favorite pets, track their applications, and manage purchases in the virtual store. Additionally, they can engage with the adopter community, fostering trust and strengthening their overall experience.
Explore Freely
PetMatch is designed for users to browse all available pet profiles without restrictions. With a clear layout and interactive filters, users can quickly find options that match their preferences. The intuitive structure enables smooth and continuous exploration, making it easier to compare pets and make informed decisions.
Fixed Menu
A strategically placed fixed menu in the upper right corner ensures users always have quick access to key sections: Home, Adopt, Post-Adoption, Support Us, About Us, Cart, and Profile. This fixed navigation element enhances usability, allowing seamless movement between sections, regardless of where the user is in the process.
Fully Responsive
PetMatch is fully responsive, ensuring a seamless and optimized user experience across all devices. The adaptable layout and optimized interactive elements present information clearly, maintaining accessibility and ease of use in all contexts.
Everything You Need After Adoption
PetMatch offers a virtual store with accessories, a directory of veterinarians, and a network of pet food suppliers, all aimed at supporting pet welfare and sustaining the shelter. This integrated ecosystem allows adopters to access services and products that facilitate ongoing care.
Dogs, Cats, and More
We believe every living being deserves a second chance. PetMatch ensures that each pet undergoes a proper adoption process, optimizing compatibility with adopters and promoting a safe, responsible environment with information adapted to regional regulations and requirements.
Accessibility Considerations
Smart Transitions for Clear Navigation
We implement smooth and visually intuitive transitions when navigating between key sections (e.g., from Home to "Adopt" or "Post-Adoption"). This ensures you always know where you are in the process, enhancing orientation and reducing the risk of getting lost.
Clear Iconography and Alternative Text
We use universal icons paired with alternative text for images and descriptive titles. This ensures that if you use screen readers or have visual impairments, you can access all essential information without missing any details.
Immediate Visual Feedback
Every key action, such as scheduling an appointment or submitting an adoption form, is accompanied by visual cues and confirmation messages. This reinforces confidence and ensures that the system has successfully registered your interaction.
Impact
PetMatch transforms the adoption process by integrating an intelligent compatibility system, allowing users to find their ideal pet based on personal preferences and compatibility with their current pets. This functionality not only streamlines adoption but also fosters greater confidence and security in decision-making. The platform goes beyond providing detailed information about each animal—it creates an emotional connection from the very first moment. Additionally, it offers post-adoption resources, accessories, food, and veterinary services.
"It's really useful; all the information is here, and that’s important because I have a cat—I need to know they'll get along with the one I adopt."
"Everything is very specific because I can select my pet’s characteristics to find a new one."— User quotes.
What I learned
Designing PetMatch allowed me to explore new ways to optimize visual space on a website, adapting to user needs and different devices. I learned that the process of iteration and user testing is essential to refining the navigation experience and reinforcing the product’s emotional value. Additionally, working with a responsive design presented not only technical challenges but also valuable insights into how changes in size and layout impact perception and usability. Seeing users' excitement as the compatibility system simplified their adoption process reaffirmed the importance of designing solutions that are not only functional but also create a positive and meaningful impact on their lives.
Next Steps
Develop the Compatibility Feature
Implement a matching system that evaluates compatibility between adopters, their current pets, and animals available for adoption. This enhancement will provide more accurate recommendations and facilitate well-informed decisions, ultimately increasing the success rate of adoptions.
Conduct Usability Testing for the Matching System
Once the system is developed, real-user testing will be essential to assess its effectiveness. This will ensure that the adoption experience remains intuitive and that recommendations are accurate and reliable.
Explore New Post-Adoption Support Opportunities
Expand the platform’s functionalities to strengthen the adopter community by offering additional resources and guidance that help new pets adjust to their homes more smoothly.