Background
With Chase Pay, JPMorgan Chase wanted to get into the digital payment space and provide its customers more than a digital wallet. The mobile app can be used to pay in-store, at the gas pump, and even order food for pickup. All while allowing customers to earn Ultimate Rewards points, receive special offers and promotions, and redeem their points for eGift cards.
Website: www.chase.com/chase-pay
My Role
I help lead the effort to redesign the Chase Pay app by creating a design system, introducing a new visual identity, and enhancing the overall experience.
UX Design — UI Design — Prototype — Design System — Branding — Low and High Fidelity Concepts — Animation — Storyboards
The Challenge
With new features on the horizon and inconsistent user experience, the Chase Pay app wasn't meeting the expectation of our customers and our guiding principles. Going back to the drawing board, how might we create an experience that checks off our guiding principles and enhances the user experience?
Chase Pay 1.0 Screens from left to right: Sign in, Home, Pay, Wallet
Understanding our customer
Defining archetypes
Before we got to what we call "Chase Pay 2.0" we took a step back to get a better understanding of our customers. Who are they and what are their needs?
From the culmination of user research ranging from market research and UX testing, we developed three archetypes:
The Extreme Couponer — Small savings add up and are worth the time and effort.
Pick and Choose — Time and savings are equally important to me.
Big-Picture, Low Effort — My time is more valuable than saving a few dollars or cents.
Translating user needs
We took our archetype needs and developed design challenges, ultimately, creating a value statement to guide us through the process.
People already work hard for their money, they shouldn’t have to work hard to make the most of it. Chase Pay seamlessly integrates payments, offers and rewards – saving our customers time, and empowering them to get the most value out of each and every transaction.
How we want customers to measure our experience
Does Chase Pay 1.0 Adhere to our principles?
In its current form, Chase Pay does not meet every principle and emotional outcome and lacks a distinctive identity and personality. Let's give it a "visual punch in the face!"
What is the next version of Chase Pay?
Creating a Personality
Step one
We ran a workshop to help define a brand personality. This would allow us to have tangible goals—that meet our product-level principles and customer needs—for the 2.0 redesign. We’d be able to measure every component and experience in the app against defined personality traits.
Each participant picked 8 favorite images that represent Chase Pay and also 8 images that do not. We then took the top 4 favorites and 4 least favorites and discussed—coming up with keywords in the process. The participants were then split into groups and plotted the keywords on a graph depending on whether they fit Chase Pay and/or competitors. We then focused on the terms that are uniquely Chase Pay and developed four distinct *Master P personality.
After the workshop, two personalities were combined into one, in total, there were three personalities, "The Relaxed Contemporary," "The Graceful Optimist," and the one I led, "The Life of the Party."
*Master P: Skeleton = Information Architecture Movement = Motion Clothes = Visual design Voice = Content
Photos from the workshop: brand voting, keyword plotting, Master P and share out
Step Two
After each group created key screens for each of their personality, the 2.0 team gathered all of the assets and started to define "What is Chase Pay 2.0 personality?"
We did this by compiling keywords and creating a mood board for each.
Mood boards
Step Three
We then took our moodboards and created a personality statement.
Dina Cinder, a focused and contemporary individual, wants to be a more confident shopper by allowing Chase Pay to provide a personalized experience and affirm her uncomplicated shopping habits. In doing so, Dina will feel like she is “getting away with something” by generously redirecting time and money into play.
Step four
Putting all the pieces together to create Chase Pay 2.0 personality.
Skeleton (IA & Navigation)
Dina Cinder is double-jointed. With her flexibility, she is able to modify her reach and movement to accommodate impromptu tasks on the fly.
Movement (Interaction & Motion)
Dina’s direct and confident movement across familiar and unfamiliar grounds affirms her audience with her core motives in a focused and non-dramatic manner. However, she can surprise her audience with playful and goofy gestures when the moment is right.
Clothes (Visual)
Dina’s sense of style is uncomplicated and with a level of non-pretentious sophistication. She is not vain and only dresses simply in order to bring light to her features. The purpose of her clothing is to frame and showcase her talents, personality, and ability.
Voice (Content & Sound)
Dina is approachable and articulate. Her use of words is direct, yet sufficient to get the message across. She has a slight accent. Maybe Spanish or something…
Visual Identity
Color Palette
The 1.0 color palette felt dull and didn't match the intended emotional outcomes. It also didn't have too much depth for primary colors, but had many shades of gray. We wanted to make it feel more lively and tie it to specific sections within the app.
Top: Chase Pay 1.0 color palette Bottom: Chase Pay 2.0 color palette
Typography
We often heard from users during research about the screen feeling busy and having too much information. We needed a solution that creates hierarchy, with results increasing readability throughout the app.
Left: Chase Pay 1.0 Right: Chase Pay 2.0
Iconography
Researching different icon styles ranging from multicolor lines, thick lines, and illustrations, I created icons that use a container and thick lines. Also, providing a grid to guide designers for new icon creation.
Illustration
Separate from the Chase Pay 2.0 redesign, the marketing side of Chase Pay was also getting a facelift. Using illustrations as part of the brand was in our sight and fortunate for us, these illustrations were spot on for use within the app. For the first time in the Chase Pay app, assets that were used specifically for marketing were being used for brand continuity. Helping establish a direct working relationship with the marketing team.
Design foundations
Creating hierarchy
For all the main hero flows, we did a content & component audit by stripping down the screens to its bare essentials. Then scrubbing through each screen and listing each component from high to low priority.
Defining Depth
By rooting the designs in physical spaces, it allows us to set rules and get a better understanding for the content hierarchy. Thus, allowing for a consistent experience with components behaving with similar patterns.
Left: Draft z-index Right: Z-index applied
Creating Fluidity
Guiding users with motion helps tell an interactive story and emphasize the hierarchy on the page. While also providing delightful moments at the right time in the experience.
Loading the home screen
Opening Pay animation concept
Bringing it all together
OOBE
The new OOBE bridges the gap between our marketing assets and UI by using illustrated characters that define our brand.
Home
The new Home screen uses large, horizontal-scrolling tiles to draw focus to the content. Previously, users had trouble navigating the app and finding the Pay button. For 2.0, we went from 5 sections on the tab bar to 3, making it easier to use the app. Users also loved scrolling through the new tiles in research and didn't miss the Pay button!
Find
The new Find experience brings in-store merchants and order ahead merchants together into one section. We’ve also made our merchant detail pages consistent across all merchants with large photos so that merchants can display their brands.
pay
The new Pay experience utilizes NFC technology (Only on Samsung Pay) to bring Chase Pay to millions of merchants. Users can also pay with their UR points, even when paying with NFC or QR code.
Manage
The new Manage experience combines cards, transactions, rewards, and offers all under one roof for ease of use. Giving users a better picture of their wallet and their activity.
Design System
The 2.0 design language is created exclusively for mobile usage with bolder typography, bigger buttons, and brighter colors to reflect the spirit of Chase Pay. Designers could import the library and begin to design screens rapidly and focus more on the user experience. Developers could build screens faster with reusable components and provide a cleaner backend for the team. This increased the efficiency between designers and developers by having a common design language, increased production, and a better working relationship between the two.
The impact
What did customers think about the 2.0 experience?
The redesign of the Chase Pay app has had a positive impact on the overall experience, and users feel more confident when interacting with the app. Although there's always room for improvements, we managed to rebrand the app and provide a seamless experience for our users.
3.0 Concept
The Goal is expansion
As with every product, we started to think about what's next. The business goals were to increase Chase card usage, expand merchant acceptance, expand platforms where we take Chase Pay, and expand into users' lifestyles. This time around, we wanted representation from product, developers, and the business team to be part of the process from the start. Workshop time! After the workshop, the core working team got together to synthesize the finding and create user journeys.
Research: Lo-fi User Journeys
With written user journeys created, we started to sketch the journeys to begin our first round of research. We wanted to keep it loose, since we were dealing with high-level concepts and would like customers to provide their inputs freely. The concepts had A.I., leveraging user data to surface personalized options, selecting what we think is best for them while we tried to automate things as much as possible. We found from research that participants wanted to be in control of their finances and push the button.
"I do like the seamlessness, but I want to give the stamp of approval."
"The way that we travel, we have a lot of specific…we get kind of specific for what we're looking for. I like to go to a lot of different sources. I don't really trust 1 source. I do like to do a bit of research, yes…. Sometimes looking at different sources gets you excited for the trip you're going to take.”
Keeping in mind we should integrate gently.
"Who knows me better than me?"
Research: hi-fi User Journeys
The previous round of research helped us iterate on the previous user journeys and it was time to bring it one step closer to reality by using a mix of images and UI elements. This helps bring the concepts to life and provides a clearer picture for the participants. Overall, participants reacted positively to the user journeys and felt it should be personal, relevant, and timely.
"If Chase can offer me things in return for knowing where I'm goin' then I'm okay with it."
"In a way, it just gives me peace of mind, I guess. To know that everything is just seamless."
Chase Pay 3.0
After feature planning and getting a better understanding of the tech that needs to be involved, we worked on a short video that was used to get buy-in from the business. We got a lot done for a day of shooting and received positive feedback from various leaders and teams. I probably should've won an Oscar for my performance...just kidding!
Integrated Commerce
Not all features got buy-in, but we did have an MVP for 3.0. We sketched concepts, worked with our product teams and Chase partners. This is the result of that work.
Concept screens for Chase Pay 3.0
Miscellaneous work
Chase Pay button - Checkout
Concept screens for Ultimate Rewards
Customer Journey for Ultimate Rewards Video
Customer Journey for Ultimate Rewards