Librerías Gandhi order confirmation on a laptop against purple velvet fabric.

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

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

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.

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

Project overview

Librerías Gandhi 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 loyalty subscriptions.

Microsoft Clarity behavioral heatmap displayed on a laptop screen in a studio mockup.

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.

Librerías Gandhi homepage on a laptop with the Tu Bolsa cart drawer open, on a yellow armchair.

Librerías Gandhi shopping bag (Tu Bolsa) page on a laptop against a yellow background.

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.

Librerías Gandhi Smart Cart drawer and mobile checkout data step on two smartphones.

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.

Librerías Gandhi checkout flow with shipping tabs and order summary on desktop screens.

Librerías Gandhi checkout UI collage with shipping address form, registration success, and cross-sell product card on a purple background.

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.

Librerías Gandhi Click and Collect store locator modal with branch list and Google Map.

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 loyalty subscription directly above the "Pay Now" CTA, dynamically displaying immediate order discounts to incentive membership conversion.

Librerías Gandhi mobile shopping bag held in hand, showing a pre-order tag and the Pay Now button.

Librerías Gandhi VTEX checkout with Club TINTA subscription upsell and TINTA client information modules on a purple background.

Librerías Gandhi end-to-end checkout collage with shipping, order summary, Club TINTA, and thank-you screen on a purple background.

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.

Librerías Gandhi mobile payment step held in hand, showing the Página 1 digital wallet and split-payment option.

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.

Design note

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.