Improving the VOD (Video-on-demand) playback experience

My Role

Requirement gathering and discovery research
Ideation and solution design
Prototyping
Usability testing
Feasibility considerations
Development collaboration i.e specs & snagging

Tools

Figma
Notion
UserTesting
FigJam

Background

The project aimed to assess the usability of STV Player’s video-on-demand (VOD) playback interface on different platforms by exploring industry standards, best practices and employing a user-centred design approach. It sought to pinpoint deficiencies and propose design enhancements to boost the player's functionality and elevate the visual appeal of the playback UI.

Business goal

Enhance the playback interface to deliver a seamless and engaging user experience, increasing user interaction, driving higher engagement, and improving overall retention metrics for the player.

Opportunity

Enhancing the playback functionality and user interface to meet industry standards is critical for addressing current shortcomings and elevating the user experience across all platforms. Since a significant portion of user engagement occurs within the playback UI during content consumption, this improvement is expected to drive an increase in Monthly Active Users (MAUs).

Design approach

The project followed the Double Diamond design process model, which promotes a structured yet flexible approach to problem solving through the balanced application of divergent and convergent thinking. The four key phases (Discover, Define, Develop, and Deliver) guided the project’s progression.

Divergent thinking facilitated the exploration of ideas and possibilities, while convergent thinking focused on narrowing down options and making informed decisions. The iterative nature of the Double Diamond allowed for multiple cycles of exploration, refinement, and validation, resulting in innovative and effective solutions aligned with user needs and project goals.

Deliverables

This project and its processes were carried out separately for web, mobile apps, and connected TV (CTV) platforms, recognizing that best practices vary across platforms. To avoid redundancy and avoid an eternally long write-up, the case study primarily highlights the web platform, providing a streamlined and contextual narrative.

The platforms deliverables for the project was thus:

Discovering the problem

Starting out with discovery research after understanding the requirements and brief, I explored credible online articles and watched informative videos to gain a comprehensive understanding of best practices for designing effective video playback experiences. This process was relevant for gaining insights for ensuring user-friendly, seamless, and engaging playback interfaces that meet user expectations and support diverse needs.

Benchmarking & competitor analysis

It was very valuable after that to analyse the playback UI of other platforms and carryout benchmarking against that of STV Player as some of the industry leading companies provide standard optimisation of video playback, utilising best practices and hence, setting industry standards.

As no competitor is perfect, this helped me identify areas where we could improve, innovate, and differentiate ourselves, ensuring that our player meets or exceeds the expectations set by these major players to allow us stay competitive and deliver a high-quality video playback experience to our users.

Based on aforementioned research from several sources, information was synthesised to provide ideal VOD playback features alongside their justifications.

These were the focal point of analysis for competitors’ platform review and STV Player’s benchmarking.

As accessibility requirements, the ability to utilise audio tracks and captions are essential to ensure compliance with accessibility standards and guidelines. These were however not included in the evaluation as their significance had already been well-established and ongoing implementation based on our resources and feasibility.

Numerical values were assigned as points to compare and assess each competitor performance as well as STV Player. These points provided a quantitative representation of how well each competitor’s playback performed in relation to the total feature points. Prior decision of the scoring system helped eliminate any biases.

As explained, the STV player was scored alongside other competitors out of 10 points based on the aforementioned features. It scored a total of 2.5 out of 10 on web. In a similar manner, it scored 3 out of 10 criteria applicable for the mobile platforms and ranked 10th out of 12 services. This clearly indicated that there was work to be done.

Behavioural test & interview

A behavioural test was conducted to gather feedback and identify user pain points related to the video playback experience of the STV player. This type of test helped to understand how users interacted with the player in real-world scenarios, uncovering patterns in their behavior, preferences, and frustrations. The insights gained were instrumental in highlighting usability issues and areas for improvement, enabling the me to address specific challenges and enhance the overall user experience.

