Optimizing the Bill Pay Funnel

A redesign of the app's highest-traffic page reduced the bill payment flow from a multi-screen back-and-forth to a single in-place interaction. The result: 78% of users preferred the new experience, and task completion required 3 fewer steps. The fix wasn't adding features. It was removing the distance between intent and action.

Interaction Design User Research Usability Testing FinTech
The Problem

A payment required too many round trips

To pay a bill, a user had to find their biller, enter an amount, leave the page to access payment method options, navigate back, then locate a "Review" button at the top of the page. That review button showed no summary of what they were about to submit. Each of those transitions was a chance to lose them.

Find biller, enter amount
User locates their biller on the list and types in a payment amount.
Need to change payment method Friction
Payment account details are hidden behind "Payment Options", a separate screen. The user has to leave the bill list to find them.
Navigate back to bill list Friction
After adjusting options, user returns to the main page. Their context is gone. They have to re-orient.
Find the Review button, with no summary Friction
A "Review Bill" CTA sits at the top of the page but shows no amount, no account, no delivery date. Users can't tell what they're about to confirm.
Many users dropped off here
By the time users reached review, over half had already left the flow.
The flow wasn't broken in one place. It was leaking at every transition. Every time the page sent users away, some of them didn't come back.
The Funnel

Where intent was dying

Landed on Pay Bills
100%
Entered a payment amount
52%
Reached review screen
31%
Confirmed payment
22%
The Solution

Bring everything to the card. Eliminate the round trip.

The redesign collapses the entire payment action onto the bill card itself. When a user enters an amount, the card expands to show the payment account dropdown, delivery date, and two clear CTAs. No navigation required. Everything visible before committing.

Before
Amount entered. No next step. User stalls.
After
Card expands inline. Account visible. Pay Now in reach.

Before

  • Payment method hidden in a separate "Options" screen
  • Review button with no inline summary
  • Multiple page transitions to complete one payment
  • User loses context on every navigation

After

  • Account dropdown inline on the card, no separate screen
  • "Pay Now" shows the full picture before review
  • "Add to Payment" queues to a live sidebar tray
  • Entire flow stays on one page
The design principle was simple: never ask the user to leave to get information they need right now.
The Outcome

Tested with real users, clear signal

Moderated sessions covered single-bill and multi-bill scenarios. Users moved through the flow faster, made fewer wrong turns, and reported higher confidence before submitting, particularly around seeing their payment account inline.

78%
Preferred the new design in direct comparison
3 fewer
Steps to complete a payment end-to-end
96%
Completed the flow without confusion on the two-CTA pattern
"I like that I can see which account it's coming from before I hit pay, I didn't have to guess."
, Participant, moderated usability session