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.
200%+
Meanwhile,
Customers’ forgetfulness when it comes to subscriptions can boost companies’ revenues by up to 200%, according to economists at Stanford and Texas A&M.
So, products and services latches onto the subscription-based business model is still ballooning every year.
42%
More details in C+R Research
42% users have forgotten about a recurring monthly subscription(s) they were still paying for but no longer using.
2.5x
On average, users underestimated their monthly spend on subscriptions by 2.5x more than their original estimate. This oversight extends beyond just the cost, as many users lose track of the number of services they subscribe to and use.
Netflix: 17.99
Forgotten charges: 480
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.
The Project Mandate
The challenge wasn’t just to solve user pain points—it was to do so while have:
Business Asks
User Expansion: Try to broaden the audience, expand the user base to increase business.
German Market Release: The company will be expanding into the German market, so ensure the app supports Germany seamlessly and consider any local preferences or regulations.
Brand Consistency: Maintain the brand's friendly and trustworthy personality in the design.
Product Asks
Comprehensive Subscription View: Users need to see all their subscriptions in one place for a holistic view of their spending.
Unsubscribe Feature: Users should be able to unsubscribe from services to reduce unnecessary spending.
Auto-Renewal Notifications: Users want notifications before subscriptions auto-renew, allowing them to decide on renewals or not.
Comprehensive
View
German
Release
Expand
User Base
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
How might we build an app that works "automatic" to John but "hands-on" to Lena?
Just handle it for me!
Age
38
Occupation
Marketing Manager
Status
Married with two children
Location
Austin, Texas, USA
Bio
Busy dad, tech-savvy but overwhelmed. John is a busy marketing manager at a tech company, balancing work and family life. He subscribes to various services, from streaming platforms to professional tools, to keep his life running smoothly. However, his hectic schedule often leads him to forget about some subscriptions, resulting in unexpected charges.
Pain Points
Forgetting about subscriptions he signed up for, leading to unwanted charges.
Frustration with hidden or hard-to-find subscription details.
Hates "digging through emails to cancel."
Need for a comprehensive view of all his subscriptions in one place.
Goals
Auto-tracking: To automatically track all his subscriptions, prefers apps that integrate seamlessly with his bank accounts and credit cards.
Auto-identify: To identify and unsubscribe from unnecessary or unused subscriptions.
Big picture: To have a clear overview of his subscription spending.
Renewal alerts: To receive timely notifications before any auto-renewals.
Tech-savvy
Uses multiple devices
Determined
Busy
USER PERSONA ONE
John Anderson
USER PERSONA TWO
Lena Schmidt
Age
32
Occupation
Freelance Designer
Status
Single, lives in an apartment
Location
Berlin, Germany
Caring
Uses multiple devices
Prefers privacy and security
Cautious about sharing financial
information
Bio
Privacy & Security-focused freelancer. Lena is a freelance graphic designer who manages her finances carefully due to a variable income. She subscribes to several design tools and streaming services but is wary of apps having direct access to her bank accounts. She prefers to manually manage her subscriptions to ensure privacy and control over her data, and valuing the flexibility this method offers.
Pain Points
Tight budget need to careful management of subscriptions.
Concerned about privacy and data security, avoids linking bank accounts to apps.
Needs a reliable notification system to avoid unwanted charges beforehand.
Frustrated with complicated and time-consuming bank or budget management apps.
Goals
Manual entry: To manually add, update, and remove subscriptions easily.
Privacy: To maintain privacy and control over her financial data.
Clear notifications: To receive timely notifications and stay on top of any upcoming renewals.
Insights: To seek insights and comparisons to optimize her spending on subscriptions.
Simplicity: To have a simple and intuitive interface.
My money, my rules.
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
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.
Convenience: Automatically detects subscriptions from transaction records, saving time and effort for the user.
Privacy and Control: Users maintain full control over their financial data, with no need to share bank account information.
Real-Time Updates: Subscriptions are updated in real-time based on recent transactions, ensuring accuracy.
Flexibility: Allows users to add subscriptions that may not be detected by auto-search, or not from banks on the list, ensuring all subscriptions are tracked.
Customization: Users can tailor their subscription list according to their preferences, adding only what they consider relevant.
Limited Support for Bank Linking in German: The 3rd party tool used for bank linking—Plaid—has limited support in Germany. This limitation introduces significant friction in the linking process, as users may need to manually log into their bank accounts using the username and password, with no option for Single Sign-On (SSO).
Missing German Companies in Database: Some German companies information are not yet included in the database. As a result, users may need to choose or upload logos for these companies, which impacts the user experience.
Bank Linking & Auto-search Subscriptions
Manually Adding & Updating Subscriptions
Advantages
German Releasing Concerns
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 linking with auto-search and manual addition ways to cater to a broader range of user preferences, align with business goals, and ensure flexibility.
4
Utilize Brand Logos + Colors
Display corresponding brand logo with its prime color alongside the subscription item, as graphic information is processed faster by the human brain than text, improving user recognition and interaction.
5
Display Total Subscription Bills Paid Yearly
Provide users with a yearly summary of their total subscription payments, offering a big picture that can serve as a reminder of their overall spending and encourage more mindful management.
3
Ensure Simple and Intuitive Interactions
Reduce the steps needed for basic operations like adding, deleting, setup notification, etc to a maximum of three steps.
2
Give Users a Comprehensive View, following the Information Architecture (IA) Principle of Multiple Classification
Provide calendar views with notifications to give users a holistic picture of their monthly subscriptions and monitor upcoming payments.
Provide categorized analytics to offer users an in-depth view or insights, 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. (Direct to)
Reordered dialog actions → Priority to frequent tasks. (Direct to)
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
Lack of Clarity in Donut Chart Selection
In the original design of the Reports page, the selected segment of the donut chart was not visually distinct enough.
Observation—The Hidden Interactive Donut
Participants struggled to immediately recognize which segment was selected; And some did not realize the chart was clickable. This lack of clarity led to confusion and hindered interaction with the chart.
BEFORE
High-Contrast Donut Chart: The selected segment is now highlighted prominently. This visual cue ensured that 100% testers immediately identified which category is selected.
AFTER
Subscription Details Dialog Frequently Used Actions Visibility Snag
When interacted with the subscription details dialog during the testing, I realized users encountered some frictions because 10 items are competing, causing key actions—such as adjusting the notification time—to be easily overlooked, people have to put efforts to look for them.
BEFORE
To mitigate this:
Top—Frequent Actions: The frequently used action like Notification settings, was moved toward the top of the list.
Middle—Reference Info: Items that mainly provide information or are only defined once during the initial setup—like Add method, Category, and Payment cycle—were kept in the middle.
Bottom—Destructive Actions: The canceling the subscription were shifted to the bottom, close to the delete button.
AFTER
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)