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?
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?
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.
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.
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?
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?
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.
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
- Customers thought the page
had more details than
+ Payment flow was clear and the
necessary payment options
- 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
+ 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
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.
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