UX Team Lead | UX Research | UI Design
Expanding Financial Literacy with the Consumer Financial Protection Bureau
01
OVERVIEW
Context
My Role
• UX Team Lead
• UX Research
• UI Design
• Design System Development
• Illustration
Duration
August 2023 - Present
Client
The Opportunity Project with the Consumer Financial Protection Bureau
Tools Used
Challenge
Promoting competition in the credit card market
The Consumer Financial Protection Bureau, or CFPB, wants to find a way to enable consumers to shop for the best credit card to meet their needs and promote competition in the credit card market. They are hoping to target American consumers in need of a credit card.
Problem
Lack of financial literacy affects important decisions
Although the original challenge set by the CFPB was to connect users with credit cards and promote credit card market competition, our research showed that credit card users need a better way to learn about credit card basics to be able to understand how to choose a card that is the best fit.
Solution
An educational tool that will teach, not test
Our solution is an educational tool, Credit Hike, that allows users to expand their financial literacy through the context of a simulated journey through credit card ownership so that they can learn how to make informed decisions regarding their financial future
02
DISCOVER
Research Methods
Increasing our financial literacy
Our team was in need of gaining a better understanding of credit and credit cards so we developed a comprehensive research plan to help us increase our financial literacy. Although this process took time, we were able to walk away with deep insights into the current market and users' view points on credit and credit cards.
4
Competitors Analyzed
Reviewed popular credit card comparison tools on the market
7
Users
Interviewed
Qualitative data helped identify specific pain points and needs
5
Comparative Tools Analyzed
Learned about alternative comparison tools from other industries
4
User Advocates Interviewed
Learned more about various target audiences and the problems they often face
72
Online Survey Respondents
Quantitative data allowed for a broad understanding of user experiences
2
Usability Tests on Existing Tools
Watched how users currently interact with card comparison tools
Competitive
Analysis
What information do consumers actually need?
I kicked off our team's research by conducting a competitive analysis of 4 credit card comparison sites to see how they stood up against the CFPB's credit card data set. My main takeaway was that there was A LOT of information which often obscured key credit card information and it left me wondering how we might bridge the gap between too much and too little information?
Comparative
Analysis
Are there better comparison tools?
Since all 4 credit card comparison sites were quite similar in how intricate they were, I conducted a comparative analysis of 5 sites that help consumers compare other products in search of a more simplified tool. Although some tools offered great UI inspiration, it was clear that comparison sites in general can be quite complex and left our team feeling overwhelmed.
Survey
Most people receive their first credit card at a young age
Coincidentally, our team did not have much experience shopping for and comparing credit cards so to avoid making assumptions we created an online survey to better understand how people research, compare, and ultimately choose a credit card.
From the 72 survey respondents we learned:
Most respondents received their first credit card between the ages of 18-23 years old.
When asked how respondents choose credit cards the top 3 responses were:
• Credit card comparison tools
• Recommendations from friends & family
• Offerings from their current financial institution
Respondents said the most helpful tools when comparing credit cards include:
Educational Resources | Calculators | Card Match Surveys
Interviews
Although resources are available
users lack understanding
In addition to the data from our online survey, we synthesized the data from our user interviews and noticed trends in terms of pain points. Those pain points include a:
"Where do people get educated about credit cards? That's what I think is really missing."
Christina T. | Age 28
03
DEFINE
Persona
The Financial Seedling
Demographics
Age: 18
Occupation: College Student
Income: Low-Middle Class
Education: High School Diploma
Characteristics
• Wants to get their first credit card
• Has minimal financial literacy
• Overwhelmed by the amount of information when researching credit cards
"Credit card comparison sites use all these big words about interest rates and returns and all this stuff. I don't know what any of it means."
Goals & Needs
• Expand financial opportunities with their first credit card
• Develop financial literacy to make better financial decisions and avoid debt
• Understand how to build credit and why it matters
• Earn rewards or cash back on everyday purchases
Challenges
• Unsure of the intricacies of credit and credit cards
• Has limited experience creating a personal budget and exercising financial discipline
• Susceptible to high interest rates and fees
• Doesn’t know how to approach the overwhelming amount of information
So how might we:
Build a tool that promotes financial wellness and curiosity to learn more?
Help users develop an understanding of the credit card market?
Simplify credit card use to help consumers better understand the process?
Demystify the risks and realities of owning a credit card while still being relatable?
04
DESIGN
Lo-Fi Sketches
Research led to unanimous team decision to create a game
Each member of the team created a series of lo-fi sketches to help bring our research to life. We then worked as a team to consolidate our ideas into a single product concept. During this phase, we noticed we were all leaning towards a game or journey-type experience for the user where they could explore the fine print details of credit and credit cards.
User Flow
User flow allows for an easier understanding of journey
As our lo-fi wireframes came together, we created a user flow. This helped us understand the user's journey as they use our product. It also helped us understand the number of potential outcomes our users could have, from the card they choose to the amount they spend. This understanding was crucial in our conversations with our dev and data teams.
Design System
Making learning about credit cards fun and inviting
Breathing a little life into our lo-fi sketches, the team created a design system. We wanted the experience to be fun, cheery, and inviting, which is why we chose a clean, legible font (it's CFPB's font too...), bright colors, and a nonbinary character.
Wireframes
Laying the foundation for an engaging educational tool
Following the development of our sketches, user flow, and design system we started creating wireframes with the goal of creating an engaging educational tool. This meant exploring various layouts, progress indicators, and imagery.
Usability Testing
UI updates to eliminate confusion
After working through wireframes, we built our mid-fidelity prototype. To validate our design decisions we conducted usability testing on our mobile prototype to uncover any areas of confusion. We were fortunate enough to be able to work with a youth group ages 18-25 years and perform usability testing on 11 people. Of the total tests, I led 4.
Confusing Verbiage
When asked to decide what level of credit history they had, most users were not sure what that meant regardless of experience level.
We opted to edit the copy and ask someone to approximate their credit score instead.
Lack of Onboarding
Helpful tools we had built in like "Learning Links" and the glossary were being missed by most users unless they were directed.
Since these elements were important for helping users increase their financial literacy, we opted to include an onboarding screen at the beginning of the journey.
Stark Colors
To our surprise, most participants suggested that we create a dark mode as our white background was too stark.
Although we did not have time to redevelop the tool in dark mode, we opted to at least change the background to an off white instead.
05
DELIVER
Solution
Experiencing credit card ownership by choosing your own journey
To help show users a realistic scenario of owning a card, we have screens with choices of credit cards and how to spend on their card. The credit card choices are hypothetical, with details derived from the 2022 CFPB dataset. Our goal is to help users understand how credit card terms and benefits relate to their personal situations in a low stakes, supportive space.
Help yourself clarification through "Learn More" links
And to make sure we cover all our bases and appeal to users with different levels of financial literacy, we’ve included additional links that provide brief context, like "Reminders” and “What’s a credit score?” to allow users to dive deeper.
Ending your journey with options for continued learning
Our journey ends with two possible outcomes. One where the user has successfully avoided interest and paid their bill in full, and one where they have only paid the minimum and accrued interest.
One goal of our end screens is to encourage the user to continue their education. They can take a look at what could have been by looking at the other outcome, or they can explore our glossary and learn more about the terms they encountered during their journey. We hope the user feels empowered to learn more and capable of understanding how their spending habits can impact their financial health.
Next Steps
Creating a useful and sustainable educational tool
• Complete user flow options for those who are outside of our target user.
• Work with data analyst team to develop a system of measuring tool success covering total number of users, ideal outcomes, clicks on "Choosing a card" on end screen, and time spent viewing "learn more links" and glossary.
• Perform additional usability testing to validate changes made in the hi-fi prototype
• Credit Hike has been launched via Netlify but we would like to find financial education groups to launch our product with to gain more visibility.
Apple Maps Case Study
Martello Investments Case Study
