Bank of America


Project Overview

The Bank of America mobile app is an accompanying product offered by the bank for clients to securely and conveniently manage their accounts. As one of the largest banking conglomerates in the United States, the Bank of America mobile app services millions of clients with a wide range of banking needs. The current iteration of the mobile app allows for multiple functions including money transfers, mobile check deposits, bill payments, Zelle money transfers and access to a virtual financial assistant. Aside from the functions, a main goal of the app is account management, which at the very core provides basic account information, shows account balance and transactions.

As a current client of Bank of America and user of the mobile app, I found several usability issues especially when scrolling through and checking transactions. There was a notable lack of support when wanting to search past a certain time period or when looking for a specific item. Therefore, I decided to focus on the display of transactions as a critical point of friction for further exploration, research and analysis.

The higher level goals of the project were to:

  • conduct research on the problem of displaying account transactions, to determine which feature would be most valuable to users
  • determine and add a feature to the current banking app that fits into the current user flow
  • ensure that the branding and messaging of the feature is cohesive with the existing product


4 weeks in Jan 2022
80 hours


User Interviews
Competitive Analysis
User Personas
Problem Definition
Site Map and User Flows
Branding Analysis
Wireframes and Prototype
Testing and Iteration




UX Researcher
UX/UI Designer


Solo Project


View here

* I did not work with Bank of America or stakeholders in this project. Rather, I used the existing user interface and branding as a learning opportunity for redesign.

Gaining Understanding


I started by researching competitor banks and the interface of their mobile apps. However, it was quite difficult without being a client from these banks to find accurate visuals of their transactions display, and to see if they offer any options or features when searching through transactions. Facing this barrier, I decided to combine the competitive research with the user interviews and divided the user research process into speaking with those who are current Bank of America clients, and those who are not. This way, I was able to gain valuable feedback and visual screenshots from users of competitor banks. I found that: 

  • They all offer infinite scroll of transactions within a limited time period. The time range is from one to six months depending on the banking app
  • Out of the three banking apps providing filters, one offered to filter only by time range, while the other two offered more criteria
  • Three out of five banking apps researched allow for filtering of transactions

Gaining Empathy


The user research for this project involved comparative analysis because the users interviewed include clients from competitor banks in addition to Bank of America users. I am making an assumption here that the people using different banks are the same. In that, there is no explicit differentiation of why someone is with one banking app over another. This would make the research goals the same, in order to:

  • Understand the circumstances in which users are searching their transactions, and what needs they might have
  • Uncover any problems users may have with the display of account transactions on their current banking app
  • Determine characteristics of an added feature that would be most valuable to users

After in depth interviews with users aged 21-32 years old, main takeaways from the research revealed that:

Insight #1
All users check account transactions at least once a week, as regular maintenance or to verify expenses and deposits. The users interviewed do not scroll aimlessly, they usually check account transactions with a specific goal in mind.

Insight #2
All users interviewed have money transfer as the most frequent operation on their banking apps. Therefore, users need to conveniently switch between operations, and easily navigate out of the transactions page.

Insight #3
Some users would like better differentiation of how expenses versus deposits are displayed. While most find the details about a specific transaction, the vendor codes, names and jargon very confusing.

Why Filter?


After in-depth research of both the market offerings and user needs, I recognized that there was indeed a lack of support and usability gap on the Bank of America transactions page. Users regularly check their transactions with a specific goal in mind, and at present do not have the tools to narrow down that search. As such, solutions need to center upon asking: 

How might we design a filter feature that allow users to easily and accessibly search for specific items or certain transactions?

Meet Catherine


Built upon the research gathered, a user persona was developed to articulate a more holistic view of the target user group. Catherine is a millennial creative professional who has multiple streams of income. She does monthly accounting and checks her account transactions frequently to verify client payments and keep track of personal spending.

By creating this specific persona from the user research, I want to acknowledge that it is only one example of a very large user demographic. Banking apps have a diverse range of customers and a filter feature can be applied very broadly with a multitude of functions and combinations.

User Experience


To better understand how the added feature will fit into the existing app, I started by outlining the existing user flow. I decided to add the filter feature to the all transactions page, where there is currently a search by keyword function.

After consulting the research gathered from competitor banks and user feedback on their search experiences, it was important for the filter to have three main criteria: to search by transaction type, date range and amount range. This would be in addition to the search by keyword function already present.

Designing the Solution


In order to consider multiple ways a filter can be represented on the page, I made exploratory sketches to showcase options of where the filter will be placed and how the filter criteria can be displayed. Some options include a combined search and filter bar and pop up options for filters.

Due to the flow of the existing product, it was important to keep in mind how deep the user was navigating into the mobile app. Especially as one of the research insights was to make sure users can easily navigate out of the filters, this quickly narrowed down the options to build out. The selected wireframe option includes a separate search and filter without pop up options in order to decrease confusion and density of information on the all transactions page.


