Confirmación de compra de Librerías Gandhi en laptop sobre terciopelo morado.

Product Design / UX Research / UI Systems / E-commerce Architecture

Librerías Gandhi — Rediseño del embudo de conversión, arquitectura UX y Checkout omnicanal en VTEX FastStore

Liderazgo en investigación UX, auditoría técnica y diseño de producto para la optimización integral del embudo de compra (checkout) de Librerías Gandhi: la cadena de librerías y plataforma de comercio electrónico cultural líder en México.

Cliente

Librerías Gandhi

Agencia / Partner

3Devs

Industria

Retail / E-commerce / Publicaciones y Cultura

Ubicación

Ciudad de México, México

Año

2025

Duración

3 meses

Rol

Senior Product Designer / UX & UI Consultant

Plataformas

E-commerce Web / Mobile Checkout / VTEX FastStore

Herramientas

Figma / FigJam / Jira / Microsoft Clarity / VTEX IO

Alcance

Auditoría heurística, análisis de mapas de calor, benchmark competitivo, arquitectura de información, rediseño de Smart Cart, flujos de checkout (invitado y registrado), geolocalización Click & Collect, reglas de pago y Developer Handoff.

Entregables

UX Audit

Análisis de mapas de calor (Clarity)

Benchmark competitivo

Arquitectura de información

Design System (VTEX)

Wireframes & Prototipos interactivos

Rediseño de Smart Cart

Flujos Omnicanal (Click & Collect)

Especificaciones en Dev Mode

UI Guidelines

Resumen del proyecto

Librerías Gandhi enfrentaba una problemática de conversión crítica en su canal digital: una preocupante caída en la tasa de aprobación de las principales pasarelas de pago y un índice creciente de transacciones rechazadas.

Con un volumen de tráfico abrumadoramente mayoritario en dispositivos móviles, los usuarios experimentaban alta fricción debido a formularios extensos, errores técnicos de autenticación en las pasarelas, métodos de pago inhabilitados y una interfaz que generaba fatiga cognitiva. En colaboración estratégica con 3Devs —consultoría de tecnología especializada en plataformas enterprise—, lideré la investigación UX, el diagnóstico técnico y el rediseño UI del checkout nativo en VTEX FastStore. El proyecto resolvió errores estructurales de interfaz y código, transformando el embudo en un sistema ágil y estable que integró carritos inteligentes, mapas de recolección en sucursal, lógica de pagos fraccionados y suscripciones al programa de lealtad Club TINTA.

Mapa de calor de comportamiento Microsoft Clarity en pantalla de laptop en mockup de estudio.

Auditoría UX, mapas de calor (Clarity) y diagnóstico en Jira

Antes de trazar wireframes, lideré una auditoría heurística basada en datos de comportamiento (Jira GAN-1 al 17), cruzando métricas de Microsoft Clarity con estándares de usabilidad en e-commerce. • Detección de fricciones críticas: Los mapas de calor revelaron zonas de confusión y abandonos causados por alertas tardías de falta de inventario, errores al capturar formatos de teléfono y banners secundarios que desviaban la atención de la compra. • Establecimiento de Quick Wins: Prioricé acciones inmediatas en la interfaz para simplificar el autocompletado, corregir la jerarquía visual de errores y optimizar el rendimiento de renderizado en pantallas móviles.

Homepage de Librerías Gandhi en laptop con el drawer Tu Bolsa abierto, sobre sillón amarillo.

Página de bolsa de compras (Tu Bolsa) de Librerías Gandhi en laptop sobre fondo amarillo.

Smart Cart, gamificación y cross-selling (Tu Bolsa)

El carrito de compras dejó de ser un simple resumen para convertirse en un motor activo de conversión y aumento del ticket promedio. • Umbral de Envío Gratis: Implementé una barra de progreso dinámica en el drawer y la versión móvil que calcula en tiempo real el monto exacto faltante para desbloquear el envío gratuito. • Venta cruzada sin fricción: Integré módulos de recomendación contextual para accesorios (separadores de libros, lámparas) y etiquetas automáticas de Preventa y Sin Stock, permitiendo editar cantidades o eliminar ítems sin abandonar el embudo.

Drawer Smart Cart (Tu Bolsa) y paso Tus datos del checkout móvil de Librerías Gandhi en dos smartphones.

Checkout sin fricción y captura inteligente de datos

