American Airlines app for iPhone

Evolution of an iPhone App

In 2011, my work on the iPhone app for American Airlines consisted of maintaining the existing design which had evolved from the first version. It used many familiar visual tricks like gradients and bevels to make buttons feel buttony and type to feel inset within them.

However, in late 2011—early 2012—American went through a pretty big rebrand. We had an opportunity to do an overhaul on the app design and look into implementing a lot of new features. But as with most rebrands, the brand agency over-extended its reach and created a set of designs for the native apps as an extension of the brand system that they created. This essentially was just a coat of paint over the existing IA and functionality.

This, to everyone’s benefit, was short-lived. And with the release of iOS 8 we had an opportunity to re-imagine the app. We would still support all of the existing functionality, add to it, and redesign it from the ground up. 

We did a lot of competitive analysis and design explorations. We looked at other travel apps, lots of booking apps and highlighted experiences that were effortless and delightful and bookmarked them to find a way to integrate similar things into the app when and where we could.

We partnered with Apple to be one of the first air travel apps to integrate with passbook. We were featured as an one of the primary examples of integration which drove significant downloads.

I worked with AA to bring seat maps (and purchasing) to the AA app. Additionally, I also designed re-booking flows, upgrade purchases flows, and looked into integrated marketing placements.  We looked into bringing other important DOT elements like weather and traffic with greater detail into the app. As noted in the AA App for Apple Watch description, the travel cue eventually made its way into the app and it fit nearly perfectly within the existing design.

BrandAmerican Airlines
TagsiOS, App, Native App, UX/UI Design, iPhone

Seat Maps

One of the larger projects was to integrate seat maps into the app(s). We went through so many rounds of iterations on seat icons, color choices and their corresponding values in terms of space, and how to generate placement within the various plane configurations. Several times we worked (or were surprised by) seat map design and experience work from other departments within AA. We were faced with random color choices that arbitrarily reflected monetary value even though the map showed no increase in space. Selected vs unelected states were too different. And the selected seat within a multiparty booking was ineffectual.

While there was little we could do to battle an internal department/group within AA, we focused on the experience itself and trying to separate that from some of the nonsensical UI. We designed a small card that would slide up from the bottom when the user tapped on a seat. It had some key info and a select, purchase, or upgrade button depending on the seat type.

We were able to design some minor graphical treatments for things like bulkheads, lavatories, and exit rows. The most successful part of this long-term project was the payment process. Taking lead from the form fields within the Uber app, we used field masking to make for a seemingly minimal set of fields that flowed seamlessly based on the info the user was entering. This was UX win… creating a minimal and streamlined CC entry and payment process/flow.

What would I do differently?

Being the sole designer for all of the native products, it left me with little extra time to add in surprise and delight. I would have focused on some simple animations and screen transitions that might help the user. I would have also built out a component library, even though I primarily worked in photoshop. Shortly after leaving my role with AA, I started working in Sketch and wish I had started on that earlier. 

I would have also built more prototypes for the larger flows rather than trying to convince others through wireframe flows. Using a prototype, even just a tap through, proves out flaws and other issues much faster than analyzing wireframes.