American Express Invites
Project overview
I worked with B-Reel to improve the membership rewards experience on the American Express website. The brief was to optimise all digital interactions to deepen Cardmember relationships. To drive increased Cardmember satisfaction and grow billed business by activating and presenting content in a compelling and engaging way, throughout the whole customer experience.
The ‘Entertainment Rewards’ section is just one part which successfully launched in August 2016 in the UK only. It is serving as a test bed, gaining further analytics and insights before taking those learnings, iterating and launching into scheduled worldwide markets.
Below is a snapshot of my work to convey the thinking behind some of the design solutions.
Client
B-Reel | American Express | 2016
My role
UXD Consultant working within a B-Reel team that includes a Head of Strategy, Lead Designer and Managing Director.
Deliverables
Gathering insights/ research, current state analysis, landscape/ competitor analysis, scamps, wireframe flows, information architecture, wireframe and visual prototypes, final documentation and development feedback.
The challenge
- Currently multiple websites hosting Cardmember content and benefits, with variable user experiences and engagement strategies leading to poor engagement.
- Multiple platforms leading to cost duplication.
- Content is stored across multiple databases and tools, content is not fully activated or available.
- Difficult to find content, either through on-sight navigation/ search and off-site search.
- Number of page views per unique visitor are low with poor retention.
The opportunities
- Implement scalable and responsive ‘component’ driven web design.
- Optimise content for search and re-work navigation to make content easy to find.
- Combine content into a single place on the americanexpress.com domain.
- Activate and present content in a more dynamic and compelling way to increase engagement across multiple devices specifically mobile.
- Single, common technical infrastructure.
- Move to single, user-friendly CMS tool to store and publish content.
Discovery phase and research consolidation
The Amex team provided the main use cases and also provided a content audit for us to validate against while we continued to request and gather all research/ insights within the 'research' phase.
We collaboratively worked with Amex to further establish the brief, defining both business and customer needs whilst understanding the complexities of the project through multiple stakeholder meetings working with management, product owners and the internal design team based in London and New York. From this we suggested an MVP for phase 1 and agreed dependent on Amex's internal development resources to launch on time. We then moved into ideation, defining and design whilst constantly iterating. We also fed back to the development team during their agile build cycles.
Using insights provided by AMEX
We requested as many insights and research as possible to help define the ideation stage. This included SEO analysis/opportunities provided by GNICS. Previous user-testing documentation, internal usage analytics and Cardmember personas.
Understanding the depth of the problems
Left is a snap-shot of multiple webpages all providing similar features but on multiple domains reflecting the historic siloed nature of the company. Many are mini-sites which navigate away from the main Amex website creating an overall disjointed, frustrating and confusing customer experience.
Collaborating with American Express to inform the brief and the MVP
After analysing all web channels and functionality this initial solution was explained to stakeholders to show how the mini-sites could be unified and how to access the one solution with minimal impact to improve IA and navigation.
Grouping journeys through landscape analysis
Here we analysed multiple company experiences from membership schemes to purchasing offers and events across mobile, desktop and tablet. The items of interest were then classified into the 6 sections below to deliver a landscape/ competitor analysis to help inform not only phase 1 of the project but all other key parts of the Amex Cardmember experience.
Understanding current customer journeys, information architecture and navigation
I like to personally analyse the current experiences as it helps me fully understand the existing complexities and deeper issues not previously uncovered to then explore and visually communicate solutions.
This includes both 'Signed in' and 'signed out' user journeys as well as the example below looking at the user journey from finding a link on a search results page to booking an event.
Raise awareness and optimise search
From the analytics research provided it also recommends removing barriers to content but questioned what should and should not be hidden behind login? For me, all this great content should be 'open'. The only differences being that a signed in experience would be more intelligent and not show irrelevant components e.g. The newsletter subscription CTA if the Cardmember has already signed up to it whilst also having access to other features e.g. My Account details. This solution will instantly raise awareness within and outside the Amex site through SEO and add real value to card members.
Streamlining and aiding discovery
Below shows how convoluted and confused the current experience is with 14 steps in a 'happy' journey to purchasing a Beyonce concert ticket. I then suggested a more direct and relevant 9 step process which includes additional functionality by directing the customer back to the American Express 'Entertainment' page after completing the purchase on the ticket provider website (similar to Quidco).
This solves the problem highlighted within the previous user-testing document whereby Cardmembers found it difficult to get back to the Amex site after purchasing on the partner booking site. This also provides a follow-on journey (no dead-ends) whereby customers can then discover and book similar events or book dining, travel and accommodation for the event creating a continual loop of interest, discovery and engagement, benefiting both the customer and the business.
Current and recommended user journeys
Uncovering further issues
For me, one of the most interesting discoveries is when a main event like a Beyonce concert is marketed across all mediums, none of the urls or search results link directly to the American Express website. They all link to the ticket supplier (partner) website e.g. Ticketmaster. This means that Cardmembers are not discovering the breadth of events and offers. All this great content is by-passed and for me, Amex are also not getting the credit for offering these great exclusive events, the third-party ticket providers look like they are providing the exclusive events and offer minimal American Express branding so brand awareness is low.
Increasing relevance
The Ticketmaster page that is accessed when leaving the Amex experience shows a list of all events of which Beyonce is just one. My suggested flow skips this step so that Amex links directly to the relevant and expected event (just Beyonce) with the available dates.
Overall, my suggested flow vastly removes confusion, is much more direct to content, communicates and educates Amex benefits more effectively and exposes all Entertainment offers and events resulting in a much more valuable, discoverable and improved customer experience which will improve the current low levels of engagement and retention. From a business point of view it can only improve current conversion of Cardmembers due to greater awareness and ease of discovery.
After agreeing with stakeholders where this new experience will live and how it is accessed, the next step was to explore what those pages will look look like and what functionality we can introduce to aid the experience based on customer and business needs and using the landscape analysis as inspiration.
Ideation
I then started to sketch initial pages and components to continually discuss with the client and iterate.
Medium fidelity wireframes
We worked closely with the global design team to adhere to their new design language and contribute towards it to create an experience that is ‘component driven’ to aid the beginning of a more consistent, integrated and seamless overall experience. This also addressed the brief of removing cost duplication whereby one component is designed and built to be added on any relevant Amex page rather than the historic bespoke process.
Below is just one example experimenting with layout and structure to satisfy the brief of presenting content in a more dynamic and compelling way to increase time on site on multiple devices specifically mobile. This would also provide scalability for differing amounts of content based on seasons whereby coming up to Xmas would have considerably more events/ offers than summer time however, this changed across different international markets and therefore flexibility of design is key.
To continually address the challenge of raising awareness of the 'Benefits' of being a cardmember (a key recommendation from the previous user testing document) we gave a lot of emphasis to this specific promotional component. The solution being ultra clear and minimal in the use of text to explain each benefit and use moving imagery/ video to make it more compelling and to engage.
We used actual 'Cardmember stories' to personalise and educate the benefits using still imagery, quotes and video on the content pages. These individual pages explaining each benefit also addressed a conclusion from the SEO analysis which recommended "playing to Amex's strengths, the focus should be on exclusivity and presale", a widely searched term on the Amex site. The benefit type placed on each tile also constantly re-informs this key USP for American Express.
Example of Events & offers 'Details' page
One challenge was conversion when arriving at the details page. To optimise this we progressed with a minimalist design whereby only the most important information was shown to remove 'noise' with reveal options for text that had to exist e.g. 'The fine-print'. By also raising awareness of the fine-print we hope to build customer trust and build a relationship through transparency. We implemented a 'sticky' buy now and share navigation so that the buttons are always on view, gave prominence to the 'benefit' that each specific event relates too again raising awareness of the benefits of becoming a cardmember (especially important when linking directly from search engines) to aid acquisition of new customers.
Removing perceived barriers
Previously when the customer clicked 'Book Now', it linked to an interstitial page to explain that you are leaving American Express and accessing a 3rd party website. This process was clunky, ugly and felt like a blocker to continue with purchase. My solution was to replace the interstitial page with a tool-tip when the 'Book Now' button was clicked, the 'Book Now' text then changes to 'Continue' (to click and access the 3rd party site). This now provides a more integrated, seamless experience with less customer 'perceived effort' reducing the feel of a barrier. This solution is also consistent on mobile.
Engage and excite
Visually we wanted to engage and excite, for this to happen we wanted to convince stakeholders to embrace more modern large, compelling imagery and use a full-width map. Product owners and management were in favour of this however, the Amex global design team were more reserved as they were concerned about the real-estate it consumed.
After multiple iterations I kept on coming back to the full width map solution as it adds visual interest, providing valuable context of nearby landmarks and contributes to a better layout and 'flow' of information down the page whilst reducing 'visual noise' near the main 'Book Now' CTA. We also used our landscape analysis to aid the discussion showing multiple examples of full-width maps and to be more bold with our designs. This was eventually agreed to become a scalable component and be added to the American Express Visual Language.
Ease of booking - Sticky navigation
When scrolling on desktop the full-width 'Book Now' and 'Share' component would fix to the top of the screen with content scrolling underneath. For mobile, this was adapted so that just the 'Book Now' and 'Share' buttons constantly stuck to the bottom of the screen so that the CTAs were constantly available.
For desktop, this component also includes the most important customer information - when, where and price and the business requirement - the 'benefit type' (which again helps to explain 'Benefits' to customers). For mobile this is removed from the 'Book Now' component due to real-estate however, the important customer information is still placed prominently at the top of the page.
The SEO analysis document provided by GNICS highlights that "content should call out specifics - artists, location, venue and dates", all of which have been given prominence on all devices.
Example prototypes
I created numerous prototypes using InVision. These provided numerous discussion with stakeholders throughout the business initially with wireframes and then visual prototypes using the designs provided by the designers within B-Reel.
Wireframe prototype
Visual Prototype
Logic and rules
I delivered documents explaining the logic of how tiles appeared and how the structure/ layout could be adapted by editorial using a new CMS. When explaining this from the outset, standardisation of language needs to be applied so that there is no confusion.
Editorially customised tiles
Depending on the size of the event, editorial can have one default hero event tile but can add a maximum of two more. Specific rules are applied to make sure this feature is not abused giving prominence to the most high profile events e.g. Beyonce, Rod Stewart concerts etc. From a hierarchy point of view, when adding hero tiles the 'Benefits component' would always stay in place of which the 3rd hero tile would drop below it rather than pushing the Benefits component further down the page maintaining it's importance.
Visual designs
Visual designs created by Tommy Toner and Casper Williamson of B-Reel.
Launched into UK market!
The ‘Entertainment Rewards’ section successfully launched in August 2016 in the UK only. It is currently a test bed, to learn and iterate, gaining further analytics and insights before adding further functionality and launching into further worldwide markets.
The results
The client was very happy with the work and led to further projects with B-Reel, developing the partnership further.
Unfortunately, we couldn't get insights into the impact of the work however, by streamlining multiple micro-sites and opening up the access to all benefits I would hope that this project increased conversion significantly and greatly improved awareness of the benefits to existing customers and potential customers.
What would I do differently?
The new Amex design language was in progress, whereby we worked with the global design team to implement current 'components', whilst successfully informing and adding to these guidelines.
One guideline I would love to of had the time to challenge was the crumb-trail on mobile to have a cleaner, more elegant solution revealing only when tapping the main menu button. Breaking down the navigation to be more contextual. However, this effects the whole website and therefore cannot be designed in isolation. This would need to be a project in itself associated with a full IA and navigation review.
Key takeaways
The American Express team were genuinely a lovely, aspirational team whereby we had a highly collaborative relationship from the very beginning where we could help influence the brief and define the work going forward both strategically and in the short-term.
It was also great to collaborate and help break down historical silos within the company bringing disciplines and multiple departments together to define and deliver an MVP and longer term thinking. This is something very close to my heart, utilising my experience of working for the BBC where I contributed to empowering UX design to create one, joined up, consistent, seamless overall experience and help develop a design language across their offering to aid the user. It's great to see a huge company have the desire to reduce functionality and simplify, to cull multiple websites that confuse the proposition. Hopefully this is the start of exciting times ahead for American Express.
Client recommendations
"Michael is a brilliant UX with a deep understanding of technology and user behaviour. I’ve had a pleasure of working with Michael at B-Reel and AKQA, collaborating together on everything from products and services to web builds and campaigns. His attention to detail, knowledge and experience make Michael one of the key contributors on any project."
Davor Krvavac, Executive Creative Director, B-Reel.
"Michael is a client-focused champion of efficient and conversion-driven site design and best practice. He has extensive knowledge and experience of user behaviour and tools to deliver engaging experiences at both site and page level. He is a also a thoroughly nice chap. It’s a privilege to work with him."
Johannes Åhlund, Founding Partner, Managing Director London, B-Reel.
More case studies
