Rediseñando la decisión de compra de arena para gato
Landing editorial de categoría para Petco México que da criterio antes del listado: reencuadra la compra del precio de la bolsa al costo mensual real.
- Rol
- Diseñador UX/UI · de extremo a extremo
- Periodo
- 2026
- Tipo
- Mejora de producto existente
- Herramientas
- Figma · Design System
00 — Contexto
Una compra frecuente que se decide por el precio de la bolsa
La arena para gato es una compra de reposición frecuente, bajo involucramiento y alta sensibilidad al precio de anaquel. El tutor compara bolsas en el pasillo —o en el listado— por precio y por peso, no por rendimiento. La consecuencia comercial es un mix cargado hacia el escalón económico y una recompra corta que el propio tutor percibe como normal.
Diseñé una landing editorial de categoría para Petco México, a 1728 px de ancho y 6,908 px de alto, construida sobre componentes que ya existen en el design system. No es una página de oferta: su trabajo es dar criterio antes de que el tutor llegue al listado de producto.
La maqueta se construyó a partir de conocimiento de categoría y de negocio.
01 — Empatizar
El tutor optimiza la variable equivocada
“El tutor no está eligiendo mal por descuido: está optimizando la variable equivocada. Compara precio de bolsa cuando la variable que gobierna su gasto y su experiencia de olor es cuánto dura antes del recambio total.”
POV primario — el tutor que recompra
Recompra cada una o dos semanas y compara por precio de bolsa: paga de más sin notarlo y vive con un arenero que huele antes de tiempo.
El tutor primerizo
No sabe que existen tipos de arena, así que no tiene con qué elegir.
El que ya intentó cambiar
Probó otra arena y su gato la rechazó; ahora cambiar le parece un riesgo.
El tutor de gato senior
Su gato tiene antecedentes urinarios y necesita información de salud antes que producto.
02 — Definir
Comparar por costo mensual, no por precio de bolsa
No es un problema de catálogo ni de precio. Es un problema de unidad de comparación. De ahí salió el punto de vista que gobierna toda la página: un tutor que recompra arena cada una o dos semanas necesita comparar arenas por su costo y duración mensual, y no por el precio de la bolsa, porque paga de más sin notarlo y vive con un arenero que huele antes de tiempo.
- 01
¿Cómo podríamos hacer que el costo mensual real sea tan visible como el precio de la bolsa?
- 02
¿Cómo podríamos dar criterio de elección a alguien que no sabe que existen tipos de arena?
- 03
¿Cómo podríamos quitarle el riesgo percibido a probar una arena distinta?
Riesgo declarado: todo el argumento de la landing descansa en que la arena premium tiene menor costo mensual real. Si el dato transaccional no lo sostiene, la fase Definir se cae y hay que reencuadrar.
03 — Idear
Cuatro direcciones, un contraste editorial
Para la pregunta principal evalué cuatro direcciones. La calculadora interactiva era la más persuasiva, pero exigía alto costo de desarrollo y mantenimiento de datos, y validar la premisa antes. El comparador tipo tabla de especificaciones era preciso y completo, pero denso y poco escaneable.
01Calculadora interactivaDescartada — alto costo y premisa sin validar
La más persuasiva y personalizada
02Comparador de especificacionesDescartada — densa y poco escaneable
Preciso y completo
03Contraste editorial de dos escenariosElegida como eje de la página
Reencuadra la variable en tres segundos
04Etiqueta de rendimiento en la cardAdoptada como refuerzo
Lleva el aprendizaje al momento de compra
Elegí el contraste editorial de dos escenarios porque reencuadra la variable en tres segundos y sin pedir ninguna interacción, y adopté la etiqueta de rendimiento en la card de producto como refuerzo: traslada el aprendizaje al momento de la compra.
04 — Prototipar
Del criterio al producto, en ocho módulos
La página va de reencuadre → taxonomía → criterio personal → dato duro → reducción de riesgo → respaldo. El producto aparece siempre después del criterio que lo justifica, nunca antes.
El módulo ancla es el acordeón de rendimiento: es donde la promesa del hero se vuelve un número que el tutor puede comprobar en su casa. Todo lo demás existe para que al llegar ahí el número signifique algo.
01El precio no lo es todo
Contraste binario entre arena de baja calidad y premium sobre tres atributos idénticos. La fila «duración aproximada» va resaltada en ambas cards: se le dice al lector cuál es la variable que importa.
02Conoce los tipos de arena premium
Taxonomía de tres bloques —arcilla y bentonita, gel de sílice, ecológicas— antes de mencionar cualquier marca.
03Puntos a considerar
Ocho factores auto-seleccionables (multigato, etapa de vida, tipo de pelo, sensibilidad respiratoria, impacto ambiental…). El tutor arma su propio perfil sin llenar un formulario.
04Conoce a fondo cada tipo
Tabs con tres variantes; cada una entrega definición, cinco beneficios con ícono y un carrusel de cinco productos. Profundización bajo demanda.
05¿Cuánto rinde cada marca?
Acordeón con el dato concreto y verificable —rendimiento en kg por mes y frecuencia de reemplazo— para no saturar la página con cifras.
06Salud urinaria
Educación sobre pH y sangre en orina primero, producto después. Los tres estados del monitor llevan etiqueta textual además del color.
07Cambio gradual en 3 pasos
Reducción de riesgo justo antes del cierre. Es el módulo con mayor potencial de reúso: ya vive en al menos dos landings y debería promoverse a patrón del design system.
08Garantías
Respaldo comercial —satisfacción 100% y asesoría— que cierra la objeción económica.
05 — Medir
Un prototipo hecho para responder una pregunta
Esta pieza es un prototipo de alta fidelidad sin flujo interactivo conectado, y está diseñado para responder una pregunta concreta: ¿el reencuadre de «precio de bolsa» a «costo mensual» cambia la preferencia declarada del tutor hacia una arena de mayor rendimiento?
módulos en la landing
direcciones evaluadas
tutores en la prueba moderada
de alto, a 1728 px de ancho
El plan es una prueba de usabilidad moderada remota con cinco tutores de gato que hayan comprado arena en los últimos 30 días —dos monogato, dos multigato y uno que ya intentó cambiar y falló—, con tareas planteadas como escenarios y una pregunta de cierre sin la página a la vista. Esa última respuesta es la medición real de la hipótesis principal.
| Nivel | Métrica |
|---|---|
| En página | Scroll depth hasta el acordeón de rendimiento y tasa de apertura |
| Conversión | CTR al listado y a la ficha de producto |
| Negocio — la que importa | Cambio en el mix premium vs. económico de la categoría para usuarios expuestos a la landing |
| Negocio | Ticket promedio de categoría y frecuencia de recompra a 60 días |
| Si en la prueba… | Entonces |
|---|---|
| Nadie llega al acordeón de rendimiento | Volver a Prototipar: subir el dato antes en la página |
| Siguen eligiendo por precio de bolsa | Volver a Definir: el POV no describe su decisión real |
| Abren el acordeón pero el dato no significa nada | Volver a Idear: el formato del dato es el problema, no su posición |
Si el tráfico sube y el mix no se mueve, la página está siendo leída pero no está funcionando. Esa es la diferencia entre una landing que gusta y una que cambia una decisión de compra.
06 — Supuestos
Lo que la maqueta todavía supone
- 01
Las cifras de rendimiento son afirmaciones comerciales verificables por el cliente: deben validarse con el equipo de categoría antes de publicarse.
- 02
Los conteos del acordeón suponen un mapeo tipo-de-arena → SKU que debe salir del catálogo, no de la maqueta.
- 03
El bloque de salud urinaria tiene implicación clínica: requiere revisión veterinaria y probablemente un disclaimer.
- 04
Los productos destacados son estáticos en la maqueta; en producción vienen del catálogo con lógica de disponibilidad.
¡Gracias por ver!
¿Ver otro proyecto?