WhatSub
A subscription management service.
Role: UX/UI Designer
Timeline: March - April 2024
Key Skills: Project Planning, Competitive Analysis, User Interview, Research Synthesis, User Flow, Wireframing, Prototyping, Usability Studies, Design Iteration
Tools:
Task / Context
Subscription services are everywhere in our daily life: video/music streaming, cloud storage, memberships, apps, softwares, etc. When you turn on autopay or auto-renewal, before you even notice, you're paying for a bunch of subscriptions that you forget about every month. Based on a desktop-only website that keep track of all of your subscription fees, WhatSub is a newly designed and refined mobile version of the service that helps our users to get a comprehensive view of their spending on subscriptions, and possibly help cut the unnecessary ones.
Project Plan
Approximately 90 hours were dedicated to this project. After carefully planning, I came up with the following project plan to help budget my time.
Step 1 - Discover
Competitive Analysis and User Interview Findings
To get an overview of the current industry landscape, I conducted a competitive analysis among three top products with subscription management services - Mint, Chargeback, and Bobby - to study the ways that industry experts have approached similar problems (see image carousel below). On top of that, I also conducted an in-depth interview with two potential users to better understand their pains and need. There's some insights to help me get thinking:
The participant is not currently using any subscription management services, he'd like to have one but there's too much effort to get started. (Solution: Allow WhatSub to get connected with bank accounts and help detect and pull reoccurring subscription payments from monthly statements.)
Sometime participant saw the bill of an subscription on autopay on his credit card statement, and realized that he hasn't been using it for a long time. (Solution: Create an overview page to help users a get a comprehensive view of their spending on subscriptions.)
It also happened before that the participant forget to cancel an unwanted free trial and it turned into a subscription with reoccurring monthly payments. (Solution: Distinguish free trails and regular subscriptions, and use notifications to pay special attention to expiring free trials.)
Participants were watching several shows across several streaming platforms and sometimes forget about which’s on which. Therefore, they get confused about which services are needed and which aren't, and end up keeping them all. (Solution: Add a "notes" field to help users keep track of the use of each subscription.)
Step 2 - Design
User Flows
With the help of the research synthesis from competitive analysis and user interview, I started the design work by identifying the following main user flows:
Add a new free trial with end date and reminder.
Add a regular subscription with necessary details like payment date, frequency, label or category, reminder, and notes.
Import subscriptions from a linked bank account.
Cancel an existing subscription from the subscription list in app.
Low Fidelity Sketches
Based on the research findings and user flows, I first drew a set of sketches with pen and paper, and then I turned them into a low-fidelity wireframes in Figma to send over to participants for usability testing purpose.
Step 3 - Validate
First Round of Testing
I conducted my first round of moderated usability testing among three participants following a test script I had prepared. Tests were done both in-person and remotely with screen sharing based on participants' availability, during which they were asked to complete tasks like "adding a new subscription to your list manually", "adding a free trial to you list and set up a reminder", "cancelling an existing subscription through the app", and "checking your monthly total spending on subscriptions". More details are specified in the test script (click to open test script in new window) to test the usability of different functions throughly.
After gathering and analyzing my notes (see above) from the first round of testing, I labeled each usability issue into different level of priority, and addressed the most important UX problems when turning my initial low-fi designs in to a high-fi version with UI designs. The main changes I made to the designs are as following:
Redesign the process of adding a new subscription in a guided and less overwhelming way
A participant felt that the current setting of adding a new subscription manually is a little overwhelming with too many fields to be filed on one single page. Therefore, it was a big friction for him to even get started. As he suggested, I redesigned the page flow into the wizard way - one question at a time - so that users can be guided through the whole text entering process smoothly. I also added the the page number at the bottom of each page to show users how many more questions are left going forward.
Before
Allow customized reminders to fit different user habits.
The initial design asked if users wanted to set up a reminder, but it seems to be only showing in-app count-down reminders on the homepage. A participant questioned in which way she would be reminded since the current design didn’t specify on that. The participant also brought up an important nature of this product: WhatSub might be most useful when users are not using the app or even forget about the app - that’s when they really need to be reminded about expiring free trails or upcoming renewals. Therefore, the notification function should to better addressed with customizable options that allow users to pick their preferred ways of receiving reminders.
Before
After
After
After
I first added a bell-shaped icon on the top left corner of the homepage for notification settings, and then within that setting page, users can choose to turn on and off in-app reminder, push notification, or email reminder based on their own preferences.Second Round of Testing
After making the above tweaks to my initial design along with some other small changes, I conducted the second round of usability testing among three new participants. The test script (click to open test script in new window) is a little different from the first round as it reflects some updates in design. Again, I gathered and analyzed the insights into the table below:
Participants brought up some helpful actionable insights, very reviewing, I managed to make the following updates to refine my design:
Further refine the notification settings to better meet personalized user needs
Not all subscriptions need a equal level of reminder. A participant mentioned that she only wanted to pay close attention to those subscriptions she weren't sure if she would keep or not. And for some other subscriptions that were regularly in use, reminders will be unnecessary. Therefore, a customized reminder setting for each subscription would be helpful for users to personalize their experience using our product. Also, another participant pointed out that it was a little unexpected to see a standalone notification icon on the top left corner of the homepage, where a profile icon would make more sense just as in many other apps.
Before
Create a new field for credit card or bank account info
A participant mentioned that she wanted to have some credit card info documented. She wanted to know which subscriptions will be impacted if one of the card is about to expire. Through only one participate had brought up this concern, I decided to take the suggestion as it's a easy-to-add but nice-to-have feature that can help to differentiate our product from the other subscription management apps by offering more thoughtful services. As a result, I added a new step to the "add new subscription" flow, where users can select from either a credit card or a bank account by entering the last 4 digits or give it a nickname for personal reference:
The new design nests notifications under settings, which better align with first-time users' expectation. It also allow users to turn email reminders and push notifications on and off individually.The Most Current Product
Going Forward
The two rounds of usability testing has been very helpful in refining WhatSub from its initial low-fidelity design to the way it is now. Originally our focus was on making the product a subscription management tool that keeps track of all reoccurring payments. While after talking to several potential users and having them tested out the prototypes, our focus shifted to the customizable notifications as it might be the most efficient way to help them avoid unnecessary spendings. Going forward, I'll conduct more rounds of usability testing and keep refining the product, as well as going over the findings from the last two tests to fix any remaining user issues in medium or low priorities.