Brett Barnes
UX/UI Designer & UX Writer
Made with

Payment Input

A user-focused system for submitting a payment

Axure wireframe

Axure wireframe

The problem

Customers wanted more freedom to pay their bill. Through extensive interviews, we learned they no longer wanted to be tied down to paying just once a month (billing cycle).

"I want to be able to pay half now, and half before the bill is due; It's easier for me to budget that way." — 38, female

The goal was to allow a customer to make a payment in any amount they desired, and multiple times during the same billing period. 

Highlights:

  • I tried using the iOS built-in number pad, but after testing customers had a much easier time using a keypad, I designed to be single-thumb friendly, big, and narrow.
  • The due date doesn't mean much outside the context of a calendar, so I added an "(in X days)" label.
  • To reduce friction, I defaulted to the previous payment method with an option to change it.

The Results

Leadership was skeptical. They thought it was too much effort to type in the amount owed when we could fill that in for them. This was a slight issue for some older users, but younger adults preferred it.

"We're just used to typing in an amount and sending money. It's like Venmo or Zelle. It's just how we are used to doing things." — 25, male

(The bezel, in this case, the iPhone X, is something I put in all my wireframes. I like to build out as much context as I can. It's worth it for the clarity it conveys.)

See the clickable prototype here.

Clickable prototypes provide clear understanding during review and development.

Clickable prototypes provide clear understanding during review and development.

The best UX is in the details

Not many people know what a Card Verification Value (CVV) is, and although most of us know where it is, it's always a good idea to explain it. Here I've tucked it away in a tooltip; it's out of the way, but there if a customer needs it. I've also added a small icon to show where it can be found.

American Express-specific tooltip

American Express-specific tooltip

Taking the time to make it clear

I like to make the content contextual. In this case, once a user puts in an American Express card number, the tooltip content changes.