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
Player - New feature & redesign
To enhance the functionality of skipping intros and outros, as well as implementing a thumbnail scrubbing feature, we have restructured the iOS & Android app player. We conducted a comprehensive overview of all functions in player and established an icon system for streamlined visual maintenance across all platforms, all while accelerating workflow efficiency.
try it ☞
Player - New feature & redesign
My role
Player is a crucial feature of the video streaming platform, with a broad impact that goes beyond just playing dramas. It also involves incorporating advertisements, handling different membership privileges. Therefore, requiring cross-departmental communication.
Throughout this project, I had the opportunity to collaborate with various teams, including PM, iOS and Android engineers, QA engineers, AVOD (Advertising Video on Demand) team for unpaid users, and SVOD (Subscription Video on Demand) team for paid members. As a UI/UX designer, I actively provided my insights, understood the requirements from different teams, and worked towards finding the best solutions to meet the needs of all stakeholders.
My responsibilities included conducting competitor analysis, UX design, wireframe creation, icon integration, screen design, Hi-fi design, and release design to engineers. Finally, I will be involved in the final UI review to ensure the product is accurately portrayed according to the design vision.
Result
In response to user feedback, this project successfully added new features : "Skip Intro/Outro" and optimized the crucial interface, the player. The implementation was successful on both iOS and Android systems.
The design approach in this project placed a strong emphasis on enhancing the user experience, with a focus on three core principles:
-
Intuitive and straightforward operation.
-
Clear and singular functionality.
-
Consistent visual guidelines.
As a result, the player interface has higher user satisfaction and minimizes user errors and confusion.
This project provided an opportunity to reorganize LINE TV's design language and streamline icon design logic.The outcome has led to a more efficient design process moving forward, significantly cutting down on time. Additionally, the system facilitates smoother collaboration among multiple designers. Being a part of the implementation of the design system for this project was truly rewarding. It not only fasten the design process but also enhanced the user experience.
Time
2022 05 - 08
Team
Product design
PM
iOS / Android Team
Content Team
Maketing Team
Data
Platform
Android app、iOS app、TV
Project context
In a video streaming platform, the player is one of the primary features used by users. The existing player functionality has been online for over two years without optimization, and users have expressed their desire to skip intros and outros to watch more content within a limited time. In response to user's feedback and habits, this project focuses on player optimization and the addition/removal of features to ensure a smoother user experience on LINE TV.
Currently, the design of the App's player has several issues, limiting its functionality and even affecting the viewing experience. The goal of this project was not only to add new features but also to address the existing issues.
Current Problems
1
Pause once click
the player was set to "tap to pause video," but users may attempt to use other features instead of pausing the video.
Additionally, the player controls would immediately hide once any interaction occurred, forcing users to click once again to access other features.
The current assumption is that this logic was implemented to prioritize ad visibility, sacrificing user experience and leading to the following issues:
-
Users need to constantly go back and forth to access control options.
-
Inability to access desired features while the video is playing.
-
Conflicts with one-time actions, as clicking simultaneously pauses the video.
2
Disorganized & hidden Function
The current player interface exhibits a disorganized presentation of numerous functions, leading to user confusion. Specifically, the controls for brightness and volume lack clarity, leaving users to rely on guesswork when attempting to utilize these features.
1
AD display once user touch screen, which disturbing user experience
2
Icons without consistent system.
2
Hidden function cause confusion.
Goal
User goal /access functionalities quickly and conveniently
- To enable users to select their desired options and settings while watching content, enhancing their overall viewing experience.
Project goal /
Short-term：Intuitive usage and easy addition of features
- Improve the intuitiveness of the Player controls to enhance usability and accommodate future feature additions.
Long-term ：Guiding towards becoming a VIP
- Successfully launch new features that attract users to become members or VIPs.
Design Challenge
1 . Design with marketing benefits in mind.
Display overlay ads without interrupting the viewing experience.
2 . Display overlay ads without interrupting the viewing experience.
Designing a unified player for both AVOD (registered members) and VIP users.
3 . Clearly express the hierarchy of displayed functionalities.
The player UI distinguishes between primary and secondary functionalities with a clear hierarchy while also providing quick access to for actions like fast-forward, adjusting brightness, and volume control.
Project Scope
This project focuses on optimizing the player, taking stock of existing features, and conducting analysis to add or remove relevant functionalities based on requirements.
The following are the design objectives for this project :
New feature
"Skip Intro/Outro" , allowing users to watch more of the drama within a limited timeframe
Player Optimization
Designed to be more user-friendly, allowing users to operate it intuitively.
Design Process
This project involves optimizing existing functionalities and adding a skip intro/outro feature. The design process is completed following the steps below:
1 . Discover - 2 week
-
Competitive analysis.
-
Explore skip intro/outro functionality.
-
Research on various player functionalities.
-
-
Assess player features and identify existing issues, defining pain points.
-
Clarify design challenges.
2 . Design - 1.5 week
-
ideation
-
wireframe & low - fidelity
-
Hi-fi mock up
3 . Delivery - 1 week
-
Confirm the feasibility of implementation through a Kick-off meeting with developers and Project Managers.
4 . UI Review - 2 week
-
Verify that the final screens align with the design.
-
Simulate various scenarios to ensure a smooth user flow.
Discover
Research & Competitive Analysis
For this project, we will conduct research on various video streaming platforms' players, including Netflix, Disney+, IQiyi, YouTube, KKTV, and Amazon. The two main aspects of study will be "Skipping Intro/Outro" and "Player contorller."
As the player needs to cater to different user identities, we will also include a research component focusing on the advertising display logic for AVOD users. Understanding how advertisements are shown to AVOD users will be an essential aspect of the study. This comprehensive research approach will help us design a player that meets the diverse needs of various user types and optimizes the user experience across the platform.
By actively using and interacting with the player functionalities, we will gain insights into the logic of each feature and conduct a detailed analysis of their respective advantages and drawbacks.
Skipping Intro/Outro
video streaming platforms on the market almost universally provide the "skip intro/outro" service. According to official statements from Netflix, their "skip intro" feature is used over 136 million times per day (approximately by 200 million users). This data suggests that users of streaming platforms frequently utilize this functionality.
For the skip intro/outro feature competitive analysis, we will use the following examples from three platforms:
Disney+
1
Skipping the outro on Disney displays detailed information to help users learn more about the next episode.
Small view for the ending song, offering option for user to keep in this episode.
IQYI
2
Skip the outro of IQYI using the progress bar to indicate when the next episode will automatically start.
Netflix
3
The 'Skip Intro' button on Netflix will remain visible until the introduction to the end.
What we found
Based on the competitive analysis, we have identified some common pain points regarding the skip intro/outro feature:
1. Anxious Countdown:
The countdown timer to skip the intro/outro segment is too fast, making users feel rushed and pressured to act quickly, which can negatively impact their viewing experience.
2. Inability to Repeat or Instantly Use the Feature:
Some platforms may not allow users to repeat the skip intro/outro action, or there might be a delay before the option becomes available again. This limitation can be frustrating for users who want to skip the segment multiple times or access the feature immediately.
Player & Advertising
Through research and analysis of various competitor's players, it's evident that the common primary functionalities are "play" and "pause.", that always display in the main position. While displaying time is also a necessary function, the presentation methods vary across different platforms. By examining the differences in services and the placement of functionalities, we can gain insights into each brand's focus and strategies. Therefore, when designing a player, it's essential to consider the company's values and reinforce the brand identity.
Regarding player advertisements, the content can be broadly categorized as "external ads" or "internal drama recommendations" within the platform. It's preferable to provide advertisements not related to dramas, because user are watching drama in the player already that they don't need another recommendation.
By taking these factors into account, the design can align with all platform of LINE TV, emphasize the brand identity, and enhance the overall user experience.
After actual operation screen, the analysis process is as follows:
Step 1
Competitor Feature Inventory
Utilize a table to consolidate records of actual features, presentation methods, and usage processes.
Step 2
Competitive Analysis of Strengths and Weaknesses
Summarize the results of the competitive analysis, and use this table to organize the strengths and weaknesses of the competitors
Step 3
LINE TV Function Analysis and Optimization Directions
After identifying the shortcomings in the functionality, apply them to LINE TV's own product and propose optimization recommendations and implementation directions.
What we found
1. Standardizing the function icons can better convey a consistent brand identity.
2. Customize services and features based on different business objectives.
Netflix
1
2
3
KKTV
1
2
3
3
Disney+
1
2
3
2
KKTV/ AD
4
2
Player Research
It can be observed that various brands have different designs and placements for both primary and secondary functions, which are related to brand strategy.
1
Currently, the common primary functions of media players are 'play' and 'pause,' typically positioned prominently in the center.
2
displaying time is also a necessary function, there are different ways to present it, such as showing remaining time or time already watched.
3
Secondary functions are positioned either at the top or bottom of the screen with a standardized display format, allowing users to quickly understand each function, e.g. speed, episode and subtitle.
4
The content of advertisements in the media player can be broadly categorized as external ads or platform-recommended internal content. It is advisable to provide users with advance notification of advertisements.
Ideation
In the process of designing the player, we diligently explored various combinations, with a strong emphasis on optimizing readability and ensuring a friendly user experience. Our primary goal was to identify the most effective solution that would not only be visually appealing but also easy for users to navigate and understand intuitively.
Based on the Skip intro/outro feature and optimizing player feature, we have established specific directions for each :
Skip intro/outro feature:
-
Utilize dynamic text instead of a countdown for seconds, to prompt users about the autoplay feature.
-
All functionalities can be easily accessed and used repeatedly.
Optimizing player feature:
-
The functionality design prioritizes user convenience, ensuring quick recognition and easy access to relevant features.
-
Clearly differentiate between SVOD and AVOD user privileges, guiding AVOD users towards paid subscriptions.
-
Maintain visual consistency across different devices to strengthen brand identity and user experience.
Explorations - Skip intro
Option 1
Alongside the original features
Option 2
Consolidating the original features
Pros : All functions are displayed in a linear layout, making it simple and straightforward for users to understand.
Cons : Users' decision-making time may increase, leading to higher interaction costs.
Pros : Users can easily focus on the skip intro/outro
Cons : May require users to learn the icon representations.
Option 3
Centering buttons to emphasize
Pros : Clear emphasis on primary functionalities
Cons : not align with the existing LINE TV guidelines or standards.
Explorations - Tool bar
Option 1 text
Pros : Consistent visual style
Cons : More effort required to read compared to using icons.
Option 2 icon
Pros : A simple interface design
Cons : Users may need to learn the meaning of icons.
Option 3 text + icon
Pros : Clear information, facilitating quick decision-making.
Cons : The interface may appear crowded.
Explorations - Volume & Brightness
Option 1
Left half aligns to the center.
Option 2
Icons display corresponding values.
Option 3
emphasizes values
Pros : Wide operational range, easy to use.
Cons : Numeric values may be less legible on the screen.
Pros : Icon states change with brightness level, creating a strong sense of interaction.
Cons : Operations may obstruct the icons.
Pros：Width bar is prominent and clear.
Cons：The style does not conform to the guidelines
Ideation in business perspective
With previously version, the player design triggered ads immediately once touching the screen, conflicted with the user experience and disrupted the user flow.There might be various purposes for users to interact with the screen, including unintentional touches. Under this logic, displaying an ad directly would adversely affect the user experience, so that we recommended to remove this feature.
However, the ads are considered a necessary revenue source from the company's perspective. Removing them without any alternative plan would be a concern for the Advertising team.Therefore, after discussions with the Advertising team and considering the business perspective, I propose a new design solution: "When the pause function is activated, display 'carousel' ads."
With the old version, advertising team could only sell a single ad within one touch. Through this optimized design, multiple ads can now be shown in one frame, facilitating ad sales. Additionally, to maintain a clean layout, external and internal ads are integrated, with a priority order set within the carousel ads: external ads take precedence, followed by internal ads after the external ones have been displayed.
This design not only enhances the user experience but also provides more advertising options for Advertising team.
The close icon is the sole method for closing ads, ensuring that accidental closures are avoided.
AD will change every 15 mins that can offer market team different source to sell.
Logo / image of customer
AD title
CTA 'Let's GO'
Design solution - New feature
New Feature - Skip Intro & Outro and Thumbnail Scrubbing
The main idea of Skip intro and outro :
1. Skip irrelevant repeated information
2. Create an inviting atmosphere for video watching by display skip feature after 2 seconds enter the show.
-
Raise awareness for users that they have entered the opening credits and can use the skip function.
-
Automatically disappear after 5 seconds, providing ample time for use while ensuring it doesn't disturb the viewing experience.
-
Use wording that aligns with the user's perspective, hence selecting "Start the show" as the skip intro text.
Skip Intro Design
CTA : Start the show, emphasis 'play' feature with icon
Solution:
-
Skip Intro start from Episode 2
-
Research has shown that repetitive information unnecessary for viewers. To save time, viewers would like the option to skip these segments. The Opening Theme in the first episode are entirely new and haven't been viewed yet by the user. Therefore, the skip function will be provided for the second episode.
-
-
With an Icon Emphasizing Play Functionality
-
For users, the primary goal is to start watching the video content right away."Start the show" more explicitly conveys the user's intention to begin watching the show. The icon can further guide users to continue their viewing experience.
-
Skip Outro Design
1
CTA : Stay this episode
Allow users to decide whether to continue watching the current episode or not within a 15-second
CTA : Next episode
Within 15 seconds, users can click directly to play the next episode.
2
1
Title : Next episode will start automatically for you : Episode 3...
In the final 10 seconds, display information about the next episode and remind users once again that it will automatically play.
Solution:
-
Skip Outro - Available after 2 seconds
-
Same idea as skip intro. Enable users to become consciously aware of entering the outro state then gently providing the option to skip the outro.
-
-
"Skip Outro"
1
Button of "Skip Outro" display first
2
Information for next episode come out after 5s
-
We simplify the information by time delay. Initially, offer the option to skip outro first , then display the instructional text. Indicating that the next episode will automatically start.
-
"Next episode" for the skip outro
-
Following the same logic as with the intro, the text should emphasize "user's expected purpose." Therefore, instead of skipping the outro, the CTA will be "Next Episode" to align with user expectations.
-
-
Automatically skip intro of next episode when click "Next episode"
-
When the user proactively clicks on "Next Episode", we indicates their willingness to continue watching dramas. As a result, the player will automatically skip intro of next episode and directly start the main content, reducing the overall viewing time.
-
Thumbnail Scrubbing
The thumbnail scrubbing feature is available on both the LINE TV Web and TV app. In this project, we will add the "Thumbnail Scrubbing" feature to the LINE TV app player to ensure a consistent platform experience and reinforce the brand identity.
To maintain visual consistency with the mobile web version, we will use the same design elements, icons, and color schemes. This ensures that users can easily transition between platforms without any confusion and reinforces the LINE TV brand identity.
Thumbnail Scrubbing Design
Solution:
-
Clean interface
-
When dragging the progress bar, all other player control functions are hidden, allowing users to have a clearer view of the current drama progress and relevant time.
-
Attention to rounded corners ensures a consistent visual language across the platform.
-
Design solution - Player Redesign
Player
The player should take into account user habits, placing similar operations and functionalities close together while providing clear guidance on their contents.Regarding the timing of advertisements, they should appear after the user clicks the "pause" button, presenting a revamped ad experience.
By considering user behavior and preferences, arranging features logically, and offering a seamless ad experience, the player will become more user-friendly and engaging. This will result in higher user satisfaction and increased platform usage.
New player design
Screen lock function separate from other functions to prevent accidental activation.
Brightness and volume are represented by icons for intuitive control.
Remaining time helps users gain a better sense of how long it will take for the drama to finish.
When in 'Press' mode, enlarge the buttons to enhance feedback.
Title : Episode number and the name of the episode
Users can obtain more information about the episode they are currently watching.
User center
Consideration of user habits and experience is essential in designing the layout of functionalities based on their importance and characteristics. By doing so, the touch areas can be optimized to ensure a more intuitive flow for users.
1
Visual hierarchy
To enhance the visibility and recognition of each functionality, it's important to adjust the icon sizes based on different needs and differentiate the functional hierarchy.
2
3
Icon redesign
Redrawing the icons and establishing design guidelines are essential steps to enhance brand consistency across the platform.
Old & New comparison
Player control
Oid
New
Problems:
-
No indication for volume and brightness, easily leading to accidental triggering of functions.
-
Inconsistent visual elements in the design of functionalities.
Solution:
-
Brightness and volume are represented by icons, providing clear prompts for users regarding the relevant functions.
-
Time is displayed as "remaining left," enhancing users' control over their drama viewing experience.
-
The bottom-right functions are presented with both icons and text, ensuring clear communication of information.
-
The default display is in text, and it switches to configuration information after actual use. For example, "Speed" will change to "1.5x."
-
AD
Oid
New
Problems:
-
Once clicked, the advertisement will immediately appear, restricting the development of one-click functionality, such as "skip intro."
-
The advertising content should be incentivized for ad removal and not suitable for placing other drama advertisements.
Solution:
-
Display player control only once click the screen, while pausing will trigger the ad display.
-
The layout is simple, with a black dim added to ensure clear visibility of the advertisement message
-
External advertisements take precedence over internal ones and will shift every 15mins. The internal ads should not recommend other dramas.
Volume & Brightness
Oid
New
Problems:
-
User needs to try it out to understand the actual location of the brightness or volume controls.
Solution:
-
Display these features using icons to ensure that users can easily access and utilize the right functionalities.
-
When adjusting volume and brightness, all other features will be hidden so that the user can focus solely on the setting they want to edit.
-
Both dragging and clicking should be possible to enter the adjustment mode, reducing the frustration of users making mistakes during usage.
Episode drawer
Oid
New
Problems:
-
No viewing progress information of episode.
-
The VIP design with a yellow background and white text has poor readability and does not comply with WCAG recommended guidelines.
Solution:
-
Providing a progress bar enhances the user's ability to grasp the viewing progress.
-
The tag design is adjusted to have a yellow background with black text, ensuring good readability.
-
Displaying episode thumbnails increases the attractiveness of the drama for viewers.
Tutorial of player
Oid
New
Text : Swipe up and down o Left side to control lightness.
Combine gesture icons with text explanations to help users quickly understand the feature.
CTA : Next step
In reality, the entire screen is a touch area, enabling faster the operation.
Screen lock function separate from other functions to prevent accidental activation.
Problems:
-
Timing of Appearance: First-time app download and first entry into the player.
-
At this point, the user's intention is to watch a drama, not to learn how to operate the app. There is a high likelihood that they will feel annoyed and close the app directly.
-
Solution:
-
Timing of Appearance: The tutorial appears when users use the player functionality for the first time.
-
A brief two-sided tutorial will explain the operational logic, helping users navigate the platform more smoothly.
-
-
Using gestures icons directly presents a more intuitive tutorial, guiding users through practical actions.
1
Appropriate timing, effortless to use
When the opening and ending credits are displayed, the skip function becomes accessible after two seconds, allowing users to better understand the feature with a smoother experience.
When pressing "Next episode," users can simultaneously skip the opening song, saving more time.
2
Standardize the visual elements
Standardize the icon guidelines and through screen arrangement, consolidate similar functions, making it more intuitive for users.
3
The right moment
we have made adjustments so that the tutorial will appear the "first time" the player is activated, making it more aligned with the user's context.
Outcome
Business impact - potential for higher revenue
Taking into consideration both business and user experience, the addition of an advertising carousel system allows advertising units to have more ad spaces to sell, achieving a win-win situation.
Ads should not interrupt the user's primary content, so they should only appear behind the main content when using the pause function. This carousel ad space provides a more diverse range of ad styles, offering additional resources for advertisers to choose from and increasing the potential for higher revenue.
Completed Icon System Standardization
In the past, there was no specific standard for icons on the platform, resulting in a lack of uniformity and inconsistency in the visual language.
With the establishment of guidelines in this project, we will create an icon system based on these specifications. The icons will be categorized into different sizes, such as 16px, 20px, 24px, etc. The stroke width will be set at 2px, with adjustments made for visual aesthetics.
Moving forward, all projects requiring icons will follow this system, ensuring a more unified and harmonious visual appearance for the platform.
The "skip intro and outro" feature has garnered mixed reactions
After the "skip intro and outro" feature was officially released on LINE TV, the number of users requesting this functionality has significantly decreased.
Unexpectedly, users participating in the "LINE POINTS Drama Mission" expressed worry that skipping the outro could potentially affect the time required to participate in the event, thereby impacting their personal benefits.
Considering that the "Mission players" account for only about 0.005% (20,000 to 3-4 million per month) of the total users on the platform, we have decided to retain this feature to ensure that the majority of LINE TV users can continue to benefit from it. Proactive communication and support will help users adapt to the new feature smoothly and mitigate any potential issues they may encounter.
Summary
This project aims to optimize a critical platform feature: the player. It involves implementation on both iOS and Android systems while introducing a new "skip intro and outro" functionality.
In the existing player design, commercial considerations have taken precedence over user experience, leading to a situation where a single click on the screen triggers ads to appear directly. This also affects the user experience for SVOD (Subscription Video on Demand) users as clicking on the screen simultaneously pauses the video.
In this new design, greater emphasis is placed on enhancing user experience, focusing on three main principles:
-
Intuitive and simple operation.
-
Clear and singular functionality feature.
-
Consistent standards for visual guidelines.
Based on these principles, after conducting a competitive analysis and presenting a comprehensive pros and cons assessment, we have designed a player that offers an improved user experience. Simultaneously, we collaborated with the marketing team to optimize ad placements and maximize screen utilization.
Key enhancements for the new player:
1. Simplified Click Actions
Upon clicking, the player should be activated without triggering ads immediately. The pause function will be separate from the ad display to avoid confusing user experience. Clicking should initiate the player, while pausing will trigger the ad display.
2. Clear Icon Indicators
Use clear and intuitive icons to indicate the functionalities, reducing any ambiguity or confusion for users. Ensure that icons for volume and brightness are easily recognizable and placed appropriately for better user interaction.
3.Icon Design Standardization
Establish a comprehensive icon design guideline to ensure a consistent visual appearance throughout the player. This includes defining standard icon sizes and stroke widths for better visual harmony.
What's next?
1. Unified Platform Player
In this optimization project, we will focus on improving the App interface. To ensure platform consistency, we aim to optimize the web player to align more closely with the App interface.
Additionally, by tracking data, we can gain insights into the success rate of converting users from the AVOD user to SVOD user. Understanding the current conversion rate will allow us to make further improvements and maximize the performance of the player.
2. Tracking Actual "Skip Intro and Outro" by Data
In the next phase, we hope to fine-tune the feature's settings, such as allowing users to skip different types of content or providing an option to universally enable or disable this functionality. This will enhance the user experience and offer more flexibility to our users.