Subscriptions & Recurring Charges Tool
Role: End-to-end UX / UI Designer
OVERVIEW
In this project I served as researcher and designer to create a new feature for the Bank of America mobile app: a tool allowing users to easily view, manage, and modify the recurring charges and subscriptions tied to their bank accounts and cards.
Background:
As of 2022, it was reported that the average American consumer has 10 active paid subscriptions, split between retail and streaming or entertainment services. Because they are often set to auto-renew, consumers consistently underestimate their monthly expenses, and even forget about some subscriptions entirely. (C+R Research).
In response, a number of third-party subscription-management apps (ex: RocketMoney) have sprung up to address these problems, while several major American banks and credit-card companies, including Bank of America (BofA), have attempted to add subscription-management / tracking tools to their apps with varying effectiveness.
BofA has taken some steps to respond to these consumer concerns, and it is now possible for users to view a brief summary of their subscription expenses via the app’s AI chatbot, Erica.
Problem:
BofA's in-app solution to subscription management is difficult to find, presents non-sortable information, and does not provide a way for users to act on the information presented. Users who can find the tool are forced to sort or modify subscriptions themselves, making this process more stressful than it needs to be.
Solution:
Make the app more appealing to budget-conscious Bank of America customers (and supplement the app’s existing budgeting tools) by building a dedicated, interactive tool wherein users can easily catalogue, manage, and modify their active subscriptions to save money and feel more in control of their spending.
RESEARCH
Research for this project consisted of Competitor Analysis and a series of User Interviews.
Competitor Analysis:
I researched a mix of major banking apps and leading names in third-party subscription-management services to understand the methods and solutions they employ to address consumer needs.
Unsurprisingly, the third-party apps were the most effective, with services like RocketMoney allowing users to see all subscriptions across all linked cards / accounts, and even offering the ability to cancel subscriptions just by pressing a button. Still, these apps tend to have less robust data-security than major banking apps, and in many cases these apps require users to pay for a premium subscription to access their most useful features.
The banking apps I looked into employed a variety of methods for subscription-management. Chase’s Saved Account Manager page displays all companies users’ cards are linked to, but does not display all accounts or cards at once. Capital One and Bank of America users can find summaries of recurring-payment activity by querying their respective app’s AI-assistants. None of these apps provide much utility beyond viewing information (which can often be mislabeled)..
User Interviews:
I conducted four remote-interviews with subjects who used different banking apps (two BofA, one Chase, and one Capital One). I’d initially planned on interviewing only BofA and/or third-party app users, but pivoted due to project timeline limitations.
My goals for these interviews were:
-
Determine user pain-points when it comes to subscription management.
-
Understand how users currently navigate / use their banking app to find tools.
-
Understand what information users need to feel informed and in control when managing subscriptions.
-
Determine what changes need to be made to the current BofA subscription-tracker.
These interviews consisted both conventional interview questions and semi-monitored interaction with subjects’ respective banking apps. For example, asking subjects to guess how many subscriptions they paid for, how much they cost per month, then walking them through their banking-app’s tool to test how accurate their estimates were. Almost every subject underestimated their subscriptions and costs.
Describe the last time you had to cancel a subscription.
What feelings, if any, do you associate with budgeting?
How confident are you in your subscription-costs estimate?
Across these interviews, my main takeaways fell under three categories:
Sorting & Relevance:
In most cases, in-app summaries included erroneous items that could not be removed, distorting the total cost figures, and adding to stress and confusion. An inability to view charges either on an account basis vs across all accounts (apps offered either single-account or all-accounts summaries without the ability to switch) was somewhat frustrating to some subjects.
Tedium of Cancelation Process:
When subjects discovered an unwanted subscription in their list, they were glad for the information but stressed-out by the knowledge that they'd need to take the extra effort to cancel the subscription themselves. This process is often tedious, requiring anything from logging back into an old account to looking up a customer service number or locating a deliberately-obscure cancelation page on vendor websites.
Chatbot Obscurity:
Capital One and Bank of America users I interviewed were unaware that their apps offered these summaries at all.* Subjects reported a tendency to avoid chatbots in general due to their perceived clunkiness, and were surprised that information on subscriptions and recurring payments were buried within chatbot dialogue options.
*As a long-term BofA user, I began this project with the assumption that the app had no subscription-management tools whatsoever. It was only during competitor anaylsis that I discovered BofA's AI chatbot method, which only becomes available after specific queries like "Show my recurring charges". This is further evidence that regardless of its quality, a tool buried in chatbot dialogue presents usability issues.
Left to right: Chase Bank Account Manager Tool, Capital One AI-assistant, BofA Erica conversation
Screenshots from BofA Erica chatbot dialogue (Left to right: 1. Erica capabilities list - Subscription management not listed, 2. Non-interactive Subscriptions & Recurring Charges summary with "Can I cancel a charge?" suggested, 3. Erica response denying ability to cancel charges)
SYNTHESIS
Using what I’d learned in these interviews I developed two HMW questions to direct my design process:
HMW: Empower users to feel a greater sense of control and agency when it comes to subscription management?
HMW: Streamline and structure the interface to ensure the information presented is intelligible, useful, and relevant to all users?
Ideation:
To make the best version of this tool, I needed to first incorporate the most useful elements of BofA’s current solution and build upon that base with new features that address users’ unmet needs:
Total Expenses & Billing History: As in the present app, users can see their total estimated expenses for all subscriptions on a monthly and annual basis, and click on an individual item to view yearly expense estimates, and billing history. This lets users see how much a subscription will cost per year, as well as whether the cost of a subscription has gone up without them knowing.
Hide / Un-hide: Users can click a button in summary list view to remove a given line-item from the main list, and exclude it from their total expense estimate, placing it in a separate list. This helps in the event that an item is incorrectly logged as recurring, is no longer active, or if a user wants to quickly test how their expenses would change if they canceled one or more subscriptions.
Sortable Summary: A comprehensive list of all recurring payments tied to BofA, inclusive of all accounts and cards. Can be sorted by specific account / card for more granularity, or if a user wants to ensure that expenses are allocated to one specific card or another in accordance with their unique budgeting preferences.
Free-trial / Upcoming Payment Alerts: Before entering the tool itself, BofA users would see notifications about upcoming auto-payments and free-trial expirations in either their main account page or dashboard. These would keep users informed and help avoid renewing services they no longer use.
Draft version of feature roadmap of possible additions to BofA app
Cancel Payments Button: User can click into individual subscriptions from the list and click a button to cancel them. The button opens up a modal to input credentials and confirm the cancellation, or, if remote cancelation is not possible for a given vendor, the modal also displays contact numbers or links to that vendor’s subscription-cancelation page.**
**RocketMoney provides one-click-cancelation to premium users, presumably because this remote cancelation involves RocketMoney investing effort or resources to interface with the user’s bank and/or the vendor themselves. If this extra effort presents a cost-benefit difficulty to BofA, it could conceivably be provided as an extra perk for users who maintain a certain balance in their accounts, which BofA already does for other perks.
DESIGN
I mapped out two main flows that would cover all the key ideas and features this new tool had to offer:
These flows became the basis for my wireframes, which I sketched out quickly to establish a logical flow before proceeding to higher fidelity.
Note on Branding:
Because the final product needed to fit seamlessly within the existing BofA design system, I started my process by faithfully recreating components, icons, and layouts to use as building blocks going forward. As there were no available UI kits for BofA, I had to recreate most components in the system from scratch, based on screenshots from my own account. While tedious, this method forced me to really familiarize myself with the BofA design system to the point that when I needed to go out on a limb and design totally new modals and components, I knew what rules to follow to make them indistinguishable from the real app.
Checking Total Monthly Expenses (one account)
In this flow, the hypothetical user (who has two accounts, one ending in XXXX, the other in YYYY) begins on their main checking account page. From here, they proceed to the Subscriptions & Recurring Charges tool the same ways one would access the existing "Budgeting" tool: either by clicking the modal button ("View Charges") or selecting it from the tools in the Dashboard.
High-fidelity wireframes (left to right: Account overview page, Dashboard, Subscriptions & Recuring Charges Tool, sorting by account
This page defaults to showing expenses across all accounts, organized by payment due-date and labelled by frequency. The user clicks the dropdown option to show only charges for a single account (in this example, the Checking account, which ends in -XXXX.)
Canceling a Subscription / Recurring Charge
This flow picks up where the previous left off – the viewing subscriptions / recurring payments for account XXXX. From here, users click on the 3-dot options icon for the line-item they want to investigate (in this case, Spotify), allowing them to view details, hide the item, or cancel payments. “View details” opens up a dedicate page showing monthly expenses, estimated annual spend, and history of all charges for the service in question.
High fidelity wireframes (left to right and down: Recurring Charges tool, select "view details", Details screen for subscription, Cancelation flow)
In this scenario, the user sees that the price of Spotify went up recently, and decides to click “Cancel Payments”. This opens a modal where users verify their identity and confirm the cancelation before returning to an updated summary screen. If the user prefers to cancel or modify the subscription themselves (or if remote-cancelation is not an option with a given vendor) this modal provides what links / contact info it can to streamline the process for the user.
TESTING
I prototyped these flows and conducted four remote-monitored usability tests with my original subjects.
The reception was highly positive overall. Subjects were impressed with the easy-to-navigate summaries and transparency offered by payment histories. They were particularly enthusiastic about the cancelation feature, reporting that even in instances where easy, one-click cancelation wouldn’t be available, the vendor links / contact info would help reduce the effort and tedium of logging-in or calling up a vendor themselves.
The most salient issues reported during testing were:
-
Clicking on the Budgeting modal instead of the Recurring Charges modal in the starting screen
-
Expectation that “Total Estimated Charges” would default to a monthly vs. an annual figure
-
Surprise that, when reached via the -XXXX Checking Account Overview Page (starting screen) Recurring Payments tool defaulted to displaying charges from all accounts instead of just the -XXXX account.
REVISIONS & IMPLEMENTATION
Finding the Recurring Payments Tool:
Almost every subject started off the first flow by clicking on “Track Spending” – a button that, in the current BofA app, takes users to the Budgeting tool (where they can allocate monthly budgets for food, transportation, etc.) This was mostly because the “View Charges” button label was unclear. To fix this, I changed the label to “View Recurring Charges”, bolded the alert text, and changed the icon color scheme to a more eye-catching grey-blue.
.png)
Left to right: Recurring Charges modal (draft), Revised modal with new icon, Tool Dashboard with various modals. Icon color changes reflective of BofA app UI.
Yearly vs. Monthly Estimate Expenses:
Most subjects expressed surprise at seeing the large yearly-expenses figure at the top of the screen, reflecting the degree of stress involved in living on a tight budget. There was also confusion around the time period in question. The label in my prototype (“$XXX this year”) could have referred to the remainder of the calendar year, vs any 12-month period (which was my intention). I swapped the figures so the annual estimate (now labelled “annually”) was smaller than the monthly one.
Draft expenses figure ("Total estimated this year") vs revised figure ("Total monthly estimate + $X annually)
All-Accounts vs Single-Account Views:
A subject who accessed the tool from the starting screen (an overview page for the -XXXX account) expected that the Recurring Charges tool would display -XXXX charges only, as opposed to charges for all accounts. While no other subjects reported this issue, I realized that BofA’s Budgeting tool follows the flow the subject described (defaulting to the last-viewed account). To be consistent with the existing logic of the BofA app, my tool now defaults to a single-account view when accessed via an Account Overview page, but displays the all-accounts view when accessed from the Dashboard.
Screens illustrating flows leading to single-account vs. all-account views in tool
REFLECTION
This project was particularly challenging and rewarding for me as a designer. I was initially frustrated by the fact that there was no open-source UI kit available for the BofA app, which forced me to recreate screenshots from my own mobile banking account down to the last pixels and drop-shadows. But when I presented the final product to BofA users they were impressed with how difficult it was to distinguish my design from the real thing. That said, I intend to make use of UI kits or existing design systems wherever possible going forward to minimize room for error.
In keeping with that point, the BofA interface and UI did present issues during testing. Users who were not familiar with the BofA app found some of its overall structure confusing, and I myself was sometimes frustrated by vague text labels or awkwardly-sized elements, but had to be kept for the sake of working within the BofA design system.
While I remain somewhat skeptical about the willingness of a major bank to include a one-click-cancelation option within their app (see Ideation section), the universally positive reception from test-subjects for that feature, as well as the rest of the tool’s capabilities, at least suggests the consumer appeal a tool like this could have. It felt good to wrap-up this project knowing that what I designed could improve users’ lives in a small but significant way.