Legacy to Modern App: Amex Recon
TLDR:
The American Express Corporate Account Reconciliation (CAR) Transformation Project—codenamed Recon. I took over the UX/Product Design Lead role 6 months into design and development. A separate project—codenamed Radmin (Recon Admin), started a month into my contract, and I led product design on that project as well. My main achievement was the speedy transformation of the experience, a 15-year-old legacy product. It was a major rethink within an extremely collaborative and “always-on” environment that used Agile XP as the methodology. The conversion numbers tell a great story (from a non-viable zero before I picked up the task to nearly 80% wanting to convert to the new experience). The product is enterprise-level and, while not readily visible to non-American Express employees, the product was a key revenue generator more lucrative than many consumer and small business initiatives in American Express.
My role here was also truly end-to-end. It was hands-on leadership from research to core design to testing, and I even used my front-end skills to maintain a web prototype (HTML, CSS/SCSS, Bootstrap, and Angular). And on top of that, I created presentations and made my case to senior stakeholders through the different phases.
The End Product
A well-received and user-tested product that serves ~90% of the original legacy product’s user base. The product went beyond solving technical and user experience issues of the legacy product by becoming a full-fledged modern Saas solution with a much more intuitive user experience.
My Role
Product Design Lead
The Problem
A 15-year-old suite of legacy applications with a soon-to-be-deprecated tech stack and a problematic user experience. Beyond the technical issues, the product grew organically for years with little to no guidance from designers.
Team/Triad
Product Design Lead
Product Manager
Product Dev Team
1. Background: Legacy CAR
The legacy application named Corporate Account Reconciliation (CAR for short) is a rich, white-labeled, and feature-laden—but also very old (20+ years now and counting)—application that had usability and technical issues. Its core tech (Java Applet) was also reaching its end of life. It was also a pain point for both American Express and its corporate clients fix CAR every time the Java version was updated in a client company.
One caveat to growing the application organically was the lack of design oversight, so apart from the substantial technical pain points, the user experience also became worse over time.
2. Understanding and Solving for Recon
Understanding CAR initially involved a lot of stakeholder and SME interviews that yielded starter maps (example shown here).
These SME interviews were followed by user interviews and ethnographic studies.
In every step, I sought a balance between product and user needs. But along the many user interviews and test sessions that I ran during the project, I was also educating myself in the technical aspects of CAR as an application suite.
The chart I included here was traced from one of my whiteboard sketches and represents a really tiny part of what CAR is about in terms of areas, features, and roles.
3. Persona, Org Structure, and Roles
Testing and sometimes even just speaking with my higher-level personas, power users, and SMEs were key to deliver a viable product offering.
The majority of the work done for Recon is around the lower part of this org structure chart, so the personas I served for about 70% of the time are the Cardmember and the Cardmember Manager personas.
But I also dealt with an admin- or power-user-type persona that we called a Basic Control Account (BCA) Manager. This persona type managed CAR across the client companies and there can be just one BCA Manager in a company or multiple BCA Managers—mostly depending on the size of the client company.
4. User Research and Validation
A third of my daily life in Recon was user research and testing. For whatever reason, I snapped a photo of my desk back then. A photo here shows and earlier incarnation of Recon’s Transaction List screen (prototyping in HTML) on the left and a user test script on the right.
Talking and empathizing with users is a key part of making sure that we’re solving the right problems.
This is an actual photo of my desk after a user testing session, complete with the script I wrote to the write and the HTML+Angular prototype I ran and maintained for my tests.
5. Lean UX: Design Thinking and Iteration
Throughout the transformation of Recon, I either lead or supported design studio sessions for figuring out which problems to solve, prioritizing features into user stories and epics, and then ideating on how best to tackle these stories.
This collage of photos is from different sessions, and quite often, I would pull in people from my Product and Development team (and sometimes people from other teams) to flesh out more ideas and encourage “out-of-the-box” thinking.