American Express

Redesigning corporate business tools

screenshot of amex recon hompage

The client

American Express is one of the country's largest credit card companies. In addition to providing credit cards and financial tools to individuals they also offer powerful financial technology to corporate customers.

The challenge

With much of their design focus being on tools for consumer customers, the user experience for their corporate customers was becoming overly complicated and confusing.

The solution

Working closely with the team at American Express, our team at Pivotal helped to research and implement an updated user experience for their corporate reconciliation tool.

My role

I paired up with one of American Express's UX designers to take on all aspects of the design process. We worked closely with current customers to see how we could improve their most used tools. We also built a live styleguide of our design components for other American Express teams to use when updating other corporate tools. To date the styleguide is used by over a dozen internal teams.

How it works

Before we could dig into modernizing any of the tools, we needed to better understand how each part worked. We spent the first week of the project interviewing American Express stakeholders in order to understand the corporate reconciliation process. The outcome was a detailed set of customer personas and an outline of the high-level actions that the current system includes.

photo of josh standing at whiteboard covered in sticky notes

Out with the old

Next, we took a look at the UX/UI of the current reconciliation tool. The design of the system hadn't been updated for quite some time and many features were added without consideration for a cohesive design system. The system became more and more complicated with every new release.

screenshot of legacy amex recon system

Modernizing

After our initial research we started to design and iterate on updates to the platform. We started by stripping away all of the features and integrating them back into the workflow one-by-one as we prioritized their importance to the end user. The result was a more streamlined process and a cleaner/easier to navigate UI. As we were prototyping we made sure to design from a mobile-first perspective in order to accommodate for different device types.

screenshot of amex recon homepage next to code editor

Creating a design system

Since we were working on one of the first corporate tools to be updated, we wanted to make sure we were creating a design system that could be utilized by other teams. As we added new components to the reconciliation tool we made sure to document them in our live styleguide. The styleguide was hosted inside American Express for use across other teams.

screenshot of amex recon styleguide

First time UX

Corporate customers of American Express had been using their reconciliation tools for many years. Because the update was a significant change to the user experience, we wanted to give existing users a guided tour that pointed out many of the most important changes and updates. We spent the last couple of weeks of the project prototyping the FTUX (first time UX) and testing it with current customers.

animation of amex recon first time UX experience