Diseñando el sistema de campaña de Hot Sale 2026
Ocho landings publicadas a 1,728 px, cuatro segmentos por mascota por dos bloques de vigencia, y el resultado: la landing con mayor conversión de Petco México en 2026.
- Rol
- Diseño UX/UI · de extremo a extremo
- Periodo
- Mayo 2026 · publicada y cerrada
- Volumen
- 8 landings a 1,728 px
- Herramienta
- Figma
landings publicadas
segmentos por mascota
bloques de vigencia independientes
veces se repite el ritmo por página
Empatizar
El usuario no aprende: localiza
La landing con mayor conversión de Petco México en 2026
Hot Sale no es una compra normal con descuento, sino otro modo de comprar. El usuario llega:
Con poco tiempo, así que no explora: ejecuta.
Comparando contra otras tiendas en pestañas abiertas.
Con miedo a perderse la oferta.
“En una campaña de tiempo limitado, el usuario no aprende, localiza. Quiere confirmar en menos de 3 segundos que la oferta aplica a su mascota y encontrar la ruta más corta al producto.”
Por eso esta pieza no argumenta, señaliza. Es lo contrario de una landing editorial.
Definir
Confirmar de inmediato que la oferta es para su mascota
Un tutor que llega a Hot Sale con la intención de compra ya formada necesita confirmar de inmediato que la promoción aplica a su mascota, porque está comparando contra otros retailers y abandona si tiene que buscar.
¿Cómo hacemos que cada tutor reconozca su oferta en el primer pantallazo?
¿Cómo acortamos al mínimo la ruta de la landing al carrito?
¿Cómo damos entrada propia a mascotas no convencionales sin hacer una campaña aparte?
Idear
Cuatro landings en vez de una
| Dirección | Decisión |
|---|---|
| Landing única con filtros | Descartada: obliga a filtrar antes de ver la oferta. |
| Landing única con anclas | Descartada: página gigante y diferencial diluido. |
| 4 landings + switcher persistente | Elegida: el usuario llega ya filtrado desde el medio. |
El costo de la opción elegida era cuatro veces la producción. Se resolvió con:
Una plantilla única de banner, con slot de imagen y barra de título, legal y CTA, en 2 temas y 2 alturas.
Una librería propia de componentes.
Dos bloques de vigencia independientes, en lugar de editar la campaña en vivo.
El sistema
Un ritmo de tres tiempos, repetido tres veces
Toda la página es un ritmo de tres tiempos que se repite tres veces, sin argumentación entre bloques:
Diferencial
Banner con %
Ruta a producto
Marcas o carrusel
Eliminador de objeción
MSI, formas de pago, atención 24 h, devolución
Se repite tres veces por página, sin argumentación entre bloques.
Las piezas clave son:
Hero con «hasta 40% + 5% extra por cada $1,000».
Switcher de mascota persistente (Alimento, Perro, Gato y Pequeñas mascotas).
Marcas destacadas.
Banda de MSI.
Garantía de devolución.
Landing Petco Zoo con subnavegación de 4 especies.
Bloque SEO al pie.
Accesibilidad
Revisión WCAG 2.2 AA post-campaña
Es una revisión post-campaña contra WCAG 2.2 nivel AA. La campaña ya cerró, así que sirve como insumo para la próxima.
Lo que el sistema ya hacía bien:
| Criterio | Cómo |
|---|---|
| 1.4.5 Imágenes de texto | El banner separa la imagen de la barra de título, legal y CTA, así que la oferta y las condiciones pueden ir en texto vivo. |
| 3.2.3 / 3.2.4 Navegación y nombres consistentes | El switcher está en la misma posición en las 4 landings y el CTA siempre dice «Ver promoción». Eso ayuda a usuarios con discapacidad cognitiva o que usan lector de pantalla. |
| 1.3.1 Información y relaciones | El ritmo repetido da una estructura predecible que se puede navegar por encabezados. |
| 1.4.3 Contraste sobre imagen | Las pruebas de saturación de fondo (Saturadas, Light y Ultralight) buscaban que el producto se leyera sin perder el rojo. Es el mismo criterio que pide WCAG para texto sobre imagen. |
Ajustes para Buen Fin y Hot Sale 2027:
| Criterio | Hallazgo | Ajuste |
|---|---|---|
| 1.4.3 Contraste | El texto blanco sobre el rojo de campaña tiende a quedar cerca o debajo de 4.5:1. Por ejemplo, #ED1C24 da ≈ 4.4:1. | Validar el rojo exacto. Usarlo detrás de titulares grandes y poner legales y texto chico sobre navy o blanco. |
| 2.4.4 Propósito del enlace | Un solo CTA, «Ver promoción», repetido en todos los banners. | Mantener el texto visible y agregar un aria-label con contexto, por ejemplo «Ver promoción de 25% en camas para gato». |
| 4.1.2 / 1.3.1 Switcher | Es la navegación entre las 4 landings. | Marcarlo como nav con aria-current="page" en la landing activa, sin depender solo del color. |
| 1.1.1 Contenido no textual | Hay logos de marcas destacadas, sello de Hot Sale y logos de formas de pago. | Texto alternativo con el nombre de la marca o el método de pago. |
| 2.5.7 / 2.1.1 Carruseles | Las bandas de productos destacados se usan con swipe. | Agregar flechas o permitir el foco por card. |
| 1.4.4 Redimensionar texto | Los legales del banner suelen ser muy chicos. | Mínimo de 12 px y probarlos al 200%. |
| 2.4.1 Saltar bloques | Son páginas largas (Gato mide 11,340 px) con un bloque SEO al final. | Agregar un enlace «Saltar al contenido» y encabezados por bloque para navegar rápido. |
| Atención 24 h | El teléfono es un eliminador de objeción. | Hacerlo un enlace tel: tocable en mobile, con un área táctil de al menos 24 px. |
Resultados
La landing con mayor conversión del año
Fue la landing con mayor conversión del año. El reto ahora es saber qué decisión lo produjo.
Las 4 landings simultáneas forman un cuasi-experimento: mismo tráfico y mismo periodo, con estructuras distintas.
| Análisis | Qué responde |
|---|---|
| Longitud vs. conversión (Gato, 11,340 px, contra Petco Zoo, 7,122 px) | ¿Hay un punto de corte en la longitud? |
| Uso del switcher | Si el uso es bajo, la segmentación de medios acertó. Si es alto, el usuario está corrigiendo el aterrizaje a mano. |
| CTR por posición del banner | Si el tercer banner rinde parecido al primero, la repetición se justifica. Si cae, se recuperan unos 3,000 px. |
| Petco Zoo | ¿Se repite la entrada para mascotas no convencionales? |
Condición para medir: el identificador de landing debe ir en todos los eventos desde el día uno.
Playbook
Playbook para 2027
Lo que se sistematiza para 2027:
Segmentación por mascota desde el aterrizaje, con switcher persistente.
Ritmo de tres tiempos repetido: diferencial, ruta a producto y eliminador de objeción.
CTA único, «Ver promoción», con aria-label contextual.
Eliminadores de objeción en este orden: MSI, formas de pago, atención 24 h.
Garantía de devolución antes del cierre.
Bloque SEO al pie.
Entrada dedicada a mascotas no convencionales.
Bloques independientes por vigencia.
Plantilla única de banner con legal en texto vivo y contraste validado contra el rojo de campaña.
¡Gracias por ver!
¿Ver otro proyecto?