Banking App: Fremont Bank
Role: UX design, UX research
Context:
In today’s competitive digital banking landscape, users expect intuitive experiences similar to those offered by larger financial institutions. As a community-focused institution, Fremont Bank has prioritized personalized service over digital banking development. However, since COVID-19, demand for digital banking has grown significantly. Additionally, digital banking capabilities are a critical factor for the younger generation when choosing a bank.
This study will involve gathering insights from existing Fremont Bank users through interactions with clients at the branch. By closely examining these pain points, the project aims to deliver an app redesign that balances an enhanced digital experience with Fremont Bank's commitment to personalized service.
Study Components:
User Interviews: Gaining insights into user needs and challenges in financial management.
User Flow of the Current Fremont Bank App: Creating an initial design to visualize PlutoPay's features and user interface.
Competitive Analysis: Assessing existing financial apps to identify market gaps and opportunities.
Revised App Design: Refining the design based on testing outcomes to meet user’s expectations.
User Interview:
Interactions with clients at the branch
As a banker at Fremont Bank for the past year, I’ve frequently heard clients express various frustrations.
Here are the top three I hear most often:
Client #1
"Where can I find my account number?"
"I need to provide my account and routing numbers to my employer to set up direct deposit—where is my account number? I don’t have checks or paper statements for this account, so I can’t look it up there. Why can’t I easily find it in online banking? In another bank's app, it’s much easier to locate."
Client #2
“Where is my profile information? How can I update my phone number?"
"Where is my contact information? I’m not sure if I’m receiving all the texts that Fremont Bank is sending. How do I check if you have my correct phone number? Can I just verify my contact information?"
"I recently moved and want to update my home and mailing addresses. Can I do this online, or do I have to go to a branch or call customer service? I’d prefer not to call, as I worry about errors with address details. How can I confirm my information is updated correctly?"
Client #3
"Why am I being charged a service fee?"
"What is this fee? Why am I being charged a service fee? This account has always been free, but now I’m seeing fees that started two months ago. How can I avoid this? I didn’t know there was a balance requirement.”
User Flow of the Current Fremont Bank App
Analyze Current User Flow: Mapping the current user flow of the Fremont Bank app provides a baseline for understanding how users navigate through key tasks. Identifying friction points in this flow enables you to propose a more streamlined, efficient user journey in your redesign.
Establish a Foundation for Redesign: Together, the competitive analysis and current user flow analysis give context to your design decisions, allowing you to create a redesign that addresses real user needs while offering a competitive edge in the market.
Locating the Full Account Number on the Fremont Bank App
First, the user will click the account page.
Users may click the ‘Details & Settings’ to find more account information
However, the user will not find the full account number on this page.
Users may go back to the account home page. Users may try the menu button.
Users have to click the Statement and Forms on the list.
Users have to click each section to view the account statement.
On the paper statement, the user can find the full account number on top.
2. Locating the User Profile Information on the Fremont Bank App
Users are unable to find their profile information on the mobile app. They must call customer service or visit a branch to access or update this information.
3. Locating the Account Fee Information on the Fremont Bank App
Users are unable to find information about account service fees on the mobile app. They must call customer service or visit a branch to understand why a fee was applied or how to avoid service fees in the future.
Why these are critical usability issues?
Issue #1 Account Number
In the Fremont Bank mobile app, users must locate their account number within their statement, which is not typically expected and requires multiple steps with several clicks.
This is a serious usability issue because users often need their full account number during time-sensitive tasks, like setting up payments or providing direct deposit information. If they must navigate multiple steps and clicks to find it, it disrupts their workflow and can lead to frustration.
Issue #2 Contact Information
Users cannot find their profile information on the Fremont Bank app, requiring them to call customer service or visit a branch to verify or update their contact details. This could lead to serious issues, as outdated contact information might cause important messages or mail from the bank to be delivered to the wrong person.
Additionally, relying on calls or in-branch visits increases the chance of human error. Users should have the opportunity to verify and update their contact information directly within the app for accuracy and convenience.
Issue #3 Account Service Fee
This could be a serious usability issue because users expect transparency in their banking experience, especially when it involves fees. When they see an unexplained service fee—or are unsure why a fee isn’t applied—they might feel confused, frustrated, and potentially mistrustful of the bank.
Having to call customer service or visit a branch for clarification adds inconvenience and may erode their perception of the bank’s reliability. Clear, accessible fee explanations within the app would provide users with immediate answers, fostering trust and improving the user experience.
Competitive Analysis
Why this study is important?
Understand User Expectations: By studying competitors, I gain insight into standard features and design patterns that users expect in a banking app. This understanding will help ensure the redesign aligns with these expectations, making the app more intuitive and user-friendly.
Issue #1: Locating Full Account Number
Most banking apps mask a portion of your account number to prevent potential identity theft.
However, most users will look for a button or option such as "Show Details," "View Full Account Number," or an icon of an eye or similar phrasing. This is the standard expectation for most users.
Wells Fargo app
Account Page → Routing & Balance Info → Account Number → View
Chase app
Account Page → Show Details→ Account Number
Issue #2. Verify and Update User Profile Information
User can usually update their contact information by logging into their banking app and navigating to the profile settings. Keeping their contact information up-to-date ensures users receive important documents, can quickly respond to unusual account activity, and receive new cards more promptly.
Wells Fargo app
Account Page → Menu → Profile & Settings→ Contact Information → Update Contact Information
Chase app
Account Page → Menu→ Profile & Settings → Settings → Personal Details
Issue #3. Verify Account Service Fee Information
To find account fee information on most banking apps, users typically navigate to the "Account Summary" or "My Accounts" section, where they can view a breakdown of account details, including any current or upcoming fees. Some banks also provide a dedicated "Fees" tab or section for users to view detailed fee information.
Wells Fargo app
Account Page → Routing & Balance Info → Monthly Service Fee Summary
Wells Fargo also has the same information available on paper statement
Chase app
More → Statements & Tax Forms→ Monthly Statement
New Design Suggestion
Issue #1: Locating Full Account Number
Ideally, the full account number would be located under the "Details & Settings" tab within the account page. Currently, users can view the Fremont Bank routing number on the home page, but displaying it again directly below the account number on this page would be helpful. This way, if users need both pieces of information at the same time, they can access them conveniently in one place.
Issue #2. Verify and Update User Profile Information
In the Fremont Bank app, the ideal location for profile information would be in the "Menu." Users are likely to check the "Menu" if they don’t see a profile icon on the main page. Placing "Profile" at the top of the "Menu" would help users easily find the option to verify and update their personal information.
Issue #3. Verify Account Service Fee Information
Ideally, users should be able to find their monthly fee information on the account "Details & Settings" page. The monthly service fee is essential information related to their account and should be easily accessible, just like the account number. Providing a link on the "Details" page for more information about service fees, along with the user’s current fee status, would be especially helpful when users notice new fees on their account.
Designing for Accessibility
Accessibility refers to making a product, service, or environment usable for all individuals, including those with disabilities or special needs. In other words, accessibility is about how effectively your app or product accommodates everyone.
Fremont Bank serves many elderly clients who often struggle with mobile apps due to small text sizes, complex menus, low color contrast, and small interactive elements on the screen.
The text size of the main navigation is too small.
The text size of the main navigation passed the test
I adjusted the contrast of the text and the background. I also change the background color of the button and the main navigation to make it more visible.
The text size on the ‘Financial Tools’ menu is too small.
The text size on the ‘Financial Tools’ menu is large enough.
The contrast between the text and its background is not significant enough, making it difficult to read, especially for people with visual impairments.
The contrast between the text and its background is good for all-size text. Good contrast helps everyone see content better.
Summary and Key Takeaways
The key takeaway from this case study is the impact of a user-centered redesign process that directly addresses real client feedback, leading to an improved, accessible app experience.
By incorporating insights from client interactions, this redesign prioritizes usability, especially for older users who face challenges with text contrast and readability.
Running accessibility tests on text contrast and size ensured that the app became more inclusive and aligned with Fremont Bank’s commitment to personalized service.
This project demonstrates the value of using direct user feedback to drive meaningful design changes, ultimately enhancing client satisfaction and engagement.
