Keep Your Subscriptions on Track
Managing subscriptions and recurring monthly payments can be overwhelming. From streaming services to grocery deliveries, the subscription model has become a standard among companies. Traction is an app that allows users to track, manage, and cancel recurring paid services so they can get a comprehensive view of their spending.
The Problem
A company has launched a desktop-only website that is currently not mobile-friendly. With more than half of their potential users on mobile devices, they know that they will greatly benefit from having a mobile-friendly version, which will ultimately result in a larger customer base and increased business.
The Solution
Create a mobile dashboard app that allows users to perform the same tasks available on the desktop version. These users will be able to see all of their subscriptions in one place so they can have a comprehensive view of their subscription spending, cancel unwanted subscriptions to reduce needless spending, and be notified if any subscriptions are about to be auto-renewed so they can decide if they would like to continue paying for that service.
My Role
As a UX/UI designer, I took this project from the Discovery phase, performing user interviews all the way to the Design phase where I conducted usability tests. I worked on this project as part of my Springboard Capstone II project.
Research
Using information from the existing desktop platform, I was aware that the majority of the users were over the age of 30, middle class, equal split between men and women, and familiar with both desktop and mobile devices. With these facts in mind, I wanted to conduct user interviews using participants that reflected the target audience. Before I began the user interviews, I conducted a competitor analysis to get an idea of existing platforms that solve similar problems.
Competitor analysis
When I was briefed on the existing platform, they gave me three industry examples to analyze. These competitors were TrackMySubs, Trim, and Truebill.
I personally used all three of these platforms for a short amount of time to get an understanding of the users experience. TrackMySubs and Trim had a fair amount of issues. Enough so that my biggest take away was what not to do. They both had poor hierarchy, making it difficult to navigate the platform efficiently. The UI for both platforms were unrefined, having text run off of cards and poor use of CTA’s. Truebill on the other hand had a more positive experience
Biggest takeaways from using Truebill:
-
Education is greatly appreciated and negates learning curves when first using an app.
-
Mature, but friendly design during the sign up process helps build trust between user and app. This is extremely important when an app requires sensitive information such as banking details.
-
Proper information architecture allowed me to efficiently move through the app and digest the statistics given.
-
Truebill offers a lot of information not related to subscriptions, such as credit score, lowering insurance, etc. This made me want to find out how important this is to users during interviews following my competitor analysis.
-
Charts and graphs create a strong visual representation of finances that is much easier to digest than lists.
User Interviews
I created a semi-structured script to ensure there was consistency with each participant, but also have flexibility to allow the users to discuss their feelings and possibly a mental model of what this app would feature.
​Interview Goals
-
Assess how participants are currently tracking their subscriptions
-
Find out the level of awareness participants have of their subscription spending (monthly)
-
Find out if users would expect to see extra banking information if it isn't directly related to subscription spending
-
Analyze how our target users react to subscription price changes
Research Synthesis
After completing 5 interviews I grouped and categorized the information into an Affinity Map. This helped paint a clear picture of commonalities between the participants' answers and how they felt about the topics at hand.
Interview Findings and Insights
The information gathered from the interviews reinforced the main goals of the company; users want to see all of their subscriptions in one place, have the ability to cancel unwanted subscriptions to reduce needless spending, and to be notified when subscriptions are about to auto-renew. However, there was an insight that stood out and presented itself as a possible feature that would make Traction unique compared to the competitors that I evaluated.
“As a business owner, I can not simply cancel a subscription. It must be replaced.”
When speaking with Brennen, who is a small business owner, he told us that he has over 15 subscriptions for his business. Brennen went on to tell us that when he is unsatisfied with a subscription, it must be replaced to keep things running smoothly, otherwise it can have a negative effect on him, his business, and even his employees.
Something that also stood out to me was that nearly every interview participant said subscription prices are too low to worry about, making them easy to forget. This is something I wanted to keep in mind when designing the prototype, showing the user total spending to give more impactful feedback.
With this information organized, I used it to create a Persona of our target user and a User Journey Map. These would be referenced throughout my design process, regularly going back to it to make sure every decision made would reflect the users needs.
Testing
Once I had a clear understanding of the users' needs, it was time to begin designing. I spent a couple of hours creating hand drawn wireframes as a brainstorming exercise, this helped me have a clear idea of the information that will be on each screen. Since there are a great deal of dashboard interfaces on the market, I knew I wouldn't be reinventing the wheel for this app and wanted my usability tests to be on mid and high-fidelity prototypes.
Usability Testing
With the mid-fidelity designs turned into a clickable prototype using Figma, I recruited participants that fit our target user through social media. All of the usability tests were done remotely over Zoom. The Traction usability test would consist of these tasks:
-
Sign up / complete bank information
-
View all recurring payments in one place
-
Cancel a subscription (Netflix)
-
Create a budget
Round One of Testing
The feedback from our first round of testing was largely positive and reassuring that we are on the correct path. The users easily completed all the tasks given and felt they could trust the app.
-
Issue # 1 - “Affordable options” ad button lacks clarity
During the user interview process Brennen mentioned that when he wants to cancel a subscription for his business, he has to have another one to replace it so things can continue running smoothly. In response to this, I added the “Affordable option” section to make users aware of possible replacements that could also save them money, but our participants mentioned that it “took them a second” to realize the text beneath the cards had a “similar to” title.
Solution - Put all of the necessary text onto one card so that it's easier to recognize as one cohesive button.
-
Issue #2 - Full Calendar button unclear
When the participants were on the Recurring tab, I asked them to look around the page and tell me what actions they believed they could take. Several users mentioned they were unsure what the “full calendar” would look like compared to the smaller calendar shown on the screen.
Solution - Build out the full calendar so that our next round of participants could view it as one of their tasks and we could get direct feedback.
-
Issue #3 - Subscriptions list on Dashboard does not look very clickable
Two users noted that our list of subscriptions on the dashboard page did not look very “clickable.” This user even noted that it looks more like a bank statement than clickable buttons.
Solution - Split up the list into individual buttons to make it more obvious they are clickable.
Noteworthy Insights
-
When discussing bank information the participants leaned towards only seeing info that was directly related to subscription spending
​
“I like when apps do one thing really well”
​
-
I received positive responses to the “Affordable options” ads. The participants said they appreciate this feature and that it makes them aware of new services. Since one of the brand attributes of Traction is trust, I felt it was important to get an idea of how our target users would feel about advertisements based on their usage.
-
Seeing monthly and annual totals had a big impact on the users. One participant commented that it would motivate them to make changes to their spending.
-
In reference to the main goals of the company, (seeing all subscriptions in one place, canceling subscriptions, and getting notifications before auto-renew) all of these things received positive feedback.
App Functions
Usability Testing Round Two
I polished the UI of the app and gave it a more complete look overall, but kept it minimalistic and clean to allow users to efficiently scan the information given. As mentioned earlier, I would be asking our participants to open the full calendar and assess how they feel about this tool, in addition to the tasks we used from round one.
Round two of testing proved that our changes were justified, receiving positive responses to the Full Calendar, users praising the functions of the app being “everything they would want” using an app like Traction. A few small changes I made after this round of testing were:
-
Make the small calendar clickable. A participant said “At this point with apps, I expect everything to be clickable.” The solution was simple and quick, allowing users to click on a specific day that a payment is due on the small calendar and getting a slide-up screen that shows the details of that day's payments.
-
The “Edit Details” button was unclear on the Netflix payment page. Several users said they wouldn't know what to expect when they clicked that button. This function wasn't built into the prototype, so after discussing this topic, I explained what it would be used for. The user explained they would expect that function under a menu or “edit” button in a corner. Since this topic came up several times and it was something I personally debated in the earlier stages of designing the app, I added it as an icon button in the top right hand corner of the page.
-
Highlight the current date on the calendar. This was definitely an oversight on my end of the build-out, but luckily a quick fix. I added an underline beneath the current date, that way it didn't affect or change any colors currently used on the calendar.
Visual Design Style Guide
I created a lightweight style guide to keep the designs consistent throughout the mobile app and for it to remain consistent for future projects. I went with dark mode UI for this project because of the known benefits of dark mode such as extended battery life, less eye fatigue, more access for visually impaired users, and overall I believe it has a more mature look for financial apps showing data rather than long form text.
During every stage of the design process, from interviews to testing, I found it challenging to get the participants emotionally involved. Once when we discussed overall monthly or annual spending, though, it seemed to be more of an eye opener that got our participants to care more.
Something else I noticed was that everyone seems to have different preferences on the way information is conveyed to them. Receiving such a variety of feedback showed me that giving the users several different forms of graphs and information allows us to reach a larger group of people. No one seemed to be particularly off-put by any of the information, but they seemed to gravitate towards one over the other in most instances.
Possible Features
During both interviews and testing multiple participants mentioned the idea of seeing usage of subscriptions within the app. Without being prompted, this topic came up many times and was noted to be something that would help them decide whether they should be keeping certain apps, such as streaming services. During my competitor analysis I didn’t see any other apps using this type of technology, but the appeal is definitely there among the users and would be worth looking into.
Another noteworthy addition that users mentioned was the possibility of group accounts with partners or roommates. Allowing them to split recurring payments or see all of the households subscriptions in one place, this topic was brought up multiple times, mostly by participants who live with their significant other.
Overall, I feel the Traction mobile app was a success and met the expectations of what the company expected to see. Users had an overwhelmingly positive reaction to the functions of the app and particularly loved seeing it in dark mode. Below is a link to the full prototype of the Traction mobile app.
