subMe
Subscription Tracking App for Budgeting
Duration: 2 months // Jan 2021 - Feb 2021
Problem
Managing your subscriptions can be overwhelming. Between all the different dates and forgetting to unsubscribe before renewal, you may only realize when it’s too late — seeing your money deducted from your account. When budgeting comes into play, overseeing the numerous subscription services can get convoluted.
Now cue the spotlight to subMe — a subscription-tracking company, assisting users to oversee their subscription fees to ultimately save them money. They aim to launch a mobile app to increase their market reach.
subMe provided these user stories as business goals to convey what they are looking for in their mobile app:
As a current user, I want to see all of my subscriptions in one place so that I can get a comprehensive view of my spending on subscriptions.
As a returning user, I want to unsubscribe from a subscription so that I can reduce needless spending.
As a consumer, I want to be notified if any of my subscriptions are about to be auto-renewed so that I can make a decision about if I want to renew the subscription and continue spending money.
I was assigned a time constraint of 90-hours to drive the project into a high-fidelity prototype.
Solution
I embraced the user-centered design approach to showcase embedded solutions to users’ pain points in the final iterated mockups. Through rounds of usability testing, I was able to use feedback from users to validate the provided user stories, thus improving and fine-tuning the design.
I created a mobile app by addressing the business goals and user pain points with these features:
List view, calendar, and pie chart/data visualizations: to provide multiple ways of viewing their subscription information and spendings
Unsubscribe in multiple ways: by swiping on the subscription card or tapping on the button within the subscription info
Add (multiple) alerts to notify themselves before their subscription auto-renews
Auto-scans the user’s inputted card: to pull and compile their subscriptions, as inputting each subscription service one-by-one can be tedious
My role
As the sole designer of this project, I worked on the following:
DISCOVER
Competitive Analysis
Surveys & User Interviews
DESIGN & VALIDATE
User Flows
Style Guide
Sketching
Wireframes
Usability Testing
High Fidelity Mockups
Iterating
Prototyping
Competitive Analysis
To efficiently utilize the 90-hour time constraint, I conducted competitive analysis by studying the industry leaders — Trackmysubs, Trim, and Truebill. This way, I can save time by learning from what others have already undertook. I approached their designs with the lens of the user stories to keep sight of the business goals and what subMe’s mobile designs should achieve.
Through analyzing the pros and cons of the three companies, I generated some concluding action items to ensure that the subMe mobile design is intuitive: from displaying calculated sums of money spent on subscriptions for better budgeting to uploading subscriptions through inputting a card.
Key takeaways:
Display calculated sums of money spent on subscriptions for better budgeting
Allow users to input subscriptions through inputting a card
Provide multiple ways of viewing their subscriptions (Dashboard/list view, Calendar, and Reports/Charts)
Project Plan
I established a project plan to ensure that I stay on-track to finish this mobile design in the 90-hour time constraint. With this outline, I have a clear layout of what I will be doing and how much time I will be spending for each step.
Surveys & User Interviews
I wanted to learn more from users themselves — how people most commonly keep track of their subscriptions, why they might not keep track of their subscriptions, etc.. I hopped onto creating a screener survey to find individuals to interview.
I based the screener survey on the provided information about the target user:
To discover the pain points of keeping track of subscriptions and find solutions to improve users’ engagement in monitoring their subscriptions, I interviewed five people (one in-person, four remote), ages 30+. Three were selected through the screening survey and two were family/friends. The average amount of subscription services amongst the five people was six.
From these user interviews, I gathered that:
Their pain points included:
Users forget to cancel the trial and gets charged after their free trial ends (60% of users)
Some subscription tracking methods only track subscriptions from one card, however users may use different cards/bank accounts to pay for different subscriptions (40% of users). “It’ll be great if I can keep track of subscriptions all around the board.”
I learned that:
Most rely on memory to keep track of their subscriptions, but have also forgotten to cancel a subscription before. This emphasizes the importance of an alert feature to remind the user if they would like to keep subscribing before renewal.
Trials also go hand-in-hand with subscriptions, so I decided to include an option to add trials so they can be reminded about this as well.
Users wanted to input their subscriptions using their cards; however, their previous methods of tracking didn’t allow for them to input multiple cards. I kept this in mind when creating my designs.
User Flows
To get started on cultivating the structure of the designs, I went onto Miro and roughed up some user flows based on the 3 user stories.
For the user to get a comprehensive view of their spending on subscriptions,
they will input their subscriptions in their preferred method and will be able to view all their subscriptions in a list-view dashboard, with how much they spend monthly and yearly.
For the user to unsubscribe and reduce needless spending,
the user can do so in multiple ways — by swiping or tapping on a button within the subscription info.
For the user to be notified when their subscriptions are about to auto-renew,
they can add alerts — customize when and how many times they are reminded about that subscription auto-renewing soon.
Style Guide
I constructed a simple style guide to refer back to when building out the high-fidelity mockups.
I highlighted the brand personality and attributes when curating the color palette and fonts.
The brand personality is “a trusted friend who is helping you save money,” with the brand attributes being “trustworthy,” “caring,” “friendly,” and “casual.”
To combat the feelings of a chore when handling finances, I embraced the friendly and casual brand attributes with bright, punchy colors across the board. The primary color being a solid blue carries trustworthiness, while the comfort of the simplistic fonts support the caring nature of the app.
Sketching
I roughly sketched key screens while following the previously shown user flows.
Wireframes
Next, I cleansed the rough-pen work into cleaner frames on Figma.
With the time constraint, I quickly took these into a round of usability testing.
Usability Testing Round 1, Iterations, and High-Fidelity Mockups
To chug along the process, I gathered 4 people to conduct my first round of usability testing.
Goal: Discover initial impressions and uncover usability issues within the subMe red routes.
Some key findings from this first round included…
Finding #1:
Users were confused as to why the app needs the user’s card info and how it scanned and retrieved their subscriptions from their card. There was a lack of feeling secure for this option’s process amongst the users.
Solution:
Introduce the option of gathering subscriptions through inputting their card (and/or bank account) during the onboarding walkthrough screens. This way, users can familiarize themselves with the app’s capability from the start. I also included a screen for users to look through the app’s privacy & terms.
Finding #2:
The lock icon within the CTA button for “scan a card” and “add bank account” was interpreted that those options were locked/encrypted.
Solution:
Remove the lock icon and provide the option to view the Privacy & Terms screen to increase users’ feelings of security. (I also made the main CTA to be “Input subscriptions myself” since users voiced that they were most comfortable with this option, as they are only starting to get to know this app during this onboarding process.)
Finding #3:
The wording for “Monthly Value” to describe the average price the user is paying monthly was confusing.
Solution:
Change “Monthly Value” to “Average Monthly Spending”
Finding #4:
The capability to unsubscribe is unclear until looking into each subscription. One of the business goals / user stories being, “As a returning user, I want to unsubscribe from a subscription so that I can reduce needless spending,” this must be addressed.
Solution:
Introduce the app’s capability to unsubscribe within subMe in the onboarding walkthrough screen, and that the user can slide the subscription card to the left to unsubscribe.
(Relevant!) Storytime:
During the stage of molding the high-fidelity mockup screens, I helped my mom set up her Apple Pay, in which she added her card information. For this flow, it allowed for my mom to scan her credit card vertically.
I realized my sketches and wireframes for subMe’s “Add a card” flow required the user to position their phone sideways, and that this extra effort to prop their phone horizontally wasn’t necessary. (Phone camera quality has become so pristine… there’s no need to capture the card in such a horizontal, zoomed-in manner.)
When I conducted the previous usability test, users were clicking through the prototype on their computers, so there was no “acting-out” of tilting their phone or actually scanning their credit cards… so thanks Mama for the unexpected light-bulb moment!
See the before (wireframe) and after (hi-fi mockup):
Usability Testing Round 2 & Iterations
For this next round, I wanted to make sure that the iterated changes made the app more intuitive.
Key insights from the second round of usability testings (from three individuals):
All users stated that “Input subscriptions myself” is their preferred method to input their subscriptions (at first, during the onboarding process). Users were also not as hesitant to input a card (compared to round one), which may be due to the added walkthrough explanation.
Users were able to quickly figure out (<4 seconds) how to unsubscribe from a service (100% of users).
Clarity can be improved after inputting a card, that the app gathered the subscriptions listed below (67% of users).
Due to the slight confusion regarding this screen after the user inputs their card, I included a blurb to state and clarify what happened.
Along with fine-tuning the details, I also added the Calendar, Reports, and Settings screens with the comments in mind from the previous usability testing sessions about what those users would expect/want out of these pages.
I utilized data visualizations to present the user’s subscription information, allowing multiple ways for users to understand their expenses. In this fashion, they can “get a comprehensive view of [their] spending on subscriptions” (business goal #1).
Conclusion
The 90-hour time period for this project has concluded, and the usability tests revealed that all 3 business goals were met.
As a current user, I want to see all of my subscriptions in one place so that I can get a comprehensive view of my spending on subscriptions.
The users have seen and analyzed the main dashboard to be comprehensive and have “everything I need.” (thank you, User #2 from Usability Test Round 2)
As a returning user, I want to unsubscribe from a subscription so that I can reduce needless spending.
As mentioned previously, 100% of the users from the second round of usability testings were able to quickly figure out (<4 seconds) how to unsubscribe from a service.
As a consumer, I want to be notified if any of my subscriptions are about to be auto-renewed so that I can make a decision about if I want to renew the subscription and continue spending money.
Users are able to add (multiple) alerts before their subscriptions automatically renew. 100% of users were successfully able to set up alerts during the onboarding process and when editing a specific service’s reminders.
No project is ever “finished,” therefore as I progress further and continue testing and iterating the designs, I would like to keep unraveling more user thoughts — specifically the Calendar, Reports, and Settings screens and if they would like to see other or different variations of how data can be presented, as opposed to the current pie chart. I believe in the long run, calculating how much users are able to successfully budget and save money will be the ultimate indicator of subMe’s impact.
What I Learned:
My biggest takeaway from this project was how much time I am able to save in the design process by analyzing other companies that are striving to solve similar problems. These examinations can provide insight into what’s working, what could be improved, and beyond. Meshing different and multiple approaches can reveal the desired, and most importantly, effective application.