Scotiabank
Credit Card Payment Enhancements
OVERVIEW
These feature enhancements help Scotiabank clients pay their statement balance, minimum balance, or current balance more intuitively without disrupting the payment flow. Previously, clients often entered incorrect amounts or had to memorize payment amounts, which increased their cognitive load.
As the sole designer, I created a design brief that articulated the problem space and used journey mapping to identify solution opportunities. I worked with the UX research team to develop a survey addressing key questions about the problem space. I then created presentations to gain leadership buy-in for the proposed solution.
My role
Product Designer
Platforms
Desktop web
Mobile web
Timeline
2024 (3 months)
PROBLEM
With no product manager available due to capacity constraints, I took the initiative to write the design brief myself. I carefully documented the problem space from multiple perspectives to understand who was impacted and how. This comprehensive approach helped me develop a project hypothesis and define clear desired outcomes for the new feature.
FROM BUSINESS PERSPECTIVE
Clients are experiencing difficulties paying their credit card statement balances, leading to negative feedback that impacts client experience metrics on both Orion and OSAT scores.
FROM PRODUCT PERSPECTIVE
The inability for clients to pay their credit card statement balance, total balance or minimum payment was identified as a gap in functionality on the web platform since other financial institutions had this feature.
FROM CUSTOMER JOURNEY PERSPECTIVE
When a client goes to pay their credit card, they must either remember what their statement balance was, keep another tab open or copy and paste the value resulting in increased cognitive load for a relatively simple task.
VERBATIMS
With no product manager available due to capacity constraints, I took the initiative to write the design brief myself. I carefully documented the problem space from multiple perspectives to understand who was impacted and how. This comprehensive approach helped me develop a project hypothesis and define clear desired outcomes for the new feature.
SEE BALANCE AND DUE DATE OF CURRENT STATEMENT
“Hate!!!! your new set up. When I check my credit card I get what I owe and the due date. I use to be able to hit pay and my amount owing would automatically drop into my pay bills area. Now the total amount owing drops in, not the owing from the current statement. Very bad planning on your part.”
When...
I go to pay off my credit card
I want to...
So I...
EMPHASIS ON STATEMENT BALANCE
“Show statement balance on credit cards when in payment window instead of current balance”
When...
I go to pay off my credit card
I want to...
Be shown the exact statement balance
So I...
FREEDOM OF CHOICE
“For credit card payment I want the ability to choose between amount due, total balance, or minimum”
When...
I go to pay off my credit card
I want to...
So I...
PRIMARY RESEARCH
I still had some outstanding questions after I went through the verbatim’s that I wanted to validate so I reached out to the UX Research team.
Which pay options are clients most likely to pay?
Do clients understand the different terms including how they are calculated and the impact they have on credit score and interest?
Which amounts do clients want to see due dates for?
Due to budgetary constraints, we could not do usability testing to answer these questions. Instead, we opted for an internal survey that would be sent out to the entire organization.
SURVEY RESULTS
Statement balance and current balance were ranked as the top options that clients would want to pay. Clients were unlikely to pay the same amount as their last payment.
Total minimum payment is a term that requires explanation. Participants were more confident with other terms but the surveyed group was more bank savvy so might be worth providing clarification for terms in general.
Most participants rated the date shown next to payment options as either important or very important, indicating that the dates should be kept.
USERFLOW
In todays experience, clients enter the flow to pay their credit card from either the CC account details or Move money dashboard. Once in the transfer form, when they have to input the amount they want to pay they either have to memorize it, or open a new tab to see it again, increasing their mental load.
Based on this flow, there are two areas where we could give the pay options to clients:
On the account details, before they get to the transfer form
In the transfer form itself
ON ACCOUNT DETAILS
❌ If we show the client their payment options before they get to the form it is less flexible and still produces mental load on clients as they would still have to navigate to the transfer form to finish their payment. If they were to change the amount that they wanted to pay, they would not have easy access to these options.
IN TRANSFER FORM
✅ Showing the options in the form is more flexible and produces less mental load on clients as they would have access to these options exactly where they have to input and submit it. If they were to change the amount, we would still be able to present other options in the form without them having to navigate away.
PROPOSED FLOW
IDEATION
After evaluating several component options with the design team, we aligned on using the radio button component for a few key reasons:
Most intuitive for clients: The radio button format made it immediately clear that only one payment option could be selected at a time—minimizing confusion and reducing the likelihood of input errors compared to buttons or chips.
Consistent display across breakpoints: The layout of the radio buttons held up well across screen sizes, ensuring that the experience remained clear and easy to navigate on both desktop and mobile without requiring major layout adjustments.
Existing in the design system: Using an already approved design system component helped us move faster while staying aligned with accessibility and development standards. This reduced build time, streamlined implementation, and ensured consistency across the platform.
SECURING CROSS-FUNCTIONAL BUY-IN
To gain alignment on the proposed enhancements, I presented to design and product leadership, walking through the problem space and highlighting insights from a client survey that validated key pain points. I outlined how the new experience would reduce user error and cognitive load when making credit card payments.
To support feasibility, I collaborated with engineering to break the work into phased MVPs, allowing us to prioritize impact while staying within timeline constraints. This approach helped secure buy-in and align teams around a shared solution vision.
FINAL DESIGN
PAY OPTIONS
Verbatim's and surveys informed us that the pay options that clients were most likely to pay and wanted to see were Statement balance, Total minimum payment, and Current balance. Validating these options made sure we launched with exactly what our clients were expecting.
TOOLTIPS
Survey results indicated that some clients are interesting in understanding how different payment amount (e.g., current balance vs. statement balance vs. minimum balance) impacted their credit score and how much they would pay in interest. We wanted to make sure we were transparent about this information and found that this was an opportunity to educate the client base on this matter.
IDENTIFYING AN UNMET NEED
TRACKING CREDIT CARD PAYMENT STATEMENTS
Although not part of the original project requirements, a recurring theme emerged during synthesis of client feedback: the need for a better way to track payments made toward a credit card statement. Currently, clients are forced to manually sift through their transaction history to understand how much they have paid within a statement period—a process that’s time-consuming and error-prone.
“I want a feature that allows the user to see how much they have paid off in a given statement. In this new view, we have to manually calculate all payments.”
Recognizing the friction this created, I advocated for an additional experience that would allow users to clearly view and track all payments made toward a statement. This included proposing a dedicated view for statement payment history and a clearer entry point to the credit card payment flow. While this functionality was not initially scoped, I saw it as a meaningful opportunity to improve transparency and user confidence—especially for clients trying to manage their debt and stay on top of payments.
IMPACT
SUCCESS MEASURES
3M
CUSTOMERS SERVED
This redesigned credit card payment experience now supports over 3 million Scotiabank clients across desktop and mobile web. By reducing mental load and offering clear payment options, we helped clients complete payments more confidently and efficiently.
+0.5
OSAT SCORE
Scotiabank's web platform has seen a +0.5 increase in OSAT (overall Satisfaction) over time. While this improvement reflects multiple enhancements across the platform, this project played a role in addressing a key pain point in the credit card payment journey.