The test data was collected and analysed to produce insights.

Theme 1 - Seamless Episode Transition

100% of participants complained about not being able to jump straight to the next episode within the playback UI.

Why?

Users want a direct and easy way to move between episodes with minimal interruptions for effortless continuity and convenience.

User quotes

“Don’t think I can see the next episode without going to the end which is a bit annoying”

“Having a next episode button would be useful if you want to suddenly jump”

Theme 2 - Content Context Clarity

85% of participants wanted the content title (and episode) to be in the playback interface.

Why?

Users want to have the ability to easily and quickly see exactly what they are watching for a more convenient viewing experience.

User quotes

“Would be better if there's a popup there that told you, what episode you are on”

“I’d expect it to be at top let of the interface”

Theme 3 - More control flexibility and efficiency of use

60% of participants commonly make use of keyboard controls as a shortcut.

Why?

Users want a quicker and easier way to control the playback without having to interact with the screen (These were the younger participants below 34 who are likely more tech savvy).

User quotes

“It is alot easier to control with keyboard”

“I think it violates alot of accessibility laws if you don’t have that”

Theme 4 - More effective playback seeking

100% of participants expressed dissatisfaction with not having any onscreen skip controls.

Why?

Users want better accuracy and ease of use when trying to seek any point in the video playback.

User quotes

“Scrub is very difficult especially if I had very bad motor skills”

(with scrub) “It’s not an easy thing to make it accurate”

Theme 5 - More focused entertainment

100% of participants would want to be able to skip intros on shows.

Why?

Users believe that the show intros have little to no entertainment value.

User quotes

“I am used to skipping it like in Netflix and prime”

“I am not there to watch the intro, I am there to watch the tv show”

Theme 6 - Balancing Visibility and Viewability

60% of participants preferred the core control options at the middle of the screen.

Why?

They want the major controls to be more visible and accessible. However, would not want it to obscure their view. This was also the concern of the other 40% of users.

Defining the problem

User stories

User stories were crafted based on insights gained from the discovery research. These stories captured the users’ needs, goals, and pain points, providing a clear and user-centered framework for the design process. Aligning the design objectives with real user expectations was useful to guide decision-making, prioritize features, and ensure the final solutions effectively addressed user requirements. Some of the user stories are -

As a user who easily gets distracted, I want to see the episode title displayed in the interface, so I can easily and quickly identify what I'm watching without any interruptions.
As a user who enjoys binge-watching, I want a direct and easy way to move between episodes within the playback UI, so I can seamlessly continue watching my favourite shows.
As a user with a busy schedule, I want to be able to minimise what i’m watching, so I multitask on my device.
As a time-conscious user, I want to be able to skip intros seamlessly so I can dive straight into the main content.

How might we statements

After the creation of user stories, How Might We (HMW) statements were developed. These statements reframed user needs and challenges into opportunities for innovation, sparking creative problem-solving. It encouraged a solutions-oriented mindset and that ensured that the design concepts directly addressed the core user pain points identified during my discovery research.

HMW design playback controls that are both easily accessible and minimally intrusive to the viewing experience?

Idea: Utilise a translucent overlay for core controls positioned at the center of the screen. Ensure they disappear or fade after a brief period of inactivity.

HMW present the content information in a way that enhances clarity without cluttering the interface?

Idea: Add an unobtrusive title and episode indicator at the top-left corner of the interface that fades during playback but reappears when users interact with the UI.

HMW enable users to transition effortlessly between episodes without disrupting their viewing flow?

Idea: Include a clearly labeled “Next Episode” button within the playback controls, along with an optional episode list that can be accessed without leaving the playback screen.

HMW improve the precision and ease of seeking specific points during playback?

Idea: Add onscreen skip buttons for jumping forward or backward by customizable intervals (e.g., 10 or 30 seconds), and enhance the scrubber with better accuracy and tactile feedback.

