American Express UX & UI

An overhaul of Amex Travel, defining and implementing new accessible UX and UI patterns.

Whilst in my role as a Senior Designer at Tui Media, I led the UI redesign of AMEX Travel. The project began with an extensive audit to identify all design patterns used across multiple sites.

We discovered an excessive amount of styling variations. For example: fourteen card designs, eighteen button designs, five grids, and countless type styles! This made for a disjointed and confused user experience. 

Next, we grouped the patterns and broke each down into their essential functions. We then designed, built and user-tested a set of vanilla patterns that could be expanded to cater for various needs. We also defined a consistent responsive grid, and a clear type hierarchy with an emphasis on the Guardian Egyptian font to differentiate Travel from the rest of AMEX.

New vanilla header blocks. One pattern, two variants. 

New vanilla promo. One pattern, three variants.

With a number of different agencies working across Travel, the design process entailed a lengthy dialogue between multiple stakeholders, taking into consideration the limited technical capabilities of certain systems in use. These limitations meant that UX decisions also had to be carefully considered, through clear communication with developers at all agencies involved.
Using our complete set of vanilla patterns, we created a number of test pages. We also redesigned and launched an MVP Travel homepage as a full proof of concept. Below is a new and old homepage comparison, and two editorial page variations.

New and old homepage comparison. 

Two new editorial page variations.

I designed a speculative flight search results page using the new design system.

Speculative results page constructed with new design system. 

The redesign work also involved the creation and implementation of a new global Travel navigation to improve accessibility across different Travel products.

We housed the different elements in a pattern library, providing tested and maintainable design and code that is also demonstrably accessible.

The project proved to be a success, with all agencies adopting and adhering to the design system. Once fully rolled out, AMEX Travel will be consistent, elegant and accessible.