Product Designer
Work Project
UX Writer, UI Illustrator, UX Researcher
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
Planning The Research
- Streamline the user flow touchpoint for simplicity
- Integrate package details into a single page, such as the SKU denom page
- Improve the accessibility of each page for easier navigation
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
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
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
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)
Based on the feedback, the common complaints are compiled as such (with the amount of users denoted for each complaint) :
User Journey Mapping
Design Opportunity
Based on our research and data collection, we pinpoint opportunities for our design utilizing the How Might We framework:”
- Make the flow journey is more simplified?
- Make it easier and clearer for users purchasing premium package in Vision+?
- Enhance the user interface for better accesibility?
User Flow
Major Design Iterations
1. Subscription Package
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
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
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
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
- User requires to follow a cumbersome process to access “payment method” page
- “Payment method” page lacks a field for applying promo
- As there's only one payment method available, there's no need for a radio button selection
Streamlined the access of payment process
- 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
- The “promo field” has been integrated, enabling users to apply a promo or discount voucher
4. Transaction
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
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)
Desktop Iteration
Desktop (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 😊
Cameo Website
Back to homepage