Project Overview
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:
TIMELINE
4 weeks in Jan 2022
80 hours
PROCESS
User Interviews
Competitive Analysis
User Personas
Problem Definition
Site Map and User Flows
Branding Analysis
Wireframes and Prototype
Testing and Iteration
COMPETITIVE RESEARCH
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:
USER RESEARCH
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:
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.
DEFINING THE PROBLEM
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?
USER PERSONA
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 & TASK FLOW
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.
.png)
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.
WIREFRAMES
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.
HIGH- FIDELITY:
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.
HIGH-FIDELITY: FILTER SEARCH
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.
HIGH-FIDELITY: SEARCH RESULTS
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.
CAPTURING THE LOOK AND FEEL
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.
HIGH-FIDELITY PROTOTYPE
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
USABILITY TESTING
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.
.jpg)
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:
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.
NEXT STEPS &
LEARNING OUTCOMES
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.
