Introduction

In modern society, large corporations and startup companies have decided that to maximize profit, they must make their product or service a paid subscription rather than a one-time purchase. Because of this, a majority of people between the ages of 18 and 65 have many subscriptions that they must keep track of. Most people can directly relate to checking their account only to see a charge from a free trial or service they forgot to cancel.

 On average, US consumers underestimate their monthly spending on subscriptions by 2.5x more than their original estimate. Subscription managing services exist, but most are either overcomplicated with many other features or so simple and rudimentary that they require users to enter all data manually. This suggests that a service should exist to bridge that complexity gap and be the goldilocks solution for users.

SubTracker is my attempt at creating that Goldilocks solution, allowing users to view and manage their recurring subscriptions with ease. Upon creating an account and logging in, users are prompted to add subscriptions and they have three choices of how they would like to do so. They may choose to sync their bank or email accounts with the app to search for subs. They may also choose to enter subscriptions manually by entering the name, cost, cycle, etc. if they do not wish to link any accounts. SubTracker also gives users the option to auto-cancel unwanted subscriptions at the click of a button, doing all the heavy lifting for the user. If the user instead chooses they want to cancel manually, they are provided with the appropriate phone number, web link, and instructions in case the process is complicated.

Subtracker began on April 20th, 2024 as a brief I selected for my Capstone 2 project out of 6 choices provided by Springboard’s UX/UI Bootcamp. All of the work showcased in this case study, as well as the case study itself was produced solely by myself, with the advice and guidance of my peers, family, and mentor. I initially gave myself three weeks to complete the entire project, though the timeline has been tweaked a few times by the end of it. Each of the steps taken and deliverables due were documented on the project plan I created on day one. This step was taken to ensure I stayed on track and had an easy-to-scan document of everything I needed to do, and when.

The first half of my project plan

Research

With all of the steps of the project laid out beforehand, it made doing the actual steps a lot easier and more seamless because there was no ambiguity as to what deliverables to do or how long those deliverables would take to produce. As shown in the first column of the project plan, the next step of the process was to conduct secondary research. Due to my self-imposed tight time frame, I decided to conduct desk research rather than user interviews or surveys.

This desk research began with searching Google and Google Scholar for reputable academic articles or studies about subscriptions and their impact on consumers. The resource I found that had the most useful information and visualizations was the 2022 study Subscription Service Statistics and Costs by C+R Research. According to their study, 74% of people say it is easy to forget about recurring monthly service charges and 42% have forgotten about a recurring monthly subscription they were paying for but no longer using.

One visual from C+R Research 2022 study

These findings suggest that most people are not managing their subscriptions as well as they could be. With the prevalence of the subscription model, consumers are often given no alternative or choice as to how to pay for certain products or services. In the same study as above, it was found that only one in ten people are currently using a subscription manager and 22% of people are overwhelmed by the amount of subscriptions they have. This suggests that consumers are either unaware of subscription managers or are unsatisfied with the ones they have seen.

Once I had completed the requisite desk research on subscriptions, subscription managers, and the people who use them, I had to synthesize all of the information into an easy-to-skim document. I find the easiest way to do so is by making an affinity map that gathers similar quotes and data into different groups and sub-groups. This affinity map was simply a text document with different sections for different topics. I created this by gathering all useful information from my desk research and simply filing one at a time into groups depending on the topic.

Another part of the research process was completing an industry leader's analysis. I began this by choosing three of the most popular and downloaded subscription trackers currently on the market. Once I selected which apps to analyze, I downloaded each of them and proceeded to use them as normal, taking screenshots and notes as I went through the process. I used the screenshots to show the general flow for adding subscriptions and canceling unwanted ones.

One of the flows I created for the mobile app Rocket Money

Laying out screenshots and describing what I liked, and disliked, as well as notes for when I designed my solution helped me visualize the core steps of each of the apps I looked at. Doing this for three different apps gave me a good idea of the general way most successful companies have chosen to solve this problem. Rocket Money is by far the most popular of the subscription trackers on the market however, it is a general finance app with loads of additional features some users may not care to have.

With a solid foundation of useful data regarding consumers and their subscriptions and an understanding of the subscription manager landscape, it was time to begin brainstorming how my own solution would look. It can be easy to, upon reading a design brief like this, let your mind race with final solutions and useful features. However, these early research steps are crucial to developing a full understanding of the problem and how companies have thus far chosen to solve it.

