Matheus Nicolau

Matheus Nicolau

Luma

A complete UX redesign of the mobile checkout experience for an e-commerce platform. The goal was to reduce cart abandonment and build user trust by improving form simplicity, payment transparency, and error recovery.

Role: UX Designer
Tools: Figma, Visily, FigJam
Platform: Mobile (iOS & Android)

The Problem

The Problem

Checkout abandonment was high due to friction during the final steps.
Users reported frustration with unclear form errors, hidden fees, and failed payments without guidance.

The process needed to feel simpler, faster, and more trustworthy, especially on mobile.

Checkout abandonment was high due to friction during the final steps.
Users reported frustration with unclear form errors, hidden fees, and failed payments without guidance.

The process needed to feel simpler, faster, and more trustworthy, especially on mobile.

Research & Insights

I reviewed over 50 user feedback entries and grouped them by frequency and severity.

Five recurring pain points emerged:

  1. Forms were too long and confusing.

  2. Shipping costs appeared too late.

  3. Payment errors offered no recovery options.

  4. Messaging felt robotic and vague.

  5. Mobile layout caused visual fatigue.

User Personas

User Personas

Mariana – The Impatient Achiever
Wants a fast, straightforward checkout. Gets frustrated with long forms or slow screens.

Mariana – The Impatient Achiever
Wants a fast, straightforward checkout. Gets frustrated with long forms or slow screens.

Ricardo – The Cautious Planner
Needs clarity and transparency. Double-checks every step before confirming.

Ricardo – The Cautious Planner
Needs clarity and transparency. Double-checks every step before confirming.

Customer Journey

Customer Journey

Stages: Browsing → Cart → Shipping → Payment → Review → Success
Pain points: confusing ZIP validation, unclear cost summary, failed payment loops.
Opportunities: autofill, transparent subtotal and ETA, friendly error messages.

Stages: Browsing → Cart → Shipping → Payment → Review → Success
Pain points: confusing ZIP validation, unclear cost summary, failed payment loops.
Opportunities: autofill, transparent subtotal and ETA, friendly error messages.

Design Strategy

Simplify key interactions with fewer fields and clear labels.

  1. Add real-time feedback for validation and payment states.

  2. Use microcopy that reassures and guides.

  3. Visualize the entire flow to identify friction and recovery moments.

  4. Introduce a Conversational Assistant for coupons, payments, and tracking.

Prioritization

Effort vs. Impact mapping helped focus on:

  • High Impact / Low Effort: form simplification.

  • High Impact / Medium Effort: transparent costs.

  • High Effort / High Value: conversational flow.

Before
After

Solutions

Solutions

Solutions

1. Simplified Forms: Reduced steps + autofill + inline feedback.

2. Transparent Costs: Subtotal + ETA + tooltips.

3. Payment Feedback: Clear states + retry loop.

4. Conversational Support: Handles coupons + payments + tracking.

1. Simplified Forms: Reduced steps + autofill + inline feedback.

2. Transparent Costs: Subtotal + ETA + tooltips.

3. Payment Feedback: Clear states + retry loop.

4. Conversational Support: Handles coupons + payments + tracking.

1. Simplified Forms: Reduced steps + autofill + inline feedback.

2. Transparent Costs: Subtotal + ETA + tooltips.

3. Payment Feedback: Clear states + retry loop.

4. Conversational Support: Handles coupons + payments + tracking.

Main User Flow

Main User Flow

This flow visualizes all user actions, system responses, and error recovery paths.

This flow visualizes all user actions, system responses, and error recovery paths.

1
2
3
4
5

UX Writing & Accessibility

UX Writing & Accessibility

Friendly, human tone + verb-based buttons + accessible contrast.

Friendly, human tone + verb-based buttons + accessible contrast.

Expected Impact

Cart abandonment: ↓ to 52% (25% less)

Checkout duration: ↓ to 2m 40s (30% faster)

Payment success: ↑ to 70% (15% more)

Final Reflection

Small UX details create big impact.
This project blended data, empathy, and clarity to deliver a checkout that feels fast and human.

Create a free website with Framer, the website builder loved by startups, designers and agencies.