The current all transactions page as seen on the left displays transactions with an infinite scroll for up to three months. In the redesign, the filter feature is most notably added as an icon next to the search bar. By integrating the filter as a separate button, users can continue to search by keyword without navigating out of the page.

Another notable change is in the color hierarchy of the transaction amounts. Color was added as a way of differentiating between debit versus credit transactions. From the user research, many users found that the difference was not obvious enough with only the minus bar, especially when users are scanning transactions quickly to look for something specific. This way, with color in addition to the minus bar, it would provide greater contrast and improve readability.


The filter search page is designed to be clear and simple to center functionality. It needs to accommodate the pop up of options that gives users the search selections. By having the filter options pop up, it avoids having users to navigate even deeper into another page.

The filter search options are organized into three categories, by transaction type, date range and amount range. This offers both structure and flexibility in the search process, allowing users to select multiple criteria for a more specific filter. In designing the UI pattern for these selections, I drew from existing forms components of the app, while the date scroller was an element I had added to allow for easy date selection within the page.


The search results pages were also redesigned to better display transactions and improve readability. By incorporating more color, it helps to differentiate between transactions and results found.

Branding & Visual Design


In order to integrate the added feature seamlessly into the app, it was essential that I use the existing branding from Bank of America to keep the visual interface cohesive and homogenous. This led me to pull out some key brand elements to consider. However, I did realize that there were some branding inconsistencies, particularly in the current app's use of colors and fonts. I decided to establish more consistency by finding close equivalents in font styles and stick to a clear set of brand colors.

Moreover, existing form patterns from the current app as highlighted below, informed the design of filter selections and option pages built out. This way, the new pages would be seamlessly interwoven with consistent UI throughout.

Filter Search


Key screens designed in high-fidelity include account details, all transactions, keyword search, filter search, transactions type, date range, amount range and search results.

View Prototype

Determine Effectiveness


All participants involved in the testing of the prototype successfully completed a filter search. At the beginning of the testing, instead of giving users a single directive, a specific situation was presented. This way, I can observe how users navigate the search process with more flexibility incorporated; to see which filter options users will choose first, and how they go about narrowing down the search. All test observations, search routes and user feedback were then recorded and organized to determine priority revisions.

Design decisions validated include the overall incorporation of the feature within the current app flow, the strong continuity of Bank of America branding, and filter search options offered. Through observation, user feedback and questions, some changes were made apparent including priority revisions to:

  • Narrow down the date and amount ranges offered in the filter
  • Make the filter icon more obvious and apparent to users
  • Fix minor pixelation of Bank of America branding images used
  • Reconsider where the filter is available in the overall flow of the app, including making it available earlier in the recent transactions page

Due to the small testing pool of six users, I realize that the feedback for revisions addressed small aesthetic fixes and not necessarily the functionality or effectiveness of the filter itself. This might be due to the small sample size, as well as the nature of the product being tested. As a banking app, every user would have their own individual data sets and unique circumstances in which a filter is used. Therefore, testing with the user's own data in a real world scenario would provide much more accurate and substantiated feedback for how a filter feature performs.



There were a few concerns and points of friction users brought up in the interviews that I unfortunately was unable to address within this project scope. One of which concerns the complexity of vendor codes that are made up of random letters, numbers and difficult to understand jargon. After researching why the vendor codes exist as they do now in the banking industry, I realized I would be unable to redesign how the transactions are displayed unless there was a greater update to the banking system facilitating these transactions. Updating how the vendor codes are displayed would be important to allow greater readability of transactions and ease of use for clients.

Another limitation I had to navigate was in the overall flow of the current Bank of America app. After clicking on the account, the app first takes you to a page showing most recent transactions which includes the option to select "See All Transactions". If the filter and search options were available at the most recent transactions page, their design could have been very different. Moreover, the entire app flow can be improved by redesigning the page immediately after selecting the account. This was a point brought up by multiple users during the testing, especially by users who are not currently with Bank of America. With more time and a greater project scope, I would have liked to propose redesigns of the page by having all transactions available earlier, and possibly include tabs to navigate through other selections.

Overall, by incorporating a feature into an existing app, it was critical to understand the unique set of advantages and challenges this posed. I needed to ensure that branding elements were consistent and that the feature can be seamlessly woven into the existing flow and user interface. Moreover, I had to challenge myself to stick to the scope of the project even though learnings from user research and interviews made me want to redesign a lot more. Lastly, tackling a tool in the banking industry was an interesting challenge since I had no prior experience or knowledge of the finance sector. Although I am not aware of specific business goals of the bank, as a client of Bank of America myself, I approached this redesign prioritizing user needs and perspectives, after recognizing a gap in the user experience.