Subscriptions & Recurring Charges Tool
Role: End-to-end UX / UI Designer
OVERVIEW
In this project I served as researcher and designer, creating a new feature for the Bank of America mobile app: a tool allowing users to easily view, manage, and modify the subscriptions and recurring charges tied to their bank accounts and cards.
Background:
As of 2022, 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, though this approach has its shortcomings.
Problem:
BofA's in-app solution to subscription management is hard to find, disorganized, and non-interactive, making the process of sorting and modifying subscriptions more stressful than it needs to be.
Solution:
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.
Hi-fidelity prototype -- Cancel Subscription flow
RESEARCH
Research for this project consisted of competitor analysis and user interviews involving some monitored banking app activity.
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.
​Third-party apps (RocketMoney):
-
Provide sortable, interactive subscription lists with ability to cancel subscriptions with the press of a button
-
Weaker data-privacy measures than banking apps, many features available through paid subscription only
Banking apps (Chase, Capital One, BofA):
-
Non-interactive lists/summaries with limited utility, in some cases can only be viewed one card at a time
-
Solutions buried in AI-assistant chat dialogue options, difficult to find and often clunky to operate
Chase Bank Account Manager Tool, Capital One AI-assistant, BofA Erica conversation
User Interviews:
I conducted four remote-interviews with subjects who used different banking apps (two BofA, one Chase, and one Capital One), aged between 28 and 35.
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.
Interview goals:
-
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.
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?
Takeaways
1. Irrelevant Line-items
In-app summaries include erroneous or irrelevant items that could not be removed, distorting the total cost figures, and adding to stress and confusion.
2. Sorting Utility
Inability to toggle between complete summaries and account-by-account summaries is frustrating.
2. Cancelation Fatigue
Canceling unwanted subscription requires extra labor, obscure cancelation pages, and forgotten login credentials add to user stress
3. Chatbot Obscurity
Capital One and BofA users were unaware these summaries were offered, as they tend to avoid using chatbots to complete tasks*
Screenshots from BofA Erica chatbot dialogue (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)
*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.
SYNTHESIS
With these insights in hand, I asked:
How might we empower users to feel a greater sense of control and agency when it comes to subscription management?
How might we 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:
Users can see their total estimated expenses for all subscriptions on a monthly and annual basis, as well as view individual billing histories associated with each subscription.
Hide Line-Item:
Users can remove incorrect or irrelevant line-items from the list (and from their total expense estimate) to ensure relevance as well as allow users to see how a subscription impacts their bottom line.
Sortable Summary:
Comprehensive list of all recurring payments tied to BofA, inclusive of all accounts and cards. Can be sorted by specific account / card in accordance with their unique budgeting preferences.
Free-trial / Upcoming Payment Alerts:
Users are notified about upcoming auto-payments and free-trial expirations in either their main account page or dashboard help them avoid renewing services they no longer use.
Cancel Payments Button / Resources:
"Cancel payments" option opens a modal wherein users can either cancel their subscription via button click (for eligible vendors) or access vendor contact info to cancel manually.**
Draft version of feature roadmap of possible additions to BofA app
**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:
Checking 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.
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.)
High-fidelity wireframes (Account overview page, Dashboard, Subscriptions & Recuring Charges Tool, sorting by account
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.
​In this scenario, the user sees the price of Spotify went up recently, and decides to click “Cancel Payments”. A modal opens where the user verifies their identity and confirms the cancelation before returning to an updated summary screen. 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.
High fidelity wireframes (left to right and down: Recurring Charges tool, select "view details", Details screen for subscription, Cancelation flow)
TESTING & ITERATION
I prototyped both flows and conducted four remote-monitored usability tests with my original subjects.
The reception was highly positive overall:
-
Subjects impressed with easy-to-navigate summaries and transparency offered by payment histories.
-
Subjects were particularly enthusiastic about the cancelation feature, both the one-click cancelation and the vendor links helped to save time and effort.
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 Recurring Payments summary defaulted to All-Accounts view when accessed via an individual account page
Revisions
1. 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.
2. Yearly vs. Monthly Estimate Expenses:
Most subjects expressed surprise at seeing the large yearly-expenses figure at the top of the screen, as subjects tended to percieve their subscription expenses primarily in terms of months. There was also confusion around the time period meant by "this year". The label in my prototype (“this year”) could have referred to the remainder of the calendar year, vs a 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 revision ("Total monthly estimate + $X annually)
3. 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 feature presented challenges and rewards 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. While tedious, this forced me to become intimately familiar with the BofA app design systems, heloing to create a final design that fit seamlessly with their product. 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, although these 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, suggests at the very least 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.