Leveraging loyalty rewards redemption experience to AAdvantage members

How might we empower member to use their miles and earn effectively?

Team

Product Manager

Front-End, Back-End Developers

CTO

Skateholder: Head of Product, Director

My responsibility (Role)

User research

UX/UI Design

Prototyping

Timeline

Mar2023 – July2023

Background

AAdvantage Events™ platform offers to Advantage® members can earn and use miles in a variety of ways—whether redeeming miles in full, combining miles with cash, or paying with cash alone—on exciting events and experiences with tickets directly from Ticketmaster.

Problem statement

The current AAdvantage Events™ platform lacks the ability for members to redeem their miles for ticket purchases, limiting flexibility and reducing the perceived value of the loyalty program. While partial redemption functionality exists in the system, it has never been fully implemented or used.

Objective

To address these challenges, we aim to implement and optimize the Redeem Flow, empowering members to use their miles effectively and enhancing the overall platform experience.

Business metrics

The Customer must be able to log in with their AAdvantage credentials (SSO).
The Customer must be able to fully redeem the transaction using miles available on their AAdvantage account
The Customer must be able to use Cash+Miles (split pay) to purchase tickets on the AAdvantage platform.
Go live with full redemption and split pay by the end of June 2024.

Starting Point

The Redemption feature has been partially implemented but has not yet been deployed for active use. Our mission was to complete its full implementation and ensure it was actively used by AAdvantage members.

Members currently have no option to: Fully pay with miles (full redemption). Combine miles with cash (split pay).

Assumption

This gap in functionality creates a suboptimal user experience and does not align with member expectations for flexibility and convenience when using their loyalty rewards. Furthermore, the absence of a streamlined redeem flow limits the platform’s competitive edge in offering innovative payment solution

Discovery

We went through several meetings internally with business and dev teams, finding out that were confused about how the slider works for redemption. We also got asked some questions during the time.

1. Should the “slider” for redeeming miles default to “full redemption” based on what is needed for full redemption and the miles balance?

2. Minimum amount ( % ) miles for redemption?

3. If there are very few (below the minimum % to redeem) should we disable the Redeem Miles button, the slider, or not disable at all?

4. The user can enter input by simply clicking on the selection, not just by using the slider?

5. The user can type input by clicking the input selection without having to use slider?

6. How can users easily see the points they have and the points they require?

Original design

Based on these insights, we now have a clear direction to move forward.

Milestons

1. Full Redemption
Members can choose to pay fully with their available miles by adjusting the payment slider to the full redemption setting. When full redemption is selected, the credit card widget will no longer appear in the UI. The total miles used will be deducted from the member’s account upon successful transaction completion.

2. Split Pay (Miles + Credit Card)
Members can use the slider to decide how many miles to apply toward the transaction, paying the remaining balance with a credit card. The credit card widget (ProcessOut) will remain visible to facilitate split pay transactions. To enable split pay, we will integrate with ConnexPay to issue virtual credit cards for the remaining balance. The system is designed to calculate payments down to the precise mile available in the member’s account.

3. Cash-Only (Credit or Debit Card)
Cash payment remains the default option for all users, using credit or debit cards. Transactions will be processed through the Braintree widget to ensure a seamless and secure experience.

Identifying usability issues

The old Redemption UI was somewhat complex and lacked elements to effectively engage and retain AAdvantage members for redemption use. Due to changes in business needs and constraints, we identified the need to update and adjust the design to make it more intuitive, user-friendly, and aligned with current goals.

The ‘Redemption’ flow had glance usability issues and needed to be redesigned for each of the three payment ways. In order toenhance usability, it was imperative to display messages when actions were made and ensure using same components as much as possible to maintain the consistency

Additionally, through workshops and team discussions, ensuring that the slider functions properly became our top priority

I analyzed the previous flow to identify key issues. A number of visual and usability problems were identified that needed to be addressed. Some of the main challenges were:

Requirement

The minimum amount redeemable is 1000 miles, otherwise user cannot redeem
User cannot earn points(miles) while redeeming
If full redeem is selected, the payment widget is hidden
Split pay redeem option will be visible in the UI for US events only due to technical issues temporarily

Develop

The redesign process involved numerous iterations. Initially, I focused on the slider’s functionality, exploring various approaches and conducting quick, iterative usability tests to ensure it was intuitive and easy to use. As the slider evolved, I made sure it aligned with the AA member experience. Next, I designed messages and error states for specific scenarios, ultimately leading to the development of the ideal solution.

The Redesign

Intuitive slider functionality

Finalized new slider for redemption

In the new slider flow, we have removed the concept of “points amount you have” (highlighted in light blue). This decision was made as the majority of potential users did not understand its purpose or relevance. To enhance the user experience, we have improved the design and streamlined the interaction flow.

Enhancing visibility error state and message

Typing state: if the value entered is too high, an error state + message appears. System will not accept this value. If user clicks off without editing their input with an valid value, it will default to the max value that can be applied.

Tooltip message for total amount of points required

Tooltip message for when user has no points, “redeem points” is disabled and a tooltip on click/hover is displayed

The redesign aims to enhance the visibility of the redemption process. The new layout simplifies the identification of error states and highlights important messages during redemption. This allows users to quickly identify and resolve any issues, ensuring a seamless experience without interruptions.

Busines Impack

We had already confirmed that our systems and servers were prepared to handle the high levels of traffic expected from the spike in volumes we had hoped to receive from the redemption announcement, particularly from AA’s Monday, July 15 Solo Email. This had been sent out to 10 million+ active members, and we had expected to see 200k+ traffic to the site that week.

What's next?...

On top of the standard monitoring, we’ll go through and outline the remaining ‘Phase 2’ product items and enhancements that we plan to add in a quick follow-up release. This will mainly include smaller design updates and any late UX change requests that couldn’t be included in the launch