SubSmart
User Research • Branding • Wireframes • Flowcharts • User Interface • Prototyping
Project Overview
Staying on top of all of your subscriptions has become difficult. Payments are taken out unexpectedly or you unknowingly are getting charged for a subscription you forgot to cancel. Managing your many subscriptions has become stressful.
The goal was to provide users with a centralized hub where they can view all their subscriptions, reports on where their money is being spent, add reminders, and unsubscribe from unwanted subscriptions.
My Contributions
Role: UX/UI Designer
Duration: 1 Month
Tools used: Figma, Miro
As the sole designer, all steps were performed by myself. I conducted research and user interviews and created all user flows, wireframes, branding, and the user interface and prototyping.
DISCOVERY
Subscription Overload
It’s hard to keep track of all the products and services we subscribe to each month. Sometimes we forget we even have a subscription and we’re reminded when we see the money deducted from our bank accounts. I wanted to dive deeper into the world of subscriptions and how they affect our finances and came across some overwhelmingly high statistics.
Research
Increase of subscription services over the past 10 years
435%
of households have a streaming subscription
98%
say that they would like an app to manage all of their subscriptions
78%
have paid for a subscription that they were unaware of/forgot about
42%
Target User & Goals
Because almost every single household has at least one subscription, the market for a subscription management hub is potentially massive. I sent out a survey on social media to better assess demographics. The goal is to identify potential users and find solutions to improve how they manage their subscriptions. I was looking for users of all ages and genders who have at least three subscriptions to test my wireframes and prototype once completed.
“As a user…”
I want to see all of my subscriptions in one place.
1
I want to be notified if subscriptions are about to auto-renew so I can make the decision if I want to renew or not.
2
I want to unsubscribe from my subscription so I can reduce spending.
3
Competitor Analysis
During my research, I searched for other subscription dashboard websites and apps. There were three main competitors - RocketMoney (formerly known as TrueBill), TrimFlow, and TrackMySub. Most had only web products and not mobile applications, which is what I aimed to focus on for SubSmart.
Main Takeaway
Having a dashboard with all subscriptions and important information shown upfront is the best way to stay on track (displayed by RocketMoney and TrackMySub).
Being able to view your subscriptions in a different format. Although the dashboards tell users what/when their next payment is, sometimes it is more helpful for people to see it in a calendar view. Many users are familiar with this, as mobile calendars and productivity apps use this multi-view format (adapted by all three competitors).
Managing your subscription straight from the platform is extremely valuable. Having the option to unsubscribe right on the hub would make it easier to remember to cancel (ability on TrimFlow and RocketMoney).
Notifications of upcoming payments to stay on track (feature on all three competitors).
Keeping the user goals in mind, I focused on three things - viewing all subscriptions easily, managing notifications, and the ability to unsubscribe. This is the desired user flow.
EXPERIENCE
User Flow
Wireframe
I had a solid idea of what I wanted the interface to look like so I dove into creating the wireframe. I designed a few key screens that aligned with the goals, such as: a main dashboard to view all subscriptions (frame 1), an alternate calendar view (2), an expense report (3), and the subscription details (4), including the alerts (5) and unsubscribe option (6).
HIGH-FIDELITY DESIGNS
Easy Financial Connection
When the user creates the account, they have the option to link their bank account. This was important to add in, as many people forget that they are paying for an unwanted subscription.
The app will connect to your bank and search for any recurring charges. Once logged in and all subscriptions are listed, users have the ability to delete things that may not be relevant.
Digestible Dashboard
Once logged in, the users will see all of the subscriptions listed on their dashboard. Important details such as the due date and amount are listed so users can see that information immediately without additional clicks.
The calendar view is so users can see their subscriptions in a different format if they prefer.
The reports can be looked at monthly or annually. This helps users visually understand where their money is being spent.
Subscription Settings Simplified
Users can click on any of the subscriptions in the list or calendar view to see their subscription details. They have the option to change the currency, add a description and category (for accurate reporting), adjust their payment dates and duration if needed, add alerts, unsubscribe, and delete from their dashboard.
The alert and unsubscribe options are probably the most important feature of this app. Users want to be able to be notified of upcoming payments and also be able to unsubscribe if they are no longer interested.
The unsubscribe will either open the corresponding app (if they have it) or will open their web browser to the unsubscribe page.
PROTOTYPE
VALIDATE
After mocking up all of the high-fidelity screens, I created the prototype for testing using Figma, adding interactions and transitions.
Once the prototype was completed, I searched for feedback on my design by contacting people from my usability survey.
SubSmart Prototype
Click the expand icon on the top right to view full-screen
Usability Testing
Participants:
10 participants
Had at least three subscriptions
The testing was done both in-person and remotely through Zoom while the user shared their screen. I walked the participants through a series of tasks - login, link bank account, set an alert for a subscription, view reports to see where they were overspending and unsubscribe from a subscription. They had the ability to view the calendar as well; I wanted to see if anyone would click that without any prompt. This would tell me if people preferred different viewing methods.
Results
Overall, the users enjoyed the prototype, completing tasks with very few usability issues.
I tested five people on my designs and found one issue. As seen in the wireframe, I originally did not have a bottom navigation. The “expenses” were displayed on the bottom and although users were able to get to the reports when asked, I noticed some hesitation. Adding the bottom navigation allowed me to free up some space on the top of the dashboard as well.
After I made that adjustment, I tested five more people. This round had virtually no usability issues. There were a lot of positive comments on the simplicity of it and the fact that all important information was laid out right on the dashboard.
Takeaway
During this process, I learned that sometimes less is more. Focusing on the users’ goals without overcomplicating it makes for an easy-to-use product. In the past, I have wanted to continue building it out, adding features that are not in the original red route idea. However, this sometimes leads to muddling the user goal and wasting time. I worked with a Lean thought process and reminded myself that the most important thing to build is the MVP; the other features could be saved for the next roll-out if all goes well in testing.