Bill Payment Flow

Web Online Banking Platform
Type of Work:
UX Design | Research | Facilitation | Visual Design


Making a payment from your bank to your Credit Card can be stressful. You're never 100% sure if the payment went through and your balance doesn't open up for new purchases for a few days. 

What if you could make real-time payments directly to your card through the same app you use to check your balance? 

The Challenge:
Enable customers to pay off their credit card balance directly through our digital channels.

Capital One Customers need to make payments to their credit cards through their main financial institutions. This often means +3 days of funds that are just floating around. No longer in a customer's bank account, but not freeing up more credit on their card. For people who are trying to build their credit score with low lines of credit, this is often a very stressful period of time.

Capital One has the technical ability to build real-time payments for customers, where their payment will go through and open up credit almost instantly for more spending. But the biggest question is what would that experience look like? 

The Target User For First Release:
Build customers or customers with low lines of credit.

Eventually, this feature will hit all customers who have a Capital One card, but we wanted to put a focus on a first initial test group. Collecting data from prior research done in the field of customer payment behaviours, we landed on the recommendation for our tech teams to focus on:

Build Customers who often have low credit limits and depend on funds being freed up quickly. 


Once this group has made a payment, they are often asking the question: “

Where did my money go?” 

So what's the reasoning for choosing them - and value will we get out of focusing on them first?


Value #1
Value #2
Value #3

We know them better than their banks​.

We can provide enhanced transparency​.

This audience will demand better UX which will give us feedback going into the full rollout.

The Design Sprint:

To tackle this complex experience properly, we needed to get everyone in the same room - and on the same page. Payments are a complicated area in itself, with lots of legal, technical and other dependencies we needed to sort out before we could even start looking at an ideal experience. 

In collaboration with Capital One's Mobile Designer, we jointly facilitated a 4-day design sprint that had everyone included from lawyers, to Capital One Designers in the US and the UK. 

Team Alignment and Understanding the Problem:

Day one of the design sprint included getting everyone in a room and setting the stage for the rest of the week. This meant knowledge-sharing prior research and findings related to payments, uncovering blockers we might run into and gaining inspiration from competitors. We also wanted to figure out what moments of the customer experience we wanted to tackle first and what goals we hoped to attain by the end of the week.









Make a







Collectively we made a focus on customer moments and aligned on which we would put a focus on for MVP. We narrowed down to just four that we would further focus on for new opportunities.

Goal #1
Goal #2
Goal #3

Finally what goals did we set ourselves? 

To make this design sprint a success, we had to set some goals around what we wanted to accomplish by the end of the week. What deliverables did we want to get out of this and how would we measure it as a success?

What opportunities surfaced - the “how might we’s”

•   How might we encourage customers to Pay through Capital One instead of their bank?

•   How might we address our PAD-related requirements at set-up? 

•   How might we assure customers their banking information is safe when they sign up?
•   How might we ensure customers are confident their payment has been received?
•   How might we be as transparent as possible with customers as they're paying?
•   How might we ensure customers are confident their payment has been posted?

Develop an experience flow

for One Time Pay

Develop a prototype of "the setup moment" and "the make a payment moment" in both platforms (Web Online Banking and Mobile App).

Review scheduled payment moment

Ideation and Prototyping

Once we had an idea of what portion of the customer experience, we hosted a design jam session where all the core team gathered in a room to generate as many ideas as possible in one afternoon. This included using methods such as Crazy 8's and storyboarding to really flush out the ideal customer experience.  

Hallway Testing and Initial Learnings

Once some great ideas were generated (such as how the setup experience would look to customers and what payment options they would be able to choose) we spent the next day of the design sprint paper prototyping out the basic experience.​ The aim was to get this paper prototype to be at a fidelity where we could get some good initial feedback, without much effort.

After successfully drawing out a prototype on paper, we headed out into the halls of Capital One to conduct some hallway testing on internal associates. The aim was not to replace user testing but just to get some initial feedback before we went to a digital prototype.

Users prefer providing bank account information after selecting a payment amount.

Focus each step on one task. Avoid having too much information on one screen or per step.

User testing:

Going into user testing, we wanted to learn some things about the flow that was designed over the past week


  • Understand if the IA (groupings and labels) the team came up with are intuitive and work with users’ mental models 

  • Uncover potential design issues we may want to tweak before testing further in UserLabs Phase 2 and market 

  • Assess if users can effectively, efficiently and satisfactorily complete the tasks of signing up, and making a payment using the new feature

User Testing Learnings

  Customers thought this page 

      was clear

-    Customers thought the page

     had more details than


  Payment flow was clear and the

     necessary payment options

     were listed

-    Processing time message was

     too small, users often missed it

?   Users are wondering if there

     could be more payment options

     that can either benefit them or

     provide more flexibility (auto


  Information was clear and it

      was understood how to find

      the information.

  Users enjoyed how they

      were able to have their

      banking information saved.

?   Customers were wondering

      why there wasn't an edit

      screen or verification screen

      in case a mistake was made

      when their information was


Key Outcomes

Be transparent during the entire experience.

Customers will not change their behaviour to change platforms unless they see clear value

Make key information, especially payment posting timelines and payment due dates very clear and upfront.

Simplify the language - bank terms don't translate well for user experience.

Each green dot represents a design or content change made due to results from user labs.

Flow Design

Once we completed two rounds of user testing it was time to mock up the final designs. 

This included an initial teaser that we could develop quickly and get out to test interest, the first time payment experience as well as an area to set up payment profiles. 

An initial flow of how customers would pay a bill through Capital One's online banking platform


Release date: January 2019

  • White LinkedIn Icon
  • White Instagram Icon
  • White Facebook Icon