Product & Service
Design

Get In Touch

Connecting Experiences

Overview

I worked with American Express to better connect all online account management experiences. This was the second project I worked with American Express on after defining the need for it in an improving discovery project. This write up is broken into five sections:

  • Problem
  • Solution
  • Process
  • Learnings
  • Outcome

You will also find some working photos and client feedback at the end. While working on this project I held the title “Senior Principal Designer” with the responsibility of leading design strategy, planning and output.

 


 

Problem

Online servicing at American Express use to be as simple as checking then balance on your card and paying you bill. As the product offering expanded and new services were added silos formed and the experience became disconnected. This ultimately had a massive negative impact on satisfaction, operations and financial performance indicators.

 


 

Solution

Vision
We compiled the theory, patterns and documentation into working prototypes based on real content to act as a directional aid. We powered it with a centralised database to enable it to demonstrate a wide variety of products, services, markets and personas.

AmEx Account Vision

 

Relational Database
The backbone of this work was a relational database that mirrored the reality of how we’d created products and services. This allowed us to explore all of the information points an individual may need access to, establish connections and build prioritisation models.

Airtable

 

Logic
Driven by the information database, we defined sourcing logic that related information types to components, while allowing groups to adapt and change over time.

Logic

 

Templates
We defined and published a library of templates. Some simply gave directional guidance for specific component types (as below) while others gave detailed page structures and instruction.

Templates

 

Components
We defined and published a library of modular components. This included everything from general structure and build logic (as below) to high-fidelity interface design based on global design tokens (as in vision section).

Components

 

Patterns
We defined patterns for a wide variety of information and interaction scenarios to enable a large number of distributed teams to deliver experience continuity. In cases where there was a variety of appropriate patterns we built selection logic to help ensure full template and component utility.

Patterns

 


 

Process

Overview

  • We focused on better understanding the information each customer may need to interact with. Taking this information we built research informed connections between items, aligned them to tasks and attached metadata. This metadata included things such as frequency of use, proportion of customers and emotivity which allowed us to start building a prioritisation model.
  • From there, we set about designing a flexible navigation framework that this information could be ported into. Working closely with the design system team and technical leads we were able to derive a robust set of patterns that could wrap around all experiences. We were also able to create a range of navigation tools and rules to improve contextual connections.
  • Bringing it all together, we produced and published an experience vision to act as directional aid to all product teams. This included an entirely new information architecture that was aligned to the customer experience rather than the organisation structure of the business. As we began to build and iterate towards the vision we established feedback loops that enabled us to keep the vision useful and relevant.

 

Research
We broke the discovery into three distinct areas; existence, usage and expectation. This allowed us to build an accurate picture of reality while better understanding the needs of both the business and out customers.

Research

 

Synthesis
Taking all of this information we created a centralised information base which related all of the information we’d captured. This allowed us to explore customer profiles and understand the experience they were receiving. Building this allowed us to better explore how we group, categorise and serve information.

Synthesis

 

Consideration
All recommendations and changes had to be sense checked against technical and business restrictions. When prioritising changes we needed to consider the whole picture and focus on progress over perfection.

Considerations

 

Creation
With a huge amount of information at our disposal we put together a robust information architecture blueprint with several levels of fidelity. From this we derived a best estimate at the interface implications and defined the patterns required to enable this.

Creation

 

Planning
With a process in place we built a cross-functional team, including senior leadership representatives, who owned this project from conception. Doing so was essential to achieve support and commitment across the board.

Roadmap

 

Strategy
Throughout the vision creation process we paid close attention to communicating how we intended the vision to be used. We dedicated a significant amount of energy to up-front discovery and definition, but ultimately this was just the foundation for an ongoing, adaptive body of work.

Strategy

 

Implementation
Once the vision was complete we helped the teams responsible for delivery break it down into themes to inform their roadmap. We also worked with to establish feedback looks and assess all work against the experience vision so we could make adaptations to keep it relevant.

Implement

 


 

Learnings

  • Breaking things down to pure information, striping back names, groups and categories enables people to reset their thinking. Taking stakeholders with you on this journey is essential as they will need to own what they’re built up into.
  • Simply doing the design isn’t enough, you have to build flexible components that can house a range of content and provide people with the tools to make decisions. This is particularly relevant when designing for a range of markets that have different service offerings and languages.
  • When dealing with complex systems, people need something concrete to work towards. While the process of design and development may be agile and iterative, unless people pull in the same direction it can become chaos. A unified vision provides a common starting point for all parties.

 


 

Outcome

  • All product teams working on online servicing are now aligned to a common vision. By agreeing global patterns and establishing clear information architecture rules they’ve been able to add many more features without negatively impacting any satisfaction or financial markers. They have also seen improvements in operational efficiency and designer contentment.
  • A big win was enabling multiple points of access to most features rather than just one. This has enabled users who hold alternative mental models to find and discover new features which has ultimately lead to significantly higher engagement.

 


 

Working Photos

 

“Bryn is all about structure and order … and we needed that. The foundations he lay have become the governing principles of our design strategy. Something that sets Bryn apart is his ability to identify and address an array of different mental models for finding things, then address all of them efficiently.”

 


 

Related Projects
Systems Thinking Presentation
Improving Discovery

Client
American Express

Sector
Financial Services

Status
In Progress

Client
American Express

Sector
Financial Services

Status
In Progress

Improving Discovery /
Bryn

Want to know more?

Let's have a chat

Get in touch