the problem
Shelters are full, adoption pages are endless, and nobody finds each other.
Finding a pet to adopt can easily turn into an endless scroll through photos and profiles. But a cute face isn't necessarily enough to tell someone whether an animal is a good fit for their routine, home or experience.
I wanted to explore what adoption could look like if the experience focused a little less on browsing and a little more on compatibility.
Instead of starting with “which pet do you like?”, PetMatch starts with “what kind of pet fits your life?”
I came from veterinary medicine, so the idea of compatibility between an animal's needs and a family's routine was especially interesting to me. PetMatch started as a way to explore that idea through interface design.
the solution
Start with the person, then find the pet.
Instead of making the user browse every animal, PetMatch introduces a short form that collects information about their lifestyle and preferences.
The project also includes individual pet profiles, where users can find more information before deciding whether a match feels right.
Lifestyle questions
A short form about routine, living situation and experience with pets.
Pet profiles
A closer look at each animal, with information presented alongside their photos.
Interactive form
Client-side validation, phone number formatting and GET-based form submission using JavaScript.
Responsive interface
Layouts and components designed to work across different screen sizes.
building it from scratch
I handled the structure, styling and interactions myself, including form validation, dynamic modals, data retrieval and small UI interactions.
Some of the things I implemented:
- Form validation with RegExp
- Phone number masking
- Dynamic pet detail modals
- GET requests with URLSearchParams
- Animated counters using IntersectionObserver and requestAnimationFrame
- Responsive layouts with Flexbox and Grid
- Semantic HTML structure
- Reusable styling through CSS variables
tech
visual identity
PetMatch also gave me the opportunity to create the visual identity from scratch, including the colour palette, typography and custom illustrations.