Hello there, I'm Ting Yu,
a product designer who enjoys challenges
I am dedicated to simplifying complex problem and deliver a delightful user experience
LINE TV Homepage redesign
Optimizing the entire homepage layout and components aims to provide users with a smoother browsing experience of LINE TV content, while also increasing the visibility of platform offerings.
Simultaneously, a web grid system will be established within this project to ensure a more cohesive user experience in the future.
try it ☞ linetv.com
LINE TV Homepage redesign
My role
Collaborating closely with a Project Manager and a team of at least four developers. My responsibilities encompassed conducting competitor research, UX design, wireframes, developing a design system, high-fidelity UI designs, and leading kick-off meetings with the Product team. Additionally, I conducted UI reviews before the project's release.
Result
In the process, I need to establish effective communication channels with multiple teams, such as Marketing team. To make sure I understanding of their respective working processes and enables me to tailor the new design to address their concerns and meet their specific needs. The next step involves conducting user interviews to gain a deeper understanding of user browsing behavior. This information will serve as the basis for further optimizing the presentation format.
Time
2022 06 - 08
Team
Product design
PM
iOS / Android / web Front-end Team
Marketing Team
User-Growth Team
Data
Platform
Web（RWD）
Android app
iOS app
Project context
LINE TV is one of the top three video streaming platforms in Taiwan, with over 3 million active users per month on average.
The homepage is crucial for a video streaming platform, and through observation and research, we can see that many competitors in the market offer the ability to browse multiple dramas at the same time. This not only attracts attention but also provides a variety of options for users to find the dramas they love based on their preferences.
However, the layout on the homepage of LINE TV, displaying only six dramas within one theme row, resulted in limited choices for users.
The homepage has a total of 20 different themes. Based on data from May 2022, almost 50% of users only scroll through 3-4 themes, while nearly 20% of users scroll through 6-7 themes, with a clear decrease in engagement.
This project aims to
-
Enhance user choices through design, while increasing visibility of dramas.
-
Reevaluate existing design logic and address other pain points on the homepage simultaneously.
Current Problems
1
Low willingness to scroll down
Based on data of May 2022, only 20% of users browse through 6-7 rows of recommended content on the homepage, which means more than 2/3 of the recommended content on the homepage goes unexplored.
2
Limited dramas for each theme
Currently, both the App and Web versions limit the recommended content for each theme to only 6, which restricts users' choices within each theme.
3
What we found
Currently, the call-to-action (CTA) that has an average of 5-6 clicks per person per day and a daily click-through rate (CTR) of about 2.4% -2.6%. From this, we found that users want to see more themed content recommendations.
In addition, there is no clear UI standard for text size, rounding, color, etc. in different areas, resulting in visual confusion and weak brand impression.
Goal
Business goal / Increase content in one theme
-
Removing the limit on the number of displayed thumbnails that help increase the view ate.
-
Increasing the drama exposure for each recommendation row.
User goal / More choices
-
Users will have more choices and see more content in each theme.
-
Users can quickly grasp information about latest drama, make a watched list, and continue watching previously watched content.
Project goal /
Short-term: Increase exploration rate and theme exposure;
Long-term: Accurate personalized recommendation.
Short-term goals
-
Increase exploration rate for each theme row.
-
Present one or more theme recommendations on the limited vertical screen.
Long-term goals
-
Understand users' preferences for each theme recommendation, and improve the accuracy of personalized recommendation logic.
Design Challenge
1 . Clarify the goals of design
By focusing on the main axis and bringing in the insights from research, the goals can be achieved more clearly.
2 . Creating a consistent design for cross-device
Consider the possibilities of different devices and confirm the visual unity of the platform.
3 . Able to identify various themes of content immediately
Currently, the homepage includes various sections such as rankings, continue watching, and those general rows with various theme. The design should enable users to quickly identify the attributes of each area.
4 . Prioritize information
The information on thumbnails and cards should be integrated and sorted based on user needs or importance, ensuring that the most relevant information is readily accessible and effectively communicated.
Project Scope
The current project encompasses multiple components. First, after analyzing the functions and requirements of this interface, it is divided into three phases. This project will now share the process and content of Phase 1.
Optimization items for Phase 1 include:
Ranking list
The unique design emphasizes distinct content and provides clear visibility to the top ten dramas.
Thumbnail
To assist users in swiftly understanding drama information and determining whether it is worth watching.
Card
Users can scan detailed information in a short time and easily achieve their goals.
Theme row
Display multiple movies and dramas at the same time and present multiple themes in a limited height.
Design Process
This Phase is divided into 3 part, all completed with the following process:
1 . Discover - 0.5 week
-
Competitive analysis
-
Understand the current problems and define pain points.
-
Clarify design challenges
2 . Design - 1.5 week
-
ideation
-
wireframe & middle - fidelity
-
Interaction prototype
3 . Delivery - 1 week
-
Confirm implementation feasibility with developers through kick-off meetings.
-
Hi-fi mock up by phase
4 . UI Review - 1 week
-
Confirm that the completed interface matches the design.
-
Simulate various scenarios to ensure process are smooth.
Discover
Research & Competitive Analysis
Through competitive analysis, we attempted to study how video streaming platforms present crucial drama information. Furthermore, we analyzed the interface and user flow to identify valuable insights that can be leveraged for learning purposes, as well as potential flaws that should be avoided.
This project studies 3 streaming: Netflix, Disney+, and iQIyI. Through comparison of features, we clarified the information hierarchy and structure.
Netflix home page
iQIYI home page
Disney+ home page
Netflix & Disney+
On the homepage of Netflix and Disney+, thumbnails of dramas are displayed horizontally, allowing more different themes to be displayed in limited height. The information displayed is clear and concise, avoiding unnecessary repetition and helping users quickly grasp valuable insights.
when user hover Thumbnail on Netflix, partial drama clips are presented. As a similar insight from user interview of LINETV user, we understand that users are accustomed to watching partial drama clips to judge whether to continue watching. Therefore, presenting short videos can better help users to decide whether drama content is suitable for their preferences.
iQIYI
The dramas are classified by tags, and users can quickly filter drama content through tags. The statuses of dramas are clearly explained, making it easy for users to arrange their time.
Feature analyzation
Card design analyzation
What we found
1. Each individual topic row or column can feature more than 10 dramas for exploration.
2. Upon hovering, more detailed drama information will appear to assist users in determining if it aligns with their preferences.
3. Horizontal posters will reduce in height, allowing for the display of a greater number of topic rows or columns.
Ideation
Design solutions for thumbnails, general rows, and hot ranking lists were proposed based on identified pain points. Hand-drawn sketches are used to facilitate quick brainstorming and selection of the most suitable design for this project.
Thumbnail
Option 1
Emphasize LINE TV Only and
separate tags.
Pros：Quickly convey exclusive dramas and attract users to watch.
Cons：Information is segmented and the weighting is similar, resulting in an unbalanced visual composition.
Option 2
Emphasize the top 10 information.
Pros：Quickly receive the hot ranking list.
Card
Option 1
Emphasize textual information
Pros：Information-focused, simple message.
Cons：Limited ability to convey the atmosphere or tone of the drama.
Option 2
Showcase various forms of the main visual.
Pros：Clear distinction between the poster and text, making user easy to scan.
Option 3
Display partial clips or previews.
Pros：Allows users to preview the drama's content and get a sense of its quality.
Cons：Additional backend development required, which may be time-consuming.
Ideation in business perspective
LINE TV has a unique marketing campaign that user can watch dramas to earn LINE POINTS which can be used for mobile payment in Taiwan, making it a distinctive feature in the streaming platform market.
Currently, the only way for users to participate in this campaign is through the campaign page. To increase the exposure and encourage more user participation in the LINE POINTS campaign, the proposed design suggests adding a POINTS icon directly on drama posters for dramas that are part of the campaign. This way, while users browse dramas, they can quickly see which drama allow them to accumulate LINE POINTS.
LINE POINTS Icon
Design Solution
Thumbnail & Card
The original design lacked interview-based research, and the information hierarchy did not align with the actual needs of users. Through competitive analysis and user interviews, this project has integrated information priorities and arranged them systematically on the screen. Primary information is displayed in the thumbnail, while secondary items are presented in Card format upon hovering.
1
2
3
4
5
6
7
8
13
12
11
9
10
Thumbnail
1. TOP10 ：Emphasize the top ten dramas as users have a high interest in popular shows.
2. LINE POINTS：Highlight LINE POINTS, one of LINE TV's platform features, directly in the drama posters to encourage user participation in activities.
3. Drama Status：Allow users to choose the Completed Dramas / Currently Airing Dramas they want to watch based on their viewing preferences.
4. Categories：Speed up users' judgment of whether a drama aligns with their interests by categorizing them.
Card
5. Title of Drama
6. Publish year：The year can help users understand the drama's background and content information.
7. Episode Duration : Viewing time is crucial information for users, as they select dramas based on the time available to them.
8. Airing Schedule for Ongoing Dramas：For users who follow the latest episodes at fixed times, this helps them determine when to return to the platform for new episodes.
9. Preview Video (Clickable to Enter Drama Page)： If users become interested in a drama, they can watch a segment to decide if they want to continue viewing. Therefore, the card information provide a glimpse of the preview video content, saving users time in making judgments.
10. Drama Feature Tags：Assist users in understanding the content of the drama.
11. LINE POINTS Activities ： Users can check the details of the activities on the activity page.
12. Bookmark ：Users can directly save dramas they are interested in while browsing, making it convenient for future viewing.
13. Playback：Implies that users can click to play directly.
Old & New comparison
for Desktop web : Reorganized Information
Old
.png)
Thumbnail
Card
New
Thumbnail
Card
Problem:
-
Low value with high placement level, not meeting user needs.
-
Scattered functional areas.
-
Unnecessary repetition of information, such as the drama title.
Solution:
-
Categorize information and centralize functions to make it more intuitive.
-
Ensure a clear information priority sequence, allowing users to scan key information and access more detailed information by hovering the mouse.
-
The solution to display the LINE POINTS icon was put on hold by the project manager due to scheduling considerations.
General row
In the existing design, only six dramas are displayed in a single general row. To increase the exposure of dramas and provide more options, different design solutions are proposed.
Below are detailed explanations for each solution:
1 . Display more dramas within each theme：
-
Providing users with a greater variety of options to explore within each specific theme.
-
Carousel design treatment（App & Web）
-
More button to show all drama（Web）
-
2 . Presenting more dramas in the same height：
-
On desktop, "horizontal posters" are used to display more theme ,which we called "general rows" ,within a certain height, allowing users to see a greater amount of thematic content and increasing exposure.
3 . Motional design：
-
By allowing users to see the abundance of dramas at first glance on the platform, it creates a strong impression that there is a wealth of great content for them to enjoy.
Theme title
Thumbnail
1
2
Theme title
1
Detail of Drama
1. Title of Drama
2. Year, Duration
3. Information
1
More button to save screen space
To save screen space and display more themes, clicking the "More" button expands the screen to show all dramas related to that specific theme.
2
Hint for user to use carousel
Through buttons and semi-transparent drama posters, users can discover more dramas using the carousel.
Old & New comparison
for App & Mobile web : Carousel design treatment
App / Old
Problems:
-
The ability to change the content of a playlist was limited to just one theme, reducing the variety of playlists available.
-
Only a maximum of two different themes could be displayed on a single screen, limiting the diversity of available options.
App / New
Solution:
-
All sections are presented in the form of carousels, allowing users to quickly explore the content of each theme they are interested in.
-
At least three themes are visible, enhancing the user experience and offering a diverse selection of content.
CTA : Change the drama
In the old design, the "Refresh" button only displayed the "Latest Drama" theme.
for Desktop web : More button & Carousel design
Web / Old
.png)
Problems:
-
Only 6 dramas displayed in one theme, preventing further exploration.
Web / New
1
2
Solution:
-
Display more dramas through 2 solutions:
-
the "more" button
-
the use of carousels
-
for Desktop web :
Presenting more dramas in the same height & emotional design
Web / Old
Web / New
![[PC]首頁✅.png](https://static.wixstatic.com/media/2fd182_20a20537a5ba45efb8933196419c0326~mv2.png/v1/fill/w_368,h_409,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BPC%5D%E9%A6%96%E9%A0%81%E2%9C%85.png)
2
theme
rows
4
theme
rows
within same hight
Problems:
-
Vertical poster height requires more space for display.
-
Responsive web design (RWD) conversion feels rigid and lacks smooth transitions.
Solution:
-
To display more different themes within the same height, the posters are presented in a horizontal format.
-
Design new breakpoints to optimize the display for both desktop and mobile devices, ensuring a seamless user experience across different screen sizes.
Ranking list
In the original design, the thumbnails were small and only provided the drama's title.
In this optimization, the posters have been redesigned to be the same size as regular drama posters. Clear rankings are prominently displayed to enhance readability and provide a better user experience.
When a poster is expanded, detailed information will shown and the official trailer of the drama is played, giving users a better understanding of the content and helping them make informed decisions about whether to continue watching.
Web /
By expanding the drama and playing the trailer, the layout is transformed to guide users to watch the drama trailer. This aims to attract users to watch the drama.
App /
The design is consistent with the web design, maintaining the same visual style. Users can quickly swipe left or right to browse the top ten dramas.
Hot ranking
Ranking design
1
Hot ranking
Year, Drama Tag, Info
Play, My list
2
Highlight the selected drama
1
Effectively convey information
Enlarge the drama posters for a clear presentation, complemented by numerical values to effectively convey information.
2
Quick determination
Play the trailer of the drama directly, allowing users to watch a portion of the content to quickly determine whether to continue viewing it.
Old & New comparison
for App & Mobile web : Highlight the important information
App / Old
Problems:
-
The drama poster thumbnails are small, making it difficult for users to understand the drama's actors and style based on them.
-
Apart from the ranking, there is no other relevant information available to assist users in understanding the drama.
App / New
Solution:
-
Enlarge the numerical scale to allow users to intuitively grasp the ranking order.
for Desktop web : Various designs for easily find
Web / Old
Problems:
-
Inconsistency in design guidelines.
-
Lack of RWD design, disregarding different screen sizes.
-
Lack of consistency in information content between platforms and the app.
Web / New
Solution:
-
Enlarge the drama poster thumbnails to ensure that the drama's style and actors are presented more clearly.
-
Display characteristic tags to provide a quick understanding of the drama.
Interaction prototype
To ensure the development team has a clear understanding of the interaction elements in the ranking list, it is beneficial to create a prototype that demonstrates the expanding animation, hover effects, and smooth transitions.
By visually displaying these interactive features, it minimizes communication gaps and enhances the efficiency of the workflow.
Final Design
try it ☞ linetv.com
1
Clear differentiation
Specially designed to differentiate from the general row, with a focus on numerical ranking.
When expanded, users can directly view a wide area featuring partial clips, allowing them to quickly get the drama's style.
2
Easy browsing
Creating a better organization and prioritization of information on the homepage. This includes Thumbnail, Theme row, and the information cards displayed upon hovering.
Additionally, user can manage favorite dramas easily whether in hover state or viewing the complete playlist.
3
Abundance of options
"Swipe " and "view more content" options to solve the limitations of dramas.This enables users to explore a wider selection of dramas.
After exploring one row, users can swipe down to discover more themes.
Outcome
The original LINETV homepage could only display six dramas under each theme, resulting in limited exposure to platform content and a small selection of dramas available for exploration by users. Additionally, there was no well-organized information hierarchy, leading to difficulties for users in finding and accessing relevant content effectively.
This project aimed to optimize the presentation of information and design on the homepage.
Specifically, improvements were made to enhance user exploration and ensure that the information provided is helpful and valuable to users :
1. Clear differentiation
Clearly distinguish various content sections on the homepage, enabling users to swiftly navigate and find relevant information.
2.Easy browsing
Creating a better organization and prioritization of information on the homepage. This includes Thumbnail, Theme row, and the information cards displayed upon hovering. In the information card and ranking list, display a preview trailer section to provide more drama details, enabling users to easily select dramas they interested.
3.Abundance of options
Enhancing the platform's content exposure by allowing more than six dramas to be showcased under each theme.This enables users to explore a wider selection of dramas. effortlessly explore and find what they are looking for, leading to higher user retention.
Adjust the vertical thumbnails to be presented horizontally. With this change, more diverse thematic content can be displayed within the same height on the screen.
AB testing result
In the Theme row design, various solutions such as "swipe left and right" and "view more content" were proposed and implemented on both the Web and app platforms.
After the actual launch, AB testing was conducted to track user exploration rates and click-through rates on both platforms. The following are the observed data results:
1. Returned to their normal average after 2 weeks both
In the first two weeks after the launch, there was a slight decrease in click-through rates and exploration rates on Web & App both. This suggests that users needed some time to adjust to the new version and adapt their usage habits. However, after approximately two weeks, the data showed a return to normal levels.
2. An increase in the exploration rate on App
App performed showed better result, with the user exploration rate increasing from 0.1% to 0.3% compared to the old design.
This indicates that users on the mobile version are more accustomed to scrolling behavior, and adjusting the display format has indeed made exploration more convenient for them.
Furthermore, Android users have a higher rate of right swiping compared to iOS users, while iOS users have a higher rate of downward scrolling compared to Android users.
3. No significant improvement of viewing time
The new design has led to an increase in exploration rate and drama exposure, but there has been no significant increase in viewing time as a result.
Summary : Content is the key
For web users, despite offering two different ways to display more dramas in the new interface, there was no significant difference in actual usage. In the future, further research can be conducted to delve deeper into web user behavior and explore additional diverse solutions.
Regarding the app, while there was an increase in exploration intention, there was no significant growth in actual drama viewership.
This indicates that on video streaming platforms, while interface improvements can assist users in smoother navigation, the content remains a crucial factor in attracting users to actually watch the content.
Next Step
There is an expectation to further investigate the points of concern. The following are recommended steps for implementation:
1. Interviews for App Users
In the past, user interviews were conducted for television device users (refer to the TV User Interview Project), resulting in valuable insights. It is hoped that there will be an opportunity to interview app users to gain a practical understanding of the usage scenarios and habits of LINE TV users. This will help identify pain points and opportunities for improvement based on real-world usage.
2.Market Research to Understand Trends
Understanding trends in popular dramas provides insight into audience preferences and demands. This assists the company in accurately procuring drama content to ensure the platform offers users topics, actors, and storylines they are interested in, thereby increasing user engagement with the platform. Additionally, it allows for enhanced marketing of current popular dramas, enabling the formulation of more precise strategies to inform users about LINE TV's offerings.
By employing a combination of interviews and market research, a more comprehensive understanding of LINE TV users' needs can be attained, facilitating the precise optimization of content and products to enhance their appeal and competitiveness in the market.