Redesign VIP Subscribe Page @ LINE TV

Project Overview

Redesigned the entire solution page interface.

Overview

LINE TV is a subsidiary of LINE, a South Korean subsidiary of NAVER, and a mobile video streaming platform launched by LINE in Taiwan. Users can watch TV dramas, movies, variety shows, cartoons, and other online video content through various applications such as iOS, Android, web, and TV.

In the OTT video industry, converting users into paid subscribers is one of the key focuses. This project involves a full-page UI redesign for the paid subscription page and optimization of the subscription process within the product. As the company shifts its goals, the objective is to gradually convert existing free viewers (AVOD) into paid subscription users (SVOD), with the subscription plan page playing a significant role during this transition.

Challenge

LINE TV VIP membership operates on a subscription basis, featuring a relatively higher price and an auto-renewal system. This setup raises the barrier for users to make payments. In a context where content access isn't limited, the goal is to provide users with enough information about the benefits of upgrading through interface and visual presentation and encourage them to subscribe.

Additionally, the existing page, due to a lack of optimization over time, is no longer suitable to support the marketing team's flexible pricing operations.

Goal

The objectives of this SVOD plan include:

Inform users about the benefits and subscription system, ensuring a sense of security when subscribing.
Enhance the marketing appeal of the existing plan page, making it more engaging to capture users' attention.
Standardize the design across different devices to ensure visual and behavioral consistency and easier maintenance.
Incorporate more interactivity and feedback to streamline the user purchasing process.
Improve customer service feedback related to payment issues, such as helping users with purchase procedures and resolving account login errors.

My Role

Research, Wireframe, UI Mockup

Design Process

Observation

Before delving into the design process, we started by observing and analyzing the existing interface.

👇🏻

Upon entering this page, the first thing users see is a text table. The visual layout is scattered, and there is no clear CTA.

The purchase section requires users to scroll down to see it in its entirety. Additionally, the "best value plan" is only visible after swiping to the left.

The purchase CTA area is partially obscured by the Home Indicator, and the clickable area (highlighted in green) is too small. Observations show that most users tend to click on the entire plan block, especially the calendar image.

🔍 Take a closer look at the card.

👇🏻

The A/B testing revealed that the most critical information, which is the pricing details, was not prominently highlighted. The price and duration also lacked clear differentiation in font size.

The visual focus on the card was primarily occupied by the calendar icon illustration, which is not the most critical information and is also non-clickable.

Interestingly, the only clickable area on the payment card, which should be the primary focus, had the smallest visual presence.

For the annual subscription plan, there was an overload of emphasized information, and the promotional text was too small, requiring continuous adjustments in the available white space.

Competitive Analysis

In addition to examining the original interface, we also referenced other competitors and various subscription interfaces. We conducted practical observations to understand the underlying reasons.

The main areas of research for this project included:

The hierarchy of information presentation on subscription plan cards, such as pricing, copy, discounts, and price comparisons.
The arrangement of subscription plan cards (vertical or horizontal) and the number of clicks required for making a purchase.
The existing subscription plan page appeared too serious, which didn't align with the content-focused nature of the product. Creating more prominent slots for content was a demand we received from marketing and subscription teams, with the aim of stimulating user subscription desires.
Ultimately, we focused on the core concept of "helping users make choices and enabling them to subscribe with confidence" rather than forcing users to select one specific plan.

Design Ideation

Section 1：Banner

Banner Purpose:

Defining the purpose of the banner, whether it's for displaying compelling visuals related to dramas or promoting periodic marketing activities.
Banner Size: Balancing the desire for a visually striking large banner with the need to ensure that on smaller mobile screens, it doesn't push the subscription plan cards out of view, maintaining the visual focus on the plan cards.
Clickability: Considering the number of links and interactions within the banner and how it affects development and user attention. Too many links can make both development and user experience complex.
Maintenance: Ensuring the ongoing effectiveness and visual quality of the banner requires collaboration across departments. This includes specifying design requirements and managing back-end image changes to maintain consistency.

The visual emphasis is on black, but it does not align with the current brand guidelines.

Continue using existing assets, but unnecessary text may divert attention from the main focus.

From the user's perspective, it may seem clickable, but the purpose of the landing page is not to promote dramas.

A large image has a strong visual impact and attracts attention. However, on smaller screens, it may occupy too much space.

In the end, I tried placing the cards directly on top of the visual. This not only addressed the challenges of flat design and the white background specification that could make the cards unclear but also saved space, resulting in a simpler banner.

Section 2：Plan Blocks

The plan blocks are a crucial component of this page, and several discussions took place regarding gestures, layout, and visuals:

CTA Buttons: The decision to include CTA buttons to make the page's purpose clearer, even though it might increase the number of clicks.
Hierarchy of Plan Block Content: Determining what information to provide and which information is most critical for users.
UI Layout: Deciding whether to use a horizontal or vertical arrangement, considering different device sizes and text formatting.
Providing Information for Comparison: Considerations for offering users information that helps them make comparisons, such as converting plans into monthly costs.

Without CTA button:

One click triggers the APP STORE scan.
The layout is flatter, allowing more information to be visible at a glance.
Promoting both monthly and yearly plans on this page simultaneously could confuse users when additional sales information is introduced.

With CTA button:

Visuals make the page's objective clear.
Each subscription plan can have dedicated sales copy.
After team discussions, we found that this layout offers greater marketing flexibility in future operations. For instance, more marketing copy can be added to the CTA button, and this layout avoids excessive promotion of a single plan."

Exploring Various Layouts

The UI layouts for each section underwent numerous discussions and feedback collection. In the end, there were many potential layouts to consider. However, due to development constraints, some of the initially designed sections were not implemented.

Final Version

Maintaining a Consistent Experience Across iPad, iOS, and Android

This project had to ensure a consistent user experience on iOS, Android, and iPadOS devices.

Product's Other Purchase Entry Points:

Key Learning：

✅

While this redesign didn't introduce significant changes to the overall process, we invested a lot of time in discussing UI details. We realized that even the smallest details can affect user decision-making. Therefore, in this redesign, we focused on not only the visual aspect but also the underlying reasons for each interface design. This approach not only made our design more robust but also provided a clear goal for future adjustments and optimizations.

Conclusion：

✅

This redesign received special recognition at the official Apple OTT subscription seminar on July 5, 2019, for its successful integration of video content and user experience. We received valuable feedback on that day, which we continue to use for ongoing improvements in the user experience for subscribers.

🙇🏻‍♀️ Thanks For Watching！

Back to All Projects

🔗

About