/ petinder online
May - November 2024
Website
From Pain Points to Purrfect Matches: A User-Centered Approach to Adoption
I worked as a UX/UI designer on a cross-functional team consisting of developers, UI/UX designers, a product manager, and the stakeholder. Working in sprints, I defined the overall design approach, ensuring that our solution aligned with both user needs and business goals. I collaborated closely with the team to structure the platform around the adoption process, focusing on accessibility, usability, and engagement.
Skills:
Figma
Design thinking
🚀 Great, let’s do it!
What is the project's goal?
This project is a web platform aimed at connecting pet owners, potential adopters, and animal shelters. Its purpose is to create a seamless link between those looking to adopt pets and shelters, services, and other organizations that support pet adoption.
The platform serves as a hub for fostering connections within the pet adoption ecosystem, simplifying the process of finding a suitable pet for potential adopters and increasing visibility for shelters and animal protection organizations.
The priority was to design a solution that bridge the gap between users and animal shelters, boosting pet adoptions through an online experience, through an attractive and fun design that is paired with an intuitive user experience.
Piecing It Together - first decisions
Initial research revealed key challenges in the pet adoption process. Potential adopters struggled to find pets that matched their preferences due to inefficient search tools, while shelters faced difficulties in managing pet profiles and maintaining updated listings.
We hypothesized that improving search filters and streamlining the profile management system would create a more intuitive experience, allowing adopters to find pets more easily and shelters to update information with minimal effort. By addressing these pain points, we aimed to increase successful adoptions and strengthen the connection between adopters and shelters.
The reason behind: "this approach because…"
Given the nature of the platform—serving both adopters and shelters—it was crucial to structure the project in a way that prioritized user needs while ensuring scalability and ease of implementation. I decided to divide the work into main blocks, by Point of View (POV) related directly to the users, subdivided into:
-General POV: The main objective here was to ensure that the system integrated both visually and functionally, ensuring a seamless experience for both user types.-
-POV Adopter: focusing on making the search for pets easy and efficient by using key filters, providing clear information, and ensuring the adoption process was intuitive and accessible.
-POV Shelter: focusing on providing an optimized interface for shelters and owners to manage pet profiles efficiently, ensuring the information was visually appealing and easy to update.
🎨I believe understanding a project's scale and scenarios is key. And the best way? With images and colors!
When structuring the workflow, I knew that simply designing a visually appealing platform wouldn’t be enough. The key challenge was ensuring a seamless, intuitive, and efficient experience for both adopters and shelters.
Crafting a Scalable and Consistent Experience
Design System Development
In collaboration with the design team, we developed the foundation of a design system to maintain visual and functional consistency across the platform. We defined a style guide that included:
Consistent typography to improve readability and visual hierarchy.
Color palette aligned with the product's identity and the desired emotional experience.
Reusable components like buttons, cards, and forms to speed up development and ensure uniformity.
Interaction patterns to facilitate navigation and usability throughout the system.
It was one of the best decisions for the scalability and efficiency of the project, and allowed developers to work with standardized components, reducing implementation time and minimizing errors.
Additionally, by establishing clear rules for visual identity and interaction, we ensured a smooth and consistent user experience across all screens. This structured approach allowed for agile future iterations and improvements without compromising design integrity.
POV Adopter
To ensure adopters had an intuitive, frictionless experience, we made the following design decisions:
Optimized search: Implemented an advanced filtering system based on the pet’s age, size, and personality to ensure adopters could easily find a compatible pet.
Clear and attractive interface: Designed pet profile cards with key information visible immediately, including featured images and tags with essential characteristics.
Guided adoption process: Implemented structured navigation so users could easily follow clear steps from selecting a pet to contacting the shelter.
Visible calls to action: Highlighted buttons and interactive elements to facilitate communication with shelters and speed up the adoption process.
POV Shelter
For shelters posting pets, I prioritized ease of use and efficiency in profile management:
Optimized profile upload form: Created a profile upload system with predefined fields to streamline the process.
Visual and structural consistency: Ensured that pet profiles followed a standard format to make comparisons between options easy.
Control over data updates: Implemented options for shelters and owners to edit and update pet information without needing to create a new profile from scratch.
Bringing the Vision to Life
With the foundation set and key features refined, the final stage focused on polishing the experience through high-fidelity prototypes and real-world validation. This was crucial in ensuring that every interaction felt intuitive, every transition was smooth, and the adoption process was as seamless as possible.
📌Some of my first ideas! The mind-hand connection not only sparks creativity but also boosts problem-solving, learning, and innovative ideas.
One of the most significant constraints in designing the adopter's experience was the filter system—a core function of the platform. Recognizing its importance, we decided to implement two filter prototypes and planned A/B testing to select the most accepted model for iterative refinement.
⚠️ Result: The users preferred the option on the left (sidebar filter) for several usability and user experience reasons.
Why they preferred it? ✅
Greater accessibility and visibility
-The filter remained visible at all times, allowing users to adjust parameters without opening and closing a modal.
-It enabled real-time exploration without interrupting navigation.
More efficient user flow
-Users applied filters and saw results instantly without losing context.
-The process required fewer clicks and avoided unnecessary steps, improving efficiency.
Fewer interruptions and better orientation
-The modal proved to be disruptive, blocking the view and forcing users to close it before continuing.
-With the sidebar, users maintained control without losing sight of the content.
Refining the design at this stage wasn’t just about aesthetics—it was about validating the usability and efficiency of the platform. The goal was to confirm that all the design decisions made throughout the process translated into a frictionless, engaging experience for both adopters and shelters.
So, I focused on...
Finalized High-Fidelity Prototypes: I brought the UI to life by adding polished visual details, animations, and microinteractions that enhanced usability and engagement. These small but meaningful refinements made the adoption process feel natural and responsive.
Prepared Developer Handoff Documentation: I created detailed design specs, interaction guidelines, and component documentation to ensure a seamless transition from design to development. This step minimized misinterpretations and streamlined implementation.
Final Thoughts
It allowed me to apply my UX/UI skills to make a real impact in the community. The experience not only strengthened my empathy and attention to detail but also gave me the opportunity to better understand user needs and tackle complex challenges in a collaborative environment. Moreover, this project enriched both my professional and personal growth by combining my passion for design with a meaningful cause.
👀 A quick look at some screens!
Voices from My Journey
Meelis P · Founder
"Kathrine is just an amazing person. Her contribution to Petinder's new website has been crucial. She has been running the whole UX/UI part of it and also making sure that rest of the team members would be perfectly aligned. For sure I would recommend Kathrine to any new projects she's being considered for."
