Redesigning the Petco Mexico home page to start with the pet

The home page is the highest-traffic page on the site and gets three kinds of visit at once: people who already know what they want, people who arrive for a promotion and people who are just browsing. Since most traffic is mobile, the design was done at 393 px first.

The benchmark, which included Chewy, Petco US, PetSmart, Petz, Zooplus and Pets at Home among other brands, revealed four gaps in the current home page:

1. There is no visible value proposition.

2. There is no species selector in the body of the page.

3. Services and the loyalty program sit at the very bottom.

4. The page relies on a crowded hero and is far too long.

There are five archetypes, still to be validated with analytics: quick repurchase, deal hunter, first-time pet parent, minority-species owner and services user.

“Users identify themselves first by their pet and only then by product category.”

Pet parents browsing on their phones need to get quickly to the product, promotion or service for their pet. Today the home page makes them scroll through generic content, with no entry point by species and with services out of sight.

1. How might we take users to their species category in one tap?

2. How might we promote the App, Easy Buy and services without getting in the way of people who came to shop?

3. How might we refresh the home page every month without redesigning it?

4. How might we make it usable for everyone, including people who use a screen reader, keyboard or zoom?

The metrics that track the outcome are home page CTR, clicks on the species selector, scroll depth before the first click, service appointments that start on the home page, and conversion.

“Your best friend first, everything else after.”

The home page works as a four-stage funnel: identify, explore, accompany and build trust.

1. The species selector moves up to the first screen.

2. There are two ways to explore: by category, for experienced users, and by life stage, for first-time pet parents.

3. Carousels with the next card peeking in show a lot of content in little height.

4. The structure is fixed and seasonal content lives in replaceable slots.

The mockup has 16 sections across 5,916 px, with 16 px margins, a 2-column grid and 8 carousels. It reuses components from the Petco design system (Button, Service Tile, Snackbar, Rating and Footer) and adds three new ones: Promo Tile, Life-stage Tile and Category Bento.

The visual system uses navy #00205B for text and backgrounds, yellow #FFD405 for the shopping CTA, the Petco Circular CAP typeface and 48 px tall pill buttons.

The target is WCAG 2.2 level AA. Accessibility was treated as part of the design from the start, not as a fix at the end.

Already solved in the mockup:

The review found ten pending adjustments:

There are four evaluation methods:

1. Usability testing with 5 to 8 pet parents per archetype, including at least one screen reader user (VoiceOver or TalkBack).

2. A/B test against the current home page with 50% of mobile traffic.

3. Heatmaps.

4. Automated audit with axe or Lighthouse, plus a manual keyboard review.

The project is in pre-launch, so the figures in this case describe its scope, not its impact, and this stage is an evaluation plan.

Next steps, in order:

1. Design the tablet and desktop breakpoints.

2. Apply the accessibility adjustments.

3. Build the clickable prototype for testing.

4. Publish the new components to the library so Petco Chile can reuse them.

5. Launch the A/B test and review KPIs at 2 and 4 weeks.