American Airlines + Citibank
Designing a scalable digital system for six co-branded cards that clarifies loyalty mechanics and supports consistent, modular content.
American Airlines and Citibank needed a series of web pages for existing cardmembers across six co-branded cards — Executive, Globe, Platinum, Gold, MileUp, and Business.
As the Lead Visual Designer, I was responsible for art direction, visual design, and interactive prototyping across all pages.
The resulting experience introduced a modular, scalable design system that ensured visual consistency and flexibility across all six product pages.
Educational Module
Workshop insights revealed widespread confusion among cardmembers about the differences between AAdvantage® miles and Loyalty Points — how they’re earned, redeemed, and interconnected.
To address this, we designed an interactive module that visually explains each metric and their relationship to total spending, simplifying a complex loyalty structure into a clear, engaging experience.
Centralized Hub of Essential Information
We created a consolidated section that surfaces key benefits and mileage opportunities for each card at a glance, enabling users to understand and compare perks before exploring card-specific details.
Calculator
We designed and prototyped an interactive miles and points calculator that allows users to input or scroll through spending categories to instantly see projected earnings.
Each slider had carefully calibrated input limits to maintain accuracy and ensure intuitive feedback across devices.
Loyalty Point Reward
We also developed a dynamic module that showcases what users can achieve at various Loyalty Point thresholds, reinforcing motivation and engagement through clear reward visualization.
Design System
We established a flexible, component-based design system adaptable to multiple cards and future co-brand initiatives — supporting efficient updates, scalable UX, and cohesive visual language.
