SubTracker
The mobile subscription management app
Role: UX/UI Designer
Timeline: 07/05/2024 - 08/29/2024
Background
Keeping up with all of the recurring products and services we pay for each month can be overwhelming. Whether it’s forgetting when a free trial expires or accidentally subscribing to the same service twice, not having a way to organize our expenses can be expensive.
SubTracker is a conceptual product that aims to track and manage users’ subscriptions so they don’t have to. The product was initially a desktop-only website, but the company wanted to launch a mobile version of their product to appeal to more users.
My role was to design, prototype, and run usability tests for a SubTracker mobile app within 8 weeks.
Discover
I began this project with a brief of the company’s goals in the form of user stories. The company wanted a product that would help users see all of their subscriptions at once, unsubscribe from subscriptions, and be notified before a subscription renews. Based on these user stories, I drafted a few guiding questions that I hoped to answer through my research:
1) How can I create information-rich interfaces that are easy to understand?
2) Why would a user choose to unsubscribe through a third party service?
3) How can I share useful and unobtrusive notifications?
Heuristic Evaluation
Given the timeline of this project and my limited experience with personal finance apps, I chose to conduct a heuristic evaluation to quickly familiarize myself with the problem space and study the design choices made by other apps.
I examined 3 existing personal finance apps - Money Manager, Rocket Money, and NerdWallet. I chose these apps due to their popularity (1 million+ downloads and average ratings above 4.0 stars) in the Google Play Store.
Using Nielsen’s 10 heuristic principles as a guideline, I evaluated each app’s design choices in relation to my research questions. I tracked my findings along with accompanying screenshots on Miro.
Notes on Money Manager (Click image to see full heuristic analysis in Miro)
Notes on NerdWallet (Click image to see full heuristic analysis in Miro)
Consolidating all that I learned, I summarized my findings into a written report which outlined best practices for displaying information, the benefits of unsubscribing through a 3rd party company, and tips for efficient notification sharing.
Displaying information
All 3 apps used charts and graphs to maintain a minimalist aesthetic and use mobile screen space efficiently. Good spacing and the use of containers helped keep dense information legible. Consistency of color usage and sensical icons reduced users’ cognitive load.
Unsubscribe
Only 1 of the 3 apps, Rocket Money, had an unsubscribe feature. The benefit however was clear: helping users unsubscribe saved them time and frustration. Users can click a few easy buttons rather than scour their provider’s website or jump through hoops to unsubscribe from a service.
Notifications
When adjusting notification settings, I often found it unclear what exactly I would be notified of. Setting clear expectations through appropriate word choice would make it easier for users to agree to turn on notifications. Additionally, allowing users to choose when and how they receive notifications gives them a sense of control.
Design
User Flows
Keeping in mind what I learned during my heuristic analysis, I drafted 3 user flows, 1 for each of the product’s user stories. These were Onboarding, Set Notifications, and Unsubscribe.
Onboarding was my most complex flow and required extra attention. My goal was for users’ subscription dashboards to be fully populated by the end of onboarding without the process itself being too tedious. I turned to a tactic used by many of the personal finance apps I tested which involved pulling information from users’ linked bank accounts. It was a quick way to gather relevant information, but the challenge was making users feel comfortable sharing sensitive data. To address this, I ensured users also had the option to manually add subscriptions for the sake of privacy.
Click images to enlarge user flows
Style Guide
Before transforming my flow charts into frames, I created a quick style guide to give my designs some direction. The company wanted SubTracker to come off as a trustworthy, caring friend who is helping you save money.
I chose colors and fonts that would support this brand personality. The shade of blue used conveys a sense of security & reliability, while Lato is a clean sans serif font that doesn't feel overly formal. I also liked Lato for its distinct, uniformly sized numbers which would be crucial for a finance app.
Low-fidelity Prototype
For my first design of the SubTracker app, I created a low-fidelity prototype. This would give me more time to test the functionality of the app with users as I continued to develop its visual style in the background.
Wireframes of the SubTracker website provided in the brief
For inspiration, I looked to the original desktop version of SubTracker which included 3 main pages - a list of all of a user’s subscriptions, a calendar view, and a bar chart view.
To maximize efficiency on a smaller mobile screen, I consolidated all of this information into the SubTracker homepage. Users can swipe between the calendar and bar chart via a carousel layout on the top half of the screen, and users can see a list of their subscriptions on the bottom half. Using a carousel and cards allows for a clean UI that conveys a lot of information without overcrowding.
Since most of the information users will need is compiled into one page, housing settings in a side panel would help maximize space on the homepage. At this stage, these settings included Linked Accounts, Notifications, and Help sections.
On the subscription details page, I placed a bar chart at the top of the page to show users a quick summary of their spending trends for the subscription chosen. In the center of the page are the primary CTAs. Their centralized location along with the padding and white space would help draw attention to them, but I knew I would need to adjust their visual impact by shape and/or color to be recognizable as CTAs in my next draft.
Validate & Iterate
Virtual Usability Testing
To test my designs, I carried out 5 virtual usability tests for each of my low-fidelity and high-fidelity prototypes. I sourced my participants from messaging platforms and searched for individuals between 25-40 years old (in accordance with the company's current user base in their 30s) who are interested in personal finance.
When carrying out my usability tests, I presented participants with 3 tasks that aligned with the goals of the company and the flows I wanted to test:
Create an account with SubTracker
Make sure you’re alerted 3 days before your subscriptions are due
Have SubTracker cancel a subscription for you
As I prompted and observed my participants, I found plenty of opportunities to ask some clarifying questions within the context of using the app. What, if anything, could make them feel comfortable sharing sensitive information online? What information would be most important to see upon opening the app? How would they expect an unsubscribe feature to work and how does SubTracker’s version compare?
Test Results
High-fidelity versions of the SubTracker homepage and notification page
Across my 10 tests, users expressed that the flows were generally simple to follow. Most participants completed every task with little to no usability concerns. They liked the layout of the homepage and the data visualization used because it helped them to clearly see the most pertinent information such as due dates and upcoming expenses. Notification options were deemed useful and the Cancel For Me feature was easy to use though it lacked some transparency.
Users also helped uncover several pertinent issues which led to my final iteration of the SubTracker app.
Hesitant to link accounts
The onboarding flow from the informational carousel, to choosing how to add subscriptions, to linking accounts
Many users expressed their discomfort with linking their bank account to SubTracker. Although I included an explanation of the benefits of account linking, users were still suspicious since this was a company they weren’t familiar with. Based on their comments, I estimated that only 3 out of 5 users would complete onboarding outside of a testing session.
To address this, I made several changes to make users more comfortable.
I added an informational slide after users sign up which goes over what features the app offers.
I added a note at the bottom of the screen ensuring that users’ information was secure.
I made it very clear to users that they have a choice before asking to link accounts.
Difficulty finding notification settings
Turn on notifications from the subscription details page or through the menu panel
Turn on notifications at the end of onboarding
Initially, I had notification settings tucked away under the settings panel, leading to only a 40% success rate for this task. In my next iteration I:
Changed the settings gear to a hamburger menu icon in the hopes that this would alter users’ perception of what to expect in the side panel.
Added the ability to set notifications from the subscription details page.
These changes alone increased the task success rate to 80%.
Finally, reconceptualizing setting notifications as a part of setting up the user’s profile, I added a popup to the end of the onboarding flow that would allow users to turn on default notification settings with one tap.
Lack of clarity from unsubscribe feature
The subscription details page with the Cancel Subscription CTA followed by the Cancel Subscription red route
Users had no issue finding and completing the unsubscribe task, but they did feel there was a lack of transparency around the process. They wanted to understand how it worked before they interacted with the CTA and at the end, they wanted confirmation that the request was received.
In between tests, I
Added an informational icon which would display details on what users can expect before they go through with unsubscribing.
Added new frames clarifying the process, giving users the option to back out at any point, and confirming when the action had been completed.
Users were much more comfortable using this feature knowing the consequences in advance and having an easy option to escape if a mistake was made.
Test the final SubTracker prototype:
Outcomes
Designing SubTracker presented significant challenges considering the short timeline and my unfamiliarity with the problem space at the start of this project. Though I had little time for research prior to designing my prototype, this forced me to be more intentional and inquisitive during my usability testing process.
This project also showed me the power of stepping back to reconceptualize. Some of the most successful changes I made across iterations were simple to design but required me to think beyond the problem in front of me towards the goal I was trying to achieve. The 2 most significant examples of this were simplifying notification settings by allowing users to turn them on at the end of onboarding, and making it clear to users that they don't have to link their bank account to use the app.
Ultimately, after gathering appropriate insights, prototyping, and testing, I was able to consolidate SubTracker into a mobile app that had the same features as its desktop counterpart and met the company's goals. By the end of my process, users deemed SubTracker to be an intuitive, easy-to-use way to manage their subscriptions.