PetSelect
About
the project
PetSelect is a non-profit organization that rescues homeless animals and connects them with loving, trustworthy adopters. We also support pet breeders in responsibly finding the right homes for their animals, ensuring every pet is placed in a safe and caring environment. Today, countless animals roam the streets, facing danger and uncertainty.
At PetSelect, we prioritize pets from owners and those in need, striving to help every animal find a safe and loving home.
September 2022 - October 2022
Project Duration
UXR & UI/UX Designer
Role
Figma
Tool
PetSelect
Many pet lovers face challenges finding an adoption website that meets their needs with a straightforward and hassle-free process. Additionally, there is a need to help homeless animals find safe and loving homes.
Goal
PetSelect strives to be the trusted adoption platform where pet lovers can rely on a transparent process and enjoy a seamless, user-friendly experience, ensuring they are not just adopting but also helping these animals find a loving home and family.
User Research
I conducted user interviews to identify patterns and similarities in users' needs and preferences while uncovering key pain points. The study involved six participants divided into two groups: three pet owners and three individuals looking to adopt. I created an empathy map to gain deeper insights, highlighting key findings.
Some users are unaware of existing pet adoption websites.
Others find these platforms inactive or limited to specific locations, making it difficult for users who prefer to adopt pets nearby.
Most users are significantly affected by the distance of adoption and strongly prefer adopting pets from their local area.
Some users who want to adopt have not experienced using a website for the adoption process; instead, they do it manually, which often leads to scams or no-shows.
Pain Points
Key Pain Points for Pet Owners:
Some pet owners who want to rehome their pets struggle to find interested adopters and have difficulty keeping all their pets without help.
Pet breeders face challenges distributing their pets because some adopters cancel or fail to attend scheduled meet-ups.
Key Pain Points for People Who Want to Adopt Pets:
Some pet lovers are looking for free pets for adoption and don't have a big budget for expensive ones.
Most users are more focused on adopting a pet and are not concerned with or limiting themselves to specific breeds.
Users often search for pet adoption sites and want to adopt a pet quickly and from nearby locations.
Many users find most adoption processes or pet owners through Facebook groups.
Empathy Maps
User Personas
Problem Statement
Dan is a busy self-employed entrepreneur who needs a simple website experience to connect with potential pet adopters, as searching multiple platforms consumes too much of his time. Meanwhile, Andrea is a full-time student who needs an easy-to-use platform to adopt a pet from a nearby location, as she doesn’t have the time to travel long distances.
Possible Solution
Suppose we create a simple and intuitive platform that centralizes pet adoption needs, allowing breeders like Dan to efficiently manage and connect with adopters, while enabling users like Andrea to find pets nearby easily. In that case, both user groups will experience greater convenience, reduced effort, and increased satisfaction in their adoption journeys.
Competitive Analysis
How Might We - Pet Owners
How might we design a platform that simplifies the process for pet breeders like Dan to connect with potential adopters efficiently?
How Might We - Pet Seekers
How might we ensure the platform provides a seamless experience for users like Andrea to find and adopt pets from nearby locations?
Customer Journey Map
Storyboard
User Flow
Sitemap
The sitemap phase of PetSelect focuses on organizing and structuring the website's content to ensure easy navigation and accessibility. By mapping out the key sections and user flows, we aim to create a clear and intuitive pathway for users to find, adopt, and connect with pets effortlessly.
Low-fidelity Wireframes
The paper and low-fi wireframes phase of PetSelect involves sketching basic layouts to visualize key pages and user flows. This approach helps us focus on structure and functionality before moving on to more detailed designs.
Design System
The UI design emphasizes a clean and intuitive layout to enhance the user experience.
The color scheme features light coral pink, light blue, and light yellow, chosen to evoke warmth, trust, and positivity.
These soft, inviting colors create a friendly and approachable atmosphere, making the platform feel welcoming and user-friendly.
High-Fidelity Prototype
High-fidelity prototypes are detailed, interactive designs that closely resemble the final product. They include refined visuals, typography, and color schemes, offering a realistic user interface representation. Before development, I used these prototypes to test functionality, interactions, and overall user experience.
Usability Study
The usability phase focuses on testing the prototype with real users to identify any issues or pain points. By observing how users interact with the design, we gather valuable feedback to improve the website's functionality, ease of use, and overall user experience.
study type: moderated usability study
location: remote, Philippines
participants: 6 participants
length: 30-40 minutes
Process
Findings
I conducted usability testing using the low-fi prototype, gathering feedback from pet-loving friends involved in adoption and distribution. Their insights offered valuable perspectives on the design and user experience.
Simplicity: Users prefer a familiar web design that is easy to navigate and use.
Visuals: Users prefer images that convey the content or message at a glance.
Ease of use: Users expect more user-friendly interactions, with minimal animation and straightforward, intuitive navigation.
Mockup
The header was updated to a background, making it more visually appealing and attention-grabbing.
This section includes a detailed characteristic feature that enables users to specify the traits they want in a pet. I added a search bar for those seeking a more straightforward adoption experience.
Final Design: Homepage
The homepage serves as the website's core, where users decide whether to stay or leave. To make it more engaging, I applied a vibrant yet straightforward style guide featuring three primary colors, adding energy and life to the page.
Desktop
Mobile
Final Design: Adoption Page
After selecting a pet to adopt, users are directed to the pet profile page, where they can complete a form to schedule a video call and arrange a visit.
Final Design: Donation Page
PetSelect is a non-profit organization dedicated to rehoming beloved pets. To support our mission, I added a donation page where users can contribute to the organization, helping us continue our work in assisting pets and pet lovers.
Final Design: Contact Page
PetSelect is a non-profit organization dedicated to rehoming beloved pets. To support our mission, I added a donation page where users can contribute to the organization, helping us continue our work in assisting pets and pet lovers.
Takeaways
Users can breed their pets and share them with others who may not be able to afford expensive ones. We also support pet lovers who enjoy having pets and are open to rehoming them.
Our target users have expressed that the most valuable feature of this website is pet sourcing. PetSelect handles connecting with pet owners looking to rehome their pets, allowing users to select their desired pets from those available in their local area.
Impact
Next Steps
Interview users of other pet adoption websites to identify their pain points and conduct a case study to analyze their challenges and opportunities for improvement.
Learnings
I’ve learned that user research is a complex process that requires a deep understanding of users’ needs to create a website or app that truly enhances their experience.
This applies not only in the digital space but also in real-life interactions. The entire process and experience must be seamless and intuitive for all users.
Enhance the website's responsiveness to ensure seamless performance across all devices.
Conduct additional user research and usability testing to assess website and mobile experiences.
Thank you for making it this far! I hope you enjoyed reading it and found it insightful!