01 / HERO & PRODUCT SHOWCASE / Consumer / Mobile UX
An enhanced disruption module within the American Airlines app, from eligibility to accommodation and an active voucher wallet.
02 / EXECUTIVE SUMMARY
THE PROJECT IN 30 SECONDS
The paper-based voucher process created friction for customers and the teams helping them during flight disruptions. The opportunity was to replace that manual process with a digital experience that made eligibility, next steps, and issued vouchers easier to understand and access.
Connect trip alerts, eligibility, hotel selection, claims, and the wallet within the American Airlines app.
A connected digital journey illustrated through ten high-fidelity screens and a click-through experience. No quantitative impact is claimed.
03 / PROBLEM & OPPORTUNITY
Before HMT, the hotel, meal, and transportation voucher process was paper-based and inefficient. Customers affected by delayed or cancelled flights relied on a manual process to access eligible accommodations. HMT was created to digitize and streamline that experience within the American Airlines app, bringing eligibility, voucher claims, and issued vouchers into one connected flow.
Who it serves: American Airlines customers with delayed or cancelled flights, especially travelers facing a controllable disruption or an overnight stay away from home.
04 / DISCOVERY & INSIGHTS
Trip-to-hub workflow mapping, user interviews, and an AA design system review connected navigation pain points, customer frustrations, and system gaps to the new voucher experience.
Design implication: Keep trip entry direct and hotel, location, and transport information together.
Design implication: Show eligibility, the next claim action, and issued vouchers without making travelers reconstruct the process.
Design implication: Extend familiar AA patterns for eligibility, selection, claims, and wallet states.
The case-study account identifies workflow mapping, user interviews, and design-system review. Participant counts, transcripts, and a formal test report are not included in the supplied materials.
05 / STRATEGY & DESIGN DECISIONS
The rationale below explains the design direction and its constraints. It does not imply that every alternative was formally tested.
Use a push notification or in-app trip banner to enter the disruption hub. Preserve the familiar American Airlines navigation and trip context rather than introducing a separate product.
Summarize eligible hotel, meal, and transportation support with an on-demand rules explanation. The design scenario uses a roughly three-hour controllable delay for meals, and an overnight stay away from home for hotel and transport. These are scenario assumptions to validate against current airline policy, not a universal entitlement.
Offer one-tap or bulk claims where appropriate. Hotel support branches into selection and confirmation; meals lead to a voucher and redemption; transportation leads to a ride code, shuttle, or taxi option.
Make active vouchers reachable from trip details and the Vouchers tab. Show codes, expiry, terms, and next actions. Offline access and automatic issuance for eligible AAdvantage members are proposed capabilities requiring further validation.
For non-controllable disruptions, explain ineligibility and offer rebooking, refund, and self-service paths. The expanded design scope includes no-inventory reimbursement, expired or used states, history, and support; these remain part of the expanded design scope.
06 / ITERATIONS & VALIDATION
The supplied materials show the refined ten-screen flow and a click-through experience. They do not include dated early explorations or a formal before-and-after usability study.
Replace the manual voucher process with eligibility, claims, and issued vouchers in one trip journey.
Test claim completion, hotel selection, wallet retrieval, and recovery during a simulated disruption.
Capture completion, errors, time, and qualitative feedback against a documented baseline.
07 / FINAL EXPERIENCE
INTERACTIVE DESIGN DEMO / HMT
Explore the hotel, meal, and transportation design flow. Flight, hotel, and voucher information in this walkthrough is illustrative. Start with a lock-screen flight alert, open trip details, review eligible support, and find claimed vouchers in the wallet.
THE FLOW / INSIDE THE AA APP
Delay or cancellation banner opens the disruption hub.
Clear benefit status, reason, and rules on demand.
Hotel: select + confirm.
Meal: voucher + redeem.
Transport: code or shuttle.
Active codes, expiry, partner actions, and support.
Non-eligible states, no-inventory reimbursement, history, offline access, and automatic issuance are proposed extensions. The interactive walkthrough focuses on the core claim flow.
Use the familiar trip navigation, back arrows, and Vouchers tab. Follow the journey from a disrupted trip to claimed vouchers in the wallet.
BROWSE THE SCREENS ↓Hotel · Meal · Transportation
TEN SCREENS / ONE CONNECTED FLOW
Scroll across the screens. Select any screen to open the full-size export.
08 / OUTCOMES & IMPACT
The design connects eligibility, benefit claims, and voucher retrieval. Stress reduction and completion efficiency remain intended benefits, not measured results.
No measured savings or operational reduction is established for this case study.
The experience connects trip details, the disruption hub, voucher claims, and the wallet in one digital journey. Ten high-fidelity screens show hotel selection, meal vouchers, transportation, and issuance confirmation. No quantitative results are claimed.
09 / REFLECTION & NEXT STEPS
The opportunity is to reduce ambiguity and effort at the moment of disruption while preserving the existing app’s navigation, visual language, and policy constraints.
Next, test the core journey with disrupted travelers and evaluate exception paths such as no hotel inventory, expired vouchers, and recovery from an interrupted claim. Expand the existing design system around observed needs.