Let's TalkLet's Talk
image

American
Airlines

Role

Senior UX Designer

Platforms

Web, Mobile App, Airport Kiosk

Date

May 2016–May 2019

Technology

Sketch, Axure RP, Figma, Angular

American Airlines seat map experience on an iPad

Evolving the Brand

Following American Airlines' operational merger with US Airways, I took the lead in delivering a new seat map experience still used by millions of passengers every day for booking flights. I also designed engaging system email templates communicating critical updates to passengers.

I built American Airlines' first digital design system called Aileron. Based on AngularJS, and documented via Storybook and Fractal, Aileron gathers together live code examples of common atomic elements used across American's web and mobile apps.

  • User Research and Analytics
  • Design System Engineering
  • Email Template Creation
  • Prototypes and Wireframes
  • Information Architecture and Accessibility
Seat map imagery and experiments
Seat map imagery and experiments
Mobile-optimized seat map experience
Mobile-optimized seat map experience
American Airlines GDPR email templates
American Airlines GDPR email templates
Desktop system status email specifications
Desktop system status email specifications
Mobile-optimized system email specifications
Mobile-optimized system email specifications
Example partner advertisement email design
Example partner advertisement email design

Strict Accessibility

During my tenure at American Airlines, all of my design solutions were created to pass WCAG 2.0 AA certification, including the addition of features aiding non-sighted customers using screen readers and assistive technologies. The Aileron design system further established guideliens to ensure American Airlines' experiences remained accessible to all users.

Measured and Improved

My design strategies were measured and improved through user testing and feedback. I proctored in-person user testing to ensure that my designs met strict time-on-task and successful completion metrics, including revenue goals associated with the AAdvantage incentive program and seat upgrade sales. Upon shipping the new seat map experience on aa.com, a 5% increase in seat upgrade revenue crossing $250K was achieved during a 30 day observation period.

Aileron design system on an iMac

Aileron Design System

Aileron v1.0 launched in late 2019, a two year effort that involved partnering with front-end developers modernizing American's booking flow using AngularJS (now discontinued). Using Fractal, I produced a comprehensive design system specification that gathered all of American's branding colors, icon font, and typography standards into a single, easy-to-reference guide.

See Aileron in action

I'm hosting a copy of the Aileron v1.0 design system site that you can view live. The system has developed quite a bit further, but the code, design thinking, and initial organization are all here, including specifications for mobile app and web experiences. All proprietary property and links to confidential files or information are redacted or removed.

View the Aileron v1.0 site