Helping Pets Find Their Forever Homes
Introduction
A responsive pet adoption platform designed to make finding and connecting with the right pet a simpler, more intuitive experience. I redesigned the journey from pet discovery to adoption, improving navigation, content organization, and consistency across desktop and mobile.
The Challenge
Problem
Finding the right pet should feel simple and personal, but the adoption experience can become difficult when users have to navigate cluttered interfaces, inconsistent information, and limited ways to evaluate pets.
The challenge was to create a more intuitive experience that helps people discover pets that match their preferences while making the adoption journey feel clearer and more engaging.
01 — Difficult discovery
Users had limited ways to narrow down pets based on their preferences.
02 — Fragmented information
Important pet details were not always presented in a clear, consistent way.
03 — Weak emotional connection
The experience focused more on listings than on helping users connect with individual pets.
Goal
Create a modern and intuitive adoption platform that helps users discover pets faster and increases adoption opportunities.
Deliverable
Research · User Flows · Wireframes · UX/UI Design · Responsive Prototype · Design System
Research
Research was conducted on competitor websites to identify strengths, weaknesses, and usability patterns. The findings helped inform key design decisions and highlight opportunities for improvement.
Key findings
- Adoption filters were often difficult to use. · Many websites lacked emotional storytelling.
- Navigation was inconsistent across platforms. · Mobile experiences were frequently outdated.
Wireframe
Mid-fidelity wireframe
I started creating outlines in desktop and responsive versions. The objective was to start with the sketch and improve with the development of the project.
Design System
I looked for inspiration in visual concepts that I thought would be ideal for the brand. A fun logo, color palette, components, and typography that would match perfectly with the proposal. This is the result:
Color palette
Primary colors
RGB: 255, 78, 66
CMYK: 0, 69, 74, 0
RGB: 170, 33, 29
CMYK: 0, 81, 83, 33
RGB: 24, 32, 239
CMYK: 90, 87, 0, 6
RGB: 255, 192, 36
CMYK: 0, 25, 86, 0
Neutral
RGB: 244, 244, 244
CMYK: 0, 0, 0, 4
Typography
Headline
Fredoka One Regular 30px
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !@#$%^&*()?";,
Headline
Avenir Medium 30px
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !@#$%^&*()?";,
Subheader
Avenir Medium 18px
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !@#$%^&*()?";,
Subheader
Avenir Medium 16px
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890 !@#$%^&*()?";,
Home page
Mobile
Impacts
Smart filters help users
find the right pet
more accurately
Intuitive navigation
guides users to their
perfect match
Accessible on any device,
so the search
never stops
Emotional design builds
the confidence to
take the next step