UI/UX Design

Designing a subscription manager

Subscription Tracker is an app that helps users track subscription service billing history and remind them of the next payment.
Three screen samples of a subscription management mobile application
My role
UI/UX Designer, Product Designer, UX Researcher
Timeline
5 months

The purpose

According to the Leichtman Research Group, 58% of Americans subscribe to more than one of the popular streaming services like HBO Max and Netflix.

However, the downside of the subscription economy is that users find it difficult to keep track of the monthly payments. They even forget which services they are subscribed to.

I created Subscription Tracker to provide users an easy, fast way to manage their accounts and track payments.

The problem this product will solve is exactly that: users forgetting to cancel subscriptions and simply not knowing how much they are spending on them.

Goal

Create a digital product that provides users a way to track payments, cancel, and manage all of their subscriptions in a single app so that they can make decide if they want to renew their subscriptions or keep them.

Constraints

  • The client didn't have a large budget for research, so I used my own resources to find participants for usability testing and user interviews. I was able to recruit participants using my network.
  • I was the sole designer for the project. It was just me and the client, who is a software developer. I had to leverage my expertise in several disciplines such as accessibility and front-end development to provide the best design solution.

Challenges

  • Technical constraints limited how much I could do in terms of design, so I had to compromise while ensuring the user experience is effective.

Results

  • The design was shipped successfully to a group of developers now that it meets the client requirements.

The process

Design thinking process
Image by Nielsen Norman Group

Requirements gathering

My client was interested in building a subscription management application that shows all of the services users are subscribed for and a way to track payments. I was tasked with researching and validating the idea to make sure it's a feasible idea that solves a problem.

Subscription industry research

From my research, I learned that services that used to be a one-time payment switched to the subscription model. Computer software, home workout apps, car wash businesses, and other services are now subscription-based, bringing more than one monthly fee to users.

UBS predicts that the subscription economy will double in growth to $1.5 trillion by 2025. This calls for an efficient way to keep track of monthly payments to make better financial decisions. Users often underestimate how much they are spending on subscriptions.

The multiple monthly payments may be draining their wallets without them realizing it, especially when it comes to subscription services they don't use much. In addition, I also found that:

  • About 80% of Americans have at least one subscription to a streaming service.
  • There is a growing trend of users with 10 or more recurring payments according to budgeting app Truebill.
  • The subscription economy continues to grow at a steady pace despite the challenges it brings to users.

Empathize

User interviews

I gathered 20 participants to conduct interviews with the goal of getting information about how they handle their subscription services.

Questions asked to the participants:

  • How many subscriptions services are you signed up to?
  • What problems have you faced when it comes to paying your subscriptions?
  • How much do you spend on subscription services per month? If you don't know the exact number, provide an estimate.
  • How do you keep track of your subscription's next payment?
  • If any, describe a method you use to remember automatic renewals.
Important interview insights

I extracted data that helped me study the users' pain points.

  • Over 60% of the participants are subscribed to an average of 3-5 services.
  • 70% of participants estimated that they spend an average of $90 to $100 per month on subscription services.
  • More than 65% of the participants received an auto-renewal reminder through email.
  • Most participants indicated they forget the date of the automatic renewal, which results in an unexpected deduction from their bank account.
  • In addition, the majority of participants didn't have a way to track payments, as they only knew their payment was processed when the money was deducted from their bank account.
Quotes from the interviews
Screenshot of the interview quotes
Top quotes from each interview question

Define

User pain points

Now that I had enough data to work with, I could identify the user pain points:

  • Subscriptions and free trials renew automatically. The reminders are mostly sent by email, but it can be hard to notice it if the user has other important emails or simply lots of emails flooding their inbox.
  • Users easily forget the automatic renewal date, as they don't know about the renewal until the money is deducted from their bank account.
  • With users being subscribed to more than one service, it's hard for them to remember what they are paying for, which prevents them from managing their money efficiently.
  • They would want to know what they are paying for and how much so they can decide if they want to continue the subscription. Users have less control over their spending without a proper subscription management method.

Problem statement

Users find it difficult to take good financial decisions if they can't monitor how much they spend on subscriptions they might not remember they have.

How Might We (HMW) statement

How might we inform users about their subscription billing history in an easy and straightforward way?

