Problem
It’s hard to keep track of all the products and services that we subscribe to each month. All we see is money deducted from our accounts for services that we might not even need or want anymore.
Subscrip, a subscription management company has launched only launched a desktop-only website, they want to build a mobile friendly subscription dashboard.
Business goals
There were two main business goals for this project—
- To allow users to track all their subscriptions in one place so that they get a comprehensive view of their subscribed services
- To help users make informative and timely decisions about if they want to renew their subscriptions and continue spending money
Design Process
The design process was as follows —
Empathize
Both qualitative and quantitative research methodologies were conducted —
- Competitive analysis
- User surveys
Competitive analysis
During the analysis, I found there were a bunch of desktop and mobile apps trying to solve the same problem, I chose to analyse TrackMySubs and Truebill for their pro’s and con’s.
TrackMySubs
TrackMySubs is a subscription tracking desktop application which also enables users enables users to track spending on a monthly basis, and assess how much budget is left to spend for the remainder of the month.
Pro’s
- Smooth onboarding process, with a visual preset of suggestions to choose from
- A profile completeness tracker is shown immediately after onboarding, which gives a sense of direction to the user as to what should be the next steps
Con’s
- The UX for setting alerts for notifications was very confusing with many options provided to the user. There was no clear distinction between reminder alert and default alert profile.
- Data visualisation graphs were difficult to interpret in the reports section.
Truebill
Truebill is an iOS app whose one of the key features is to help users manage their subscriptions. Users can also cancel unwanted subscriptions. For cell phone and cable bills, Truebill can negotiate a discount for you. Users are also asked for credit card information and they can see spending insights, create a healthy monthly budget.
Pro’s
- The process of adding a subscription was effortless and to add to that, all subscriptions were listed down below a monthly calendar, helped form a visual connect between the dates and services
Con’s
- It was not clear while adding subscriptions, whether alerts are set up for the same or not. Only when landed on settings section, these controls are shown.
- The balance alerts feature is an important feature and it was found to be hidden in the settings section, a major discoverability issue.
User surveys
I conducted a screener survey with 15 participants in the age group of 25–35 years.
Questions asked to participants in the survey —
- How many services are you subscribed to?
- Do you keep a track of your subscriptions?
- How do you get reminded that the payment for subscription service is due?
- What are the challenges you have faced with keeping track of your subscription payments?
- Have you received unexpected deduction from your account due to your subscription auto renewal?
- How do you usually prefer the payments to your subscription services?
Key findings from the survey —
- More than 62% of users are subscribed to more than 3 services on their smartphones
- 88% of the users do not keep a record of their subscriptions
- 85% of the users get reminded via their email of their pending due’s
- 60% of the users are opting in for auto renewal as a payment mode. Because of this, when they no longer want to use the subscription, they forget to cancel and are reminded only after the money is debited from their bank account
- Since 85% of the users get reminded via Email, some of these emails might be lost in the flood of other important emails in their inbox.
User quotes —
I don’t get to know until the last minute that I have to renew my payment. And in case I want to cancel the subscription sometimes I have missed cancelling it as auto renewal is on and I have lost money because I didn’t have a reminder
My subscriptions are mostly free ones. But others, I don’t really track. I subscribe and put it on auto pay mode
Subscription ends on different days of the month, making payments irregular. Hard to keep track of change in subscription amount of a service.
Define
From the data gathered in the user survey, I cumulated it to into two primary user personas —
User personas
HMW — How might we statements
How might we —
- Help users keep a record of all their subscriptions in one place, efficiently?
- Encourage users to manage their subscriptions more often?
- Let users know their upcoming renewal date in prior so that they can make a timely decision?
Ideate
I sketched out two user flow journeys — one for a new user, one for a returning user on the app
User flows
Using the user flow journeys as a reference, I converted them into low-fidelity wireframes in grey scale
Low-fidelity wireframes
Usability Test 1
These wireframes were then prototyped and a usability test was conducted among 4 users to identify key issues before moving on to the high-fidelity designs.
Some of the findings from the usability test were —
- A user wanted to view in home section, the overall expense for a month when compared to the previous month
- A user wanted “Upcoming bills” as the primary and default selected tab in home section rather than “All subscriptions”
- When asked to delete a subscription service, 2 out of 4 users struggled to find delete by clicking on the “Options” in the top tab bar.
- A user wanted to set custom notification alerts to get reminded when a particular service was due
With the learnings from these findings, I converted the low-fi wireframes into high-fidelity screens
High-fidelity mockups
User onboarding flow
Post sign-up, the user can add a new subscription service among a list of presets or add his own service. He is then asked a bunch of inputs such as latest bill date, bill cycle, whether the bill is in auto-renew mode and if he wants to set custom notifications alerts
Returning user screens
Notification, calendar sections
The calendar shows the bills due for the specific days of the month, a monthly expense report and a section which informs the user which upcoming bills are in auto-renew mode, so that he can make a timely decision whether to discontinue services he no longer uses.
A push notification is sent to the user based on this custom notification settings and the user can perform two actions on the notification—mark his bill as paid, or be reminded tomorrow.
Usability Test 2
From the high-fidelity prototype, I conducted a usability test among 4 users.
Usability issues identified and corrected from the test —
- A user wanted to know which of his bills are in pending state, if he has not yet marked them as paid. I added a pending label to bills in the “Upcoming bills” when the due date was crossed
- One of the users in the usability test was dyslexic. She was not able to clearly figure out from the line graph in the home dashboard. To solve for this accessibility issue I added a switch element, so that the user can toggle between a line graph and a bar graph
- In calendar section, a user was not precisely map the amount to the respective services in the monthly expense report graph. I solved for this by converting it into a dot graph, which also shows the expense for the service when tapped
Conclusion
It was a fun project undertaken for the duration of 3 weeks. This also hit on the personal front because I too was a victim of paying for services I was no longer using.
For the future versions of the app—it can ask users for their credit card information first, by gaining their trust and intelligently suggest to improve their spending patterns. Improvements on the UI aspect—the list items in the dashboard can be introduced with some negative space allowing the individual list items to breathe.