Modernizing a Legacy Payments Experience

The original payments experience relied on a table-heavy layout, an awkward form structure, and unnecessary friction points like a redundant review step. Agents needed to handle one-time payments, scheduled payments, and payoff-related actions, but the interface made each of those feel more cumbersome than they needed to be.

The core issue wasn't visual. It was structural: the flow was organized around the system's data model, not around the sequence of questions an agent was actually asking the customer on the phone. Too much information was shown at once, decisions were presented out of order, and the experience created cognitive overhead at exactly the moment agents needed to be focused on the customer.

Before redesigning anything, I ran agent interviews and focus groups to understand where the existing payments flow broke down during live calls. Agents consistently described feeling like the screen was working against the conversation, having to hunt for the right field while a customer waited on the line. Those sessions surfaced the core insight that shaped the redesign: agents needed the interface to follow the same sequence they already used when talking customers through a payment, not the order the system happened to store the data in.

After the redesign was built, I ran a second round of focus groups with agents to validate the new conversational flow before it shipped, confirming that the new structure actually matched how they worked rather than just looking cleaner.

The central design decision was reframing the flow from system-driven to conversation-driven. Rather than presenting all payment options and fields simultaneously, the redesign introduced progressive disclosure, surfacing information as the agent moved through the natural sequence of a payment call: who is making the payment, what type of payment is needed, when the payment should be made, how much the customer wants to pay, and what payment method to use.

This sequence mirrors how agents already guided customers verbally, so the interface became a reinforcement of their workflow rather than an obstacle to it.

At the navigation level, major payment sections, Make a Payment, Scheduled Payments, Payment History, and Payoff Quote, were separated into clear top-level tabs, giving agents direct access to each task type without hunting through a single monolithic screen.

The redesigned Make a Payment screen organizes each decision into a distinct, labeled card using progressive disclosure. Agents move through the flow in the same order they'd naturally guide a customer on a call.

As an extended design exploration beyond the original project scope, I applied the same conversational logic to a mobile-first layout, demonstrating how the progressive disclosure model translates naturally to smaller screens by breaking the flow into a step-by-step sequence with a single decision per screen.