Redesigning the Experience of Managing Payments

Information associated with transactions in a B2B banking world is extremely crucial — requiring 100% accuracy, real-time data, and an efficient system for users to make informed decisions.

The current system is a 20+ year old legacy application, developed over time, resulting in complex and convoluted user interfaces that are difficult to navigate and inefficient. I took on the challenge of redefining the existing journey of managing payments efficiently.

Current situation

The current solution does not allow users to view inter-related data of a payment or an account at once, forcing them to hop between four different journeys. The process is not seamless and results in mass duplication of data — adding to increased page load time.

Goal

Harmonize the process of managing payments. Craft an efficient solution that gives users all the relevant information within the same journey, in real time, so they can make informed decisions and take further action.

There were three major challenges faced across this solution:

• Stakeholder buy-in to have one unified solution
• The whole application was undergoing back-end transformation — this challenged the designs at each step
• Gathering feedback and pain points from all different types of users across various regions, as they all use the same solution

The process began with identifying and discussing business challenges and opportunities together with relevant stakeholders.

My Role — UX Lead. Responsible for crafting the solution from the beginning, leading the design process with cross-functional team communication.

Other stakeholders involved

After initial discussions with key stakeholders, we defined the high-level problems and the functionalities to be worked upon:

• All details related to a payment in one place
• A dashboard-like overview of all payments
• View status and stages of a payment
• Take action on payments as per the details
• Bulk action on payments
• Print & export functionalities
• Allow users to have quick filters

User research

We engaged in client and stakeholder interviews and gathered feedback from multiple channels to get an overall view of the problem statement — covering everything from "where is my payment" to "how many payments are pending approval."

Research Activities:

• Stakeholder interviews
• 1:1 client interviews
• User session observations
• Discussions with Citi's customer-facing team

Related Documents

• Stakeholder interview script
• Client Interview Script
• Data Analytics Report

Two primary personas emerged after synthesising the research data.

I ran a workshop with stakeholders to finalise the information architecture, and worked with product owners to map screen flows. From there, we ran low-fidelity wireframing sessions — making sure every idea stayed research-driven and functional, with multiple brainstorming sessions across the UX community to avoid designer bias.

Low fidelity wireframe

We created low-fidelity ideas with all the information gathered and made sure all the ideas are research driven and functional.

We had multiple brainstorming sessions within the UX community and with stakeholders at this stage to avoid designer bias.

View all design

Once we completed the prototyping, we took our designs to clients for usability testing.

Related Documents

• Overview & Usability Test Script

From mockups to production, with a feedback loop built in for what comes next.

A unified, real-time view of payments — measured in satisfaction and profitability.