AMEX TRAVEL REDESIGN

‘Unify the look and feel of Amex Travel’.
Defining and implementing new design and UX patterns for use by multiple agencies, across different products. 


Whilst working as a Senior Designer at Tui Media, I led the 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 the 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.

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


New pattern library includes usage information, code, and a live view.

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

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.


New global navigation. Three states of open drawers.
Mark