How I reduced checkout abandonment by 2.4% by eliminating friction in payment selection

📍CONTEXT / PROBLEM / GOAL

1-Week project • Web/Mobile • Checkout optimization

Context

This project focused on improving the checkout experience of a high-conversion e-commerce platform.

Problem

The checkout had a 94% abandonment rate, directly impacting revenue.

Goal

Reduce friction in the checkout flow and increase conversion.

🧩MY ROLE

UX Research

Heuristic evaluation

Behavioral Analysis

High-fidelity Prototyping

🧠 KEY INSIGHTS

False affordances in the footer

Users perceived payment method icons as clickable, but they were not.

Leading to confusion and misclicks.

Poor visual hierarchy

The checkout did not clearly communicate primary vs secondary actions.

Increasing cognitive load and decision time.

High interaction cost

The footer occupied a large portion of the screen, especially on mobile.

Increasing scroll effort and pushing critical actions away.

🔍 BENCHMARKING

Key findings:

• Better-defined hierarchy;

• Displayed only the essentials: Terms, social media, and information;

• None displayed payment methods;

• Better-defined hierarchy;

• Displayed only the essentials: Terms, social media, and information;

• None displayed payment methods;

📊 BEHAVIORAL EVIDENCE

Users repeatedly clicked non-interactive elements in the footer

I collected data from Hotjar over a period of 7 days to 6 months. Clicks in the footer on boleto, pix, card brands, or even on the title “Payment Methods” were recurrent, with these images being purely informational about the payment methods available on the site.

The main points observed in Hotjar were:

Footer interactions represented up to 2% of total clicks
On mobile, the footer occupied ~70% of scrollable content

Footer interactions represented up to 2% of total clicks
On mobile, the footer occupied ~70% of scrollable content

👉 This confirmed that the footer was creating friction during a critical conversion moment.

The main points observed in Hotjar were:

💡SOLUTIONS

✅ Eliminating false affordances

Context

Payment icons in the footer created misleading interaction signals.

Decision

Removed all non-interactive payment method elements.

Impact

Contributed to a measurable decrease in checkout abandonment.

✅ Reducing footer size

Context

The footer occupied excessive screen space, especially on mobile.

Decision

Minimized footer content to essential information only.

Impact

Reduced scroll effort and improved focus on primary actions.

✅ Improving information hierarchy

Context

Users struggled to identify key actions during checkout.

Decision

Reorganized layout to prioritize payment selection and completion actions.

Impact

Reduced cognitive load and improved task completion flow.

🚀 FINAL DESIGN

The redesigned checkout removes distractions and guides users directly toward completing their purchase.

Before (left): cluttered footer and misleading elements
After (right): simplified layout focused on conversion

📈 RESULTS

2.4%

reduction in checkout abandonment.

5%

Footer reduced to 5% of screen space.

Eliminated friction caused by misleading UI elements.

Improved clarity and decision-making during checkout.

📚 LEARNINGS

Small interaction details, like misleading affordances or excessive UI elements, can create significant friction in high-stakes flows like checkout.

By aligning visual hierarchy with user intent, it's possible to improve both usability and business outcomes with relatively simple changes.

nai.caparelli@gmail.com

UAE 🇦🇪, Italy 🇮🇹, Brazil 🇧🇷

Updated on April 2, 2026.

nai.caparelli@gmail.com

UAE 🇦🇪, Italy 🇮🇹, Brazil 🇧🇷

Updated on April 2, 2026.