Making credit card payments accessible on Chase.com
Prioritizing accessibility and ease of use for millions of customers as banking becomes increasingly digital.
Role
Senior UX/UI Designer
Teams
Design Manager, Product Owner, Development teams, Accessibilities lead, UX writer, Legal
Timeline
April-July 2019
The mission for accessibility
With over 35 million digital users and over 200 million site visits per month, Chase’s platforms serve customers with diverse abilities who use the website and app to manage their personal finances. Therefore, there’s a social and legal responsibility for the products to be accessible. As a designer on Chase’s Digital Payments team, designing for accessibility was a pivotal part of the product design process.
The Problem
An internal audit of Chase’s website revealed that the credit card payment tool used by over 80% of digital customers did not meet Web Content Accessibility Guidelines (WCAG) requirements.
By redesigning the payment tool to comply with WCAG standards and updating the code base, we improved accessibility, ensuring that more users, including those who use assistive technologies, can navigate and use the product effectively.
Findings from WCAG Audit
1. No page heading
A page heading visually and audibly presents the main purpose of the page that the user lands on. Before the redesign, someone using a screen reader would hear their credit card information instead of the heading that presents the purpose of the page.
2. Navigating the payment options
The right-aligned radio controls and left-aligned labels were coded as separate components and behaved unexpectedly to standard keyboard controls. Someone using a keyboard to navigate the page would have a harder time navigating the radio buttons and choosing the payment amount.
3. A link in the drop-down menu
A list of checking accounts in the drop-down menu along with a link to add a new account that would take users to a new page. It was not clear that the link was different from the other options in the menu and would not announce to screen readers that it would take them to a new page.
4. Inactive buttons
For some people, it’s not clear that a lighter-colored button means that button is not interactive. This could lead them to try to click the inactive button before making a selection in the form, and they wouldn’t get feedback on why the payment will not submit. For keyboard users, it causes problems because the inactive button doesn't have a focus state.
5. Recent Payments accordion below CTA
A recent payments accordion below the call to action button is easy to miss because it’s below the main CTA payment button. It can also make the page harder to navigate for screen reader users.
The credit card payment screen before the redesign:
Early wireframes
I worked with a digital accessibility specialist and made decisions based on best practices according to WCAG guidelines. The design goal was to keep most of the existing framework for current users and make necessary improvements based on the audit.
We narrowed it down to two versions that were A/B tested with 6 Chase credit card customers. All participants perceived the payment flow to be fast and easy to understand. After making iterations based on feedback, the final designs were reviewed by all stakeholders, including the content team, legal team, and product owners before delivery and implementation.
Design process
The outcome
-
1. A clear heading
A heading was added to show and announce the main purpose of the page.
-
2. Recent payments data
By removing recent payments information from the bottom of the page and adding the data field of the most recently processed payment within the header, all of the necessary content was moved above the CTA buttons to submit the payment.
-
3. Payment definitions and standard radio buttons
During user research, we found that customers wanted to see the definitions of each payment amount: statement balance, current balance, and minimum payment.
Standard radio buttons were implemented for better keyboard navigation.
-
4. Link to add an account
I solved this accessibility problem by taking the link out of the drop-down menu and displaying the link on the page below the field along with helper text.
-
5. Active buttons
Instead of inactive buttons that didn’t respond to clicks or keyboard controls, having active buttons that return an error if the form is incomplete is a better experience for more users.
Documenting for accessibility
Documenting the interactive and non-interactive elements and the order in which the elements were announced was a way for designers and developers to align on how the page is navigated and experienced.
HAT = hearing assistive technology
Error scenarios were documented to make sure that screen-reader users would hear that there was an error on the screen.
Reflections
Making the credit card payment tool accessible is a benefit to both the customers and Chase. This design was launched to the public at the end of 2019. Working with the accessibility specialists on the team has been a great learning experience that has helped me recognize and learn the ways people perceive and experience digital products which helped me grow as a product designer that designs with more empathy and understanding.