José MavarezCaso 01 / 03
ESEN Todo el trabajo
01 — Infracommerce Latam · CRO · VTEX enterprise

Checkout y navegación móvil para cuentas enterprise en VTEX

Rol
CRO & Senior UX Designer
Periodo
May 2023 — hoy
Plataforma
VTEX
Herramientas
GA4 · Clarity · Figma · A/B testing
Clientes
Marcas enterprise (confidencial)
NDA

Este trabajo se hizo para marcas bajo acuerdos de confidencialidad. Las visualizaciones son reconstrucciones representativas: no muestran marcas, contenido, pantallas ni datos reales de los clientes. Las cifras son los resultados agregados que reporto en mi CV. Puedo ampliar el proceso en una conversación, dentro de lo que permiten esos acuerdos.

Visualización representativa · sin marca ni contenido real
Antes · navegación profunda
Después · navegación plana, CTA fijo
Índice relativo · línea base = 100
  • Finalización de checkout+22%
  • Add-to-cart+13%
  • Bounce rate−22%
Fig. 0 — Esquema del cambio en mobile. Pantallas ilustrativas; los puntos A y C remiten a las decisiones.

01 — Contexto

Cuentas enterprise sobre VTEX con recorridos de compra complejos. En mobile, la navegación generaba fricción antes de que el usuario llegara al carrito.

02 — Mi rol

CRO & Senior UX Designer. Audité los user journeys, diseñé las optimizaciones de interfaz, planteé las pruebas A/B y establecí el design system que usan diseño y desarrollo.

03 — Diagnóstico

Con datos de scroll-depth y rage-click en Clarity identifiqué dónde se rompía la navegación en mobile.

  • Zonas de rage-click: toques repetidos sobre elementos que no respondían como se esperaba.
  • Punto donde la mayoría de sesiones dejaba de hacer scroll.
Fig. 1 — Patrón de fricción reconstruido. No corresponde a una sesión ni a un sitio real.

04 — Decisiones

  1. A. Navegación mobile-first

    Reestructuré la arquitectura de navegación mobile a partir de las zonas de fricción detectadas en Clarity.

  2. B. Validar con A/B testing

    Los cambios de navegación se probaron con A/B testing antes de desplegarse.

  3. C. Optimizaciones de checkout respaldadas por datos

    Ajustes de interfaz en los pasos del checkout, priorizados según los datos de la auditoría de user journeys.

Antes
  1. Inicio
  2. Menú
  3. Submenú
  4. Submenú
  5. Categoría
  6. Producto
  7. Carrito
Después
  1. Inicio
  2. Categoría
  3. Producto
  4. Carrito
Fig. 2 — Esquema ilustrativo de la reducción de pasos hasta el carrito. La arquitectura real varía por cuenta.

05 — Sistema

Un design system estandarizado mejoró el handoff entre diseño y desarrollo y redujo en un 40 % los ciclos de revisión de diseño front-end.

Fig. 3 — Estructura genérica del sistema (componentes, estados y escala). Sin tokens de marca.
Siguiente caso — 02Aquinas Network · WordPress headless