Case Study - Bank of America

Bank of America serves over 68 million customers, offering seamless financial services including Bill Pay. Despite its promise, users expressed dissatisfaction with the app's usability, particularly in bill payment scheduling and transaction tracking. Our project aimed to address these concerns by enhancing the user experience of BoA's mobile app.

Value Proposition:

The value proposition of the B.O.A. app lies in its ability to provide users with a seamless and intuitive experience for managing their finances. By offering features such as easy identification of accounts, streamlined payment processes, and clear visual cues, the app ensures that users can efficiently access the information they need and complete tasks with minimal hassle. Additionally, by prioritizing user feedback and continuously improving the app's interface and functionality, B.O.A. demonstrates its commitment to delivering a superior banking experience that meets the diverse needs of its users. Ultimately, the value proposition of the B.O.A. app is centered around empowering users to take control of their finances and achieve their financial goals with confidence and ease.

Existing App and It's issues

Upon opening the app, users encounter a License Agreement message that lacks a friendly tone, resemb

Upon opening the app, users encounter a License Agreement message that lacks a friendly tone, resembling a malware warning. After registration, the Login screen could benefit from a larger hero image and clearer modal. Additionally, the presence of two rows of navigation icons, a search bar, and promotional sections upon sign-in pushes account information down, necessitating scrolling. Furthermore, inconsistencies in graphical representations, such as Total Available Credit, and navigation issues like duplicated menu items and erratic back arrow functionality, contribute to a disjointed user experience.

Issues from User Reviews at App Store

“…This app is very confusing for an average person to use or navigate. Redundancies are prevalent. Too many offers for credit or lending. Neither of which interests me…”

 

“…Getting there but still too many ads. I am a customer already. Don’t need to be bombarded every moment with more ads. After my last review, I got an updated version. Now even more ads and an additional screen to close when exiting the app…”

 

“…Arranging for reward redemption requires too many less than obvious steps. You have to X out of a screen after seeing a message (not use your back key), then shoot the amount up like a pinball game. It’s cute, but commit the steps to memory or you get stuck in a loop looking for the pinball game type tool…”

 

“…The banking aspect is fine, perfectly clear. What is irritating is the amount of clutter on the site. I don’t need Bank of America to remind me of how much I am spending or to offer unsolicited advice. My other bank statement is a glorified spreadsheet, very simple…”

Identifying Challenges

Users reported difficulties in managing bill payments, setting up schedules, and tracking payment histories. Through analysis and feedback, we identified constraints in modifying options, limited delivery dates, and user confusion about payment formats.

The Goal

My objective was to provide a seamless UI and intuitive UX for BoA's mobile app. I aimed to simplify bill pay, optimize scheduling, and provide clearer payment tracking, empowering users with an efficient banking experience.

Five elements of design

  1. Strategy: By aligning user needs with business objectives, we ensured that the app meets both customer expectations and organizational goals, fostering long-term success and user satisfaction.

  2. Scope: Understanding the type of product we aimed to develop helped define the boundaries and features of the app, ensuring clarity and focus in delivering value to users.

  3. Structure: We carefully mapped out how users would interact with the app, including navigation pathways, information architecture, and user flows, optimizing usability and enhancing user experience.

  4. Skeleton: Behind the scenes, we designed the app's architecture, including wireframes and prototypes, to create a functional framework that supports seamless navigation and efficient task completion.

  5. Surface: The visual design of the app, including colors, typography, and imagery, was crafted to create an aesthetically pleasing and intuitive interface that resonates with users, enhancing engagement and usability.

User Journey Mapping

User journey mapping is crucial in banking as it provides a visual representation of the customer's interactions and experiences at each touchpoint. By understanding the customer journey from initial awareness to becoming a loyal customer, banks can identify areas for improving and optimizing the overall customer experience. This process helps uncover key insights such as customer behaviors, engagement patterns, pain points, and opportunities for enhancement. By mapping the customer journey, banks can prioritize areas for improvement, streamline processes, and create a seamless and enjoyable banking experience for their customers. Additionally, journey mapping enables banks to become more customer-centric, enhance customer satisfaction, improve customer loyalty, and increase cross-selling and upselling opportunities. Overall, customer journey mapping empowers banks to gain a deeper understanding of their customers and make data-driven decisions to enhance the overall banking experience.

