CJ Williams ← All Work

Flagship Case Study

Floofr

Match. Meet. Save a life. A product built so the dogs closest to running out of time get seen first.

Floofr
Client
Personal product, in active development — re-homing dogs at the highest risk of euthanization, surfacing at-risk animals first from no-kill shelters, fosters, individual homes, and pet retirement communities
Role
Founder — Product, Design & Engineering
Timeline
Jul 2026 – Present
Team
Solo: product strategy, design system, front end, and testing
Product StrategyProduct DesignDesign SystemsFigmaNuxt 3 DevelopmentTesting & CI

The Challenge

Adoption platforms sort dogs by recency and photogenics — which buries the animals closest to euthanasia exactly when visibility matters most. Floofr exists to invert that: at-risk dogs always surface first, sorted by days remaining. The data source was chosen for the mission — RescueGroups.org exposes real euthanasia-risk fields that mainstream aggregators ignore.

The second inversion is matching on fit instead of looks. Sixty seconds of onboarding feeds a five-axis compatibility model — energy, space, social needs, alone time, and training — scored between each dog's needs and the adopter's actual household, with a live match percentage everywhere a dog appears. A cute photo gets a dog clicked; a real fit gets a dog kept.

It's also a proof of range: one person carrying product strategy, a tokenized design system, a shipped Nuxt application, live shelter-API integrations, and an automated test suite — the full arc this portfolio is about.

What I Did

01 Urgency-First Discovery

Time-critical dogs get the same shelf position as every other listing, on every major platform.

The match deck deals at-risk dogs first, sorted by days remaining, each carrying a countdown badge. The map view tells the same story spatially — pulsing red pins for at-risk dogs, with a one-tap at-risk-only filter.

The deck — Bruno, 5 days left, dealt first
The deck — Bruno, 5 days left, dealt first

02 Pentagon Matching

“Good with kids” checkboxes don't predict whether a dog thrives in a fifth-floor walk-up with a cat and a 60-hour work week.

A five-axis compatibility model — energy, space, social, solo time, training — scored between each dog's needs and the household's answers, rendered as an overlaid pentagon chart on every bio and a live match ring on every card.

The pentagon — a dog's needs overlaid on your home's reality
The pentagon — a dog's needs overlaid on your home's reality

03 A Design System Generated From Code

Solo products drift: the app evolves and the design file fossilizes.

The Figma library is rebuilt from the shipped Nuxt codebase — 20 color variables in dark/light modes, layout and radius tokens, 9 text styles, and every component from icons to the deck card bound to variables with zero raw hex. The system is documented in the repo with a full rebuild procedure, so code stays the source of truth.

The component sheet — chips, deciders, facet triggers, risk badges, match rings, and the pentagon, all token-bound
The component sheet — chips, deciders, facet triggers, risk badges, match rings, and the pentagon, all token-bound

04 Flows That Respect the Stakes

One mis-tap on a pass is a dog someone never sees again — and adoption itself is a bureaucratic wall that loses adopters.

No destructive one-tap actions, full-screen pickers with predictive search, and flows that carry momentum past the match: in-app messaging with the rescue org, play-date scheduling, and Fast Pass — an adoption-readiness checklist that pre-clears an adopter before they fall for a dog.

Fast Pass — readiness checklist, so approval never races the clock
Fast Pass — readiness checklist, so approval never races the clock

05 Built Like a Product, Not a Prototype

Portfolio apps usually stop at the happy path on demo data.

Live integrations with RescueGroups.org and Petfinder behind a data-source toggle with demo fallback; role-based accounts for adopters, shelters, fosters, rehoming, and retirement communities; error monitoring; and CI that runs the full test suite and a production build on every push.

How It Was Validated

  • 85 unit tests across the matching engine, Fast Pass logic, play-date scheduling, and the shelter-API data mapper — all passing
  • Playwright smoke suite: landing conversion path, search deep-link into the filtered map, deck dealing, legal pages
  • CI runs vitest plus a full production build on every push and pull request
  • Screen-by-screen preview-driven UX passes on every surface

After Launch

  • Live shelter data behind a toggle — RescueGroups.org (euthanasia-risk fields) and Petfinder (largest inventory), with demo data fallback
  • Sentry error monitoring wired into the client
  • Next: live API keys, then public beta

The Outcome

5-axisPentagon compatibility matching between dog and household
89Automated tests — 85 unit + 4 end-to-end, on CI
2Live shelter APIs integrated behind one data toggle

Floofr is the portfolio in miniature: a mission worth building (visibility should follow urgency), a product thesis (match on fit, not cuteness), a design system rebuilt from shipped code, and the engineering discipline — tests, CI, monitoring, live data — to make it real. Built alone, end to end.

Wireframes & User Flow

The Design System

Hi-Fi Screens in Figma

Shipped — In the App