Rediseñando el Home de Petco México para empezar por la mascota
Una mejora de producto existente: el Home de petco.com.mx rediseñado mobile-first, a partir de un benchmark de 12 marcas y una auditoría del Home vigente.
- Rol
- Diseño UX/UI
- Periodo
- Octubre 2026
- Alcance
- Mobile · 393 px · Figma
- Estado
- Pre-lanzamiento
marcas en el benchmark
secciones en la maqueta
de alto a 393 px de ancho
carruseles con peek
Empatizar
Tres visitas, un mismo Home
El Home es la página con más tráfico del sitio y recibe tres tipos de visita a la vez: quien ya sabe qué quiere, quien llega por una promoción y quien solo explora. Como la mayoría del tráfico es móvil, el diseño se hizo primero a 393 px.
El benchmark, con Chewy, Petco US, PetSmart, Petz, Zooplus y Pets at Home entre otras marcas, mostró cuatro brechas en el Home actual:
No hay una propuesta de valor visible.
No hay un selector de especie en el cuerpo de la página.
Los servicios y el programa de lealtad quedan al fondo.
La página depende de un hero muy cargado y es demasiado larga.
Los arquetipos, que todavía hay que validar con analítica, son cinco: recompra rápida, cazador de promoción, tutor primerizo, tutor de especie minoritaria y usuario de servicios.
“El usuario se identifica primero por su mascota y después por la categoría de producto.”
Definir
Llegar rápido a lo de su mascota
Los tutores que entran desde el celular necesitan llegar rápido al producto, la promoción o el servicio de su mascota. Hoy el Home los obliga a recorrer contenido genérico, sin una entrada por especie y con los servicios fuera de su vista.
¿Cómo llevamos al usuario a la categoría de su especie en un tap?
¿Cómo damos a conocer App, Easy Buy y servicios sin estorbar a quien viene a comprar?
¿Cómo hacemos que el Home se actualice cada mes sin rediseñarlo?
¿Cómo lo hacemos usable para todas las personas, incluidas las que usan lector de pantalla, teclado o zoom?
Las métricas que siguen el resultado son el CTR del Home, los clics en el selector de especie, la profundidad de scroll al primer clic, las citas de servicios originadas en el Home y la conversión.
Idear
Un embudo en cuatro etapas
“Primero tu mejor amigo, después todo lo demás.”
El Home funciona como un embudo de cuatro etapas: identificar, explorar, acompañar y dar confianza.
| Etapa | Bloques |
|---|---|
| Identificar | Buscador, Snackbar de Promociones, Hero y selector de especie |
| Explorar | Cards de bienvenida (Grooming, App, Easy Buy), bento de categorías, recomendados y colecciones |
| Acompañar | Entrada por etapa de vida, servicios con CTA directo y blog |
| Confianza | Garantías (cambios, envío, pago seguro) y footer |
El selector de especie sube al primer pantallazo.
Hay dos formas de explorar: por categoría, para el usuario experto, y por etapa de vida, para el primerizo.
Los carruseles con la siguiente card asomando (peek) permiten mostrar mucho contenido en poco alto.
La estructura es fija y el contenido de temporada vive en slots reemplazables.
Prototipar
16 secciones en 5,916 px
La maqueta tiene 16 secciones en 5,916 px, con margen de 16 px, grid de 2 columnas y 8 carruseles. Se reutilizaron componentes del design system de Petco (Button, Service Tile, Snackbar, Calificación y Footer) y se crearon tres nuevos: Promo Tile, Tile de etapa y Bento de categorías.
El sistema visual usa navy #00205B para texto y fondos, amarillo #FFD405 para el CTA de compra, la tipografía Petco Circular CAP y botones pill de 48 px de alto.
Accesibilidad
WCAG 2.2 AA desde el diseño
El objetivo es WCAG 2.2 nivel AA. La accesibilidad se trató como parte del diseño desde el inicio, no como un ajuste al final.
Esto ya está resuelto en la maqueta:
| Criterio | Cómo se resolvió |
|---|---|
| 1.4.3 Contraste de texto | Navy sobre blanco ≈ 15:1, navy sobre amarillo ≈ 10.7:1 y blanco sobre navy en tiles y botones. Todo supera 4.5:1. |
| 2.2.2 Pausar, detener, ocultar | El hero tiene botón de pausa. El resto de los carruseles no tiene autoplay. |
| 2.5.8 Tamaño del objetivo | Los CTAs en mobile miden 48 px, por encima del mínimo de 24 px y de la recomendación de 44 px. |
| 1.3.1 Información y relaciones | Cada sección tiene un título claro, lo que permite navegar por encabezados. |
| 1.4.1 Uso del color | El descuento se comunica con texto («30% OFF») y el precio anterior se muestra tachado, no solo con color. |
La revisión detectó diez ajustes pendientes:
| Criterio | Hallazgo | Ajuste |
|---|---|---|
| 1.4.3 Contraste | Gray_Text #7E7E7E sobre blanco da ≈ 4.0:1 y el placeholder #B2BAC6 ≈ 2:1. Ambos fallan. | Oscurecer el texto a #6B6B6B o más, y el placeholder hasta 4.5:1 o más. |
| 1.4.3 / 1.4.11 | Blue_Petco #6EDCFA sobre blanco tiene muy bajo contraste. | Usarlo solo como acento decorativo, nunca para texto ni para bordes de controles. |
| 1.4.5 Imágenes de texto | El hero lleva el titular, la vigencia y el CTA dentro del arte. | Pasar CTA y vigencia a texto real o, como mínimo, escribir un alt completo con la oferta y las fechas. |
| 2.4.4 Propósito del enlace | Hay muchos «Conoce más» repetidos. | Agregar un aria-label con contexto, por ejemplo «Conoce más sobre Grooming». |
| 2.5.7 / 2.1.1 Arrastre y teclado | Los carruseles dependen del swipe. | Agregar flechas o permitir el foco por card con Tab, y que el snap funcione con teclado. |
| 2.5.8 Tamaño del objetivo | Los puntos de paginación del hero son pequeños. | Dar a cada punto un área táctil de al menos 24 px. |
| 2.4.7 / 2.4.11 Foco visible | Falta definir el estado de foco, y el header fijo puede tapar el elemento enfocado. | Anillo de foco de 2 px de alto contraste y scroll-padding igual al alto del header. |
| 1.1.1 Contenido no textual | Hay fotos de especie, ícono de calificación con patitas y logos. | Texto alternativo en todas las imágenes y calificación anunciada como «4 de 5». |
| 1.4.10 / 1.4.4 Reflow y texto | El diseño está hecho a 393 px y el texto de los promo tiles mide 13.5 px. | Probar a 320 px y con texto al 200%. Subir el texto de los tiles a 14 px. |
| 2.3.3 Animación | El autoplay del hero se mueve solo. | Respetar prefers-reduced-motion y no iniciar el autoplay cuando esté activo. |
Evaluar
Cuatro hipótesis por medir
| Hipótesis | Medición |
|---|---|
| El selector de especie lleva a la categoría en 2 taps o menos | Clics y tiempo al primer clic |
| Las cards de bienvenida impulsan App, Easy Buy y Grooming | CTR y conversiones atribuidas |
| Subir los servicios aumenta las citas | Clics en «Agendar cita» |
| El Home nuevo reduce el scroll antes del primer clic | Profundidad de scroll |
Los métodos de evaluación son cuatro:
Test de usabilidad con 5 a 8 tutores por arquetipo, con al menos una persona usuaria de lector de pantalla (VoiceOver o TalkBack).
A/B contra el Home actual con el 50% del tráfico mobile.
Mapas de calor.
Auditoría automática con axe o Lighthouse, más una revisión manual con teclado.
El proyecto está en pre-lanzamiento, así que las cifras de este caso describen su alcance, no su impacto, y esta etapa es un plan de evaluación.
Implementar
Del handoff al A/B
Handoff
Comportamiento de los carruseles (snap, peek y controles accesibles), estados de botones (hover, pressed, focus y disabled), proporciones fijas por slot de imagen, y alt y aria-label documentados por componente.
Gobernanza
El hero cambia cada semana, los promo tiles cada mes y las fotos por temporada. Las cards de bienvenida, los servicios y las garantías son fijos.
Los siguientes pasos, en orden:
Diseñar los breakpoints de tablet y desktop.
Aplicar los ajustes de accesibilidad.
Armar el prototipo navegable para el test.
Publicar los componentes nuevos en la librería para reutilizarlos en Petco Chile.
Lanzar el A/B y revisar KPIs a las 2 y a las 4 semanas.
¡Gracias por ver!
¿Ver otro proyecto?