#userexperience
#userinterface
#web
#mobile
#Figma
Credit and Payments Experience
Credit and Payments Experience
Credit and Payments Experience
Credit and Payments Experience
Credit and Payments Experience
Credit and Payments Experience
I was the lead product designer for this project where we addressed pain points that users experienced while interacting with their credit account. Improved the credit home page and the payments flow by working cross-functionally with Customer Experience team, Fraud Specialists, PM, and engineers to unlock the true potential of the credit card experience.
I was the lead product designer for this project where we addressed pain points that users experienced while interacting with their credit account. Improved the credit home page and the payments flow by working cross-functionally with Customer Experience team, Fraud Specialists, PM, and engineers to unlock the true potential of the credit card experience.
I was the lead product designer for this project where we addressed pain points that users experienced while interacting with their credit account. Improved the credit home page and the payments flow by working cross-functionally with Customer Experience team, Fraud Specialists, PM, and engineers to unlock the true potential of the credit card experience.
I was the lead product designer for this project where we addressed pain points that users experienced while interacting with their credit account. Improved the credit home page and the payments flow by working cross-functionally with Customer Experience team, Fraud Specialists, PM, and engineers to unlock the true potential of the credit card experience.
I was the lead product designer for this project where we addressed pain points that users experienced while interacting with their credit account. Improved the credit home page and the payments flow by working cross-functionally with Customer Experience team, Fraud Specialists, PM, and engineers to unlock the true potential of the credit card experience.
I was the lead product designer for this project where we addressed pain points that users experienced while interacting with their credit account. Improved the credit home page and the payments flow by working cross-functionally with Customer Experience team, Fraud Specialists, PM, and engineers to unlock the true potential of the credit card experience.
March - April 2022
Timeline
Lead Designer
Role
March - April 2022
Timeline
Lead Designer
Role
About HMBradley
My Role at HMBradley
Opportunity
Opportunity
Improve visibility of credit account and payments
Improve visibility of credit account and payments
Our app exposed a gap in the way we were showing credit account information to a user (current balance, statement balance, minimum payment due, total credit, etc). Luckily, the opportunity was vast and our credit cross-functional team was eager to tackle it. Improvements to the overall visibility of a user’s credit account and clarity behind the payments flow were up for grabs.
Our app exposed a gap in the way we were showing credit account information to a user (current balance, statement balance, minimum payment due, total credit, etc). Luckily, the opportunity was vast and our credit cross-functional team was eager to tackle it. Improvements to the overall visibility of a user’s credit account and clarity behind the payments flow were up for grabs.
Identify User Problems
Identify User Problems
We had a plethora of user problems gathered from our Customer Experience team. A huge amount of their time was spent explaining to customers why a payment failed, when their Auto-Pay was happening, why they can’t pay from a certain account, why the payment is taking more than a day, etc. It was endless and overwhelming. Our customers deserved clarity - which would also give our CX team their time back.
After learning from conversations with the PM, CX team, Fraud specialists, and Credit specialists, we narrowed down to these user problems:
We had a plethora of user problems gathered from our Customer Experience team. A huge amount of their time was spent explaining to customers why a payment failed, when their Auto-Pay was happening, why they can’t pay from a certain account, why the payment is taking more than a day, etc. It was endless and overwhelming. Our customers deserved clarity - which would also give our CX team their time back.
After learning from conversations with the PM, CX team, Fraud specialists, and Credit specialists, we narrowed down to these user problems:
1
User problem #1: Using my HMBradley Credit Card is a very manual task. I usually can’t find what I am looking for.
Our home page for a user’s credit account was only a list of their transactions. Finding those important numbers like current balance, available balance, and answers to the big question “How much and When do I need to pay to avoid interest charges?” was on a completely separate screen unrelated to the specific credit account. With a good amount of clicks, users would stumble upon what they were interested in, but not without unnecessary friction.
1
User problem #1: Using my HMBradley Credit Card is a very manual task. I usually can’t find what I am looking for.
Our home page for a user’s credit account was only a list of their transactions. Finding those important numbers like current balance, available balance, and answers to the big question “How much and When do I need to pay to avoid interest charges?” was on a completely separate screen unrelated to the specific credit account. With a good amount of clicks, users would stumble upon what they were interested in, but not without unnecessary friction.
1
User problem #1: Using my HMBradley Credit Card is a very manual task. I usually can’t find what I am looking for.
Our home page for a user’s credit account was only a list of their transactions. Finding those important numbers like current balance, available balance, and answers to the big question “How much and When do I need to pay to avoid interest charges?” was on a completely separate screen unrelated to the specific credit account. With a good amount of clicks, users would stumble upon what they were interested in, but not without unnecessary friction.
2
User problem #2: I don’t trust Auto-Pay to make payments for me.
Our previous Auto-Pay experience was confusing, had no validation of when a payment would happen or how much it would pay, and it was on a completely separate page from where users were directed to when they choose their credit account. This inadvertently caused users to schedule one-time payments that would override the Auto-Pay schedule, causing one of them to fail, and thus trigger a warning to our Fraud Operations Specialists to look into it.
2
User problem #2: I don’t trust Auto-Pay to make payments for me.
Our previous Auto-Pay experience was confusing, had no validation of when a payment would happen or how much it would pay, and it was on a completely separate page from where users were directed to when they choose their credit account. This inadvertently caused users to schedule one-time payments that would override the Auto-Pay schedule, causing one of them to fail, and thus trigger a warning to our Fraud Operations Specialists to look into it.
2
User problem #2: I don’t trust Auto-Pay to make payments for me.
Our previous Auto-Pay experience was confusing, had no validation of when a payment would happen or how much it would pay, and it was on a completely separate page from where users were directed to when they choose their credit account. This inadvertently caused users to schedule one-time payments that would override the Auto-Pay schedule, causing one of them to fail, and thus trigger a warning to our Fraud Operations Specialists to look into it.
Design Goal
Design Goal
Create clarity and context in the designs
Create clarity and context in the designs
There are many important concepts associated with a credit card: current balance, statement balance, payments, credit limit, APR, and more. While HMBradley had all of this information presented in some shape or form (often out of sight), it would only be valuable if our users could 1. Find it, and 2. Contextualize and understand it. This projects main goal was to bring those important concepts to the right place- right on the credit account home page. Providing the appropriate context for related concepts and organizing it in a way that a user could understand was a high priority to making this project impactful.
There are many important concepts associated with a credit card: current balance, statement balance, payments, credit limit, APR, and more. While HMBradley had all of this information presented in some shape or form (often out of sight), it would only be valuable if our users could 1. Find it, and 2. Contextualize and understand it. This projects main goal was to bring those important concepts to the right place- right on the credit account home page. Providing the appropriate context for related concepts and organizing it in a way that a user could understand was a high priority to making this project impactful.
Scope Project Requirements
Scope Project Requirements
Sort through recurring tickets to identify root problems of the experience
Sort through recurring tickets to identify root problems of the experience
Being part of a small team meant that I got to be scrappy. I worked with our Product Manager to sort tickets created by Customer Success reps and Fraud specialists. The tickets mainly suggested copy additions to our existing experience as a fix to their problems. After listing them out, I quickly realized that they were all pointing to a larger problem, not just missing copy (after all, what customer wants to read more fine print than they do already).
Being part of a small team meant that I got to be scrappy. I worked with our Product Manager to sort tickets created by Customer Success reps and Fraud specialists. The tickets mainly suggested copy additions to our existing experience as a fix to their problems. After listing them out, I quickly realized that they were all pointing to a larger problem, not just missing copy (after all, what customer wants to read more fine print than they do already).
Competitive Analysis
Competitive Analysis
Analyze how other institutions tackle this problem; What works and what could be better
Analyze how other institutions tackle this problem; What works and what could be better
I researched the way that other financial institutions show the same information we wanted to clarify. Not to my surprise, many of the big banks like Bank of America and Chase struggled with showing too much information. Making it indigestible to the average user (myself included).
I researched the way that other financial institutions show the same information we wanted to clarify. Not to my surprise, many of the big banks like Bank of America and Chase struggled with showing too much information. Making it indigestible to the average user (myself included).
User Flows and Information Architecture
User Flows and Information Architecture
Organize and structure each element of the problem into a digestible flow
Organize and structure each element of the problem into a digestible flow
Because there are so many puzzle pieces that make up a credit account, it was important that we were displaying them in an organized and structured way. Finding your statement balance in the middle of your list of dining transactions would be confusing. Writing out the main user flows someone would take (making a payment, setting up auto-pay, etc) plus laying out the IA of all these pieces of credit information was crucial to setting the bigger picture. It is easy to get lost in the details of a design you stare at for 8 hours a day, so having structure to step back to always helps me recalibrate.
Because there are so many puzzle pieces that make up a credit account, it was important that we were displaying them in an organized and structured way. Finding your statement balance in the middle of your list of dining transactions would be confusing. Writing out the main user flows someone would take (making a payment, setting up auto-pay, etc) plus laying out the IA of all these pieces of credit information was crucial to setting the bigger picture. It is easy to get lost in the details of a design you stare at for 8 hours a day, so having structure to step back to always helps me recalibrate.
Design Reviews
Design Reviews
Recording explainer videos for async feedback session
Recording explainer videos for async feedback session
It is not always easy to put a 1 hour time slot on the calendar for all stakeholders, so I decided to use Loom to host asynchronous design reviews (3 total, 5 minute videos each!). I tagged the specific stakeholders I wanted feedback from plus posted in public channels for more visibility into what our credit team was up to. The responses were great and the feedback was valuable- arguably just as valuable compared to if we did live on Zoom.
It is not always easy to put a 1 hour time slot on the calendar for all stakeholders, so I decided to use Loom to host asynchronous design reviews (3 total, 5 minute videos each!). I tagged the specific stakeholders I wanted feedback from plus posted in public channels for more visibility into what our credit team was up to. The responses were great and the feedback was valuable- arguably just as valuable compared to if we did live on Zoom.
User Testing
User Testing
Using Maze to validate design decisions and identify user mental models
Using Maze to validate design decisions and identify user mental models
User testing!! (Likely my favorite part of the design process). Seeing the designs in action was great. There is a ton to learn from user testing and I shared the test with users from Discord (a group of HMBradley’s most engaged users who created the channel themselves) and from paid users on Maze.
Working with our director of UX Research, we created a test that would show us through user actions where common misconceptions were with the design, what was confusing, and what was crystal clear. Something fascinating was that not all click results should dictate a change to the design, but rather, some behaviors revealed a lack of education around certain topics. Credit cards are confusing! I would not call myself close to an expert even today. This user test showed us that HMBradley can educate more people about topics like statements, credit availability, and Auto-Pay.
User testing!! (Likely my favorite part of the design process). Seeing the designs in action was great. There is a ton to learn from user testing and I shared the test with users from Discord (a group of HMBradley’s most engaged users who created the channel themselves) and from paid users on Maze.
Working with our director of UX Research, we created a test that would show us through user actions where common misconceptions were with the design, what was confusing, and what was crystal clear. Something fascinating was that not all click results should dictate a change to the design, but rather, some behaviors revealed a lack of education around certain topics. Credit cards are confusing! I would not call myself close to an expert even today. This user test showed us that HMBradley can educate more people about topics like statements, credit availability, and Auto-Pay.
Compliance and Legal Review
Compliance and Legal Review
Review design flow and content with legal teams to satisfy FDIC laws and regulations
Review design flow and content with legal teams to satisfy FDIC laws and regulations
The last part of the process before handing off to engineers is reviewing with the legal/compliance team. At HMBradley, we have internal lawyers and also external lawyers that all must approve our work. This process includes thorough explanations of the project and all changes, balancing competing priorities between being legally compliant but also not impeding on design goals (clarity, context) for the end user, and of course doing said process in a timely manner to get this shipped!
Our process was on MarkUp with the internal legal team- a platform making it easy to make and track comments on any PDF/PNG file, and Jira with our external legal team.
The last part of the process before handing off to engineers is reviewing with the legal/compliance team. At HMBradley, we have internal lawyers and also external lawyers that all must approve our work. This process includes thorough explanations of the project and all changes, balancing competing priorities between being legally compliant but also not impeding on design goals (clarity, context) for the end user, and of course doing said process in a timely manner to get this shipped!
Our process was on MarkUp with the internal legal team- a platform making it easy to make and track comments on any PDF/PNG file, and Jira with our external legal team.
Engineering Handoff
Engineering Handoff
Leading Design x Engineering handoff meeting
Leading Design x Engineering handoff meeting
When the designs are approved and finalized, I schedule a live design x engineering kickoff meeting to explain the new changes + leave room for any questions. Handoff does not mean that I am no longer responsible for the designs. I always am open to answering any questions throughout the build process. Figma files are organized in a clear way to point out every new update.
When the designs are approved and finalized, I schedule a live design x engineering kickoff meeting to explain the new changes + leave room for any questions. Handoff does not mean that I am no longer responsible for the designs. I always am open to answering any questions throughout the build process. Figma files are organized in a clear way to point out every new update.
Impact and Metrics
Impact and Metrics
1
Time to first purchase down by 40%!
The simplified and improved experience with the credit account allowed users to trust the platform more, leading them to a decrease in the time to make their first purchase.
1
Time to first purchase down by 40%!
The simplified and improved experience with the credit account allowed users to trust the platform more, leading them to a decrease in the time to make their first purchase.
1
Time to first purchase down by 40%!
The simplified and improved experience with the credit account allowed users to trust the platform more, leading them to a decrease in the time to make their first purchase.
Impact and Metrics
Impact and Metrics
2
CC Payments made from an HMBradley deposit account up by 30%
Payments from the HMBradley Deposit account became more consistent, meaning there was potentially more trust in engaging fully with the HMB ecosystem and not having just one foot out the door with other financial institutions.
2
CC Payments made from an HMBradley deposit account up by 30%
Payments from the HMBradley Deposit account became more consistent, meaning there was potentially more trust in engaging fully with the HMB ecosystem and not having just one foot out the door with other financial institutions.
2
CC Payments made from an HMBradley deposit account up by 30%
Payments from the HMBradley Deposit account became more consistent, meaning there was potentially more trust in engaging fully with the HMB ecosystem and not having just one foot out the door with other financial institutions.
Improvements and Next Steps
Improvements and Next Steps
In the next iteration, add educational pieces to address knowledge gaps found in testing
In the next iteration, add educational pieces to address knowledge gaps found in testing
During user testing, it was found that there were many knowledge gaps when it came to credit related terms. Terms like available credit, total credit, remaining balance, current balance, and concepts about payments in general all were confused by many as shown in the heat maps. Empowering users to be financially literate through our platform would be a very impactful next step to this project.
During user testing, it was found that there were many knowledge gaps when it came to credit related terms. Terms like available credit, total credit, remaining balance, current balance, and concepts about payments in general all were confused by many as shown in the heat maps. Empowering users to be financially literate through our platform would be a very impactful next step to this project.