User Journey Mapping - Current Bank of America App

Reference - GlassBox , Questions Pro

User Story: Bank of America

Steps , Emotions & Improvement Opportunities

"As a busy professional, I want to quickly access my account balances and perform transactions using the B.O.A. app on my mobile phone, so I can manage my finances efficiently on the go."

Accessibility Considerations: Designing for accessibility involves ensuring that users with permanent, temporary, or situational disabilities can navigate and use the app effectively. This includes features such as alternative login methods, clear and intuitive interface design, and providing options for customizable font sizes and color contrasts. Additionally, incorporating screen reader compatibility and keyboard navigation can enhance accessibility for users with visual impairments or motor disabilities.

Customer Experience - User Journey Mapping

The banking customer journey commences when customers first engage with your bank's offerings. It serves as a guide for their interactions, ranging from basic tasks like setting up a digital account to more complex actions such as financial transactions. Over time, as trust and loyalty develop, customers may turn to your bank for services like mortgages and wealth-building products.

Seven Key Steps for Crafting a Comprehensive Research Plan

Project Background: The project aimed to enhance the user experience of the BOA mobile banking app by addressing pain points identified through user reviews and interviews. As a UI/UX professional with extensive experience since 2015, I undertook this project to create a more intuitive and user-friendly interface.

Research Goals:

  1. Identify pain points and areas for improvement in the existing BOA mobile banking app.

  2. Understand user preferences, behaviors, and needs related to mobile banking.

  3. Develop actionable insights to inform the redesign of the app.

Detailed Research Questions:

  1. What are the primary pain points users encounter while using the BOA mobile banking app?

  2. How often do users engage with the app, and for what purposes?

  3. What features do users find most valuable in a mobile banking app?

  4. What aspects of the app's design contribute to user frustration or confusion?

  5. How familiar are users with the app's navigation and functionality?

Key Performance Indicators (KPIs):

  1. Increased user satisfaction ratings based on post-redesign feedback.

  2. Decreased number of negative user reviews citing usability issues.

  3. Increased frequency of app usage, particularly for key features such as balance checking and bill payment.

Methodology: The research methodology involved a combination of user interviews, app usage analysis, and usability testing. Interviews were conducted with a diverse group of participants to gather qualitative insights, while app usage data provided quantitative metrics on user behavior. Usability testing involved observing participants interact with the app to identify specific pain points and areas for improvement.

Participants:

  1. Shane, a 28-year-old graphic designer.

  2. Sydney, a 23-year-old interior design student.

  3. Alaska, a 51-year-old accounting professional.

  4. Jadon, a 50-year-old tech entrepreneur and CEO.

  5. Connor, a 20-year-old college engineering student.

Script or Questions:

  1. How would you rate your comfort with using mobile banking apps on a scale of 1-5?

  2. How often do you use the BOA mobile banking app, and what features do you typically use?

  3. What do you like most about the app, and what aspects do you find frustrating?

  4. Can you navigate through the app's menus and features easily, or do you encounter any difficulties?

  5. What improvements would you suggest to make the app more user-friendly and intuitive?

Persona Interviews

Before proceeding further, conducting persona interviews would be instrumental. These interviews will help identify personas based on stakeholder knowledge and analytical user data. Pertinent questions to ask include:How many other B.O.A. services do you currently use or have experience with?

  1. What timing do you prefer for making credit card payments with the B.O.A. app?

  2. How often do you typically make credit card payments using the B.O.A. app?

  3. Which device do you primarily use for making payments through the B.O.A. app?

  4. Have you encountered any specific challenges or difficulties while making payments using the B.O.A. app?

  5. When and how frequently do you usually check your credit card balance within the B.O.A. app?

  6. Have you ever missed a payment while using the B.O.A. app? If so, how does this impact you?

  7. Are you actively aware of the due date for your next credit card statement within the B.O.A. app?

  8. How does it feel for you to avoid interest payments when using the B.O.A. app?

