Rediseñando la decisión de compra de arena para gato
Una mejora de producto existente: la landing editorial de categoría de Petco México que da criterio de compra antes del listado de productos.
- Rol
- Diseño UX/UI · de extremo a extremo
- Año
- 2026
- Formato
- Desktop a 1,728 px · con versión mobile
- Herramientas
- Figma · design system
módulos en la landing
direcciones evaluadas
tutores en la prueba moderada
de alto, a 1,728 px de ancho
Empatizar
El tutor optimiza la variable equivocada
La arena para gato es una compra frecuente, de bajo involucramiento y muy sensible al precio. El tutor compara las bolsas por precio y peso, no por cuánto rinden. El resultado es un mix de venta cargado a lo económico y recompras muy seguidas que el tutor ve como algo normal.
“El tutor no elige mal por descuido. Está optimizando la variable equivocada: compara el precio de la bolsa cuando lo que define su gasto y el olor del arenero es cuánto dura la arena antes del recambio.”
Los perfiles son cuatro:
Quien recompra (POV primario).
El tutor primerizo, que no sabe que existen tipos de arena.
Quien ya intentó cambiar y su gato la rechazó.
El tutor de gato senior con antecedentes urinarios.
Definir
Comparar por costo mensual, no por precio de bolsa
El problema no está en el catálogo ni en el precio, sino en la unidad de comparación.
“Un tutor que recompra arena cada una o dos semanas necesita comparar por costo y duración mensual, no por precio de bolsa. Hoy paga de más sin notarlo y vive con un arenero que huele antes de tiempo.”
¿Cómo hacemos que el costo mensual sea tan visible como el precio de la bolsa?
¿Cómo damos criterio de elección a quien no conoce los tipos de arena?
¿Cómo le quitamos el riesgo a probar una arena distinta?
¿Cómo hacemos que la comparación sea clara también para quien usa lector de pantalla, teclado o zoom?
Riesgo declarado: todo el argumento descansa en que la arena premium cuesta menos al mes. Si los datos de venta no lo respaldan, hay que reencuadrar el problema.
Idear
Cuatro direcciones, un contraste editorial
Evalué cuatro direcciones:
| Dirección | Decisión |
|---|---|
| Calculadora interactiva | Descartada: alto costo y premisa sin validar. |
| Comparador de especificaciones | Descartada: denso y poco escaneable. |
| Contraste editorial de dos escenarios | Elegida: cambia la variable de comparación en 3 segundos, sin pedir interacción. |
| Etiqueta de rendimiento en la card | Adoptada como refuerzo en el momento de compra. |
Prototipar
Del criterio al producto, en ocho módulos
La landing tiene 8 módulos y sigue este orden: reencuadre, tipos de arena, criterio personal, dato duro, reducción de riesgo y respaldo. El producto siempre aparece después del criterio que lo justifica.
| Módulo | Función |
|---|---|
| El precio no lo es todo | Contrasta arena económica contra premium y resalta la «duración aproximada». |
| Tipos de arena premium | Explica arcilla, sílice y ecológica antes de mencionar marcas. |
| Puntos a considerar | 8 factores que el tutor selecciona para armar su perfil sin llenar un formulario. |
| Conoce cada tipo | Tabs con definición, beneficios y un carrusel de productos. |
| ¿Cuánto rinde cada marca? | Módulo ancla: acordeón con kg por mes y frecuencia de reemplazo. |
| Salud urinaria | Primero la educación sobre pH y sangre en orina, después el producto. |
| Cambio gradual en 3 pasos | Reduce el riesgo de cambiar. Ya se usa en 2 landings y es candidato a patrón del design system. |
| Garantías | Satisfacción 100% y asesoría. |
Accesibilidad
WCAG 2.2 AA, de la maqueta al handoff
El objetivo es WCAG 2.2 nivel AA.
Esto ya está resuelto en la maqueta:
| Criterio | Cómo se resolvió |
|---|---|
| 1.4.1 Uso del color | Los 3 estados del monitor de salud urinaria llevan una etiqueta de texto además del color. |
| 1.3.1 Información y relaciones | La estructura editorial tiene un título por módulo y una jerarquía clara, lo que permite navegar por encabezados. |
| Carga cognitiva (apoya 3.3.2) | El dato duro va en un acordeón para no saturar la página, y el tutor arma su perfil sin formulario. |
| 1.4.10 Reflow | Existe una versión mobile, así que el contenido no depende del ancho de 1,728 px. |
Y esto queda pendiente para el handoff:
| Criterio | Riesgo | Ajuste |
|---|---|---|
| 4.1.2 Nombre, función, valor | Tabs, acordeón y los 8 factores seleccionables son componentes interactivos. | Tabs con role="tablist" y navegación con flechas, acordeón con aria-expanded, y factores como botones con aria-pressed. |
| 2.1.1 Teclado / 2.4.7 Foco visible | El tutor tiene que poder recorrer tabs, acordeón y factores sin mouse. | Definir un estado de foco visible (anillo de 2 px de alto contraste) en todos los controles. |
| 1.3.1 Datos tabulares | La comparación económica contra premium y el rendimiento en kg por mes son datos tabulares. | Marcarlos como tabla o lista de definición, para que el lector de pantalla relacione cada atributo con su valor. |
| 1.4.3 Contraste | El gris de texto secundario del design system (#7E7E7E) da ≈ 4.0:1 sobre blanco. | Si se usa en descripciones, oscurecerlo a 4.5:1 o más. La fila resaltada de «duración» también debe cumplir contra su fondo. |
| 1.1.1 Contenido no textual | Hay íconos de beneficios, fotos de producto e ilustraciones de tipos de arena. | alt descriptivo en las imágenes con información y alt="" en los íconos decorativos que ya tienen texto al lado. |
| 2.5.7 / 2.1.1 Arrastre y teclado | Los carruseles de productos de cada tab se usan con swipe. | Agregar flechas o permitir el foco por card. |
| 2.4.4 Propósito del enlace | Hay CTAs repetidos en las cards de producto. | Agregar un aria-label con el nombre del producto o del tipo de arena. |
Medir
Una prueba para una sola pregunta
La pregunta es una: ¿reencuadrar de «precio de bolsa» a «costo mensual» cambia la preferencia hacia una arena de mayor rendimiento?
La prueba es de usabilidad moderada remota con 5 tutores que compraron arena en los últimos 30 días: 2 monogato, 2 multigato y 1 que ya falló al cambiar. Se cierra con una pregunta sin la página a la vista. Lo ideal es sumar a una persona que use lector de pantalla.
| Si en la prueba… | Entonces |
|---|---|
| Nadie llega al acordeón | Volver a Prototipar: subir el dato en la página. |
| Siguen eligiendo por precio de bolsa | Volver a Definir: el POV no describe la decisión real. |
| Abren el acordeón pero el dato no les dice nada | Volver a Idear: el problema es el formato del dato. |
La métrica que importa es el cambio en el mix premium contra económico entre los usuarios expuestos a la landing. Si sube el tráfico pero el mix no se mueve, la página se está leyendo pero no está cambiando decisiones.
Supuestos
Supuestos por validar
Las cifras de rendimiento deben validarse con el equipo de categoría.
El bloque de salud urinaria requiere revisión veterinaria y probablemente un disclaimer.
Los productos y los conteos deben salir del catálogo, no de la maqueta.
¡Gracias por ver!
¿Ver otro proyecto?