HMW provide quick and intuitive playback controls for tech-savvy users without overwhelming less experienced users?

Idea: Expand keyboard shortcut options (e.g., arrow keys for seeking) and offer hints for these controls when users hover over onscreen alternatives.

HMW minimize unnecessary interruptions during playback to focus on the main content?

Idea: Add a “Skip Intro” button that appears prominently at the start of each episode, ensuring users can bypass intros with a single click or tap.

Prioritisation of features

An initial concept mockup was used for a feature prioritization test to gather feedback on proposed features relevance and UI structure.

Insights were gathered on how users perceived the proposed features and and it’s relevance. Their feedback and thoughts on the proposed features were analyzed to understand how well they comprehended the functionality and purpose of each feature within the playback interface.

Based on ranking of user preferences, features were labelled as P1 to P9 from highest to lowest priority.

This was done so as to -

Ensure that the development team focuses on implementing functionalities that are most important to users for user satisfaction.
Manage available resources effectively by directing efforts towards high-impact features first, keeping the development process on track and keeping the business confident about progress.
Match technically implementable features within given constraints to significance and justification of providing said features.

Developing the solution

Entering the develop stage, design exploration was carried out to ideate on how the discovered requirements and solutions could be translated into designs.

Some web platform exploration

Some mobile platform exploration

Some CTV platform exploration

Prototyping and testing

The designs were prototyped and tests were carried out to gain a comprehensive understanding of how users perceived the new looks and functionality made for the VOD playback on all the platforms. The focus was primarily on A/B tests, interaction behaviour, functionality and ease of use.

For connected TV, the test strongly aimed to to match the interaction of using a remote control on TV. Therefore, a prototype was made of the TV interface and linked to an emulated remote control positioned at a non obstructive side of the screen during the test. Users could only control the interface using the remote control as they would on an actual TV.

Web platform test insights

A major insight from the usability test for the web platform was on switching between episodes. 75% of participants preferred to see more episodes selection that shows not just the next one. 25% of the participants chose to see only next episode due to potential confusion of the order of episodes in the series and which one they were currently watching.

Why?

Most participants wanted to see more episodes selection as they would like to go back or forth without leaving the interface incase they have missed an episode.

User quotes

“I often wanna go back to catch up on something I've missed, so that's quite good.”

“Option A could work if it shows previous and the next episode clearly”

Iteration

Most participants preferred to be able to switch to more than just the next episodes and were not confused with the hover interaction behaviour to see the episodes selection row.

However...

The major interest was being able to select not just future episodes but also previous episodes. All participants wanted a clearer distinction of which episodes were before or after the one they were watching. This raised an improvement opportunity.

How might we provide users with a clear and intuitive understanding of episode order, making it easy to identify which episodes come before or after in the sequence?

Solution - Provide a 3 card row with current episode card placed in the middle to act as a division between previous and next (at left and right) as the default order before the user starts to navigate.

Mobile platform test insights

A similar insight on mobile platform was about how to navigate to other episodes although this had a very different UI and interaction. 100% of participants preferred to see more episodes as a pop up rather than an overlay across the screen.

Why?

Majority of participants expressed that though they liked the descriptive nature of B, they chose A because they want to be able to quickly recognise what episode they are watching before changing it.

User quotes

“Don’t want to forget which episode I am still watching as there is an indicator on A that showed it.”

“B has more information but A is better since you can see the episode and know what to change it to.”

Iteration

Overall, all participants found the selected interfaces of both comparisons to be very clear and straightforward.

However...

Participants seemed to make a compromise with the episode switch interaction behaviour preferences as they wanted a descriptive nature of episodes and also the ability to effectively recognise what episode they were watching. This raised an improvement opportunity as I intended to provide optimal user satisfaction.

How might we merge the best of both worlds to enable users recognise what episode they are watching while providing them with more episodes information.

