Resume

Subscription Manager

Brief

Helcim's Subscription Manager allows merchants to create subscription plans and add subscribers to those plans, enabling them to receive automatic payments on a predetermined schedule.

Due to its unintuitive design, the existing subscription platform had been suffered from low usage and adoption, as well as accumulating a large number of bug reports and customer support requests.

I led the redesign end to end, and I have been continuly responsible for this product since May 2022.

Helcim's Subscription Manager allows merchants to create subscription plans and add subscribers to those plans, enabling them to receive automatic payments on a predetermined schedule.

Due to its unintuitive design, the existing subscription platform had been suffered from low usage and adoption, as well as accumulating a large number of bug reports and customer support requests.

I led the redesign end to end, and I have been continuly responsible for this product since May 2022.

Role

Solo Product Designer

Core responsibility

UX & UI Design

Product Strategy

Research

Usability Testing

UX & UI Design

Product Strategy

Research

Usability Testing

Team

1 Product Manager

1 UX writer

4 Developers

1 Product Manager

1 UX writer

4 Developers

Timeline

2 months

Impact

71%

Adoption Rate

88%

Task Success Rate

~50%↓

Support Calls

Users

Small to medium business owners (aka Merchants) who need to accept recurring billing, such as parking lot, yoga class, music school.

I want to easily manage my plans and subscribers so I can save time and focus on other more important things.

I want to easily create recurring plans for my product/service and add new subscribers so I can grow my business.

Problems

Problem

Merchants struggle with complex setup, lack of critical information, and the product's inability to adapt to diverse needs.

Through heuristic evaluation, 5 user interviews, and expert interviews conducted during the design sprint, we identified several issues. After filtering and consolidating the feedback, I identified three key problems

Problem #1

Difficulty in use and set-up

Merchants found the steps to get started complex and confusing, often requiring assistance from customer support. Aside from the frustration experienced by the customer, this put extra strain on the support team and increased operational costs for the company.

Problem #2

Lack of visibility damages merchant-customer trust

Merchants had limited visibility into essential information, such as how plans operated, upcoming events, billing cycles, and transaction statuses. This sometimes led to unintentional overcharging and other issues, damaging the merchant's relationship with their customers.

Problem #3

Failure to meet diverse merchant needs

Our current product did not adequately cater to the unique requirements of merchants from various industries. It lacked the comprehensive adaptability and customizability, necessary to fulfill their objectives.

Then, how might we?

How might we?

Solution #1

Streamline steps to reduce friction and match merchants' mental model

Solution #1

Streamline steps to reduce friction and match merchants' mental model

Solution #2

Improve visibility by maximizing the display of key information

Solution #2

Improve visibility by maximizing the display of key information

Solution #3

Develop a flexible system to cater to diverse merchant needs

Solution #3

Develop a flexible system to cater to diverse merchant needs

Problem

Interruptions in user flow and mismatched mental models led to frustration and confusion

Merchants faced frequent interruptions and had to switch between products, disrupting their workflow and causing confusion and frustration.
The previous system lacked integration and cohesion, resulting in a suboptimal user experience and a mismatch between the user flow and their mental model.

Merchants faced frequent interruptions and had to switch between products, disrupting their workflow and causing confusion and frustration.
The previous system lacked integration and cohesion, resulting in a suboptimal user experience and a mismatch between the user flow and their mental model.

Merchant: “Why do I need to go back and forth with so many products to complete such a simple task?”

Merchants need to go back and forth with 3 products to complete the flow

Solution

Make user flow logical, intuitive and align with users' mental modal

As a result, I have devised a new user flow with a straightforward objective: make it logical and intuitive. The aim is to enable users to complete all necessary tasks within the subscription manager tool itself, eliminating the need for constant switching products.

This process was later validated through usability testing with real users.

Now they can do everything in Subscription Manager in an intuitive way

Solution #1

Streamline steps to reduce friction and match merchants' mental model

Solution #1

Streamline steps to reduce friction and match merchants' mental model

Solution #2

Improve visibility by maximizing the display of key information

Solution #2

Improve visibility by maximizing the display of key information

Solution #3

Develop a flexible system to cater to diverse merchant needs

Solution #3

Develop a flexible system to cater to diverse merchant needs

Why important?

