A user-focused system for submitting a payment
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.
- 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.
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.)
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.
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.