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

> Rediseño del checkout en VTEX FastStore para Librerías Gandhi: pasarelas de pago, Smart Cart, Click & Collect y Club TINTA.

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

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.

Rediseño integral del checkout y arquitectura UX en VTEX FastStore para la cadena de librerías líder en México—optimización de pasarelas de pago, conversión móvil y fulfillment omnicanal (Click & Collect).

- **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

**[Librerías Gandhi](https://www.gandhi.com.mx/) 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](https://www.gandhi.com.mx/suscripcion-club-tinta/p).

## 01 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.

## 02 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.

## 03 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.

## 04 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.

## 05 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](https://www.gandhi.com.mx/suscripcion-club-tinta/p) justo antes del botón "Pagar ahora", mostrando el descuento inmediato sobre el pedido actual para incentivar la conversión del usuario.

## 06 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.

## 07 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.

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.

Website: https://www.gandhi.com.mx/

HTML: https://www.giovidaurri.com/es/casos-de-estudio/librerias-gandhi/