# Librerías Gandhi — Conversion Funnel Redesign, UX Architecture & Omnichannel Checkout on VTEX FastStore

> Checkout redesign on VTEX FastStore for Librerías Gandhi: payment gateways, Smart Cart, Click & Collect, and Club TINTA loyalty.

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

UX research, technical auditing, and product design leadership for the end-to-end checkout funnel optimization of Librerías Gandhi: Mexico's premier bookstore chain and leading cultural e-commerce platform.

End-to-end checkout redesign and UX architecture on VTEX FastStore for Mexico's premier bookstore chain—optimizing payment gateways, mobile conversion, and omnichannel fulfillment (Click & Collect).

- **Client:** Librerías Gandhi
- **Agency / Partner:** 3Devs
- **Industry:** Retail / E-commerce / Books & Publishing
- **Location:** Mexico City, Mexico
- **Year:** 2025
- **Time frame:** 3 months
- **Role:** Senior Product Designer / UX & UI Consultant
- **Platforms:** E-commerce Web / Mobile Checkout / VTEX FastStore
- **Tools:** Figma / FigJam / Jira / Microsoft Clarity / VTEX IO
- **Scope:** Heuristic audit, heatmap analysis, competitive benchmarking, information architecture, Smart Cart redesign, checkout workflows (guest and logged-in), Click & Collect geolocation, payment gateway business rules, and developer-ready handoff.
- **Deliverables:** UX Audit
- **:** Heatmap Analysis (Clarity)
- **:** Competitive Benchmarking
- **:** Information Architecture
- **:** Design System (VTEX)
- **:** Checkout Wireframes & Interactive Prototypes
- **:** Smart Cart Redesign
- **:** Omnichannel Flows (Click & Collect)
- **:** Dev Mode Specifications
- **:** UI Guidelines

## Overview

**[Librerías Gandhi](https://www.gandhi.com.mx/) faced a critical digital conversion bottleneck:** a concerning drop in payment gateway approval rates accompanied by an escalating frequency of rejected transactions.

With platform traffic heavily dominated by mobile users, shoppers routinely encountered severe friction points including lengthy forms, technical gateway authentication errors, paused payment methods, and an interface that induced cognitive fatigue.

In strategic partnership with **3Devs—a specialized enterprise commerce technology consultancy—**I led the UX research, functional technical audit, and **UI redesign** of the **checkout ecosystem native to VTEX FastStore.**

The project resolved deep structural UI and codebase errors, transforming a high-friction funnel into a fast, highly stable system featuring smart carts, interactive store pickup maps, split-billing engines, and integrated [Club TINTA](https://www.gandhi.com.mx/suscripcion-club-tinta/p) loyalty subscriptions.

## 01 UX Audit, Heatmap Analysis (Clarity) & Jira Diagnostics

Before drawing wireframes, I conducted a data-driven heuristic audit, cross-referencing Microsoft Clarity behavioral heatmaps against industry e-commerce usability standards.

• **Friction Detection:** Heatmaps exposed dead zones and drop-offs caused by late out-of-stock validation alerts, international phone number formatting errors, and promotional secondary banners that diverted user focus away from checkout.

• **Quick Wins Execution:** I prioritized immediate, high-impact UI actions to streamline form auto-completion, fix visual error hierarchies, and optimize rendering performance across mobile viewports.

## 02 Smart Cart, Gamification & Cross-Selling (Tu Bolsa)

The shopping cart was re-engineered from a passive summary screen into an active conversion and Average Order Value (AOV) growth engine.

• **Free Shipping Gamification:** Deployed a dynamic progress bar within the desktop drawer and mobile bag that calculates in real time the exact amount required to unlock free shipping.

• **Frictionless Cross-Selling:** Embedded contextual recommendation modules for reading accessories (bookmarks, lamps) alongside automated visual tags for **Pre-order** and **Out of Stock items,** allowing users to edit quantities or remove products without leaving the checkout flow.

## 03 Frictionless Checkout & Intelligent Data Capture

I restructured the identification journey to combat early funnel abandonment.

• Access Flexibility: Optimized the flow for both Guest Checkout and registered users, implementing inline field validation, automatic phone number input masking, and collapsing secondary billing fields to reduce visual clutter.

• Fulfillment Clarity: Architected high-contrast visual tabs to instantly differentiate between Domestic Shipping (Mexico), Store Pickup, and International Shipping.

## 04 Omnichannel Geolocation & Store Locator (Click & Collect)

To leverage Gandhi's extensive physical bookstore footprint across the country, I architected an omnichannel **Click & Collect experience** within the fulfillment step.

By entering a postal code or enabling geolocation, the system triggers an interactive map displaying nearby branch locations—complete with store operating hours, real-time inventory availability, and exact pickup readiness timelines.

## 05 Advanced Payment Engine, Digital Wallet & Loyalty on VTEX

**Leveraging the VTEX FastStore architecture, I designed a sophisticated payment interface engineered for maximum conversion and technical resilience:**

• **Split Billing & Digital Wallet:** Engineered workflows allowing users to split the total order balance across two different payment methods (dividing amounts between cards or platforms like Aplazo), while natively integrating the Página 1 digital wallet and gift cards.

• **Business Rules & System Stability:** In tight collaboration with 3Devs' engineering team, we established a strict logical payment sorting order, deploying execution frequency throttling and anti-loop variables to prevent checkout freezing under heavy processing loads.

• **In-Checkout Upselling:** Seamlessly embedded the [Club TINTA](https://www.gandhi.com.mx/suscripcion-club-tinta/p) loyalty subscription directly above the "Pay Now" CTA, dynamically displaying immediate order discounts to incentive membership conversion.

## 06 Post-Purchase Retention & Strategic Microcopy (Thank You Page)

I redesigned the order confirmation screen and standardized the platform's entire checkout language (i18n).

• **Transparent Microcopy:** Replaced ambiguous text with direct, exact delivery language ("Receive it in X business days"), eliminating post-purchase logistics anxiety.

• **Actionable Confirmation:** Engineered an order confirmation screen featuring a complete item breakdown, estimated delivery timelines, automated PDF invoice/POK download capabilities, and direct access to live customer support chat—significantly boosting customer trust.

## 07 Strategic Business Impact

**The architectural intervention resolved deep-seated platform bottlenecks, delivering substantial qualitative and quantitative improvements across core e-commerce metrics:**

• **Substantial reduction in checkout abandonment rates** achieved by simplifying input forms, enabling frictionless guest checkout, and removing usability barriers across mobile devices.

• **Recovery and stabilization of payment gateway approval rates,** actively preventing failed transactions through automated card formatting, early field validation, and immediate alternative payment suggestions upon decline.

• **Strengthened customer retention and Average Order Value (AOV)** driven by in-cart gamification mechanics and seamless Club TINTA loyalty onboarding embedded directly into the final payment step.

I was solely responsible for UX research, behavioral data analysis, UI interface design, conversion strategy, and technical developer handoff for the VTEX ecosystem.

Front-end production coding, payment gateway configuration, and logistics API integrations were executed in close collaboration with 3Devs' engineering team.

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

HTML: https://www.giovidaurri.com/case-studies/librerias-gandhi/