Bank of America

Redefining ways for college students to gain financial literacy

Context
In 2022, I worked with a team of 3 to solved an ambiguous challenge and delivered on a conceptual mobile solution to help students gain financial literacy. As the lead UI designer, I helped with with user interviews, sketching, wire framing, prototyping and usability testing to ensure students can achieve their goals without error.  

Fast forward to 2024 returning to college myself for the last 2 years– I've gained a deeper understanding students face when it comes to financial literacy. These conversations and my own experiences motivated me to revisit the project.

Although the initial design had a solid foundation, I realized it could be refined. With previous research insights and new usability tests, I was able to enhanced the overall design and addressed usability problems within 3 task flows.
Fintech
UX/UI
Mobile app
Concept
Tools
Figma and Asana
Timeline
Sept 22' & Aug - Sept 24'
Role
UX/UI Designer
Collaborators
Richard Sarmiento (PM)
Amanda Hu (UX Researcher)
Jacob Crannell (UX Designer)
75%

Task success rate

30%

System Usability Scale

The challenge

One-third 34% of Gen Z rate their financial knowledge as low, among whom 40% say they don't even know where to start learning about finances.

Bank of America wants to help students gain financial literacy by teaching how to budget, instill healthy spending habits, saving money, track student loans and plant a seed for a financial future.

"How might we create an engaging platform that empowers students to learn about finance while maintaining meaningful connections with their parents?"

Let's dive into the research

Bank of America launched the Better Money Habits initiative to provide accessible financial education. We began by conducting a competitive analysis of the program's offerings compared to other notable platforms, Chase and Simplifi.

Additionally, we performed a comparative analysis of learning-focused apps such as Duolingo and LinkedIn Learning to explore effective educational strategies and features, given that this project aims to enhance financial literacy for college students.

Understanding the students

Due to the time constraint on this project, we used an existing surveyed data from Bank of America’s Better Money Habits. They surveyed 1,024 general population adults (age 18 or older), and a partially overlapping sample of 635 Gen Z adults (age 18-24).

We also conducted user interviews to gain more qualitative data and utilize a rainbow sheet to uncover patterns where students may find challenging or any missed opportunities.

  • Parents have a significant impact on students financial decisions.
  • Many students don't know where to start and desire more guidance.
  • Students tend to use Tik Tok or Youtube to learn about various topics because it's more engaging.
  • Students primarily use their phones when browsing about financial topics.
Read full survey

Design constraint

At this stage, we need to keep in mind the security and time constraints after discussions with our project manager. Given the time constraints, we realized that developing a standalone platform wasn’t feasible. We believe that building a separate app, when students already have the Bank of America banking app, might lead to low adoption rates or app abandonment.

Additionally, there were concerns about potential security breaches that could arise from having multiple platforms, particularly since the app would contain students' banking information. To mitigate these risks, we decided to integrate our solution directly into the existing Bank of America app and using the educational resources from Better Money Habits.

Our approach

We've mapped out two key task flows that prioritized the onboarding, goal setting, integrating family involvement, and lesson completion with rewards. This helps us visualize how users can achieve their goals in each task flow and ensures that our wireframes include essential elements to facilitate a smooth user journey. This method was important in effectively planning the design solution and aligns the idea with everyone on the team.

First iteration (2022)

Our first iteration laid the foundation for the idea, but it also highlighted several critical areas for improvement. The UI had several which became apparent through usability testing, but these insights informed our future design decisions.

The usability test help us gained valuable insights into the issues users faced:

  • Crowded UI and lack of visual hierarchy contributed to low task success rate.
  • Confusion around family engagement and earning points.
  • The complexity of earning points and navigation.

Final design

The idea was to incentivize students to learn financial literacy by offering points to complete lessons or quizzes. The points can be used to ask Bank of America or other participating banks to lower interest rates on loans, increase the chances of getting a loan or credit cards, and improve student's financial reputation.

Additionally, we aim to bridge the gap between students and family based on insights found in user research. Students can engage with their families by challenging each other to learn, this foster a supportive learning environment.

Using Figma to rapid prototype, I translated the wireframes into high-fidelity designs and addressed the 2 main usability problems.

Pain point 1: Crowded UI and lack of visual hierarchy.

Students felt overwhelmed by the load information and overlooked elements as look for a lesson to complete due to the lack of visual hierarchy.

To addressed this issue, I increase white space to better indicate relationships between elements and reduced the use of color through the design to

Second pain point

I implemented a clear path for users to add family members with a clear and concise explanation of the feature to decrease confusion around family engagement.

Third pain point

Using Figma to rapid prototype, I translated the wireframes into high-fidelity designs and addressed the three usability problems. My goal was to create a visually coherence user interface to improve the user's journey for all 3 task flows.

Reflection

Using Figma to rapid prototype, I translated the wireframes into high-fidelity designs and addressed the three usability problems. My goal was to create a visually coherence user interface to improve the user's journey for all 3 task flows.