Solution - Provide descriptive episode cards in an overlay that clarifies and highlights the episode they are currently watching so they can decide to jump back in or move to another episode all directly from the overlay.

CTV platform test insights

Major insight on CTV was recognising the functionality of the controls as they were represented with just icons for simplicity and minimalism. Only 50% of participants recognised the Audio description and guidance button.

As more universal icons, 90% of participants recognised the caption and info button

Although not having universal icons, Restart and more episodes were understood the most due to their supporting labels that provides clarity.

During the test, it was observed that -

Some participants misinterpreted the guidance rating icon, with one thinking it represented the first letter of their name as a profile icon. Another participant assumed the audio description icon indicated HD video quality.

Also, seemingly universal icons can have edge cases as another participant believed the subtitle icon signified 'start chat'.

Iteration

To make relevant iterations based on the test insight, the direction was clear -

How might we make users understand what each button does without cluttering the interface?

Solution - As buttons with labels got 100% recognition even though they were not quite universal, labels would be used for other buttons for better clarity. To avoid clutter, the buttons would be expandable to show functionality upon focus when the user navigates across the onscreen controls.

Delivering the solution

As intended, the project delivered designs for Web, CTV, Android and IOS platforms.

The deliverables addressed the noted users’ pain points and best practices to improve the user experience and engagement within the STV Player in regards to consumption of contents.

VOD Playback for web

As part of users priority during the initial behavioural test, the utilisation of keyboard shortcuts for controls were also provided as part of improvement features which was based on common familiar shortcut keys as per Jakob’s law.

VOD Playback for mobile apps

Similaer to web, the utilisation of gesture shortcuts were also provided as part of improvement features which was based on control gestures that users are familiar with.

VOD Playback for CTV

Stakeholder feedback

Feedback from stakeholders and the user panel on the playback redesign has been very positive, which reflects a strong alignment with user expectations and usability standards.

- “It’s exactly what I’d expect from a video player".
- “Well-designed, no hassle, no confusion".
- “It seems to cover everything I’d want to do while watching a show".
- “Intuitive and straightforward, it’s easy to use and feels like the standard".

Some of the improvements

A more accessible placement of core functionalities in accordance to Fitts law. i.e pause functionality.
Onscreen skip controls for quicker and more precise skipping.
Content title and episode number/name for better contextual understanding of video.
Redesigning the subtitle icon for a more universal recognition.

Picture-in-picture mode for web and mobile apps to allow possible multitasking.
Ability to skip intro of shows to focus on the main content.
Gesture and keyboard shortcuts for expert users.
Ability to see other episodes and switch to another within the playback UI for uninterrupted content consumption.

Reflection

Initially appearing straightforward, this project revealed detailed layers concerning the necessary solution, the process of gathering requirements, and the workflow essential for effectively handing over the final deliverables. Given the broad demography being all users, it was imperative to prevent implicit bias and ensure that the designs, iconography, functionality, and interactions were universally user-friendly across all age groups.

Also, I realised in a more experienced understanding that a project involving multiple teams such as product managers for various platforms, developers etc necessitates someone with determination and dedication to the project to drive successful outcomes.

Next steps

The deliverables leverage existing components from the design system to maintain consistency across all platforms. Newly introduced elements (such as updated icons, gradients, and episodes cards) have been collaboratively discussed within the team and will be integrated into the continuously evolving design system. The feasibility of features will be further assessed through collaborative sessions with developers, allowing redesigns to align with technical and resource constraints. As the feasibility expands, ideal proposed designs will undergo further evaluation and refinement as further phases of the development.

Also, this project is part of a larger initiative, which also includes the redesign of playback features for live content (broadcast). As I am also responsible for that project, I will be carrying out subsequent contextual research while ensuring that consistency and standardization remain priorities across platforms. These considerations will continue to guide the design process to enhance user familiarity and create a cohesive experience on all our platforms across all user devices.

Other projects

Page updated

Google Sites

Report abuse