The List
A Mobile City Guide For American Express Cardmembers
THE CHALLENGE:
A large part of the American Express promise of World-class service is their travel and entertainment offerings. American Express began in the travel business, and their heritage is a large part of their DNA. American Express wanted to expand their mobile offerings to their exclusive Centurion Cardmembers by creating a curated travel guide to key destinations around the world. The challenge was to bring their deep travel content to the Cardmember in a compelling but simple fashion on the small screen.
THE SOLUTION:
Using the location-aware features of the Cardmembers smartphone we could present them with a destination guide upon login. The navigation was as simple and as shallow as possible to get Cardmembers to a featured content as quickly as possible. The site was built as an HTML-based website so it, could build responsive various device platforms and also deployed to the in-app browser within American Express’ primary mobile servicing app.
SITE STRUCTURE & USER FLOWS:
Site structure was as simple and shallow as possible. Naming for destination category navigation was written to evoke the curated, exclusive nature of the content. Organization of the site mirrored the printed guide materials that Cardmembers were accustomed to receiving on a periodic basis. The overall interface patterns and conventions were kept in line with American Express mobile guidelines so the transition from native app to the in-app browser would be nearly seamless for the user.
Annotated wireframes were created for detailed client feedback and internal ad-hoc user testing.
VISUAL DESIGN
After overall site structure and navigation conventions were determined with wireframe prototypes visual design elements were applied to the site. Several directions were presented, each adhering to American Express Centurion and mobile interface brand guidelines.
DIRECTION 1
Direction 2
MY ROLE:
UX Lead, Visual/UI designer
TOOLS:
Omnigraffle (Sitemaps and wireframes), Adobe Photoshop (High fidelity Mockups)