Client – Nestlé Purina | Date – Mar → Jun 2025 | Role – Lead UX/Product Designer | Team – PO, PM, FE & BE Devs, Copywriter, QA
01 ‒ Context
Purina’s litter catalogue is vast—great for choice, terrible for indecisive shoppers. We set out to add a two‑minute, six‑question wizard that would:
- steer hesitant users to three clear “Best Match” litters with rationale
- build a reusable component library—every color and style mapped to Figma variables that mirror code tokens—so any Purina brand can apply its theme and ship instantly
- arrive in dev sprint 1 as a code‑ready prototype with micro‑interactions baked in
02 ‒ Constraints & Success Markers
- Lightning‑fast flow — median time under two minutes (validated in usability dry‑run).
- Explain the “why” — each recommendation carries a plain‑language rationale to build trust.
- Token‑driven theming — every color & style is a Figma variable linked 1‑to‑1 with code tokens; a palette swap instantly re‑skins the wizard for any Purina brand.
- Un‑biased prioritisation — capture each user’s personal priorities without steering them toward a preset answer.
03 ‒ Design Moves at a Glance
Un‑biased prioritisation
Explored six drag‑and‑drop patterns, selected the variant that meets WCAG AAA and lets users rank traits without copy bias.
Rapid dev hand‑off
Exported runnable HTML/CSS via Figma Make; devs received a micro‑interaction‑ready kit in sprint 1.
Lightning‑fast flow
Sketched low‑fi screens, timed dry‑runs under two minutes.
Token‑driven theming
Built a themeable component library; every style is a Figma variable mapped 1‑to‑1 with code tokens. Swap one palette row, wizard re‑skins for any Purina brand.
04 ‒ Component Deep‑Dive: Ranking List
Our most complex piece—and the heart of “un‑biased prioritisation”—was a drag‑and‑drop list that lets users rank what matters (odor, clumping, tracking, price) without leading copy.
- Exploration rounds – six patterns: grip handles, arrow buttons, hybrid tap‑to‑rank. We timed thumb reach and error rate on each.
- Chosen variant – large grip handle + arrow buttons; 44 px targets, live numbering; passes WCAG AAA for contrast and touch.
- Micro‑interactions – subtle spring easing on reorder, keyboard focus ring, Escape to cancel move.
- Outcome – 95 % first‑try success in hallway tests, 0 accessibility flags in QA.
Visual: [IMG_EXPLORATIONS] (exploration montage) + [GIF_CODE_PREVIEW] (final variant live in code preview)
05 ‒ Experience Walkthrough (Showing the "Why")
- Warm welcome – intro splash (Home screen)
- Six guided cards – name, age picker, scent preference, ranking list, litter‑robot check, cat count
- Results carousel – swipeable cards display the “Best Match” tag and a short paragraph explaining exactly why each litter fits the user’s ranked priorities.
(Embed Figma prototype beneath a “Try the wizard” button if desired.)
05 ‒ Validation & Readiness
“This was one of the most fun and well‑made designs I’ve ever worked on. The documentation was rock‑solid, and the dev handoff couldn’t have been smoother.”
– Front‑end Developer, Sprint Retro
Usability Dry‑Run (20 mobile participants)
- 80 % rated the flow 4 or 5 / 5 for clarity
- 90 % said they would trust the recommendations
- Median completion time: 1 min 43 sec
QA Status (Sprint 5)
- 0 critical, 2 minor visual bugs open
- Accessibility checks passed WCAG AA sizing & contrast
Launch Readiness
- Code merged to staging; awaiting final business sign‑off
- Marketing team prepping A/B test versus existing catalogue path
06 ‒ Toolbox
Figma • Figma Make • Material UI • UserTesting • Jira • Confluence
TL;DR
A six‑card, two‑minute wizard that complements Purina’s catalogue, turning hesitant scrollers into confident buyers—ready for any pet brand with a single token swap.