TIMELINE
Sept 2018—Sept 2021
PLATFORM
Web & Mobile
MY ROLE
Staff product designer (UX/UI)
Overview
Co-brand partnership
Delta and American Express have an exclusive co-brand credit card partnership that dates back decades and has been extended through at least 2029. This agreement allows Amex to issue a suite of Delta SkyMiles® American Express Cards, reinforcing a deep relationship between the airline and the card issuer.
Key business goals
Establish a co-branded Amex cards tier for SkyMiles. Create unique experience for the 3 different tiers of AMEX cards and for members and non card members in the dashboard experience.
Earn miles on everyday purchases and boosted miles on Delta and related spend, often with no cap on miles earned.
Bonus miles offers for new card applicants when they meet spending thresholds.
Travel perks, such as:
Free checked bags or priority boarding on Delta flights (varies by card).
Delta Sky Club® lounge access for higher-tier cards (Reserve and certain Platinum) when flying Delta.
Companion certificates, Medallion Qualification Dollars boosts, and statement credits (varies by card and recent updates to card features).
Delta SkyMiles®
Gold Business
Delta SkyMiles®
Platinum Business
Delta SkyMiles®
Reserve Business
Design approach
Deliver a personalized UI through custom AMEX-branded banners and styling using existing design system on brand colors.
Increased offer visibility by implementing strikethrough pricing for eligible card bookings.
Ensured legal compliance via transparent modal displays for promotional terms.
Drove user acquisition by strategically showcasing the long-term value of AMEX membership.
Use preset defined branding from the design system.
Branded element placement
Cabin footer checkout for potential savings if user sign up for membership. We implemented a user focused approach to make sure non-members see the savings they’re missing out on by displaying clear discounts for every cabin type.
Fare selection placement for members and non members. To help with transparency and clarity, we used the same strikethrough pricing seen in the footer. A prominent message confirms when an exclusive AMEX Card member discount is applied, providing peace of mind. Conversely, the messaging will also clearly state if a discount was not applied based on the specific fare type.
Logged-in banner dashboard experience, to personalize tier level focusing on delivering the user personalization.
Promo modal advertisment for non-members and members alike.
Development handoff
A synergis relationship
During the development phase, I worked closely with the dev and QA teams to make sure the UX/UI was rock-solid and polished for every user. Here’s how I ensured a high-quality experience:
Rigorous Testing: I tested the HTML and CSS across all major browsers (Chrome, Firefox, Safari, and Edge), devices, and screen sizes to ensure a smooth, consistent look and feel.
Standards & Accessibility: I verified that our code met W3C standards, focusing on semantic structure and accessibility so the experience is inclusive for everyone.
Edge Case Prep: I checked for tricky scenarios like long text truncation and how the layout handles rapid screen size changes, ensuring the design never breaks.
Total Transparency: My goal was to deliver a defect-free interface where the user always feels in control, whether a discount is applied or not.