Design Phase 1

Before I could start sketching out my ideas and flesh out the layout and look of the app, I needed a good idea of exactly how users would navigate throughout the app when trying to complete crucial tasks. To map out these routes, I created red route user flows. With one flow for each red route, they would determine what screens would be needed to conduct a proper usability test.

The “Upload Subscription” flow of my user flows

During my analysis of industry leaders, I found that some subscription trackers allow users to connect their bank accounts to search for subs (Rocket Money). Other managers allowed users to connect their email to search for subs and some required users to enter all subscriptions and their information manually. I thought that to make it as easy as possible for users, all three options should be possible. This is why the flow splits into three forks before coming back together at the end.

Following my project plan, the next step I took was to start sketching my ideas on paper. As stated before, the user flows I made were perfect for mapping out exactly what screens I needed to design. While working on my previous project, I found making a checklist of screens in the form of a tiny, very rough app map that I could highlight when done designing to be very helpful. Because of this, I decided to use the same workflow for SubTracker.

Sub Tracker’s screen checklist also doubles as an app map

When first drawing this app map, it had no color but when making sketches, I would highlight the top 25% of the appropriate box. Later, when I designed the high-fidelity screens, I would then continue to fill each box with highlighter. This map made my life even easier because when sketching, I wouldn’t have to think about what screen should come next or if a certain screen needed designing.

I chose to design in low fidelity by sketching rather than a design software because I put myself on a timeline and sketching is something that comes naturally to me and I am very comfortable doing. I took graph paper and using a pen and a ruler, I made four rounded rectangles on each page that I then labeled for each screen. Due to the need to test users with my sketches, I decided to create a paper prototype with my sketches.

One set of four screen sketches

I labeled the blank screens roughly in the order that users would see them when using the prototype normally. Then I began to draw lightly in pencil how I thought the screens should look, making edits as I went. Once I was happy with how those sketches looked, I inked each of them in pen. This is to make the drawings easier to see for users but also to allow me to add greater contrast to certain areas of the design.

Testing Phase 1

Once all of my needed sketches were completed and polished for testing, it was time to plan out how the tests would be laid out and what I would say. Since all of the screen sketches were part of the same template and were already in rough order, I came up with the idea to fold each page in half twice so that only one screen was visible. I was then able to simply flip and fold to the appropriate page once the tester interacted with certain parts of the prototype.

The six pages of my foldable paper prototype

For the format of the test, I walked through the paper prototype with them and was more talkative than I would be in a normal usability test. This is because I wanted it to be a bit more casual, like the prototype itself. I found this technique to be useful in getting users to not only suspend their disbelief in what they were interacting with but also keep the testers comfortable. When users are comfortable and have a rapport with you, they are much more likely to divulge any feedback they may have about the app.

The testing went very smoothly and users were overall very happy with the rough prototype. Positives gleaned from this round of testing include its layout, tab views, and various options for subscription uploading. The negatives were few and far between, consisting of mainly small typos or tweaks. Fixing these errors for the next prototype would be crucial to ensure the app has a professional and trustworthy image.

Design Phase 2

By the time I had finished my sketches and tested them on people, I was itching to start fully fleshing out my designs into high fidelity. With detailed sketches and useful feedback from real people about them, I began to search for an appropriate UI kit. I chose to adapt a premade UI kit instead of designing everything from scratch to save valuable time and gain more inspiration. I searched the web for UI kits specifically for subscription managers and I found a great-looking free one called Trackizer.

Trackizer’s promotional thumbnail

Trackizer was developed by Muhammed Yousuf for Figma’s community section. When I downloaded it, I was amazed by the amount of detail and care put into it. Trackizer came with a set of completed screens, a color palette, text styles, and UI components such as icons and buttons. While I did not use the elements exactly as they came, the UI elements and text styles were very good jumping-off points for my own designs.

I would take UI elements from the resource pack that I needed for my screens and alter them to work perfectly for SubTracker. Editing elements as I went when needed, I began to form SubTracker’s style guide. Any element I knew would be used multiple times across my screens would become components that I could easily drag and drop wherever needed within the design.

SubTracker’s style guide and asset library

Because all of the design heavy lifting was done during the sketching phase and I had a set of reusable components, the high-fidelity designing was a simple process. I choose a sketch to adapt and then use my asset library to construct a high-fidelity version. I also had to keep my usability testing notes nearby to help make sure I fix any typos and add any details users said they wanted to see.

