Bank of America Online Banking
When the most inclusive bank has the least usable interface
To redesign Bank of America's information architecture and key user flows, reducing cognitive load by consolidating fragmented navigation and clarifying multi-step banking tasks for users across experience levels.
User Research
Information Architecture
Interaction and Content Design
Prototyping
Figma
Figjam
Why Bank of America? Why desktop?
When I opened my first Bank of America account, I struggled to find basic features like Autopay and felt overwhelmed by unclear navigation - a common experience for first-time American banking users.
But it wasn't just me. A 2024 MeasuringU study analyzing six major U.S. banking websites found that clutter and poor navigation were the top drivers of user dissatisfaction, with BofA users specifically reporting confusion around payment flows and difficulty managing cards and finding features.
This matters because BofA is often people's first bank - accessible to international students and adolescents opening their first accounts. Research shows that when first-time users encounter confusing interfaces, they develop lower confidence in digital banking, discouraging continued financial engagement (Andreou, Anyfantaki, 2020).
We focused on the desktop website because nearly half of banking traffic (50.6%) still comes from desktop (Contentsquare, 2024), with tasks like bill payments actually preferred on desktop over mobile (Hrubenja, 2024).
Experienced users and first-timers face identical issues
Through user interviews with 6 participants in their 20s, we found that both experienced banking users and first-time users struggled with identical issues, regardless of skill level.
Unclear workflows for critical tasks like autopay and transfers
Users found multi-step processes confusing with unclear requirements and non-intuitive navigation. Setting up autopay was described as "clunky," and card application processes had "unclear steps" that led to blocks and frustration.
This means: Users need clear step-by-step guidance with explicit requirements upfront. Financial tasks require progress indicators and plain-language instructions to build confidence.
Cluttered navigation requiring consolidation of scattered content
Related features were fragmented across multiple pages (e.g., Spending & Budgeting, Goals, Alerts as separate sections). Users couldn't find basic features among promotional content and described the homepage as 'overwhelming' with too many links beyond what they were immediately searching for.
This means: Users build mental models based on task relationships, not organizational structure. Navigation should reflect how users think about their banking tasks, not internal banking employee categorizations.
How might we reorganize BofA's navigation so first-time banking users can complete critical tasks - like setting up autopay or paying bills - without getting lost in fragmented menus?
Consolidating fragmented pages and clarifying action flows
The redesign spans 8 key pages. Amy and I collaborated on research, IA testing, and initial wireframes. I led design for Transfer & Pay flows, Spending & Budgeting, Rewards & Deals, and Intelligent Search, while Amy focused on Account Overview, Credit Card Details, and Application flows.
We worked collaboratively on the initial research, card sorting, tree testing, and brainstorming for lo-fi wireframes.
Reorganized credit card payment flow with 'due', 'scheduled', and 'autopay' tabs
Before
Generic payment form with no visibility into scheduled or autopay settings
After
Tabbed dashboard ('due', 'scheduled', and 'autopay') with one-click actions like "pay all minimum balances"
Made transfer & pay actions explicit with dedicated cards
Before
4 generic action cards (Transfer, Zelle, Pay Bills, Wire/ACH) with minimal context
After
Organized into "Pay" and "Transfer" sections with task-specific descriptions under each option
Promoted and consolidated related features to primary navigation
Before
5 different 'Rewards and Deals' sub-menu links
After
Consolidated into a single 'Rewards and Deals' dashboard
Before
4 separate financial planning features buried in sub-menus
After
Consolidated under one 'Spending & Budgeting' page
Proposal for intelligent search over current FAQ search and website navigation
Before
BofA's search returns FAQ articles and requires users to navigate through the existing site structure to complete tasks.
After
Intelligent search returns relevant task pages - for example, searching 'How much am I spending?' surfaces Spending Tracker, Monthly Spending, etc.
Redesigned visual language for clarity and consistency
Before
Inconsistent UI across similar pages - debit and credit card pages use completely different layouts and components
After
Standardized card-based system - information pages (Accounts, Credit Cards) use detailed modules, while action pages stay streamlined
From user research to final solution
I worked collaboratively with my partner, Amy, on the initial research, card sorting, and tree testing. I led design for payment flows, budgeting, rewards, and search; Amy led account and credit card management, as well as the application flows.
Testing BofA's information architecture
We tested the information architecture because users initially said things were hard to find
Card sorting analysis table
Tree testing example
Our initial testers said the BofA website was hard to navigate, so we expected structural problems. But card sorting (7 participants) and tree testing (16 participants, 11 tasks) revealed that most of BofA's structure actually fits users' mental models. Users naturally grouped features similar to the existing organization.
We found one key pain point that directly influenced our design decisions.
Insight: users tried to track their spending manually
When asked to see how much they spent on groceries and dining last month, 38% went to Transaction History or Monthly Statements, intending to manually review and calculate. They didn't realize Spending Tracker automatically categorizes and analyzes spending for them.
Solution: 62% found Spending Tracker correctly, but 38% opted for manual review. This wasn't a navigation problem; users just couldn't tell what each tool did from names alone. We addressed this through visual differentiation (icons showing list vs. charts) and surfacing features more prominently, rather than restructuring the IA.
Showed transaction history on homepage, making it clear it's just a list - not necessarily data to analyze
Added descriptive icons (bar chart = analysis, list = data) and made spending tracker a featured shortcut
Proposed conversational intelligent search as a backup for when users don't know what page to look for
Iterating lo- and mid-fi prototypes with user feedback
Since the IA structure worked, we focused on the page-level interactions to understand where users were really struggling. After validating our IA through card sorting and tree testing, we built lo-fi to mid-fi prototypes across 9 core screens: transfer/pay, dashboard, help/support, and account overview. We tested key task flows around the overall navigation experience with 4 participants to see where their real struggles lie.
Mid-fi screens to test user interactions
Transfer and pay: when consolidation and less clicks created confusion
The transfer and pay flow was critical since it's one of the most common banking tasks. I focused here first, iterating through multiple rounds of testing.
The 'Transfer & Pay' section didn't clearly separate different payment types; users couldn't tell if they needed 'Transfer,' 'Pay Bills', or something else. Critical actions like viewing scheduled payments or checking autopay settings were buried. This led to confusion, longer task times, and users taking the wrong path.
Current BofA transfer & pay screens
First iterations: the consolidated transfer & pay dashboard
Based on user feedback wanting faster actions, I tried consolidating everything into one dashboard.
Consolidated dashboard view of a transfer and pay hub
All payment types on one screen (credit cards, bills, transfers)
Checkbox/dropdown selectors to pay multiple bills at once
Visible scheduled payments and autopay settings
Account balances shown for context
User feedback: "I thought this would be faster, but now I have to look through everything to find the one thing I need."
The problem: Too many actions on one page created cognitive overload. When users already knew what they wanted to do, they needed a focused flow - not every possible option.
User confusion necessitated the pivot into pages with explicit task separation
After testing multiple variations of the previous approach, I realized consolidation was the wrong approach here - users needed explicit task separation.
New 'transfer and pay' hub
New 'transfer and pay' activities page
Credit card - due
Credit card - scheduled
Credit card - autopay
Dedicated hub page with clear task-based entry points
Separated credit card payments, transfers, bill pay, and Zelle, etc.
Activity dropdown showing scheduled payments and history upfront
Each task leads to its own focused flow
Why this worked: Users rarely need to handle transfers, bill payments, AND credit card payments in one session. They needed clarity over consolidation - even if it meant more clicks.
Bringing buried features to the surface
Consolidating five 'rewards and deals' links into one dashboard page
Users wanted quick access to deals, but BofA scattered them across 5 navigation links leading to 3 different pages. I consolidated everything into one searchable dashboard.
Before
I separated two distinct tasks: checking reward balances (quick cards at top) and browsing available deals (filterable section below). This lets users quickly see what they've earned, then explore new offers without the summary cluttering the browsing experience.
New BofA rewards and deals design with rewards to redeem at the top, and deals to add as you scroll down
Combining four features to analyze past and future spending into one spending and budgeting hub
Users wanted quick access to spending insights, but BofA scattered related features across multiple pages ('Spending Tracker', 'Goals', 'Net Worth', 'Recent Activity'). I consolidated into one page with clear differentiation between spending analysis and income tracking.
Before
I consolidated scattered features into one page with two tabs. The 'Overview' tab (default view) shows past spending analysis - users come to their bank app to check what they've spent. The 'Personalized Money Plan' tab houses budgeting and goal-setting - a more holistic planning experience that extends beyond just BofA accounts, which I assumed users would access less frequently.
Proposed BofA spending and budgeting design: combining features into one view for past and future spending insights
Why I proposed intelligent search
"I feel like ultimately, I want to just find what I want easily and do the things I need to ASAP, something like a search-first model."
One tester specifically referenced ChatGPT's search-first approach. When I pointed out BofA's existing search, he said he'd never noticed it since it wasn't prominent in the navigation. Even when he tried it, he didn't like how it led to more FAQ pages to read through, "wasting his time."
This means: We propose intelligent search to serve the 43% of users who prefer search-first interactions (Gill, 2025), replacing BofA's underperforming search while complementing the navigation redesign.
I modelled the search implementation after GOV.UK's intelligent search box (Fraser, Sutter et al., 2024) as best practice for complex, trustworthy organizations. Conversational search results return actionable pages (like 'Spending & Budgeting Overview' or 'Personalized Money Plan') with descriptions, rather than FAQ articles that require users to read through and extract next steps.
New search implementation with conversational inputs
Consolidation and clarifying task flows: a lesson for legacy interfaces
By consolidating related tools and clarifying task flows, the redesign addresses the core frustrations we heard from first-time banking users: scattered features, unclear payment paths, and buried settings. In testing with 4 participants, users completed payment and budgeting tasks more confidently than with BofA's current interface.
Beyond BofA, this project demonstrates how legacy banking interfaces accumulate features that get buried over time. The consolidation strategy - surfacing rewards, spending tracking, and payment options from nested pages while maintaining clear task separation - could serve as a model for how established institutions balance feature richness with beginner-friendly design.
Simple ≠ clear: sometimes, to create less friction, you actually need more paths
Clarity isn't just about minimalism - it's about matching information density to the user's intent. Consolidating features sounds efficient, but it's pointless if users can't find what they need or get distracted by irrelevant information. Sometimes more pages is actually clearer.
Take the Transfer & Pay flow for example: when someone's paying their credit card bill, do they need to see their account balances on the same screen at all times? Or all the different payment methods? Extra features may distract from the task - users aren't clicking back and forth during a single action, so cramming everything together would just create just confusion.
Separate distinct tasks, consolidate related features. Users needed clear entry points for different payment types (credit cards vs. external bills vs. transfers), but expected features like rewards browsing or spending analysis grouped together.
Building out help and support features, and mobile adaptation
Help and support features: Throughout our initial interviews, users mentioned not only their problems with the website navigation itself, but with the customer service models. Since 88% of banking customers say customer experience matters as much as the actual products (Fico, 2025), a comprehensive help system is needed.
Mobile adaptation: We focused on desktop because it gave us a foundation to work from before deciding what to pare down for mobile. But 54% of users prefer mobile for day-to-day banking (America Bankers Association, 2025), so I'd want to evaluate BofA's current app and determine which features make sense on mobile versus desktop; not everything needs to be on both platforms.