2024 ・ Mobile ・ UI/UX design
The Battle Against Forgotten Subscriptions
A Design Journey with Subly
My Role
Solo designer
Duration
3.5 weeks
Collaborator
Gabriel Berard (Design mentor)
Research & Design Methods
Secondary research, user interview, persona, competitor research, user flows, wireframe, high-fidelity mockups, prototype, and usability testing
The Problem
42% of users unknowingly pay for forgotten subscriptions, while companies profit from this chaos—forgetfulness boosts their revenues up to 200%. (See resources)
The Mission
As the solo designer for Subly, I took on this challenge: How might we help users like John (needs automation) and Lena (wants privacy) conquer subscription chaos? (See personas)
The Twist
Initial usability tests revealed polarizing reactions and shattered many original design decisions:
Colorful UI split users ("Fun!" vs. "Overwhelming!")
Floating action button (FAB) went unnoticed
8 key iterations applied, from killing the FAB to one-click notifications. (See details)
The Impact
Post-iterations, the same test tasks saw:
~30% faster tasks completion
100% success rate for critical flows (vs. 87.5% initially)
Zero confusion on subscription types
My Learnings
The importance of continuous test and observation
Rooting design decisions in objectivity (Read more)
A Growing Challenge
From the secondary research, users’ struggles with managing subscriptions are not only significant but also poised to become increasingly severe and challenging.
42%
of users pay for subscriptions they’ve forgotten about. (More details in C+R Research)
It’s the average underestimation of monthly subscription spend.
2.5x
200%+
revenue boost for companies banking on user forgetfulness (According to economists at Stanford and Texas A&M.)
This fact isn’t just about wasted money—it’s a design failure. Users lack handy tools to track how subscriptions slip through the cracks.
Netflix: 17.99
Forgotten charges: 480
The Project Mandate
The challenge wasn’t just to solve user pain points—it was to do so while have:
Expand
User Base
German
Release
Comprehensive
View
Business Asks
Grow the User Base
Release in German Market: So ensure the app supports Germany seamlessly and consider any local preferences or regulations.
Maintain the Brand: Stay friendly and trustworthy.
Product Asks
Provide Comprehensive Subscription View: Users need to have a holistic view of their spending.
Enable Easy Unsubscribing
Alert the User Before Renewals
Users Struggle with Clashing Needs
While stats revealed how many users struggled, interviews uncovered why. I spoke to 4 users with a diverse background from both the US and Germany to gather in-depth thoughts on their subscription management habits, past experiences, and pain points. Interviews discover two opposing philosophies: Automation vs. Control
See complete Personas, Please check the full version.
My money, my rules.
Just handle it for me!
Automation
Control
Age
38
Occupation
Marketing Manager
Status
Married with two children
Location
Austin, Texas, USA
Bio
Busy dad, tech-savvy but overwhelmed.
Pain Points
Forgetfulness costs him hundreds yearly.
Hates "digging through emails to cancel."
Need for a comprehensive view of all his subscriptions in one place.
Goals
Auto-tracking
Auto-identify: To identify and unsubscribe from unnecessary or unused subscriptions.
Renewal alerts
Big picture: To have a clear overview of his subscription spending.
USER PERSONA ONE
John Anderson
USER PERSONA TWO
Lena Schmidt
Age
32
Occupation
Freelance Designer
Status
Single, lives in an apartment
Location
Berlin, Germany
Bio
Privacy & Security-focused freelancer.
Pain Points
Distrusts apps with bank access.
Frustrated with complicated bank or budget management apps.
Needs a reliable notification system to avoid unwanted charges beforehand.
Goals
Manual control
Privacy—Zero bank links
Clear notifications
Insights: To seek insights and comparisons to optimize her spending on subscriptions.
Simplicity: To have a simple and intuitive interface.
How might we build an app that works "automatic" to John but "hands-on" to Lena?
Why Are Apps Forcing Users to Choose
To learn from the existing design, I analyzed 4 top apps—Bobby, Whatssub, SubscriptionStopper, and Buddy, but found a striking divided when it turns to the addition of subscriptions:
3 apps demanded bank access, then auto-searching for subscriptions through transaction data.
Conversely, 1 app relied solely on requiring users to manually add all subscriptions.
None bridged the two..
Bobby
Whatssub
Subscription-
Stopper
Buddy
Link bank accounts & auto-search subscriptions
Leverage 3rd party API to optimize the bank linking process
Manually enter the subscriptions
Ability to delete/remove a subscription from the app
Ability to help really cancel a subscription on its side
Ability to set up the notifications
Offer users different classification schemes to view the subscriptions.
Provide the categorization
Provide the visualized categorization view
Provide the calendar view
List out the upcoming payments
Track the payment history
Have weekly total pay
Have monthly total pay
Have yearly total pay
Use brand logo or prime color to distinguish subscriptions
Provide some degree of customizations on a subscription
Provide some degree of “social proof”
Feature community tips of the subscription for users to reference
List commonly asked questions
Main operations (overview, delete, setup reminder, edit, filter, sort, etc) are within three steps
Click to See All
The Engineering Elephant in the Room
While I wasn’t privy to these apps’ internal debates, as a former engineer, I recognized the unspoken blocker: hybrid models demand 2x+ the engineering effort—a cost most teams cannot ignore.
Send queries;
Call 3rd-party APIs (Plaid or banks’);
Deserialize return data and display;
Custom addition UI;
Process backend logics and save to the database;
Display;
Low – Just consume endpoints. No need to build core logic.
High – Build & maintain everything
Speed to market & Easy to maintain
(API dependencies = less engineering).
Save 3rd-party services’ cost.
Bank Linking & Auto-search Subscriptions
Manually Adding & Updating Subscriptions
Tech Flow
Development
Overhead
Pros
The Invisible Cost Breakdown
Why Hybrid Pays for Itself
Yes, hybrid models cost more upfront. Now the focus becomes—How to get stakeholders’ support to move forward with the hybrid model?
Real life isn’t binary! With the analysis below, it’s not hard to conclude that—With the hybrid model, the additional engineering “cost” is actually market expansion infrastructure, because it caters to:
User Needs:
For John: Bank linking & Auto-search (Automation) = efficiency.
For Lena: Manually adding & updating (Manual) = trust.
For general users: Hybrid = choices (Psychology principle—Need for Autonomy).
Need for Autonomy (Deci & Ryan, Self-Determination Theory)—People crave volitional control over their actions. “When users dictate how they interact with a system, engagement deepens.” (Deci, 2000)
Business Impact:
For the business goal: Hybrid = broader user base.
For the German release: Hybrid = flexibility and better coverage.
A User-Centric Breakdown
From Insights to Action
Now it’s the time to capture the essential takeaways from the research and synthesis, setting a clear direction and prioritization for the design phase.
Design
Prioritizations
Insights
Users
Needs
Business
Goals
Stakeholder
Supports
1
Offer Hybrid Subscription Addition Methods
As discussed above, provide both bank-linking and manual addition ways for John's efficiency & Lena's privacy, align with business goals, and ensure flexibility.
4
Utilize Brand Logos + Colors
Display corresponding brand logo with its prime color for the subscription item, as graphic info is processed faster by the human brain than text, improving user recognition and interaction.
5
Show yearly spending totals
Provide a yearly summary of their total payments, encourage mindful management.
3
Ensure Simple and Intuitive Interactions
Limit core actions like adding, deleting, setup notification, etc to ≤3 steps.
2
Give Users a Comprehensive View, following the Information Architecture (IA) Principle of Multiple Classification
Provide calendar views to give a holistic picture of users’ monthly subscriptions and monitor upcoming payments.
Provide categorized analytics to offer users an in-depth view, aiding in better management and decision-making.
Principle of Multiple Classification—People have different ways of looking for information. Offering users several different classification schemes can help them browse and find the contents.
User Flows
There were four Red Routes identified and prioritized, addressing the most common and essential needs:
"Show me everything" (Comprehensive subscription view)
"Add this now" (Hybrid subscription addition)
"Warn me before they charge" (Notification setup)
"Let me escape" (1-click unsubscribe)
Manually find this subscription from the account transactions.
Start
End
Add this subscription into the dashboard.
Link this bank account to the app.
App auto searches all the transactions and update the subscription list.
Manually create a new subscription item and add into the dashboard.
Is this subscription charged through the bank account you have already linked to the app?
Is this subscription showed in the dashboard?
Do you want to link this bank account?
Does the app find this subscription?
No
Yes
No
Yes
Yes
No
Yes
No
Below, the Hybrid Subscription addition flow—designed to bend to user preferences, not force them.
(Key detail: The branch where auto-linking fails gracefully falls back to manual entry—critical for German users.)
Wireframe
Created wireframes to not only evaluate the core layout and structure but also verify that the design accommodates languages’ differences, ensuring a seamless experience for both English & Germany users at the very beginning.
How Tests Revealed Redesigns
With high-fidelity prototypes in hand, I ran 4 usability tests on 4 tasks (16 tasks total). The results revealed unexpected gaps between some of my assumptions and real user behavior. For examples:
Though 87.5% completion rate (14/16 tasks) sounded decent, I saw how users struggled.
Polarizing reactions exposed flawed assumptions (e.g., brand colors felt "fun" to some, "chaotic" to others).
Critical features going unnoticed (like the floating action button, ignored by 100% of testers).
Workarounds users invented (e.g., goto Calendar page to setup notification; Swiping subscription items despite no visual cues).
Edge cases users questioned (“How it gonna be like if more than 3 subscriptions charge on the same day?”).
The 8 Iterations That Mattered
The 8 key problems uncovered and the design iterations made to address them:
Killed the rainbow → Logos-only for clarity. (Direct to)
Notification toggles → One-click setup. (Direct to)
Buried FAB → Prominent top-right "Add". (Direct to)
Link badges → Auto vs. manual clarity. (Direct to)
Line-based calendar → Scalable reminders. (Direct to)
Calendar notifications → Dual-path setup. (Direct to)
High-contrast donut charts → Interactive reports. (Full version)
Reordered dialog actions → Priority to frequent tasks. (Full version)
BEFORE
AFTER
The Proof: Second Testing Round
Same tasks, iterated design:
100% success rate for critical flows (vs. 87.5% initially)
About 30% faster tasks completion
Zero confusion on subscription types
Breaking Down the Fixes
Below are the details how real behavior and observations reshaped the design:
Rethinking the Use of Branding/Prime Colors
The initial idea behind displaying each subscription's brand color was to:
Improve visual distinction
Add playful energy
However, tests revealed that this approach may not work as intended.
Observation 1—Subjective Reactions Split Users
Overall, people have subjective feelings and reactions to color, especially when used extensively. Some found the colorful design more appealing, while others felt overwhelming.
For inclusiveness, I’d like to avoid basing UIUX logic purely on subjective preferences.
BEFORE
Observation 2—Conceptual Confusion
More critically, there was noticeable confusion regarding the meaning of the brand colors. Some users mixed this concept with category colors and expected to assign the category color to it.
Observations also showed that when manually add a new subscription, many either didn’t notice this option to pick a color (also extra efforts) or ignored it due to unsure what it does.
Observation 3—German Market Amplified Issue
When users skipped the color selection during the addition of a new subscription, the app displayed an outlined item, some users were surprisingly see this difference, some assumed the outlined item indicated that it was selected—which is not the intended meaning.
This issue is likely to be more pronounced in German market, where many companies aren’t yet in the app’s database, requiring users to manually select logos and colors.
BEFORE
Frictions When Setting up the Notification
Both the product requirements and the research highlighted that setting up notifications is a vital and frequently used feature in the app. Making this operation easy to find and interact with is a priority.
Originally, setting reminders required:
Open subscription details
Find the notification settings
Configure alerts
As just one of many options within the details dialog, it’s easy for users to overlook or miss this important feature.
Observation—Universal Frustrating with This Process
2/4 users failed to complete the task within the reasonable amount of time; Many instinctively went to the Calendar page first—expecting to set alerts there.
BEFORE
Logo with Name + Removed Brand Color Assignment: For each subscription, retaining the brand logo & name is sufficient for users to quickly recognize and distinguish between. Based on test results, I removed the brand color feature, prioritizing objective, clarity and user understanding.
One-Click Notification Toggle: As standardizing the subscription item bar's color, introduced a toggle button that serves as a one-click shortcut to set a notification.
Toggling it on will set up a one day before the next billing date notification and trigger a toast message below. This:
Increased visibility: It’s immediately visible to users;
Reduced steps: 3-step process → 1 tap;
Immediate feedback: The toggle itself provides instant visual feedback;
Reusable like a plugin: Can be flexible and easy to reuse in different contexts, improves modular and reduces engineering efforts.
AFTER
Ineffective Use of the Floating Action Button
In the initial design, a floating action button (FAB) was introduced as a "quick add" shortcut, complementing:
Top-right "Add" button
Bottom "Not seeing your subscription?" section
Observation 1—0% Discovery Rate
Unfortunately, all users missed the FAB entirely. In contrast, users quickly noticed the “Add” function buttons on the top bar.
Observation 2—Redundancy Backfired
When I specifically pointed FAB out, they were confused, questioned how it differs from the "Add" button in the top right corner (in fact, no difference—the functionality was identical).
Participants also seemed show little enthusiasm for having the same function available in multiple places. It created decision paralysis rather than convenience in this case.
BEFORE
Better Differentiating Auto-Searched & Manually Added Subscriptions
The problem here is:
Auto-linked subscriptions update dynamically
Manually added ones require user maintenance
In current design, users have to sort and/or filter to distinguish between or check the subscription detail dialog for this info
An easier distinction would help users quickly identify which items they need to keep updating, can this be made more immediately visible?
Auto vs. Manual Clarity: To better differentiating between auto-searched and manually added subscriptions, a subtle yet effective element—a link badge positioned at the bottom right of the logo is introduced. Value immediate recognition and awareness.
Auto-linked and searched items: With subtle badge (bottom-right of logo)
Manual items: No badge = need user maintenance
Highlight top-right "Add": FAB is abandoned to avoid the confusion it caused. The primary method for adding subscriptions is now focused on the top right "Add" button (100% discovery rate in tests).
Leave the bottom helper section with clear action labels.
AFTER
Scalability and Consistency Issue of Calendar’s Number Indicator
On the Calendar page, the initial design used red dots to indicate due subscriptions (max 3 dots) this day.
There are two potential solutions to quickly address it. But both have drawbacks.
Observation—Scalability Fail
3/4 testers asked me "What if I have more than 3 subscriptions due? What it’s gonna show here?". This common scalability concern raised by users needs to be solved in design.
BEFORE
Attempt One
Displaying a number when there are more than three subscriptions on a day.
However, this breaks the visual consistency and creates a jarring effect for users ("Why some days have digits?").
Attempt Two
Displaying a numeric badge for all subscription days.
While this resolves the issue, it results in a cluttered calendar. These tiny badge digits also affect the legibility of the experience.
User Expectation for Setting Up Notifications on the Calendar Page
The original design of the Calendar page only displayed subscriptions on their billing dates. For the rest of dates, it just shows a message “No payment”.
Observation—Calendar as Control Center
The calendar wasn’t just a view—users saw it as a control center for managing. 2/4 users first navigated to the Calendar page when asked to set reminders.
BEFORE
AFTER
Calendar as Control Hub:
Interactive calendar dates—Displaying the next upcoming payments on days without any subscriptions, reused the subscription item, allowing users to set up notifications via the quick-access toggle button. This approach provides users an additional entry point to set up notifications directly from the Calendar page.
Minimized engineering efforts by reusing subscription item component.
Line-Based Indicator Introduced: Which proposed:
Scalability: It allows the calendar to efficiently scale from handling days with just a few subscriptions to those with many, without sacrificing visual clarity.
Visual Simplicity: The use of thin lines keeps the design clean and avoids overcrowding the calendar with numbers or other complex indicators.
Consistency: By utilizing a uniform system of lines, the calendar maintains a consistent visual language, making it easier for users to understand at a glance.
For days with 1 to 5 subscriptions, a corresponding number of thin lines is displayed beneath the date.
For days with more than 5 subscriptions, a unified block is displayed, signaling that there are several items on that day.
This is the number of the issue identified during usability testing.
Close
This is the corresponding iteration addressing the #1 issue.
Close
Learnings and Reflections
Throughout this project, I’ve gathered some key insights, both from research & design processes and the usability testing, which will continue to shape my approach and mindset to future works.
One interesting observation from usability testing was how naturally some participants tried to swipe the subscription item bar on the subscription page, despite no visual cues/signifier, to access actions like deleting or setting up notifications.
This insight has sparked my curiosity. If I had more time, I would further explore and test swipe gestures as a potential interaction, and investigate how it could streamline the user experience even further. This observation also highlights always leave room for discovery, and always being open to user behaviors even not align with initial assumptions.
The Importance of Continuous Testing and Observation
1.
Another significant takeaway is the importance of basing UIUX design decisions on objective reasons, such as principles, observations, data, and facts, rather than subjective preferences. A key example from this project was my original idea of using brand colors on subscription item bars, hoping it would help the app stand out. But during testing, it became clear that not everyone appreciated the abundance of colors—many users felt overwhelmed by the visual clutter.
Relying solely on subjective feelings or opinions can lead to inconsistent results, as opinions differ from person to person, and feelings can often be misleading. Objective decisions, on the other hand, help build more inclusive, user-centered designs that accommodate the target audience.
Rooting Design Decisions in Objectivity
2.
My understanding is to move beyond simply recognizing and acknowledging subjectivity. It’s essential to take a step further—to question why having that feeling, does it apply to everyone? By probing deeper behind an instinct (no matter what methods you choose to use), we can likely uncover objective insights that either support or challenge those initial reactions. This process could transform intuition into informed judgment. In doing so, design decisions become more thoughtful, combining the emotional resonance with the objective validation.
Of course, this doesn’t mean we should eliminate subjectivity and emotion from the design process. That’s neither realistic (we’re human! Emotions are what make us unique) nor desirable. I believe that the most successful designs and creations are those that connect with people to an emotional level, resonate with their feelings.
2024 ・ Mobile ・ UI/UX design ・ By Hengqing Wang
Projects
Projects
Revisit the Case Study pages on a larger screen
(with a 1024px screen width or more)
Revisit the Case Study pages on a larger screen
(with a 1024px screen width or more)