How do we refresh and revitalize the online banking website for a traditional bank?
Most of us are familiar with Bank of America, the second largest of the “big four” banking institutions in the US. BofA’s history stretches back more than a century, and throughout the years, it captured a prominent market share and grew through mergers and acquisitions. BofA’s main services revolve around commercial banking, wealth management, and investment banking. It services approximately 11% of all American bank deposits¹.
Bank of America’s business model combines online with retail operations to optimize efficiency and costs. Its website and mobile app allow customers to access financial information and services conveniently. In 2021, 70% of its individual and business customers are digitally active², and digital sales are 25% of all consumer banking sales³. Pre-pandemic, digital engagement had been fueled by technologically savvy millennials who are prominent BofA customers, with a combined worth of $200 billion in deposits, investments, and loans with the bank. Going forward, BofA is continuing its digital transformation to focus on millennial and generation Z customers.
The idea of winning customers through digital is a seemingly ubiquitous one in the commercial banking industry, competitors like JPMorgan Chase, WellsFargo, and Citigroup are likewise trying to accomplish the same. Within online platforms, how could BofA distinguish itself from competitors and create additional value for its customers? In this case study, I reimagine and redesign Bank of America’s online banking website aiming to achieve this. Although the majority of BofA’s digital customers are on mobile, in this case study, I focus on their website as it seems to have been glossed over.
Disclaimer: This is a concept work and does not represent Bank of America, Merrill Lynch, or any of their products. This work is for the sole purpose of enhancing my own learning of user experience design and I am not affiliated with these institutions. The views expressed in this case study are strictly my own opinion.
What prompted this redesign?
I have been a Bank of America customer since I was 16. At the time, I did not extensively compare which commercial bank to use. I was drawn to BofA because they had a branch close to my home, and they seemed to have the most retail locations. I opened a student checking account and was provided access to their online banking portal. I logged in and used this interface. That was 2009. I noticed that the user interface of the website has not changed much since then.
Throughout the past decade, many new financial services have emerged to which I have onboarded. There were a few that left an impression on me due to the positive user experiences they provided. Including:
I recall thinking that the contrast between these new services and BofA’s website was stark. Although I remained a loyal BofA customer as I value its strong retail and ATM footprint, increasingly, my level of expectation has risen and I become more dissatisfied with its website’s UX. Compared to these newly emerged financial services, BofA’s design is antiquated, monolithic, and difficult to use.
As such, I set out to redesign the BofA online banking website by applying what I know. I felt compelled to work on this project because commercial banking is an essential aspect of most peoples’ lives and I wanted to see how thoughtful design can positively impact this conventional experience.
Goals for the Redesign
My goals for the redesign:
- To deliver an intuitive, smooth, and aesthetically pleasing UX through revamping the user flow, information hierarchy, and style guide for the user interface.
- To deliver an informative and personalized UX by adding new features that provide bespoke insights for users based on analysis of their financial data.
My personal goals:
- To challenge myself with designing a website and presenting text-heavy content in an organized and intuitive way, with the aid of representing such data with visualizations which I also design and create.
- To challenge myself with creating a design that incorporates recent design trends, including dark mode, neumorphism, and animations.
- To research and understand the subject matter of commercial banking, and to challenge myself in incorporating this knowledge into my design.
What do customers think of Bank of America?
In order to create a design that represents the public perception of BofA, I informally interviewed a dozen friends and family who happen to be BofA customers to understand its brand perception.
I grouped the interviewees’ comments into different themes.
The general perception is that BofA has a strong geographic presence, is secure and stable due to its long history, and is innovative. Note that the comments about innovation are focused on the ATMs and mobile app.
This exercise allowed me to see BofA’s strengths, which I intend to accentuate in the redesign.
What does BofA’s existing online banking website look like?
I dived into BofA’s existing website to identify its weaknesses. The design had these overarching issues:
- Poor information architecture. Although the IA is logical at a high level, it is disorganized within each branch. Components are not placed based on importance or sequence, and there are many redundant buttons.
- Complexity. There are many hidden menus and misplacements of components which gives the impression of clutter. This increases users’ cognitive overload.
- Inconsistent style. A singular design system is not followed; there are varied styles across pages in the IA. The use of iconography and typography is not purposeful; it complicates the experience rather than making it more intuitive.
- Lack of personalization. Aside from providing essential information and functions, the website does little to offer insights specific to the customer. There are also few opportunities for customization.
- The blatant sales-oriented tone. There is too much emphasis on business goals, such as using a shopping cart to compel customers to shop for multiple financial products. My gut tells me it is unlikely for customers to purchase more than a few products once.
In the following exhibits, I analyze the main pages in the existing design and highlight their weaknesses in detail.
What are the competitors doing?
In order to identify opportunities for improvement for BofA which I may have missed when I analyzed their online banking website, I audited its direct competitors’ websites through the help of my friends who provided access.
From testing each website, I created a comprehensive list of characteristics and features that I found which are important to users or create additional value. This list forms the below rubric which I used to compare and rank the UX for each competitor. Note that some of the characteristics I listed (e.g. simplicity) are subjective while others are objective (e.g. whether they provide accessibility settings/guidelines).
From this analysis, I learned the following:
- Competitors do seem to have a better UX than BofA, mostly due to its overall information architecture and interface design; not due to missing features. There are some features offered by BofA which succeed its competitors, but most banks have a logical IA, which is fundamental.
- There are various ways to reduce users’ cognitive load, and some competitors do this very well. As online banking content is mostly text-based data (e.g. dollar amounts, percentages, dates, merchant names, finance terminologies, transaction IDs), we can simplify by prioritizing and/or emphasizing key information, moving details to a lower level of the hierarchy, representing text with iconography, representing numeric data with visuals, and presenting only a limited amount of information at once.
- Most banks offer insights to users from analyzing their financial data, however, this information is similar across banks (e.g. total accounts value, breakdown of spending in categories). Informing users what they do not already know is an opportunity to differentiate. For example, one insight could be the number of times the user ordered food delivery this month compared to previous months.
What are users’ needs when it comes to online banking?
After learning the current design’s weaknesses and what to improve, I was keen to know users’ needs in order to thoughtfully implement change.
First, I ran a small survey to gauge the main objective of online banking. The survey had a total of 15 respondents, with ages ranging from 22 to 59.
How often do you use online banking for the following objectives?
From this survey, I was able to understand which functions are of higher priority. I mapped out the user journey with functions listed in priority.
Users’ top objectives are checking the account balances and viewing transaction history. I wanted to dig deeper in finding out why users have these needs, as this would inspire value-add features. I informally interviewed a few of the users.
From these responses, I learned that although users have different reasons for checking their account balance, they are looking for similar metrics when doing so. What they are really looking for is…
The commonality amongst users is that they check their bank account to quickly assess their financial position — their equity or net worth.
I then wanted to understand why users check their transaction history.
In other words, users check their transaction history to verify their profitability and assess their liquidity.
From these interviews, I have formed a clearer vision of the information to be prioritized or emphasized. There was a clear gap between user expectations and the existing design.
What are BofA’s objectives?
Although in design, users’ needs are placed at the forefront, it is important to not lose sight of business objectives. Aside from providing banking services to customers, the following are assumptions I made on the goals of BofA’s website which follows their business goals:
- To capture new business for loans, such as credit cards, mortgage, and auto loans, as banks collect interest from customers
- To attract new deposit account opening and convert commercial bank customers into investment bank customers
- To attract purchases for affiliated merchants, or BankAmeriDeals, as merchants pay a processing fee
Although these goals may not be precise to BofA, based on industry research, these are the goals that underpin commercial banks’ operations. I aim to reconcile incorporate these aspects into the design with meeting user needs.
With these defined goals which added to the design vision, I began ideating.
Ideating and Prototyping a New Online Banking Website
I brainstormed by setting a timer and quickly sketching out iterations of the interface. I started with iterations that have an improved information architecture. I limit the amount of time I spend on these first iterations as I wanted to form as many ideas as possible.
In the iterations that followed, I began adding mock content (e.g. transaction tables and each column that follows) and ideating how I could simplify the content by using visualizations and icons and omitting/deprioritizing less important information.
In the later iterations, I focused on more personalized features. For each iteration, I would assess the iterations’ pros and cons, continuing to reiterate them quickly.
Major Design Decisions
During the design process, I struggled with the following decisions:
On layout: Should I keep the existing layout or revamp it?
Layouts give structure to design. For an online banking website with a myriad of text-based content, it is important to use a layout that effectively breaks up the information for easier consumption. As the website also serves various functions (e.g. view accounts, pay bills), the layout should also ease navigation.
The existing layout is problematic. It is only one frame, with the x-axis filling up the width of the browser viewport, and a very large y-axis depending on the number of transaction rows (vertically scrollable). As the navigation is not fixed at the top, it becomes out-of-sight when the user scrolls down, leaving the user to only see rows of transactions and having to scroll back to the top to navigate to other sections.
Although all competitors’ layouts are similar to BofA’s, I decided to take a bolder approach and reinvent the layout.
In my redesign, a large frame holds many smaller ones. They scale responsively to users’ viewport.
Some cards (pink) are fixed, or sticky, serving as navigation.
The rest of the screen real estate (blue) is for content. This space is broken up into several containers to organize the content. These containers can be scrollable or otherwise.
All pages follow this structure. This layout better serves the goal of easing access to functions and breaking up information into consumable bites. It also prevents the waste of white space, as all containers will be filled.
On Style: should I stay “on-brand”? Or create a more usable design system that looks contemporary but “off-brand”?
I started creating my design system with the intention of adhering to BofA’s existing brand. I referred to the style used on their website currently:
Upon examination, I found issues with the current style.
Firstly, they used inconsistent typefaces, with Arial regular being the main font. I found it difficult to read.
Although Arial is a sans serif typeface, it was originally developed for print media. It has more decorative flourishes than alternate san serif typefaces. These add more complexity to the text.
After testing out various typefaces, I decided to use Inter regular, a variable font that was designed for computer screens, which has a more simple geometry than Arial.
Another issue with Arial is that its narrow numeric characters make a string of numbers look truncated. This adds frustration to reading numbers, which make up a bulk of the text-based content.
Secondly, the existing website’s color palette is also an issue. The colors are clashing and not used purposefully.
The top navigation bar is an intense red, which draws attention away from the rest of the screen. High saturation of color should be used to emphasize important information. If red is used here, we omit the option of using red to draw emphasis to other parts of the screen (e.g. notifications) because it would be ineffective.
Also, as, psychologically, there is an association of the color red to negative balances, debit transactions, and imminent or overdue events, I made the decision to minimize the use of it in the new design.
The other color in BofA’s logo is navy blue. Blue conveys security and stability, which aligns with customers’ perception of BofA. It is neutral; it does not convey a positive or negative meaning. This is a more sensible choice for an accent color.
I debated whether I should omit red completely. However, as a few of BofA’s competitors also use a shade of blue as their primary brand color, I kept a sparing use of red to distinguish its brand.
The Redesign
If you would like to try out the interactive prototype on Figma, please *click here*! ← 🖥️
As this is a large file on Figma, please give it a minute for everything to load.
I will now walk you through my redesign of the online banking website by showcasing each page and elaborating on the decisions I made.
1. HOME (PERSONAL ACCOUNTS)
In the redesign, the user flow begins on a consolidated view of personal accounts. This is a summary of user’s personal accounts, which includes:
- Access to each personal account, with respective account balances shown, represented with unique bank cards on a vertical carousel. At the bottom of this carousel, there is a dotted card that enables the user to open a new account.
- Key information that users care about, including Total Assets, Estimated Net Worth, and Income vs. Expense, displayed at the top. These are supported with visualizations to inform details regarding that data, such as change across time. Hoving over the visualizations shows even more detail.
- Users can toggle into different time periods (1W, 1M, 1Q, 1Y, and ALL) to render data visualizations and transaction history respective to that period.
- A consolidated personal accounts transaction history is displayed, with the most recent transactions at the top. This enables the user to validate their most recent transactions at first glance upon logging in, without navigating elsewhere.
- Per transaction record, merchant logos are displayed for users to quickly identify transactions without reading. Credit amounts are shown in green. The “$” signs are removed for simplicity, as it is intuitive that the numbers are of monetary amount. Clicking on the transaction will open up transaction details, which include the receipt for the purchase, as well as the geographic location where the purchase was made. Transaction records can be filtered, downloaded, and printed.
The new design’s navigation (on the left) emphasizes the functions most important to users: Personal Accounts, Transfers, Bill Pay, and Investing. Features that are secondary to users, such as Rewards, New Account Opening, and Help, are organized into a lower level of the IA. This reduces the cognitive load for the user.
2. CHECKING/SAVINGS ACCOUNT
From the Home page (Personal), clicking on one of the checking or savings account cards would open up a checking/savings account page that holds information pertaining to the particular account.
- The user has the option to assign or rename the nickname for the account. In this instance, it is called “Main Checking”. The user can click the card to see the account’s details, such as the account number.
- Buttons provide navigation pertaining to that account, such as “statements & documents”, “request services” which could open up various options such as check ordering or freezing an account, and “account settings”.
- The key information are shown: Total Balance, as well as Credits and Debits respective to each time period (1M, 1Q, 1Y, ALL). These are supported with visualizations that show more detail when hovered.
- A transaction history pertaining to the particular account is also shown.
3. CREDIT CARD ACCOUNT
From the Home page (Personal), clicking on a credit card would open up a credit card account page that holds information pertaining to the card.
- The user has the option to assign or rename the nickname for the card. The user can click the card to see the account’s details, such as the card number.
- Buttons provide navigation pertaining to that card, such as “make a payment”, “statements & documents”, and “more services”.
- The key information are shown: Total Balance, Categorized Spending for each time period (1M, 1Q, 1Y, or ALL depending on which toggle is active) supported a pie chart that provides more detail when hovered, user’s credit score, as well as reward points balance.
- A transaction history pertaining to the particular card is also shown.
4. TRANSFER
Navigating to the Transfer section, the user is presented with options to send and receive money.
- Both incoming and outgoing transfer records are shown. For each record, the recipient or sender’s avatar enables the user to quickly identify transactions.
- A menu is displayed for the user to send money traditionally (electronic or wire) through BofA.
- To receive money, the user can share their bank account’s QR Code, or get their account numbers and share the numbers.
- As BofA is integrated with Zelle, we also have a menu that enables the user to send or request money through it. The user is able to manage recipients and include a personalized message along with the transfer.
5. BILL PAY
Navigating to the Bill Pay section, the user is presented with options to manage her bills.
- The user can view a history of paid bills, and in each record, she can view details such as the payment date, bill due date, as well as the actual bill .pdf which she can download and print.
- The user can manage her bills by turning autopay on/off, as well as changing the account for payment, payment date, and amount.
- To make a new payment, the user would use the form on the left. She could pay to a company or an individual, and adjust the settings for the payment.
- Personalized insights, gathered from analyzing users’ financial data, are presented to the user. For example, the user’s average spending per month on bills and subscriptions.
6. INVESTING
In the redesign, personal accounts are streamlined with investing accounts. Integrating these services in a singular platform with a cohesive style enables the user to easily manage all banking activities and increases engagement for both lines of businesses.
Similar to Personal accounts, the Investing section shows a dashboard, or consolidated view of all investment accounts, which includes:
- Access to each investing account, with respective account balances shown, represented with unique bank cards on a vertical carousel. At the bottom of this carousel, there is a dotted card that enables the user to open a new investment account.
- Total Portfolio Balance, a live ticker, supported with a live chart. Different time periods (LIVE, 1D, 1W, 1M, 1Q, 1Y, ALL) can be toggled. A snapshot pertaining to a particular time is shown upon hovering the chart.
- The Asset Allocation breakdown. This is supported by a pie chart. More detail is shown upon hovering.
- Holdings List, which shows shares per stock the user is holding and its current price. Watch List, which shows stocks the user has bookmarked and their current price. Activities, which are user’s trading records.
- A Quick Trade menu where users can buy, sell, and trade options quickly without navigating to another page.
- The Investing section also has subsections, including Trade, Research, and Guidance.
7. SEARCH
In the redesign, the Search function is merged with a chatbot powered by AI. The user can search with keywords or type a question such as “Where is the closest ATM?”, and the search panel will pull up answers and results.
Currently, BofA’s mobile app already has this capability, with their chatbot, Erica. This can be implemented beyond mobile, onto their website as well. Erica services clients in not only an efficient and effective way but also a human-like, personable way. This is outstanding for digital banking, and it differentiates BofA from its competitors.
8. NOTIFICATIONS
In the redesign, Notifications to the user are organized in a singular place with a timestamp. Clicking a notification will enable the user to view its details and perform related actions.
9. ACCOUNT
In the redesign, the Account button opens up a panel of options. The button is represented with an avatar of the user for a more personable feel.
Highlights of the menu include:
- The user’s Member Tier and member number. BofA currently has a program called Preferred Rewards with three tiers: Gold, Platinum, and Platinum Honors. The tier is based on the customer’s total account balance, and there are different privileges that follow each tier, including higher interest rates, rewards, and priority in service. Loyalty programs are attractive to users as it makes them stand out, feel acknowledged, and invested in the brand. As such, I believe this aspect should be highlighted. There should also be a member number, a unique identifier for the BofA client, which pulls up all her accounts.
- Language Settings. Currently, BofA and all banks I’ve audited only offer English and Spanish for their website. As multiple languages are available on BofA’s ATMs. This should be extended to their website.
“Their ATMs are available in my language (Chinese), which is important because I cannot speak English. It’s automatically set. Every time I put my card in the ATM, everything is already in my language.” — a BofA customer
- Accessibility Settings. The current BofA website does not provide guidelines for accessibility, such as browser and screen reader application pairings.
- Dark Mode. The user can change the entire interface into Dark Mode, and I have created complete prototypes for both Light Mode and Dark Mode (elaborated in the next section).
- The common functions not included in the navigation menu, including Your Documents, Redeem Rewards, Report a Problem, Contact Us, Find a Branch or ATM, Schedule Meeting, Recommended Products, and Open a New Account.
10. DARK MODE
The following are designs for Dark Mode. Users can toggle Dark Mode on or off from the Account panel.
User Feedback on Redesign
After creating the redesigned prototype, I showcased it to the original users whom I informally interviewed and I organized their comments below.
The feedback I got was mostly good, notably, users approved of the new information architecture, the improved features and new features I created, as well as the tone of this design.
On the layout and style, most of the feedback was good, but two users commented that it is too “off-brand”. Another user also commented that the design may be too idealistic and difficult to implement.
I accepted and appreciated everyone’s honest feedback, and reflected on the process.
Reflection and Lessons Learned
This project, including user and industry research, ideation, design, prototype building, and case writing took around 230 hours in the span of one month. It was a very rewarding experience and I thoroughly enjoyed the process.
I challenged myself with designing for text and numbers-heavy content, creating data visualizations, designing for dark mode, animating graphics (e.g. the stock ticker), and designing for trends such as neumorphism.
I researched new subject matters: commercial banking and investment banking, and from their context, I created mock content and data that tells a story.
Here are some lessons I learned:
Successful products are able to reconcile user needs, business goals, and what is technically feasible.
One of the reasons for my struggle with the major design decisions (choosing a layout and a more usable but “off-brand” design system) was due to not having business stakeholders to validate or reject my decisions.
Although I mostly received good feedback from users for the design that followed these decisions, two users did raise the concern of it being too different from BofA’s branding. During the design process, I also felt uncertain about continuing to implement this.
As this is a project merely for my own learning, I was missing two important parties to challenge or validate my design decisions. In the real-world context, I imagine that I would have the privilege of getting feedback from them early on in the design process so that iterations that follow will strike a better balance between user needs, business goals, and what is technically feasible. As a designer, I would ensure that I gather feedback frequently to enable an efficient design process and a successful product. This will take initiative and good communication skills, which I will continue improving upon.
I need to design in a more efficient way that prevents wasting effort and time.
As someone who has the tendency to fixate on details, during this design process as well as in past projects, I sometimes find myself a fallacy that looks like this:
1. I get this idea that a button should be placed “here” →
2. I create a wireframe element for it →
3. I add the appropriate and concise text content/find or create the perfect iconography →
4. I style the button extensively, playing with corner radiuses, shadows, highlights, gradients, colors, layers that add dimension →
5. I create different states for the button (e.g. default, hover, pressed), turning it into a variant or micro-interaction →
6. I add animations…
After all of these steps, I realize that I don’t need this button at all. I just wasted a lot of time.
Although sometimes these components can be reused, I still could have worked more efficiently.
How I plan to prevent making this mistake again:
- Follow the established design process which clearly separates the lo-fi creation stage from the hi-fi stage, and define what lo-fi means to me at most (monochromatic, no real content, etc.). Don’t be vague about it. Don’t overdo the lo-fi.
- Work the entire design through the lo-fi stage before proceeding to hi-fi. Not just on one component. Obtain validation from stakeholders and mentally validate all decisions before proceeding to hi-fi.
- In hi-fi creation, start with adding real content (e.g. text, photos), then after they are positioned in place, create a design system and apply the styles across the design. Only after this is complete should I begin creating variants, interactions, micro-interactions, and animations.
Following these steps would prevent me from tunnel-visioning on a particular element once again, and would likely shorten the project lead time.
Thank You
Thank you for reading! If you’ve learned something from this, or have any feedback to share with me, please leave a comment!
More of my work is showcased in my portfolio at http://carolwong.design
All the Best,
Carol W
Footnotes
[1] https://www.zippia.com/advice/largest-commercial-banks/
[3] https://netfinance.wbresearch.com/bank-america-betting-digital-strategy-ty-u
A special thank you to my friends who provided access to their online banking for the competitive audit!
