Case Study
Floofer
Swipe. Match. Save a life. An adoption app that surfaces the dogs closest to running out of time.
- Client
- Personal product — in development
- Role
- Product Designer & Developer
- Timeline
- 2026 – In development
- Team
- Solo — product, design system, and front end
The Challenge
Adoption sites rank dogs by recency and photogenics — which buries the dogs at highest euthanasia risk exactly when visibility matters most. Floofer inverts that: the deck surfaces at-risk dogs first, each carrying a visible days-remaining badge.
The second inversion: match on fit, not cuteness. Sixty seconds of onboarding — home, yard, kids, other pets, experience — lets the app rank dogs by how well they'd actually fit your home.
What I Did
01 Urgency-first discovery
Time-critical dogs get the same shelf position as every other listing.
A swipe deck ordered by risk, with a prominent countdown badge on every at-risk profile — chosen specifically because the RescueGroups.org API exposes euthanasia-date fields most aggregators ignore.
02 A real design system first
Solo side projects usually skip the system and pay for it at every screen.
A full Figma library built before the screens: variables with dark/light modes mapped to CSS custom properties, and components for cards, chips, badges, pickers, navigation, and empty states — the app is assembled from it, not drawn ad hoc.
03 Kind interaction rules
One mis-tap on a 'pass' is a dog someone never sees again.
No destructive one-tap actions, full-screen pickers instead of fiddly dropdowns, and compact cards tuned through repeated hands-on preview passes.
How It Was Validated
- Playwright smoke suite covering the core flows
- Iterative element-by-element UX passes in live preview
- Server-side proxies built for RescueGroups.org and Petfinder, with demo data powering development
After Launch
- Next: live shelter data keys, then a public beta deploy
- Design system documented with a full rebuild procedure in the repo
The Outcome
An app with a thesis: visibility should follow urgency, and matches should follow fit. Built system-first — the Figma library and its dark/light token modes came before the first screen, and every component in the app traces back to it.