PRODUCT DESIGN.UX/UI DESIGN. CREATIVE DIRECTION

American Express Travel App

American Express, one of the worlds most recognizable brands, needed to communicate their brand and demonstrate best in class user experience through their service oriented Travel Application across multiple mobile platforms. The goal was to offer standard (green card), platinum and centurion card members a travel travel application that offers detailed travel information that includes, ticketing, car rentals, and lodging. The application experience was designed to be your personal travel concierge, brining you time sensitive alerts as well as showing you activities and entertainment near you whether in the airport or in the hotel. Each card (Green, platinum or centurion) unlocked different levels of service, centurion offering the most personalized services.

 

Leadership Role
  • Directly managed the Product team consisting of UX/UI and creative
  • Hands on development of UX/ and UI
  • Creative and design direction
  • Directed front-end development

UX Design

After the user personas, competitive research and business objectives were defined we now had a deeper understanding of who were designing for and what American Express travelers wanted from the application it was time to define the optimal experience.

User flow diagrams were initially created to help define a high level understanding of how a user would get through the application and define key interactions and to help envision an overall “design system”. Detailed technical user flow schematics were created that mapped functions to front end specifications and backend databases.

 

Initial analog sketches were created to quickly get some big  ideas on the table and to pressure test key interaction points for the mobile application. A detailed set of core template wireframes were created for all platforms and modified throughout the UX/UI, prototyping and testing phases. Using the wireframes, paper prototypes we created for quick testing during the UX/UI phases and helped to eliminated interaction issues early on.

 

Prototyping

Low and high fidelity prototypes were created and tested at various stages of the project. We used low-fi prototypes in house to test more detailed navigational elements, especially on mobile, and higher fidelity prototypes to test with user audiences.

What we learned
  • Depending on what section they were on, user often wanted to control or reveal more or less information on screen. They didn’t mind an extra tap to reveal addition information as long as the screen was easier to scan.
  • User expressed the need for on-screen customization, moving modules around or creating custom home screens based on their personal travel preferences. This was a feature that had deeper time and development implications and would find its way into the next phase of product development.

 

UI design

After testing the UX designs via mockups and prototypes we moved into designing the visual interface and all associated design elements.

What we did
  • Working from user flow diagrams, we developed a series of preliminary sketches with which to start.
  • Designed and produced complete icon sets
  • Designed and produced branded pattern systems specific to the mobile environment
  • Testing / validation, user feedback, and reporting
  • Detailed interface design specifications focusing on (colors, image use, typography, themes, styles, patterns, and iconography) were created and shared with the front-end development teams


 

Guidelines

A comprehensive design guidelines document was created to help guide design and development teams during the development phase and post launch. The guidelines covered all UI elements, color systems, iconography and branded elements (Base, Platinum, and Centurion) for specific card members.

 

 

 

 

The Results

The application launched with a big push from marketing and PR and was well received amongst the American Express travel community, business traveler in particular. The initial travel application has since changed to American Express Business Travel app but most of the original architecture and feature sets are still present.

Project Achievements
  • 8 month project lifecycle / launch
  • One of the most robust travel applications available
  • Created a rich UX experience tailored for three distinct card member types
  • Increase engagement with card holders
  • Created a robust set of guidelines + specifications to support multiple teams