"Visibility of system status" is a key usability heuristic. Providing clear visibility helps users feel secure, guided, and prevents errors.
Usability testings revealed that merchants are particularly cautious with financial matters. They want to avoid accidentally overcharging and highly value their client relationships.

"Visibility of system status" is a key usability heuristic. Providing clear visibility helps users feel secure, guided, and prevents errors.
Usability testings revealed that merchants are particularly cautious with financial matters. They want to avoid accidentally overcharging and highly value their client relationships.

Solution:

To address this, I have devised a strategy to maximize the visualization of essential information.

Within the product context, this strategy entails:

To address this, I have devised a strategy to maximize the visualization of essential information.

Within the product context, this strategy entails:

Displaying merchants' configurations and a plan/subscriber summary prominently, allowing them to see exactly what they have created.

➡️ A plan/subscriber summary

Displaying merchants' configurations and a plan/subscriber summary prominently, allowing them to see exactly what they have created.

➡️ A plan/subscriber summary

Offering clear guidance on the next steps after plan creation.

➡️ A confirmation page with clear guidance

Offering clear guidance on the next steps after plan creation.

➡️ A confirmation page with clear guidance

Presenting subscribers' plan details, including subscription duration, charges, and timelines, in an easily understandable format.

➡️ A easy-to-understand detail view and a timeline

Presenting subscribers' plan details, including subscription duration, charges, and timelines, in an easily understandable format.

➡️ A easy-to-understand detail view and a timeline

Ensure that the status of subscribers is always clearly visible.

➡️ Precise status badges

Ensure that the status of subscribers is always clearly visible.

➡️ Precise status badges

Solution #1

Streamline steps to reduce friction and match merchants' mental model

Solution #1

Streamline steps to reduce friction and match merchants' mental model

Solution #2

Improve visibility by maximizing the display of key information

Solution #2

Improve visibility by maximizing the display of key information

Soluton #3

Develop a flexible system to cater to diverse merchant needs

Soluton #3

Develop a flexible system to cater to diverse merchant needs

The most challenging part of the project was developing a system that can adapt to the diverse needs of our user base. Through user interviews, I gained insight into the varying requirements of our merchants. Now, let me explain how I tackled these problems.

Example 1: Solve an unexpected user needs

Leverage the concept of “Component” and “Instance”, to adjust plan price for individual subscribers

Unexpected user need:

Merchants want the ability to set different prices for subscribers within the same plan.

While this may seem unexpected, our in-depth conversations with merchants have revealed the following reasons:

Merchants want the ability to set different prices for subscribers within the same plan.

While this may seem unexpected, our in-depth conversations with merchants have revealed the following reasons:

Solution:

To fulfill this need, I proposed implementing price overrides at the subscriber level.

This would allow merchants to modify the subscription price when adding a new subscriber to a plan. With this solution, merchants can:

To fulfill this need, I proposed implementing price overrides at the subscriber level.

This would allow merchants to modify the subscription price when adding a new subscriber to a plan. With this solution, merchants can:

How I arrived at my solution:

My inspiration came from the concept of "master component" and "instance" in Figma. These work together in a way that's similar to what we need. In Figma, a master component defines properties that instances inherit. Instances can then override these properties without affecting the master component. Similarly, a plan establishes the price and inherits it to subscriptions, where the price can be overridden without impacting the plan's price.

Example 2: An innovative feature

Extending the boundaries of the product with new concepts to meet the needs of diverse users, without complicating the system

Why build this?

User need

Users request a pricing model that is adaptable to different pricing requirements

Business need

As a product aiming for scalability, our objective is also to cater to a wide range of use cases and attract more users

Use cases:

Parking Lot

A daily parking plan with $10 per day

Yoga Class

3-month course for $300, billed when course start and every 3 months thereafter

Music School

Charging $100 per month, semester-based (4 months), with monthly billing

Solution:

Pricing

$______/every ____ unit

End of Term

Forever/ Expire

Term Length

# of billing cycles

When you apply:

A parking lot, $10/day ➡️ $10/day, Forever, with ∞ cycles
A yoga class, have a new 3-month course for $300, charged at the beginning of the course, every 3 months ➡️ $300/3 month, Forever, with ∞ cycles
A music school with piano lessons, $100/month, for every semester (4 months) , charge every month ➡️ $100/month, Expires after, 4 cycles

