Redesigning the purchase decision for cat litter
An improvement to an existing product: Petco Mexico's editorial category landing page, which gives shoppers buying criteria before the product listing.
- Role
- UX/UI design · end to end
- Year
- 2026
- Format
- Desktop at 1,728 px · with a mobile version
- Tools
- Figma · design system
modules on the landing page
directions evaluated
cat parents in the moderated test
tall, at 1,728 px wide
Empathize
Cat parents optimize the wrong variable
Cat litter is a frequent, low-involvement and highly price-sensitive purchase. Cat parents compare bags by price and weight, not by how long they last. The result is a sales mix weighted toward budget litter and very frequent repurchases that cat parents see as normal.
“Cat parents are not choosing badly out of carelessness. They are optimizing the wrong variable: they compare the price of the bag when what drives their spending and how the litter box smells is how long the litter lasts before a full change.”
There are four profiles:
The repeat buyer (primary POV).
The first-time cat parent, who doesn't know litter types exist.
The one who already tried switching and whose cat rejected it.
The senior cat's parent, with a history of urinary issues.
Define
Compare by monthly cost, not bag price
The problem is not the catalog or the price, but the unit of comparison.
“A cat parent who rebuys litter every one or two weeks needs to compare by monthly cost and duration, not by bag price. Today they overpay without noticing and live with a litter box that smells too soon.”
How might we make the monthly cost as visible as the bag price?
How might we give choosing criteria to people who don't know the litter types?
How might we take the risk out of trying a different litter?
How might we make the comparison clear for people who use a screen reader, keyboard or zoom too?
Stated risk: the whole argument rests on premium litter costing less per month. If sales data does not back it up, the problem has to be reframed.
Ideate
Four directions, one editorial contrast
I evaluated four directions:
| Direction | Decision |
|---|---|
| Interactive calculator | Dropped: high cost and an unvalidated premise. |
| Spec comparison table | Dropped: dense and hard to scan. |
| Editorial two-scenario contrast | Chosen: it changes the comparison variable in 3 seconds, with no interaction needed. |
| Yield label on the product card | Adopted as reinforcement at the moment of purchase. |
Prototype
From criteria to product, in eight modules
The landing page has 8 modules in this order: reframe, litter types, personal criteria, hard data, risk reduction and reassurance. The product always appears after the criteria that justify it.
| Module | Purpose |
|---|---|
| Price isn't everything | Contrasts budget against premium litter and highlights the “approximate duration”. |
| Premium litter types | Explains clay, silica and eco-friendly litter before naming any brand. |
| Things to consider | 8 factors cat parents select to build their profile without filling in a form. |
| Get to know each type | Tabs with a definition, benefits and a product carousel. |
| How long does each brand last? | Anchor module: an accordion with kg per month and replacement frequency. |
| Urinary health | Education on pH and blood in urine first, product after. |
| Gradual switch in 3 steps | Reduces the risk of switching. It is already used on 2 landing pages and is a candidate design system pattern. |
| Guarantees | 100% satisfaction and expert advice. |
Accessibility
WCAG 2.2 AA, from mockup to handoff
The target is WCAG 2.2 level AA.
Already solved in the mockup:
| Criterion | How it was solved |
|---|---|
| 1.4.1 Use of color | The 3 states of the urinary health monitor carry a text label as well as color. |
| 1.3.1 Info and relationships | The editorial structure has one heading per module and a clear hierarchy, so the page can be navigated by headings. |
| Cognitive load (supports 3.3.2) | The hard data sits in an accordion so the page isn't overloaded, and cat parents build their profile without a form. |
| 1.4.10 Reflow | There is a mobile version, so the content does not depend on the 1,728 px width. |
And still pending for handoff:
| Criterion | Risk | Fix |
|---|---|---|
| 4.1.2 Name, role, value | The tabs, the accordion and the 8 selectable factors are interactive components. | Tabs with role="tablist" and arrow-key navigation, the accordion with aria-expanded, and factors as buttons with aria-pressed. |
| 2.1.1 Keyboard / 2.4.7 Visible focus | Cat parents must be able to move through tabs, accordion and factors without a mouse. | Define a visible focus state (a 2 px high-contrast ring) on every control. |
| 1.3.1 Tabular data | The budget versus premium comparison and the kg-per-month yield are tabular data. | Mark them up as a table or definition list, so screen readers tie each attribute to its value. |
| 1.4.3 Contrast | The design system's secondary text gray (#7E7E7E) gives ≈ 4.0:1 on white. | If it is used for descriptions, darken it to 4.5:1 or more. The highlighted “duration” row must also pass against its background. |
| 1.1.1 Non-text content | There are benefit icons, product photos and litter type illustrations. | Descriptive alt on informative images and alt="" on decorative icons that already have text beside them. |
| 2.5.7 / 2.1.1 Dragging and keyboard | Each tab's product carousels are swipe-based. | Add arrows or allow focus per card. |
| 2.4.4 Link purpose | Product cards repeat the same CTAs. | Add an aria-label with the product or litter type name. |
Measure
One test for one question
There is one question: does reframing from “bag price” to “monthly cost” shift preference toward a longer-lasting litter?
The test is a remote moderated usability study with 5 cat parents who bought litter in the last 30 days: 2 single-cat, 2 multi-cat and 1 who already failed to switch. It closes with a question asked without the page in view. Ideally it also includes a screen reader user.
| If in the test… | Then |
|---|---|
| Nobody reaches the accordion | Back to Prototype: move the data higher on the page. |
| They still choose by bag price | Back to Define: the POV doesn't describe the real decision. |
| They open the accordion but the data means nothing to them | Back to Ideate: the problem is the data's format. |
The metric that matters is the change in the premium versus budget mix among users exposed to the landing page. If traffic goes up but the mix doesn't move, the page is being read but it isn't changing decisions.
Assumptions
Assumptions to validate
The yield figures must be validated with the category team.
The urinary health block needs veterinary review and probably a disclaimer.
Products and counts must come from the catalog, not from the mockup.
Thanks for watching!
See another project?