Promotion Code/Opt-in
Adding a feature to the AIR MILES flights booking flow
Promotion code and opt-in functionality that supports AIR MILES new marketing campaigns, partnerships and program changes.
Two key changes include:
-
Adjusting the Flight Benefit (for AMEX and World Elite users) to be used once-per-year and apply during the redemption process
-
The addition of temporary promo codes for various groups of collectors
Role
Category
Lead UX Designer
Timeline
8 Weeks
Desktop
Tablet
Mobile
Research
Usability test
Project highlights
Research and Competitive Analysis Driven
Future proofing use cases
Test and learn approach with User testing
Goal
Implement discount functionality within the flights booking experience that supports partner benefits and new marketing campaigns.
Research Methodologies
I began by creating a research plan that outlined the problem, research goal, research questions, methodologies, requirements, and assumptions.
Research Goals
-
To learn about promotional industry best practices
-
To learn the user journey of applying promotions in flights booking flow
In summary, there are lot of assumptions that can be made with promotion codes. We experience them a lot, especially in the eccomerce space. As a UX designer, detaching from personal experience was key, especially because this is a travel experience. This is why I let the data, research driven, industry best practices drive design decisions.
Secondary research
Coupons and other discounts should be easy to apply and carts should clearly display how the total was affected by the promotion. The research focused on 3 themes of:
1. Empowering - Applying Discounts and Promotions
2. Valdiating - Reflecting Discounts recieved
3. Digital touchpoints - Where in the flow?
Key Findings
Include coupon-code fields as a core part of both the cart and checkout pages
-
Coupons codes should be close to the payment information, hierarchically above or before the checkout button
-
Users who have a coupon code wants to enter them as soon as possible because it allows them to check the coupon is valid before they enter personal information and the total to be updated early in the process
Show any discounts or special restrictions applied to items in the cart
-
Helpful for users when they could clearly see that the coupon had (or had not) been applied to their cart, instead of having to guess whether the price will be updated later
-
When users don’t see discounted prices reflected in the cart, they may abandon the purchase
Reflect any specials, deals, or discounts in the payment total
-
Coupon codes should be validated and reflected in the cost before requesting payment information
-
Users should see savings and understand how the total is calculated
Use Cases
Use cases were mapped out for future proofing the component:
-
Promo code error - Incorrect Code, Already Applied, Expired
-
Promo code added - First promo added to list - Benefit not added
-
Promo code added - Second promo added to list (first one not applied) - Stackable
-
Promo code added - Second promo added to list (first one applied and is not combinable with the one being added) - Current promo is better than the new one being added
-
Promo code added - First promo addedPromo code added - Second promo added to list (first one not applied) - Not Stackable to list - Benefit added (combinable)
-
Promo code added - Second promo added to list (first one applied and is not combinable with the one being added) - Current promo (even if a combination of promos) is not as good as the new one being added
-
Promo code added - First promo added to list - Benefit added (not combinable)
User Interview + Testing
-
7 users were tested
-
7 Desktop users
-
All users were Cardholders of the key changes
Given the changes, we tested a prototype of the experience to:
-
Gauge collector comprehension of adding the benefit and promo code, and the stack-ability of codes
-
Determine if there are any pain points in the process that could affect collector experience
Methodology
We set the scene by asking participants to imagine that they received an email, seeing that they had a credit card benefit and some promo codes, and asking them to start on the Search Page and continue through the rest of the experience, ending at the Review Your Booking page.
We looked for how/whether they (1) applied the flight benefit, (2) used the SPRING2022 promo code (3) used the ONYX2022 promo code
Research Findings
Main Themes
-
Overall, usability was high. Participants understood (1) how to add flight benefits and promo codes to their redemption, and (2) that they couldn’t add both promo codes at the same time.
-
Yet whether participants intended to apply benefit/codes was mixed, with just over half applying benefits/codes at the first opportunity (despite seeing the option to add), and most who did apply having questions about the meaning of the benefit.
-
Most participants who applied the benefit/codes at the first opportunity were confused when seeing the second spot for benefit/promo codes on the final “Review Your Booking” page
Usability of Adding Flight Benefit and Promo Codes
Participants understood how to add the Flight Benefit and Promo Codes, and most knew that using the benefit/codes would mean using less Miles to redeem.
All participants understood that they were unable to add both the Spring2022 and Onyx2022 promo codes at the same time, and most realized that they could choose the more lucrative Onyx2022 code.
Design Considerations
-
Condense spacing, as participants had to scroll to see full benefit/code information
-
Adjust hierarchy so that more recent additions appear at the top
How it Works
Participants understood how to add the Flight oWhile all participants saw the spot to apply the benefit and add promo codes, around half intended to continue without adding either. and Promo Codes, and most knew that using the benefit/codes would mean using less Miles to redeem.
Skipping was related to a lack of information about the benefit’s meaning.
-
Could have been influenced by testing environment, which did not specify benefit by name or provide physical codes
Design Considerations
-
Remind collectors that benefits/promos might be available before they progress
-
Ensure that the “how it works” link contains the same information in the modal that appears when hitting “apply”
-
Consider rephrasing ”Apply” to something like “Apply your benefit”
Review Your Booking
Of the participants who applied the benefit/codes at the first opportunity, all but one were confused by the benefits/codes spot on the Review Your Booking page.
Reasons for the confusion included uncertainty about whether the benefits/codes had been correctly applied and expecting to see these discounts are part of costs.
Design Considerations
-
Provide a more condensed summary of benefit/codes on the Review Your Booking page
-
To help minimize cognitive load, use a drawer for promotions and benefits
Key features
Review Page
-
First opportunity to apply benefit/promo codes
Flight Benefit & Promo Code Views
-
States include Benefit, Modals, Code applied, Successful and Unsuccessful
Review your booking page
-
Second opportunity to apply benefit/promo codes