User personas

User persona of Mark, a man that cycles and switches between subscriptions
User persona #1
User persona of Jamie, a woman that wants to manage her subscriptions efficiently
User persona #2

Ideate

Mind mapping

To organize the ideas I came up with, I used a mind map and took it from there. As a result, I came up with even more ideas such as providing insights about their spending and payment due push notifications.

Mind mapping exercise
Mind mapping

Competitor analysis

I needed to see if other companies were doing the exact same thing I had in mind. I did find some products that did something similar. This will help me find that competitive edge.

Truebill

Truebill has a feature that help users manage their subscriptions and also cancel them if they wish to do so. They also offer data and insights regarding user spending.

Advantages:

  • Gives users a complete overview of their finances and expenses to track how their money is being spent using their bank account's data.
  • Manage and cancel subscriptions easily in one app.
  • Creates a bills calendar where users will see when automatic payments will be debited.
  • Truebill staff can negotiate lower rates for cell phone, cable and other bills.

Disadvantages:

  • The platform deducts a 40% fee from your annual savings.
  • Requires access to sensitive information such as bank account number.
Trim

Trim works similar to Truebill. However, Trim acts like your personal financial assistant. It will analyze recurring subscriptions and determine where you can save more money.

Advantages:

  • Analyzes the account history on debit and credit cards to determine how to save money, and breaks down expenses by category.
  • Recognizes recurring payments so users can find, manage, and cancel subscriptions.
  • Shows users all of the gray charges they have paid. Gray charges are unwanted charges users may not remember having agreed to such as as unwanted automatic renewals.

Disadvantages:

  • Users have to pay a fee based on their annual savings.
  • No mobile app available.

The solution

There is an opportunity to solve the problem by creating a subscription tracking application so that users no longer worry about how much they are spending on subscriptions and their next payment date.

They will be able to see billing history, cancel subscriptions, know the next payment date, automatic renewal notifications, and change the payment method of a subscription in just one place.

Unlike Truebill and Trim, it won't need sensitive data such as bank account or credit card number to use the service. It will be straightforward.

User journey

Let's visualize the user journey of Jamie, who just started a trial for a music app. There's one problem: the subscription automatically renews in one month, and she would have to pay the regular subscription price until she decides to cancel it.

Here's how she navigates this issue with the help of Subscription Tracker, our solution.

User journey map
User journey map

Prototype

User flows

Before making paper wireframes, I wanted to map out two important actions: adding an account to Subscription Trackr and such as simply viewing subscription details easily.

Cancel subscription flow
Cancel subscription flow
Cancel subscription flow
Add subscription flow
Add subscription flow
Add subscription flow
Paper wireframes

Low fidelity prototypes

Adding a subscription

This is how the process of adding a subscription to the app is like. The purpose is to keep it as simple as possible. It only asks for the email or usename and password associated with the subscription.

Low fidelity prototype of the screens to add a subscription
Searching and viewing a subscription

This is for when a user wants to search a subscription to see the details of it. Likewise, the purpose is to keep it simple.

Low fidelity prototype of the screens to search a subscription and view its details

High fidelity prototypes

Onboarding and homepage
Log in page
Sign up page
Homepage with payment history and subscriptions
Viewing a subscription and push notifications

The user will receive through push notifications any news regarding their subscriptions, particularly declined payments and automatic renewals.

Accounts section
Subscription details page
Mobile phone lock screen with push notifications stacked on top of each other
Editing a subscription's payment method

Instead of having users delete or modify a specific subscription's payment method directly on fields, I added a digital wallet feature. From there, they can delete a payment method or choose another one they added previously. If they have a payment method selected, they can't delete it. To do so, they must choose another payment method first to avoid any issues with the bank.

Wallet page accessed from the subscription details page
Add payment method page with fields empty
Add payment method page with fields filled
Add payment page with a modal describing what a CVV is
Wallet page accessed from the subscription details page showing a dropdown with edit and delete options
Adding a subscription
Add subscription page with fields empty
Add subscription page with fields filled
Add subscription page inquiring the user if they want to grant access to their subscription details
Page with a success message confirming the subscription was added
Editing a payment method
Wallet page listing added payment methods
Edit payment method page
Billing history: insights tab