One design decision I am particularly pleased about is giving the users the ability to auto-cancel (similar to RocketMoney’s “cancel this for me” feature) as well as cancellation instructions. Some websites and apps make it as difficult as possible to cancel them and attempt to hide the button behind as many screens as possible. Providing cancellation instructions is an important feature for users who want to cancel manually but are having a hard time finding out how on their own.

A selection of Subtracker’s high-fidelity screens

I chose for the tab bar to have five icons within it because, through my research and testing, those five tabs proved to be the most wanted features to be easily accessible. I chose the center tab to be the largest and most prominent because being the add sub button, it is likely the tab users will interact with the most while using the app. The five tabs (from left to right) are home, calendar, add sub, statistics, and profile.

Home is where all of the user's subs are displayed and able to be selected and edited. Calendar is where users can get a birds-eye view of when certain subscriptions get renewed. Add sub is where users are given three different options for how they want to add subscriptions. Statistics is where users can see how much they are spending each month and what categories they are spending the most in. The profile tab is where past subscriptions are displayed, along with personal information and settings.

Testing Phase 2

With a working prototype that I was happy with in hand, I began to have people test it for usability issues. Because this was my second round of testing and I already had a script I could adapt, prepping for the tests was much quicker than before. The script from my first test could have guided the tests on its own but I did edit it to more accurately fit a screen test rather than the paper prototype I tested before. All of the people I tested have divulged that they pay for at least five monthly subscriptions and most do not currently use a subscription tracker.

Before the testing, I was already aware of a few minor overlay issues that I noticed when creating and testing the prototype myself. I didn’t have time to fix these issues before testing and was unsure whether to bring up the issue to users before they encountered them or stay quiet until they mentioned it. During the tests, I did a mixture of both depending on if/ how users even encountered said issues. It is important to be completely tuned into your testers’ body language and facial expressions, especially if the user is less inclined to voice an opinion.

Overall, users were happy with the prototype and it seemed like most if not all of them would benefit from using a subscription tracker for all of the reasons I found during research. All users mentioned that the prototype was simple and intuitive to use. This is very positive since very few of the users had previous experience with subscription managers. Every user tested quickly completed tasks without needing help and were all positive about its layout and visual style.

Of course, there were points of criticism and correction, even beyond the issues I was aware of and mentioned before. The overlay issues were luckily the biggest thing I needed to fix following the testing. One change suggested by a user was to add a confirmation screen after the user presses “cancel subscription” to prevent accidental taps. Another suggestion was to give users the ability to create and organize their own categories to sort subscriptions. Most of the users were confused at first about the colored dots on the calendar before being shown the categories on the statistics page so that should be fixed as well.

Once the testing was complete, I compiled my testing notes into a list of changes ranging from minor typos to the previously mentioned major overlay issues. Once I could see everything I needed to edit in one place, it made making the actual edits much easier. Before I finished the project, I went back to Figma and changed the prototype to better reflect how users wanted it to be. I didn’t do a further usability test but after designing for the final time, I am very happy with the prototype and confident the users I tested would be happy with the changes and even more satisfied with the prototype as a whole.

Conclusions

Creating a project plan and giving a timeline and deadline for every deliverable and step of the design process was a process that I hadn’t done before this project. I think that it was a very important step to take to not only keep myself on track time-wise but also to ensure I always knew what the next step was and how to complete it. I will be incorporating project plans into my future design projects as I think it is crucial to the project running smoothly and quickly.

In my research, I found that most people pay for more subscriptions and that they spend more on those subscriptions than they originally estimated. I also learned that subscription managers, while incredibly useful to the people who use them, are not used by the people who may need them most. After I created and tested the prototype for SubTracker, I found that most of the people I tested also do not use a subscriptions manager. My hypothesis for why that is, for what it is worth, is that the ones currently on the market are either too simple and rudimentary or too complicated or immense.

SubTracker was my attempt at bridging that complexity gap and designing a Goldilocks solution that users would want to use. When researching potential competitors, I adopted the most useful features I came across while making sure I didn't include the frustrating aspects. I am also happy with the features I came up with on my own and how I chose to lay them out within the app. Users reacted positively to SubTracker and were impressed with its intuitiveness and simplicity.