American Express Membership Rewards

Redesigning the rewards checkout experience to reduce drop-offs and improve user confidence.

Redesigning the rewards checkout experience to reduce drop-offs and improve user confidence

My Role

Contributed to redesigning the membership rewards checkout experience across web and mobile, collaborating with cross-functional teams from research to final UI.

Scope

Checkout experience redesign (web & mobile)

Timeline

2-weeks

(Timeline driven by increasing drop-offs in the checkout flow)

Tools Used

  • Figma

  • Qualtrics

  • Miro

  • UserTesting

  • Figma

  • Qualtrics

  • Miro

  • UserTesting

Design System

AMEX DS

Identifying the Problem

Despite ~80K users reaching checkout, a significant drop-off occurs in the final steps, indicating friction in the completion flow.

To Investigate further, we conducted Qualitative Research

We observed users completing checkout tasks, focusing on where they hesitated, repeated actions, or dropped off.
These observations were synthesized to identify recurring friction points across the flo

Used empathy mapping to understand user behaviors, thoughts, and emotional friction points.

Personas were created to represent primary user behaviors and pain points across the checkout journey.

Mapped the end-to-end journey to identify where users drop off and align stakeholders on key friction points.

Key Friction Points

These insights highlighted key breakdowns in the checkout experience, directly contributing to user drop-offs.

Priority 1

Users are becoming disinterested because the process of redeeming points is too long, especially once they reach the checkout page. This suggests that the process needs to be streamlined.

Priority 3

Users are complaining about not being able to switch between steps to review information before placing an order. They have to click back four times to return to the first step and then click next four times to reach the final step again.

Priority 2

Users don't know how many steps are involved from the checkout page to completing the transaction. This lack of transparency leads them to delay completing their transactions, assuming they'll have more time later.

Priority 1

Users are becoming disinterested because the process of redeeming points is too long, especially once they reach the checkout page. This suggests that the process needs to be streamlined.

Priority 2

Users don't know how many steps are involved from the checkout page to completing the transaction. This lack of transparency leads them to delay completing their transactions, assuming they'll have more time later.

Priority 3

Users are complaining about not being able to switch between steps to review information before placing an order. They have to click back four times to return to the first step and then click next four times to reach the final step again.

One more thing before jumping into the designs

Competitive Analysis

A sneak peek into one of Amex's biggest competitors. Bank of America's points redemption user journey. Both for mobile and web.

My Observations

The flow is broken into manageable steps, making it easier for users to follow and complete the redemption process without feeling overwhelmed.

Key actions (e.g., selection, confirmation) are clearly highlighted, giving users confidence that their inputs are being registered.

Screens follow a predictable structure, reducing the learning curve and allowing users to navigate with minimal friction.

Important steps like reviewing points, confirming selections, and final success states are clearly emphasized, helping prevent errors.

The success screen provides a clear sense of completion, reinforcing that the transaction was successful.

The transition between mobile and desktop flows feels inconsistent, requiring users to adapt to different interaction patterns.

The flow spans multiple screens for what should be a quick, repeatable action — increasing time and effort.

Frequent users are forced through the same linear process instead of being able to skip or accelerate steps.

Not all screens clearly prioritize primary actions, making it harder to quickly identify what to do next.

Amex’s existing experience reflects common industry patterns, with similar multi-step checkout flows seen across competitors.

Amex’s existing experience reflects common industry patterns, with similar multi-step checkout flows seen across competitors.

The existing flow is fragmented across multiple steps, requiring users to repeatedly navigate forward and backward.

Choosing a direction

Given the time constraints and user drop-offs, two potential directions were explored.

Path 1

Keep the same architecture and enhance the experience by making changes to the existing pages

Low Effort

Medium Impact

Path 2

Change the underlying checkout architecture and reimagine the experience

High Effort

High Impact

Path 1

Enhance Existing Experience

  • Introduces step indicator to improve visibility of progress

  • Reduces some friction with minor UI and hierarchy improvements

  • Faster to implement using existing architecture and components

  • Minimal learning curve for returning users

  • Introduces step indicator to improve visibility of progress

  • Reduces some friction with minor UI and hierarchy improvements

  • Faster to implement using existing architecture and components

  • Minimal learning curve for returning users

  • Introduces step indicator to improve visibility of progress

  • Reduces some friction with minor UI and hierarchy improvements

  • Faster to implement using existing architecture and components

  • Minimal learning curve for returning users

Trade-offs

  • Core flow remains fragmented across multiple steps

  • Repetitive inputs and context switching still exist

  • Limited impact on overall drop-off rates

  • Improves usability, but doesn’t fundamentally solve confidence issues

Path 2

Reimagine Checkout Experienc

  • Combines steps to reduce unnecessary transitions and repetition

  • Provides clear context (selected card, points, summary) in one place

  • Improves user confidence through better visibility and feedback

  • Creates a more seamless, guided flow from start to completion

While Option 2 showed stronger potential, both directions were validated through A/B testing to ensure a data-driven decision

While Option 2 showed stronger potential, both directions were validated through A/B testing to ensure a data-driven decision

Users completed tasks faster with fewer pauses and backtracking in the redesigned flow.

Drop-offs decreased by simplifying steps and reducing unnecessary transitions.

Users reported higher confidence and clarity in the redesigned experience.

Driving Alignment with Stakeholders

Driving Alignment with Stakeholders

There was initial pushback around effort and implementation complexity. Using A/B testing results and user feedback, I helped shift the conversation from opinions to evidence, enabling the team to align on the higher-impact solution.

Conclusion

Engineering raised valid concerns around implementation complexity, while product stakeholders saw strong value in Option 2. By grounding discussions in A/B testing data and user needs, we aligned on moving forward with the higher-impact direction.

Following alignment, Option 2 was successfully handed off and implemented in collaboration with engineering and product stakeholders.

Home

BMV - Point of Sale Homepage Redesign

© 2023. Designed by Harish Bhetalam