Reestructuré la experiencia de identificación para mitigar el abandono inicial en el embudo. • Flexibilidad de acceso: Optimicé el flujo para Guest Checkout (compra como invitado) y usuarios registrados, aplicando validación inline, máscaras automáticas en teléfonos y ocultando campos secundarios para aligerar la carga visual. • Claridad de entrega: Diseñé pestañas visuales de alto contraste para diferenciar instantáneamente entre Envío en México, Recoger en sucursal y Envíos internacionales.

Flujo de checkout de Librerías Gandhi con tabs de envío y resumen del pedido en pantallas desktop.

Collage de UI de checkout de Librerías Gandhi con formulario de dirección de envío, registro exitoso y tarjeta cross-sell sobre fondo morado.

Omnicanalidad y geolocalización (Click & Collect)

Para capitalizar la red nacional de librerías físicas de Gandhi, diseñé una experiencia omnicanal integrada en el módulo de envío: una experiencia Click & Collect con geolocalización. Al ingresar el código postal o activar la geolocalización, el sistema despliega un mapa interactivo con las sucursales más cercanas, indicando horarios de atención, disponibilidad de inventario en tiempo real y plazos exactos de entrega.

Modal de localizador Click & Collect de Librerías Gandhi con listado de sucursales y mapa de Google.

Arquitectura técnica de pago, monedero y fidelización en VTEX

Aprovechando la arquitectura VTEX FastStore, estructuré una interfaz de pago avanzada pensada para máxima conversión y estabilidad técnica: • Pagos fraccionados y Monedero: Diseñé el flujo para combinar dos métodos de pago en una sola transacción (dividiendo montos entre tarjetas o plataformas como Aplazo) e integré el uso nativo del monedero electrónico Página 1 y tarjetas de regalo. • Reglas de negocio y estabilidad (Vibe Coding / VTEX IO): En conjunto con el equipo de desarrollo de 3Devs, definimos el ordenamiento lógico de métodos de pago, integrando control de frecuencia (Throttling) y variables anti-bucles para evitar caídas del sistema durante el procesamiento del cobro. • Upselling en el pago: Integré de forma orgánica la suscripción al programa Club TINTA justo antes del botón "Pagar ahora", mostrando el descuento inmediato sobre el pedido actual para incentivar la conversión del usuario.

Bolsa de compras móvil de Librerías Gandhi en mano, con etiqueta Preventa y botón Pagar ahora.

Checkout VTEX de Librerías Gandhi con upsell de suscripción Club TINTA y módulos de información de cliente TINTA sobre fondo morado.

Collage del embudo de checkout de Librerías Gandhi con envío, resumen del pedido, Club TINTA y pantalla de agradecimiento sobre fondo morado.

Retención post-compra y microcopy estratégico (Thank You Page)

Rediseñé la página de confirmación y estandaricé todo el lenguaje del checkout (i18n). • Microcopy transparente: Reemplacé textos genéricos por instrucciones directas y exactas ("Recíbelo en X días hábiles"), eliminando la incertidumbre logística. • Post-compra accionable: Diseñé una pantalla de agradecimiento que muestra el desglose del pedido, fecha estimada de entrega, botón de descarga de factura/POK en PDF y acceso directo al chat de soporte, elevando la confianza del cliente.

Paso de pago móvil de Librerías Gandhi en mano, con monedero digital Página 1 y opción de pagos fraccionados.

Impacto estratégico del negocio

La intervención resolvió las fricciones estructurales de la plataforma y generó un impacto cualitativo y cuantitativo directo en los pilares comerciales del ecosistema: • Reducción drástica en la tasa de abandono del checkout mediante la simplificación de formularios, implementación fluida del guest checkout y optimización total para entornos móviles. • Recuperación en las tasas de aprobación de pago, previniendo transacciones fallidas gracias al autoformato de tarjetas, validaciones tempranas de campos y presentación de métodos alternativos de cobro. • Fortalecimiento de la retención y el ticket promedio (AOV) al integrar mecánicas de gamificación en el carrito y unificar el flujo de suscripción al Club TINTA en el último paso de pago.

Nota de diseño

Asumí la responsabilidad de la auditoría y estrategia UX, análisis de datos de comportamiento, diseño de interfaces UI y documentación técnica para el ecosistema VTEX. La programación front-end, configuración de pasarelas de pago e integración de APIs logísticas fue ejecutada en colaboración con el equipo de ingeniería de 3Devs.