José MavarezCase 01 / 03
ESEN All work
01 — Infracommerce Latam · CRO · VTEX enterprise

Checkout and mobile navigation for enterprise VTEX accounts

Role
CRO & Senior UX Designer
Period
May 2023 — present
Platform
VTEX
Tools
GA4 · Clarity · Figma · A/B testing
Clients
Enterprise brands (confidential)
NDA

This work was done for brands under confidentiality agreements. The visualizations are representative reconstructions: they show no real brands, content, screens or client data. The figures are the aggregated results I report in my CV. I can walk through the process in a conversation, within what those agreements allow.

Representative visualization · no real brand or content
Before · deep navigation
After · flat navigation, fixed CTA
Relative index · baseline = 100
  • Checkout completion+22%
  • Add-to-cart+13%
  • Bounce rate−22%
Fig. 0 — Sketch of the mobile change. Illustrative screens; points A and C refer to the decisions.

01 — Context

Enterprise accounts on VTEX with complex purchase journeys. On mobile, navigation created friction before users reached the cart.

02 — My role

CRO & Senior UX Designer. I audited the user journeys, designed the interface optimizations, set up the A/B tests and established the design system that design and development share.

03 — Diagnosis

Using Clarity scroll-depth and rage-click data, I identified where mobile navigation broke down.

  • Rage-click zones: repeated taps on elements that did not respond as expected.
  • Point where most sessions stopped scrolling.
Fig. 1 — Reconstructed friction pattern. It does not correspond to a real session or site.

04 — Decisions

  1. A. Mobile-first navigation

    I restructured the mobile navigation architecture around the friction zones detected in Clarity.

  2. B. Validate with A/B testing

    Navigation changes were A/B tested before being rolled out.

  3. C. Data-backed checkout optimizations

    Interface adjustments across the checkout steps, prioritized with data from the user-journey audit.

Before
  1. Home
  2. Menu
  3. Submenu
  4. Submenu
  5. Category
  6. Product
  7. Cart
After
  1. Home
  2. Category
  3. Product
  4. Cart
Fig. 2 — Illustrative sketch of the reduced steps to the cart. The real architecture varies by account.

05 — System

A standardized design system improved the design-to-development handoff and cut front-end design review cycles by 40 %.

Fig. 3 — Generic structure of the system (components, states and scale). No brand tokens.
Next case — 02Aquinas Network · headless WordPress