Pay with Points® on Chase Pay
Connecting Chase card customers and merchants on a digital wallet.
Role
UX/UI Designer
Teams
Senior UX/UI designer, UX researcher, Scrum teams, Product owners, Accessibility specialist, Content editor, Legal team
Feature timeline
Version 1 January - March 2017
Version 2 April-December 2017, released in 2018
Chase Pay case study: View PDF
Overview
Chase Pay was a digital wallet for Chase card customers that launched in 2016 as a mobile app for iOS and Android, and as a check-out widget on e-commerce sites. One of the value propositions was a feature called Pay with Points. Chase credit card customers can use their Ultimate Rewards points towards purchases as a dollar amount. I was responsible for the Pay experiences for in-store and gas stations and the Pay with Points feature along with a senior designer for version 1 and version 2.
Q2 2016: Chase Pay version 1 released
Q1 2017: Pay with Points released
Q4 2018: Chase Pay version 2 released
Problems to solve for version 1
How do we add the Pay with Points feature to the existing Pay screen without changing the current framework?
Pay with Points is a concept that customers may or may not be aware of. How can we make it easy for first-time users?
How can we design the feature to be consistent on the Chase Pay mobile app and on merchants’ e-commerce sites on mobile web and desktop?
Structure of the Pay screen before pay with points
Process
The senior designer and I along with the UX researcher conducted 2 research sessions with existing Chase credit card customers. The researcher asked customers about their experiences using digital wallets, and shopping behaviors. The second session was a usability test on a prototype to complete a payment using Pay with Points.
Usability test:
7 participants living in New York and New Jersey: 5 women, and 2 men.
All Chase credit card customers
Demographic: Ages 25-50, employed full and part-time
Primary shoppers in their households
Has experience with digital wallets like Samsung Pay and Apple Pay
Actively use loyalty programs and collects rewards points
Screen shots of the interface that was tested
Key insights
Mental model around points: saving for something big
Participants expressed that they liked the option to use their Ultimate Rewards points for small purchases, but 5 out of 7 preferred to save points until they reach a dollar amount they feel is worthwhile to put towards a large purchase or traveling. Despite most people having the mental model of saving their points for a large purchase, having the option to apply points towards smaller purchases was a concept that was welcomed by most of the participants.
Have fewer words on the screen, be specific
It was important to have minimal content on the payment screen during a check-out scenario at the cashier and gas station. Instructional text for paying with points needed to be very specific to leave no room for confusion or error.
Trust for the brand
Most participants expressed trust in using a wallet app from Chase because they trust the bank with their personal finances.
“I like it because you could use it in the stores. Before you could only get cash back - and you have to go on the app or online to use it, but here you have access to it right then and there.”
- Reseach participant
Outcome
The 2 key issues around usability we observed in the testing session were the text and the Pay with Points button.
Helper text below the payment card image was updated to be more specific on where to tap
Pay with Points button was replaced with a switcher, a more standard method to toggle the Pay with Points setting on and off
Specify which card is being used, and the status of Pay with Points
Consistent interface for merchant sites
A design goal was to keep a consistent framework for Pay with Points on the Chase Pay widget for e-commerce sites.
Redesign for version 2
I was responsible for the redesign of the Pay screens along with a design manager. For the few months that Chase Pay was being used after the initial launch, we learned that Pay with Points usage was steadily low. One of the product goals for the redesign was to increase the usage of Pay with Points. After testing iterations of new designs, we observed:
Pay with Points in the forefront of the Pay screen made it easier to discover, increasing the chance of usage during a check-out experience at the cashier.
A button to bring up the QR code as a final step could help ease anxiety during check-out. Customers can view their payment options and press a button when they’re ready to check out.
Reflections
After the launch of version 2.0, there was an increase in customers who used Pay with Points during check-out on the Chase Pay app and merchant websites. Pay with Points was used at popular merchants like Starbucks, Shell, and 1800-flowers.com. The research helped guide the final outcome of the designs, and I gained skills in user research methods and conducting usability tests.