Users

Shane:

  • Age: 28

  • Gender: Male

  • Story: Shane is a graphic designer, freelancing professionally.

Evaluative Questions:

  1. What would you rate your comfort with your mobile phone, on a scale of 1-5 (5 being very comfortable)? 5

  2. How often do you use your BofA App per week, and what for?

    • Very often, I go on regularly to pay credit cards and monitor my spending, as well as use Zelle to pay friends when I go out.

  3. What do you like about the app? All of my balances show immediately when I open the app.

  4. What do you dislike about the app? Transferring/paying bills is confusing, a lot of features are hidden, and the app feels very disorganized.

  5. How familiar do you feel you are with the app? (Very, Kind of, Not really, Not at All) Kind of

  6. What do you use the app for mostly? Viewing balances and paying bills

  7. How much time do you spend on the app? No longer than 3-5 minutes on average

  8. Without looking, what are the tab options on the bottom of the screen from left to right? Accounts, Transfer, Bill Pay, Something, More

  9. What's the most frustrating part of the app? Transferring money to a credit card is the same as paying the bill, but some of my cards don't show under Bill Pay

  10. How do you deal with this? I only use the transfer function to pay cards

  11. Do you have a solution for this? There should be a pay option on the accounts themselves rather than the transfer tab

  12. Did you know there is a dashboard option? No

  13. Would you use this? Why or why not? No, I would just want to see my rewards and payments due on the regular accounts page

  14. Task Questions:

    • If you wanted to pay a bill, where would you go? The card or account I want to pay

    • How do you expect to pay your bill? I should be able to press a pay button and select my amount

    • Did it work the way you expected to? No, I have to reselect the account I want to pay to

    • Is there anything you would change/remove/add to make this better for you? I would just have the options for where I want to pay from, the amount, and the date

Alaska:

  • Age: 51

  • Gender: Female

  • Story: Alaska is an accounting professional working 40 hours a week at a local business, providing for her two sons.

Evaluative Questions:

  1. What would you rate your comfort with your mobile phone, on a scale of 1-5 (5 being very comfortable)? 2

  2. How often do you use your BofA App per week, and what for? Once a week usually. I check on my accounts to see if there's anything I need to pay off.

  3. What do you like about the app? I don't have to go into the bank to do most of my normal bank errands.

  4. What do you dislike about the app? Sometimes I have trouble looking at some of the screens; it feels very busy, but it's also very difficult for me to go through the app to do some of the things I want.

  5. How familiar do you feel you are with the app? (Very, Kind of, Not really, Not at All) Not at All

  6. What do you use the app for mostly? View balances, pay bills.

  7. How much time do you spend on the app? Only a few minutes at a time.

  8. Without looking, what are the tab options on the bottom of the screen from left to right? Accounts, Transfer, Pay Bills, Deposit Checks, More

  9. What's the most frustrating part of the app? It's often confusing, and I don't feel like I can be on there for very long.

  10. How do you deal with this? I try to remember the little things I want to do and only do those things.

  11. Do you have a solution for this? I think the app just needs to be simpler for less technical people.

  12. Did you know there is a dashboard option? No

  13. Would you use this? Why or why not? I don't think so, having my accounts listed normally is easy enough for me.

  14. Task Questions:

    • If you wanted to pay a bill, where would you go? My Account

    • How do you expect to pay your bill? There should be a button for me to pay the bill.

    • Did it work the way you expected to? No, there were a lot of extra steps that seemed unnecessary.

    • Is there anything you would change/remove/add to make this better for you? Maybe make the screen more organized; it always takes me a minute to understand what I'm looking at.

