Improving Subscription Feature
Improving Subscription Feature

Improving Subscription Feature

Role

Product Designer

Description

Work Project

Teams

UX Writer, UI Illustrator, UX Researcher

Platform
Mobile AppDesktop
image

Background

Vision+ already has the “SKU denom” page where users can subscribe Vision+ Premium Package. However users encounter an excessive number of steps during the purchase process. This can lead to user frustration and in some cases, result in them abandoning their purchases. Additionally, users may encounter difficulties in accessing detailed package information.

Design Framework

image

Planning The Research

💡
Defining The Objective Goals
  1. Streamline the user flow touchpoint for simplicity
  2. Integrate package details into a single page, such as the SKU denom page
  3. Improve the accessibility of each page for easier navigation
✍️
Scoping
image

Defining Research Questions

There are several key areas we wanted to focus on in regards to the subscription flow. Users were interviewed based on three distinct themes, which are:

1. Ease of Access

Can users access the subscription fairly easily? Will there be any steps they perceive as redundant or confusing?

2. Information Display

Does users have enough information to be convinced to subscribe? Is there any information that is being displayed prominently enough?

3. Payment

Can users easily completes their subscription flow?

Conducting The Research

From In-Depth-Interview (IDI), we will understand what users likes and dislikes. We will also understand the purpose of subscribing the package. And the most important thing is we can get additional ideas from them to make purchasing subscribe package easier

Key Findings From Research

Based on the research and user interview, we have identified several pain points that we’ve grouped to some main categories

1️⃣
Numerous amount of ineffective steps that user needs to follow
image

Users often express frustration as they said :

“too many steps of purchasing a package, can some pages just merged in one page or a few pages can be removed?”

This issue may cause users to refrain from purchasing the premium package

2️⃣
User believes payment method can be removed, since it’s all integrated to Apple/Google Pay
image

Certainly, it appears that the user believes that “payment method” page can be removed because it’s already integrated with Apple/Google Pay. There might not be a necessity to retain a separate payment method. They seem to consider that Apple/Google Pay can effectively manage all payment transactions

3️⃣
Discomfort viewing a package due to the small package cards
image

While on the “Subscription” page, users encounter discomfort from the small interface size and its scattered appearance, which makes it challenging to view each packages available in Vision+.

Defining The Problem (Research Summary)

🗒️
Affinity Mapping

Based on the feedback, the common complaints are compiled as such (with the amount of users denoted for each complaint) :

image
image

User Journey Mapping

image

Design Opportunity

Based on our research and data collection, we pinpoint opportunities for our design utilizing the How Might We framework:”

How Might We?
  1. Make the flow journey is more simplified?
  2. Make it easier and clearer for users purchasing premium package in Vision+?
  3. Enhance the user interface for better accesibility?

User Flow

image

Major Design Iterations

1. Subscription Package

image

As users navigate the “subscription” page, they encounter discomfort due to small interface and its scattered layout. It's hard to tell one package from another on Vision+ because they all look too much alike.

Smoother, easier journey and interface to subscribe premium package

image

We updated the “subscription” page to make it simpler for users to see the premium package. The interface is now more informative and clearer. When users haven't tapped a package, it's in grayscale, but it switches to green when users tap on it.

2. See Package Detail

image

The “package detail” is unnecessary it should be combined into one page with the “subscription” page, considering that all payments are integrated with Google/Apple Pay. This setup requires users to go through excessive steps.

Simplify the user flow within the same page

image

Users can now access package details with just one tap, without being redirected to another page. We've simplified the process by integrating the detailed information page as a drawer within the “subscription” page.

3. Payment Method

image
  1. User requires to follow a cumbersome process to access “payment method” page
  2. “Payment method” page lacks a field for applying promo
  3. As there's only one payment method available, there's no need for a radio button selection

Streamlined the access of payment process

image
  1. Clicking the "continue" button now reveals the payment method page as a drawer, reducing the length of the payment process, and eliminating the need for the payment method option as it's seamlessly integrated with Google/Apple Pay
  2. The “promo field” has been integrated, enabling users to apply a promo or discount voucher

4. Transaction

image

On this page, the payment transaction details are not shown, and there's no option to redirect for checking payment status; instead, it prompts users with a "start watching" button

Merged the payment transaction detail and status within the same page

image

Incorporated a “payment status” and “transaction details” into a single page improves user accessibility and offers a more transparent method for users to review their transaction information.

Mobile App (Prototype)

👇🏻
Click here to play the prototype

Desktop Iteration

image
image

Desktop (Prototype)

👇🏻
Click the link to play the prototype

Key Takeaway

Reworking subscription feature brought its own set of challenges and lessons. Here are some key things my team and I learned:

1.⁠ ⁠Talking to Users is Key

Interviewing users helped us understand what they really wanted. For instance, we found out that users wanted more flexible subscription options, like monthly or yearly plans, such as monthly or yearly plans, which we promptly incorporated into our offerings

2.⁠ ⁠Balancing Business with Users

We had to find a balance between making money and making users happy. We made sure our subscription plans were fair and easy to understand, so users would want to sign up without feeling pressured. For example, we offered a free trial period to give users a chance to try out the service before committing to a subscription

These lessons have improved our subscription feature and taught us the importance of putting users first. We'll keep using these insights to make our app better for everyone

Thank You For Reading My Case Study 😊

image

Cameo Website

Back to homepage