UX Designer & Manager • Chicago-based • she/her
Payments Redesign
Client: Discover Financial Services
Role: UX Lead
Timeline: ~6 months
When a brief is as open-ended as"Redesign the Payments experience for Discover," it's every designer's dream (and nightmare).
For something this open-ended and complex, we leaned on the 5D process:
Discovery
Understanding the problem space requires 3 key inputs:
1. Navigating the current experience as it stands
2. Gathering user feedback from sources like JDP Customer Satisfaction Study
3. Exploring the experiences of competitors
These will results in the key outputs of Discovery:
1. List of thematic problem spaces
2. Competitive examples
3. User flows of the experience, flagged with friction points
Problem Spaces
With more information under our belt, we bucketized the problem spaces into 3 key themes.
Design
-
Payment status, due dates & scheduled dates missing from homepage
-
Cardmembers don't understand Autopay options
Technical
-
System errors cause late payment
-
Can't schedule payments past current due date
-
Bank account numbers are not validated for accuracy
Compliance
-
NACHA: Cardmembers aren't informed that changes in payment source will update in progress payments
-
Late Payments: ACH does not display late payment status to cardmembers
Competitive Audit
Jakob's Law always applies: users spend more time on other sites than on yours. So my next step was to collect examples of direct competitors, utilities, retail credit cards, and other financial services such as Venmo and BNPL offerings.
Direct Competitors
Utilities and Services
Retail Credit Card
Other
Themes & Inspiration
1. Allow for easy payment between credit accounts and bank accounts for a reliable and seamless experience
2. Include dynamic module on the user's homepage to communicate due dates, pending payments, and recently posted payments
3. Recommend a default payment amount and use autofill for date and source
4. Explore branded micromoments to make the One time Payment flow memorable and emotive
5. Use SMS and push notifications for both Make a Payment and Autopay Flows to inform customers not only when their payments successfully post, but also (a) when they are due and (b) when they are set to process.
User Journeys and Flows
The next step was building a full picture of the user journeys and user flows. We built these for the three primary user flows: One Time Payment, Automatic Payments (AutoPay), and Managing Bank Accounts. These were built in Miro for quick iteration and labeling. I won't bore you with the details, but here are some artifacts from the work.
User Journey
JTBD Chart
User Flow
From there, my UX Director and I led a workshop with our client to define the most salient areas for redesign. We used a MoSCoW analysis with a Prioritization Matrix to cluster the opportunities into 4 categories:
-
Must Do - Enhancements that are critical to the success of Payments
-
Should Do - Additional high-value enhancements that will support cardmember goals and satisfaction
-
Could Do - Updates to entertain pending the value and effort
-
Won't Do - Unnecessary changes that are either low value or require too much effort
It was evident that AutoPay was the place to start; it was the center of the web between one-time payments, new users, managing banm accounts, and compliance concerns.
Definiton
From there, my UX Director and I led a workshop with our client to define the most salient areas for redesign. We used a MoSCoW analysis with a Prioritization Matrix to cluster the opportunities into 4 categories:
-
Must Do - Enhancements that are critical to the success of Payments
-
Should Do - Additional high-value enhancements that will support cardmember goals and satisfaction
-
Could Do - Updates to entertain pending the value and effort
-
Won't Do - Unnecessary changes that are either low value or require too much effort
It was evident that AutoPay was the place to start; it was the center of the web between one-time payments, new users, managing banm accounts, and compliance concerns.
Design
Before bringing in our UI Designers, I built the wireframes for AutoPay, focusing on these key friction points:
-
Cardmembers are interested in automatic payments, but they struggle with understanding which deciding which payment option is right for them (minimum payment, full statement amount, etc.)
-
Users cannot select a custom date for the AutoPay to process, which is especially an issue when the payments occasionally fail to process, causing delinquent payments
-
AutoPay is not effectively integrated into other parts of the Payments experience, making it undiscoverable and disjointed
Current Experience for Enrolling in AutoPay (App)
Wireframe Flow for Proposed Experience
Adding a calendar module allows users to select a custom date
Allowing a user to add a bank account within the flow maximizes flexibility and transparency
Bolstering the Payment Option selection to allow for explanatory copy will help users make informed decisions
From there I built wireframes for Editing AutoPay, Cancelling AutoPay, Adding a Bank Account, and Deleting a Bank Account. One Time Payment, as more fundamental and developmentally fragile, would be addressed upon the vetting of the AutoPay designs. I also built the wireframes in a browser context to reflect the design differentials.
Bringing up the Fidelity of the UI
Once the wireframes for the myriad user flows were built and approved, we involved the UI team. My role on this project was UX-focused, so I needed to ensure the handoff was informative and trusting. Luckily our teams are deeply enmeshed, so I collaborated with the UI Designer throughout every step of her process. She maintained a eye for the integrity of the UX, while I made sure her voice was upheld as the UI expert. Our collaboration was seamless, leading to a singular, unified narrative for our clients. After 4 or 5 rounds of redesign for each of the flows, our final output was cohesive & compliant.
38 different screens across 6 different flows were redesigned: here is vignette of the enrollment flow for AutoPay on browser.