A parking lot, $10/day ➡️ $10/day, Forever, with ∞ cycles
A yoga class, have a new 3-month course for $300, charged at the beginning of the course, every 3 months ➡️ $300/3 month, Forever, with ∞ cycles
A music school with piano lessons, $100/month, for every semester (4 months) , charge every month ➡️ $100/month, Expires after, 4 cycles

This became an industry-leading feature that no other competitor had, which was in line with the company's business goal for this product: To make a product so good that people would want to pay a premium to use it.

Example 3: Restructure the foundation

Structure “Add-on” in a new way, so it can be reusable and flexible

What is “add-on”?

Take a phone bill as an example, a $45 unlimited text talk plan is a plan, and an extra $5 2GB data is an add-on.

What is “add-on”?

Take a phone bill as an example, a $45 unlimited text talk plan is a plan, and an extra $5 2GB data is an add-on.

Before:

Add-ons belonged to plans.

After:

I redesigned the add-ons to be independent of plans. They can now be added or attached to any plan, but they no longer exclusively belong to a specific plan.

Why?

Previously, add-ons were tied to individual plans, limiting scalability. If merchants had multiple plans with similar add-ons, they had to create the same add-ons multiple times.

Benefit:

This restructuring provides flexibility to merchants, as add-ons become universal rather than specific to a single plan.
By utilizing a reusable modal component, both new and existing subscribers can add add-ons, reducing front-end development efforts.

This restructuring provides flexibility to merchants, as add-ons become universal rather than specific to a single plan.
By utilizing a reusable modal component, both new and existing subscribers can add add-ons, reducing front-end development efforts.

Testing and Iterating

Testing & Iterating

However, there can always be cases where designers can't come up with the best solutions just by thinking carefully. This is why testing is so important.

One of the tasks we tested was asking merchants to see who had subscribed to one of their plans. Based on my and the team's understanding of the information architecture, I designed a flow like this:

However, there can always be cases where designers can't come up with the best solutions just by thinking carefully. This is why testing is so important.

One of the tasks we tested was asking merchants to see who had subscribed to one of their plans. Based on my and the team's understanding of the information architecture, I designed a flow like this:

User flow

Prototype of the flow

However, merchants were quite confused about the process and the task success rate was only around 40%.

Rationale:

It forced me to rethink the flow and understand why.

Initially, this flow was designed based on the information architecture that I understood. I put a lot of effort into aligning the design with the information architecture so that it could match the mental modal of the merchants.

It forced me to rethink the flow and understand why.

Design reflects the mental modal

Problems:

Here are some issues I observed during testing:

This doesn't necessarily mean that the original idea of designing based on IA is wrong, but it's just not enough, there are more factors to consider and we need to make tradeoffs.

New solution:

Reasons:

Filter is a better alternative as it is intuitive and not having navigation problem: Implementing an intuitive filter system simplifies subscriber searches for merchants. This enhances navigation ease by providing a streamlined and user-friendly way to locate specific plans.
Drawer size constraints: The limited space in the drawer poses challenges for adding buttons, especially with multiple actions or a potential menu sheet. These constraints could lead to usability issues, making it crucial to consider alternative design solutions.
Leveraging existing table design: To ensure a clean and efficient design, I propose utilizing the current subscriber list table. This approach consolidates all necessary actions in one place, eliminating the need for redundant views within the drawer and contributing to a more seamless user experience.
This works better for a very common use case: For merchants managing multiple subscriptions, the design focuses on ease of use by allowing them to perform price edits directly within the subscriber list view. This strategy minimizes friction, ensuring a convenient and time-saving method for efficient adjustments.

Reasons:

Filter is a better alternative as it is intuitive and not having navigation problem: Implementing an intuitive filter system simplifies subscriber searches for merchants. This enhances navigation ease by providing a streamlined and user-friendly way to locate specific plans.
Drawer size constraints: The limited space in the drawer poses challenges for adding buttons, especially with multiple actions or a potential menu sheet. These constraints could lead to usability issues, making it crucial to consider alternative design solutions.
Leveraging existing table design: To ensure a clean and efficient design, I propose utilizing the current subscriber list table. This approach consolidates all necessary actions in one place, eliminating the need for redundant views within the drawer and contributing to a more seamless user experience.
This works better for a very common use case: For merchants managing multiple subscriptions, the design focuses on ease of use by allowing them to perform price edits directly within the subscriber list view. This strategy minimizes friction, ensuring a convenient and time-saving method for efficient adjustments.