SubTracker
A web-to-mobile subscription management app
Role:
UX/UI Designer
Background
Timeline:
July 2024 - August 2024
Tools:
Figma, Miro
Industry:
Personal finance
The problem
Keeping up with all of the recurring products and services we pay for each month is overwhelming. Forgetting to cancel a free trial or accidentally subscribing to the same service twice can lead to unexpected bills.
The solution
Let’s help people track and manage their subscriptions so they don’t have to. Transforming SubTracker’s desktop platform to mobile will allow users to check their finances on the go with the click of a button.
Discovery
I began by using the company’s goals to form my guiding research questions.
Heuristic evaluation
Carrying out an evaluation based on Nielsen’s 10 heuristic principles helped familiarize me with the problem space of personal finance products. I explored 3 popular finance apps to understand their strengths and weaknesses based on my guiding research questions.
Consolidating all that I learned, I summarized my findings into a written report which answered the proposed research questions and outlined best practices:
Displaying information
Charts and graphs use screen space more efficiently while maintaining a minimalist aesthetic
Good spacing and containers make dense info more legible
Consistent colors and sensical icons reduce cognitive load
Unsubscribe
Unsubscribing from a service via a third party platform saves the user time and frustration
Adds value to the third party platform
Notifications
Setting clear expectations through appropriate copy increases users’ understanding
Letting users choose when and how to receive notifications gives them a sense of control
Design
User flows
I drafted 3 user flows, 1 for each of the product’s goals. These were Onboarding, Set Notifications, and Unsubscribe. Based on what I learned from the heuristic analysis, I made sure to:
Provide multiple options for setting up a comprehensive dashboard
Limit the number of steps in the unsubscribe flow so that using our service is easier than the alternative
Click to enlarge flows
Design system
Before transforming my flows into frames, I created a basic design system to guide my designs. The company wanted SubTracker to come off as a trustworthy, caring friend who is helping you save money.
Colors: Shades of blue convey a sense of security and reliability
Typography: Lato is clean without feeling too formal. Crucial for a finance app, its numbers are distinct from each other and uniformly sized
Components: It was important to draft the data visualization since these components would be reused throughout the app
Iconography: Icons are minimalistic and slightly rounded to be easily recognizable and match the friendly brand tone
Low-fidelity prototype
I looked to the original website to ensure a smooth transition from desktop to mobile. It included 3 main pages - a list of all of a user’s subscriptions, a calendar view, and a bar chart view.
Combining the website’s original features, the business’ goals, and my analysis of personal finances apps, I created a low-fidelity prototype.
Validate & Iterate
Usability Testing
I carried out 5 virtual usability tests for each of my low-fidelity and high-fidelity prototypes. I searched for individuals who matched the current userbase of Subtracker, people who were:
between 25-40 years old
interested in personal finance
I presented participants with 3 tasks that aligned with the goals of the company and my initial research questions:
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
Across 10 total tests, users liked:
Homepage layout
Use of data visualization to quickly parse out pertinent information
Easy-to-use Cancel For Me feature
They also pointed out several challenges which I addressed in my final iteration.
Challenge 1: Hesitant to link accounts
3/5 users expressed their discomfort with linking their bank account to SubTracker during the onboarding flow because they were unfamiliar with the company.
To address this, I made several changes to make the process more transparent.
Challenge 2: Difficulty finding notification settings
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:
These changes increased the task success rate to 80%.
Challenge 3: Lack of clarity from unsubscribe feature
Users wanted to understand how it worked before they interacted with the CTA and they wanted confirmation that the request was received.
To address this:
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.
Outcomes
This project showed me the power of continuous learning throughout the design process and 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 features familiar to its desktop users and met the company's growth goals. By the end of my process, users deemed SubTracker to be an intuitive, easy-to-use way to manage their subscriptions.