AMEX CASE STUDY: REDESIGNing LOGGED IN EXPERIENCE

PROBLEM

The American Express logged in and pay bill site had not been redesigned in a number of years. The main problems with the site were:

• Not responsive or flexible design

• Outdated look and feel

• Not a cohesive look and feel

• Poor usability

It did not reflect what American Express was as a company and certainly did not appeal to their target customers who are affluent, highly educated, and expect great service.

SOLUTION

Working in conjunction with technology, product, and other stakeholders, our team aligned on the following goals.

• Surprise and delight our users

• Give people the information they need to make an informed decision

• Reduce clutter and visual noise

• Create components that are fast to load, flexible, and responsive

• Design all parts of the journey to work together in an elegant experience

The Process

Research
We began by doing a competitive analysis of companies with logged in experiences and checkout flows. We also worked with users to uncover what they wanted to see when logging in and how they liked to pay their bill (self-service, auto pay, pay in full, pay minimum balance).

Our research uncovered that many users were unfamiliar with the terminology of credit card payments. For example, users did not know the difference between “statement balance” and “outstanding balance”. These pain points became ways we improved the user experience. Rather than leave terms on the page that no one understood, why not offer contextual definitions that users can access If they need to?

Lo Fidelity Wireframes

We finalized the main components that needed to be on each page based on user feedback and well as input from other stakeholders. We also tried to limit the amount of information on each page in order to not overwhelm users.

Hi Fidelity Wireframes
We had existing components that needed to fit into our design (eg, main navigation, perks component). Thus, in order to reach our goal of making the design flexible and responsive, we chose a modular approach. By producing high fidelity wireframes, we were able to quickly see which pages were confusing and had too much data on them. This was valuable as we were able to iterate more quickly and didn’t waste time on final designs before we knew what the blueprint was going to be.

User Testing
Before we created high fidelity screens, we did several rounds of user testing. We tested our designs with the following groups of people:

• Current American Express customers

• Stakeholders

• Technology

• Business

• Other designers/teams

 This was done to ensure that we were all in alignment before the project moved forward.

Hi Fidelity Screens
After all of the user tests were successfully completed, we then applied our design system and patterns to the wireframes. Sometimes we made additional changes to styles or usability, but the goal was to reuse patterns and styles as much as possible.

OUTCOME

The outcome of the project was Amex’s first redesign of the logged in experience in many years. The customer feedback was positive. We also built a foundation on which further iterations could be built.

TAKEAWAYS

Give people the information they need when they need it
Just because there is a lot of data to communicate doesn’t mean the design has to be cluttered. If you allow users control over the interface, and allow them to show things as they need them, you can reduce clutter without taking away anything.

Provide users with a journey, not just a destination
When we designed the journeys for the logged in and pay bill experience, we were careful to design them together. That way, we could ensure they would fit together seamlessly and teach our users how to navigate through our system. It was important to look at everything not only piece by piece, but holistically.

Surprise and delight our users
When doing our research, we discovered that one of the top goals users had was to be able to review their transactions and pay their bills quickly and easily. They did not want a heavy touch and to be sold products which they may or may not be interested it. Therefore, one of the ways we chose to surprise and delight our users was to leave the heavy duty marketing messages to a minimum and focus on providing an optimal customer experience.