{"id":68,"date":"2023-05-10T17:40:09","date_gmt":"2023-05-10T17:40:09","guid":{"rendered":"https:\/\/www.trevorhcurtis.com\/?page_id=68"},"modified":"2023-06-21T20:17:42","modified_gmt":"2023-06-21T20:17:42","slug":"american-airlines","status":"publish","type":"page","link":"https:\/\/www.trevorhcurtis.com\/portfolio\/american-airlines\/","title":{"rendered":"American Airlines"},"content":{"rendered":"\n
\n
\n

Aileron<\/h2>\n\n\n\n

Aileron is the ultimate collection of visual design and user experience materials for all the digital products designed at American Airlines. In 2018, I began unifying our team around a single design language to make it easier to develop future digital products.<\/p>\n\n\n\n

Aileron is based on an open-source design system documentation project called Fractal<\/a>. In 2018 I began exploring how I could customize Fractal to create a design system documentation site for American Airlines.<\/p>\n\n\n\n

Aileron is a combination of Sketch and Axure RP component libraries, font files for the American Sans typeface, custom icon fonts, and code. HTML5, CSS3, and JavaScript were written for an Angular front-end to produce new digital products at American Airlines.<\/p>\n\n\n\n

Aileron made extensive use of Storybook to show live front-end design components for both designers and developers to inspect. Aileron is a resource for designers, researchers, developers, and content creators to see American Airlines’ digital guidelines in one place.<\/p>\n<\/div>\n\n\n\n

\n
<\/stop><\/stop><\/linearGradient><\/path><\/path><\/svg><\/a><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div><\/div>\n\n\n\n
\n
<\/div>\n\n\n\n
\n
\"Screenshot<\/a><\/div><\/div><\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
<\/div><\/div>\n\n\n\n

View an archive of Aileron<\/h3>
You can view the design system documentation site I coded for Aileron as it existed in 2019. Further refinements have been made since my departure. All library files have been removed and some links will not work without valid American Airlines credentials.<\/div><\/div>
\n
View Aileron<\/span><\/a><\/div>\n<\/div><\/div><\/div><\/div>\n\n\n\n
<\/div><\/div>\n\n\n\n

Seat Map<\/h2>\n\n\n\n

I completed a new seat map experience for American Airline\u2019s customer booking flow, which is still in use today by millions of customers weekly. Over a period of three years I provided design support for the addition of new products to the seat map, as well as enhanced messaging.<\/p>\n\n\n\n

If you’ve ever chosen a seat for an American Airlines flight on a desktop computer, mobile device, or at an airport kiosk, you have experienced this design first-hand.<\/p>\n\n\n\n

<\/div><\/div>\n\n\n\n
\n
\n
\"\"\/<\/a><\/div><\/div><\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/a><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div><\/div>\n\n\n\n

American Airlines experienced an immediate 5% increase in premium seat sales when the new design launched in 2016, and several additions generated even more revenue through 2019<\/strong>. I was responsible for creating prototypes, final visual designs, conducting user testing, and providing development support for the seat map over a three year period. I performed several user tests with Elite customers at the DFW International Airport to measure task-based efficiency and to gather visual feedback on the new design.<\/p>\n\n\n\n

The previous seat map relied on a right-hand legend with tiles that had small star ratings, so it was very difficult for customers to understand what type of seat they were purchasing without constantly referring to the legend on the right-hand side.<\/p>\n\n\n\n

The previous seat map also did not clearly indicate your running total if multiple seats were selected.<\/p>\n\n\n\n

<\/div><\/div>\n\n\n\n
\n
<\/div>\n\n\n\n
\n
\"\"<\/a><\/div><\/div><\/div>\n\n\n\n

American Airlines seat map as it appeared in 2015 before the re-launch<\/p>\n<\/div>\n\n\n\n

<\/div>\n<\/div>\n\n\n\n
<\/div><\/div>\n\n\n\n

The new seat map experience is clear, informative, and has a simple step-based path to follow.<\/p>\n\n\n\n

The new map makes use of color-coded tiles, with the seat prices written inside the tiles, to clearly show which seats have premium features. Extra vertical spacing in the seat map grid visually indicates which seats have additional legroom near the front of the aircraft.<\/p>\n\n\n\n

In 2017 the seat map was enhanced with accessibility features for blind and visually-impaired users to allow for keyboard navigation and spoken text using screen readers. The new design meets WCAG 2.0 Level AA accessibility standards as mandated by the FAA<\/strong>. Customers can navigate the seat map using the keyboard only through the use of WAI-ARIA tags and alternate text.<\/p>\n\n\n\n

<\/div><\/div>\n\n\n\n
\"\"<\/a><\/div><\/div><\/div>\n\n\n\n

New marketing banners were added in 2019 to further market premium seats, highlighting extra legroom, preferred boarding, and complimentary drinks. During a live A\/B test lasting 30 days, the new banners generated an additional $300,000 in premium seat sales<\/strong>. The banners were approved for permanent display in the seat map and are now a prominent part of the seat map experience.<\/p>\n\n\n\n

<\/div><\/div>\n\n\n\n

Delayed Baggage<\/h2>\n\n\n\n

I designed a customized delayed baggage delivery experience for passengers whose bags are delayed upon arrival. Passengers have the option of requesting that their bags delivered to a specific address upon arrival. To lower complaint calls to the FAA due to lost baggage, I was tasked with designing a streamlined baggage request experience that allowed passengers to give American Airlines details about where would like the bags delivered without having to speak to an agent or call the airline.<\/p>\n\n\n\n

The new baggage delivery experience gives passengers more control and greatly reduces complaint calls and questions at the airline counter<\/strong>. American Airlines is able to proactively let the passenger know there is an issue and provide them with a self-service solution, in some cases even before they land at their destination.<\/p>\n\n\n\n

<\/div><\/div>\n\n\n\n
\"\"<\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n
<\/div><\/div>\n\n\n\n

AA System emails<\/h2>\n\n\n\n

I designed all of the American Airlines system update emails that are sent out to passengers for flight cancellations, departure changes, and checked luggage status. Each template is optimized for a desktop and mobile presentation, and great care was taken to accommodate long titles and a dense presentation of important flight details. Color and typographical sizing communicate important information at a glance. I was able to make use of American’s large custom icon library in the header area to add some delight to what would otherwise be a very stressful communication for passengers.<\/p>\n\n\n\n

These email templates were launched in 2016 and are still in use by American Airlines today<\/strong>.<\/p>\n\n\n\n

<\/div><\/div>\n\n\n\n
\"\"<\/a><\/div><\/div>
\"\"<\/a><\/div><\/div>
\"\"<\/a><\/div><\/div>
\"\"<\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n
<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

Aileron Aileron is the ultimate collection of visual design and user experience materials for all the digital products designed at American Airlines. In 2018, I began unifying our team around a single design language to make it easier to develop future digital products. Aileron is based on an open-source design system documentation project called Fractal. In […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":746,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages\/68"}],"collection":[{"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":76,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages\/68\/revisions"}],"predecessor-version":[{"id":1968,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages\/68\/revisions\/1968"}],"up":[{"embeddable":true,"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/pages\/746"}],"wp:attachment":[{"href":"https:\/\/www.trevorhcurtis.com\/wp-json\/wp\/v2\/media?parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}