Empathy Map:

  • Senses (What does the user see, hear, feel, etc.):

    • Sees: The user sees multiple options on the app's homepage but struggles to quickly identify their accounts.

    • Hears: They hear feedback from other users about the complexity of the app.

    • Feels: They feel frustrated when they encounter challenges in making payments or navigating through the app.

    • Thoughts and Feelings (What is the user thinking and feeling):

      • Thinks: The user thinks that the app should be more intuitive and user-friendly.

      • Feels: They feel overwhelmed by the number of steps required to complete tasks such as paying bills.

    • Needs (What does the user need or want):

      • Needs: The user needs a simpler and more streamlined process for managing their finances.

      • Wants: They want clearer visual cues and easier navigation options within the app.

    • Pains (What are the user's pains or frustrations):

      • Pains: The user experiences frustration when they cannot quickly find the information or options they need.

      • Frustrations: They are frustrated by the complexity of the app's interface and the number of steps required to complete tasks.

User Stories:

  • As a user, I want to easily identify my accounts on the app's homepage, so I can quickly access the information I need.

  • As a user, I want a simple and intuitive process for making credit card payments, so I can complete this task efficiently.

  • As a user, I want clearer visual cues and navigation options within the app, so I can easily find the features I need.

  • As a user, I want to feel confident and comfortable using the app, so I can manage my finances effectively without unnecessary stress or confusion.

User Journey Map:

  • Stage 1: Initial Interaction

    • User opens the B.O.A. app to manage their finances.

    • They are greeted by the homepage, which displays multiple options and account summaries.

  • Stage 2: Identifying Needs

    • User struggles to quickly identify their accounts due to the cluttered interface.

    • They navigate to the payment section to make a credit card payment but find the process confusing and time-consuming.

  • Stage 3: Frustration and Confusion

    • User feels frustrated and overwhelmed by the complexity of the app.

    • They encounter challenges in completing tasks such as paying bills and checking balances.

  • Stage 4: Seeking Solutions

    • User explores the app to find solutions to their problems.

    • They look for clearer visual cues and simpler navigation options to improve their experience.

Defining User Problem Statement:

"After conducting empathy mapping, user stories, and user journey mapping, it is evident that users of the B.O.A. app face challenges in quickly identifying their accounts, navigating through the app's cluttered interface, and completing tasks such as making credit card payments efficiently. The user problem statement is: Users require a simpler and more intuitive interface that provides clearer visual cues and easier navigation options to manage their finances effectively without unnecessary stress or confusion."

Insights from User Interviews:

Upon conducting user interviews and analyzing personal experiences, several insights emerged regarding the Bank of America mobile app. Users expressed challenges in quickly identifying accounts, a lack of immediate options for essential actions like transfers or payments, and frustration with the inadequate display of rewards points. These findings underscored the need for improvements to enhance user experience and streamline key functionalities.

The new UX Design & Features

New Features Overview:

  1. Clean Splash Screen: The app now features a clean and visually appealing splash screen, providing users with a welcoming and professional introduction to the banking experience.

  2. Enhanced Login Options: Users can now log in to their accounts using either their email credentials or Face ID, offering added convenience and security.

  3. Secure Login Process: With improved login protocols, users can access their accounts securely, ensuring the safety of their sensitive financial information.

  4. Home Screen Enhancements: The home screen now offers various features, including the ability to add new credit accounts and easily access current account information by clicking on credit cards.

  5. Diverse Banking Services: Users can explore a wide range of banking services, including transferring funds, topping up accounts, applying for loans, paying bills, making QR payments, and contributing to charity.

  6. Quick Transfer Functionality: Users can now add accounts for individuals, facilitating seamless money transfers between them. The "Quick Transfer" feature allows users to send funds directly to added accounts for swift transactions.

  7. Transaction Tracking: The app provides comprehensive transaction tracking capabilities, allowing users to view detailed information about their financial activities. Users can access transaction histories, view payment details, track withdrawals, and monitor account balances. Additionally, users can analyze their spending patterns through weekly or monthly breakdowns and visual percentage charts, offering valuable insights into their financial habits.

High Fidelity Design

Bank of America App- Dashboard

Home Menu:

The Account Summary feature on the Home menu provides users with a comprehensive overview of their financial status, including account balances, available credit, and recent transactions. Addressing user feedback, this feature prioritizes clarity and ease of use, allowing users to quickly assess their accounts without unnecessary complexities.

Card Menu:

The Credit Card Management feature under the Card menu facilitates seamless management of credit card accounts. Users can view their credit card balances, track spending, and make payments with ease. This feature addresses user concerns about the complexity of transferring money to credit cards and ensures a straightforward experience for handling credit-related transactions.

Transfer Menu:

Fund Transfer functionality within the Transfer menu enables users to transfer money between accounts securely and efficiently. By simplifying the transfer process and minimizing unnecessary steps, this feature aligns with user preferences for convenience and accessibility in managing their finances. Users can initiate transfers with confidence, knowing that the app prioritizes ease of use and reliability.

Services Menu:

The Rewards Redemption feature within the Services menu offers users a seamless way to redeem rewards earned through their banking activities. By enhancing visibility and accessibility of rewards points, this feature addresses user feedback about the inadequate display of rewards information. Users can easily redeem rewards for various benefits, enhancing their overall banking experience.

Profile Menu:

The Account Settings feature in the Profile menu empowers users to personalize their banking experience according to their preferences. From updating contact information to managing security settings, users have full control over their account settings. This feature reflects user expectations for customization and flexibility in managing their banking profiles, ensuring a tailored experience that meets their individual needs.

Final UI Designs

After incorporating user feedback and insights gathered from the interviews, the final UI designs prioritize simplicity, clarity, and efficiency to enhance the overall user experience. The Home menu offers a concise account summary and quick access to essential banking actions, while the Card menu focuses on credit card management. Within the Transfer menu, users can seamlessly transfer funds between accounts, and the Services menu provides a streamlined process for rewards redemption. Additionally, the Profile menu allows users to personalize their banking settings according to their preferences.

Key Takeaways

  1. User-Centric Design: The case study underscores the importance of designing with the user in mind. By conducting interviews and analyzing user feedback, we gained valuable insights into user preferences, pain points, and expectations, allowing us to tailor the app to meet their needs effectively.

  2. Simplicity and Clarity: User interviews highlighted the importance of simplicity and clarity in navigating the app. The final UI designs prioritize intuitive navigation, clear labeling, and streamlined workflows to ensure a seamless user experience.

  3. Efficiency in Task Execution: Users expressed a desire for efficiency in completing common banking tasks such as viewing balances, paying bills, and transferring funds. The final UI designs incorporate features that allow users to execute these tasks quickly and effortlessly, reducing friction and enhancing user satisfaction.

  4. Personalization and Flexibility: The Profile menu offers users the flexibility to customize their banking settings according to their preferences, reflecting the importance of personalization in enhancing the overall user experience.

  5. Continuous Improvement: The case study emphasizes the iterative nature of design and the importance of continuous improvement based on user feedback. By listening to user input and iterating on the designs, we can ensure that the app remains relevant, user-friendly, and aligned with user expectations over time.

Now, let's delve into two important aspects of UX research: Deceptive Patterns and Crazy 8.

Deceptive Patterns:

In the context of our app's UX design, we must be mindful of avoiding deceptive patterns that could potentially harm the user experience. For example, while it may be tempting to use dark patterns to push users towards certain actions, such as making a purchase or subscribing to a service, doing so can erode trust and damage our brand reputation. Instead, we should prioritize transparency, clarity, and ethical design practices to build trust with our users. By conducting thorough usability testing and gathering feedback from users, we can identify any deceptive patterns in our app's design and take steps to eliminate them, ensuring a positive and trustworthy user experience.

Crazy 8:

To foster creativity and generate innovative design solutions for our app, we can leverage the Crazy 8 technique during our ideation process. By organizing brainstorming sessions with cross-functional teams, we can encourage diverse perspectives and generate a wide range of design ideas to address user needs and pain points. Through rapid iteration and prototyping, we can explore different concepts inspired by the Crazy 8 exercise and refine them based on user feedback and usability testing. This approach allows us to uncover unique design solutions that resonate with our users and differentiate our app in the competitive landscape.

More by Amrinder Hundal

View profile