I had the idea of making it look like a dashboard to showcase information in a way that is easier to digest rather than just placing a bunch of data in one space. The cards UI pattern organizes the data and categorizes it to lessen the cognitive load.

My intention was to create something scalable that handles a wide variety of data because there is a possibility that there will be new quantifiable information added to this page in the future.

Insights page
Insights filter options page
Insights filters page with a date dropdown
Insights filters page with a date picker to select a custom date range
Insights filter page with fields filled
Insights page with filters applied
Billing history: posted payments tab

Users can see posted payments from a specific date, by amount, and other parameters. The goal is to assist users with their financial planning. It's important they are able to access a detailed view of their billing history to visualize their expenses.

Billing history page
Billing history page with a dropdown to select a sorting option
Billing history filters page
Billing history filters page with amount range slider
Billing history page with filters applied
Notification settings

Users have the ability to customize what they want to see. The goal of this app is to be as adaptable as possible and adjust to individual user needs.

Settings page
Notification settings page
Change password flow

Here is the password reset flow. Instead of simply instructing users to create a password that matches certain criteria, I listed the requirements, and the requirements will indicate progress towards meeting all the criteria.

Settings page
Change password page with email input
Change password page with new password requirements that indicate progress toward meeting the criteria
Change password page with fields filled

Test

Methodology

I used a remote moderated usability test to see how users navigate the app, how complex is it to find what you're looking for in it, and to challenge the assumption that this app is simple to use.

To do that, I focused on four important tasks you can perform using Subscription Tracker.

The participants had to perform the following four tasks while thinking aloud:

  • You just got a new subscription and want to add it to the app to start tracking monthly payments. Try adding the new subscription to the app.
  • You checked your budget and decided you want to cancel several subscriptions you don't use to save money. Use the app to cancel one subscription.
  • You just signed up for a music streaming app and added it to Subscription Tracker. However, you want to make sure the billing information is correct. How would you do this using the app?
  • You want to see how much you spent on subscriptions last month. How would you do this using Subscription Tracker?

Post-usability test question

After finishing the four tasks, I asked them four questions to see how their overall experience was and if the product is of value to them.

  • Question #1: How would you describe your overall experience with the product?
  • Question #2: How did you find navigating from one page to another?
  • Question #3: What did you like the least about this product? What did you like the most? Explain your answer.
  • Question #4: What’s your opinion on how the information is laid out?

Usability test insights

I had six participants complete the usability test. Based on their responses and what I observed from the usability test, I gathered the following insights:

  • All participants successfully added a subscription.
  • 50% of users accessed the subscriptions list through the homepage by selecting "My Subscriptions". However, all participants completed the task of accessing the list of subscriptions successfully.
  • Users could find the billing history section and the payment method information on the app.
  • All users felt that the navigation is simple.
  • When it comes to what users liked the most about the app, some participants pointed out how they liked that the product reminds them to cancel their subscriptions before the trial is up, with billing history tracking being the second most liked feature.
  • On the other hand, when it comes to what users liked the least, one participant pointed out that he would have preferred to see the list of all subscriptions on the homepage rather than having to navigate to another section.
  • Another participant said it would be nice to be able to sign up to subscriptions services using the app. When I asked why, they said it will make signing up to subscriptions faster by just searching them in the app rather than spending minutes going to the service's website.

Usability test quotes

"It couldn't have been easier. I have just about everything I need to know about my subscription."
"It's so good for when I forget to cancel an automatic renewal."
"I would have preferred to see all my subscription from the get-go on the homepage."
"If I make a change to my subscription through the official website, will this application reflect those changes? That's something I should know. Other than that, I love this idea and it would make everything easier."

What can be improved

This project was done with a limited budget and resources, which affected how much we could invest in the testing phase. This is because the client I worked with is an individual, and not a business that makes money to fund these projects.

Designing this product taught me something valuable: to make the most out of your resources, and that iterating is important.

Despite the limitations, I managed to gather plenty of participants for my user research and establish a good relationship with the client to understand their needs and goals.

Regarding iteration, I learned how helpful it is to do this on the early stages of the product development lifecycle just like we did now. Quick resolution of usability problems and gathering user feedback during the early stages prevents problems later on.