Adelantando el Buen Fin con toda la oferta en un bloque
Una landing de campaña y una intervención del Home dentro del sitio existente, en tres piezas: el Home intervenido, la landing de campaña y el tablero de componentes.
- Rol
- Diseño UX/UI
- Vigencia
- 9 al 12 de noviembre de 2026
- Alcance
- Mobile · 393 px · Figma
- Estado
- Pre-lanzamiento
secciones en el Home intervenido
de alto en el Home intervenido
de alto en la landing de campaña
estados del Category Drop
Empatizar
La primera pregunta es a qué le aplica
El Buen Fin es la temporada de mayor intención de compra del año, y en esos días todos los retailers compiten por el mismo usuario. La estrategia de Petco fue adelantarse: abrir sus descuentos antes, para captar la compra antes de que el presupuesto del usuario se reparta entre otras tiendas.
Por la experiencia de Hot Sale 2026 y del 13° Aniversario, sabemos que el usuario de temporada:
Llega desde mobile, por medios pagados, mailing o push.
Busca la mecánica (25%, 3x2, +5% Club Petco) antes que el producto.
Abandona si tiene que adivinar a qué categoría aplica cada promoción.
Los arquetipos son cinco: abastecedor de alimento, comprador de regalos y moda (3x2), tutor preventivo, tutor de especie minoritaria y miembro de Club Petco.
“La primera pregunta del usuario es «¿a qué le aplica?». Las condiciones que aparecen hasta el carrito generan fricción y abandono.”
Definir
Conectar cada mecánica con su categoría
Los tutores que entran desde el celular durante la campaña necesitan entender rápido qué descuento aplica a qué categoría para su mascota. Hoy las promociones de temporada se comunican como piezas sueltas, sin conectar cada mecánica con su categoría y sus condiciones.
¿Cómo mostramos todas las promociones por mascota sin hacer una landing interminable?
¿Cómo explicamos el 3x2 en el momento de la decisión, y no solo en los legales?
¿Cómo convertimos el Home en vitrina de campaña sin romper sus rutas habituales?
¿Cómo hacemos visibles a aves, peces, reptiles y pequeños mamíferos?
¿Cómo hacemos que todas las promociones sean comprensibles para personas con baja visión o que usan lector de pantalla?
Las métricas que siguen el resultado son el tráfico del Home a la landing, la interacción con el selector por mascota, la conversión de la landing, el porcentaje de órdenes con el 3x2 completo y la venta de Petco Zoo.
Idear
Una superficie anuncia, la otra convierte
“Adelantamos el mejor fin.”
El concepto se presenta como un acceso anticipado a los descuentos, y se reparte en dos superficies con trabajos distintos:
| Superficie | Rol |
|---|---|
| Home intervenido | Anunciar y distribuir. Conserva servicios, blog y garantías, y suma las piezas de campaña arriba del pliegue. |
| Landing de campaña | Convertir. Va directo a las ofertas por mascota, las marcas, las vitrinas por categoría y los medios de pago. |
Un componente central con estados en lugar de muchas secciones
El Category Drop ordena toda la oferta en 4 pestañas: Alimento, Perro, Gato y petco zoo.
Se descartaron los chips por tiempos de desarrollo
En su lugar se usó un acordeón por pestaña, que cumple la misma función y ya se podía desarrollar.
La mecánica se muestra en cada ítem
Los badges de 25% y 3x2 van sobre cada categoría, y las condiciones viven dentro de su pestaña, por ejemplo «Agrega 3 productos para aplicar el 3x2».
La campaña tiene un «modo Buen Fin»
Se usa rojo de campaña sobre navy: cambia el fondo, pero no el sistema de componentes.
Hay un bloque dedicado a especies minoritarias
«¡Sorprende a los más pequeños!» atiende a quien tiene aves, peces, reptiles o pequeños mamíferos.
Prototipar
Dos superficies y un componente central
Home intervenido: 20 secciones en 7,619 px. Las piezas de campaña son el snackbar, el showcase, las cards de 25% y 3x2, el Category Drop, el bloque de protección antiparasitaria y el grid de marcas. Los bloques fijos del Home se mantienen en versión roja.
Landing de campaña: 4,721 px. Incluye:
Un hero con la franja de legales en texto vivo.
El Category Drop.
5 vitrinas por categoría (Promo Tile seguido de Product Cards).
El banner de MSI.
Las garantías.
Botones flotantes PERRO y GATO.
El componente central es el Category Drop. Tiene 5 estados: cerrado, Alimento, Perro, Gato y petco zoo. Hay una sola pestaña abierta a la vez. La pestaña activa se funde con el panel navy, y cada grupo muestra círculos de categoría con badge, una nota de condiciones y un CTA.
Además, el tablero incluye componentes nuevos (Badge, Grid de marcas, Showcase ancho, Hero LP y Circular Item) y reutiliza componentes del design system (Promo Tile, Product Card, Service Tile y Footer).
El sistema visual de la campaña:
Rojo de campaña #ED1C24
Navy #00205B
Amarillo CTA #FFD405
Tipografía Petco Circular CAP
Accesibilidad
WCAG 2.2 AA en modo Buen Fin
El objetivo es WCAG 2.2 nivel AA, revisado sobre la maqueta del Home intervenido, la landing y el Category Drop.
Esto ya está resuelto en la maqueta:
| Criterio | Cómo se resolvió |
|---|---|
| 1.4.5 Imágenes de texto | Los legales, la vigencia y los límites de compra están en texto vivo, no dentro del arte. |
| 3.3.2 Etiquetas o instrucciones | Las condiciones (3x2, límites, exclusiones) se ven antes de la decisión, no hasta el carrito. |
| 1.4.1 Uso del color | La mecánica se comunica con texto («25%», «3x2»), no solo con color. |
| 2.2.2 Pausar, detener, ocultar | El showcase tiene botón de pausa. |
| 1.4.3 Contraste | Blanco sobre navy ≈ 15:1 y navy sobre amarillo ≈ 10.7:1. |
| 4.1.2 Nombre, función, valor | El drop está especificado como acordeón con aria-expanded. |
La revisión detectó doce ajustes pendientes:
| Criterio | Hallazgo | Ajuste |
|---|---|---|
| 1.4.3 Rojo de campaña | Texto blanco sobre el rojo #ED1C24 ≈ 4.4:1. Falla para texto normal; solo pasa en texto grande (≥ 18.66 px bold). | Usar el rojo solo detrás de titulares grandes y poner el texto chico sobre navy o blanco, u oscurecer el rojo a #D6141B o más. |
| 1.4.3 Badge «30% OFF» | Blanco sobre Red_Petco #FB4341 ≈ 3.5:1, con texto chico. | Oscurecer el fondo del badge o usar texto navy. |
| 1.4.3 Navy sobre rojo | Navy sobre rojo ≈ 3.5:1. | No usar texto navy sobre fondo rojo, salvo en titulares grandes. |
| 1.4.3 Patrón de rayos | El patrón de rayos detrás del texto vuelve variable el contraste. | Poner una capa sólida detrás del texto o dejar el patrón fuera del área de lectura. |
| 1.4.4 Redimensionar texto | Legales y nombres de producto a 11 px, y texto de Promo Tile a 12 px. | Subir a 12–14 px y probar el texto al 200% sin que se corte. |
| 1.4.1 / 4.1.2 Pestaña activa | La pestaña activa se distingue sobre todo por el color de fondo. | Rotar el chevron y anunciar «expandido» o «contraído». |
| 2.4.3 Orden del foco | Al abrir una pestaña, el panel empuja el contenido. | Mover el foco al primer elemento del panel y mantener un orden lógico al cerrarlo. |
| 2.4.11 Foco no oculto | Los botones flotantes PERRO y GATO y la navegación inferior fija pueden tapar el contenido enfocado. | Agregar scroll-padding-bottom igual a su alto y ocultar los flotantes cuando haya un CTA debajo. |
| 2.4.4 Propósito del enlace | «Ver productos» y «Conoce más» se repiten. | Agregar un aria-label con contexto, por ejemplo «Ver productos de 3x2 en juguetes». |
| 1.1.1 Contenido no textual | Hay fotos en los círculos, logos de marcas y medios de pago. | Texto alternativo en todos, y badges anunciados como «25% de descuento». |
| 2.5.7 / 2.1.1 Arrastre y teclado | Las vitrinas son carruseles que se usan con swipe. | Agregar flechas o permitir el foco por card. |
| 2.3.3 Animación | El drop cambia de altura con una transición. | Respetar prefers-reduced-motion. |
Evaluar
Cuatro hipótesis por medir
| Hipótesis | Medición |
|---|---|
| El Category Drop permite encontrar la oferta más rápido que una lista de secciones | Apertura de pestañas y tiempo al primer clic |
| Poner la condición del 3x2 dentro del tab aumenta las órdenes con el 3x2 completo | % de órdenes frente a Hot Sale 2026 |
| El tab petco zoo aumenta la venta de especies minoritarias | Clics y venta de Petco Zoo |
| Mostrar los límites antes del carrito reduce el abandono | Abandono en el paso de carrito y tickets de soporte |
Los métodos de evaluación son cuatro:
Test rápido con 5 usuarios sobre el prototipo del drop, con una prueba con lector de pantalla y otra solo con teclado.
Analítica por pestaña y por posición.
Mapas de calor.
Comparativo de cierre contra Hot Sale 2026.
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 9 de noviembre
Handoff
Comportamiento del drop (una pestaña a la vez, empuja el contenido, foco y aria-expanded), destino de cada círculo hacia la PLP filtrada, reglas de los botones flotantes, slots de assets y legales siempre en texto vivo.
Gobernanza
La estructura del drop se mantiene. Entre campañas solo cambian los productos, los badges, las notas, los artes y el color de fondo, y cada cambio de color se valida contra los contrastes de esta revisión.
Los siguientes pasos, en orden:
Aplicar los ajustes de contraste del rojo.
Publicar el Category Drop en la librería para el Buen Fin oficial y para Chile.
Construir el prototipo para el test.
Etiquetar la analítica antes del 9 de noviembre.
Diseñar la versión desktop.
¡Gracias por ver!
¿Ver otro proyecto?