Redesign the video player of FOX+
My role
- User interview
- UI/UX design
- Usability testing
The team
Working with project managers and developers
Platform
Mobile, Web, Tablet, TV
Company
FOX Networks Group (Hong Kong)
Background
Video player is a key aspect of a streaming service. We want to provide a smooth and effortless watching experience for users. In FOX+, there are two types of players — SVOD player for content like movies and series, and Live player for TV channels and ad-hoc sports events.
Problem
The redesign started with a desire to better the mobile viewing experience for FOX+ users. As with additional functionalities, video player starts to get overcrowded and lacked visual hierarchy. So, to understand better, we conducted interviews and usability testings in Taiwan and Philippines.
Here are the identified usability issues:
1. Lack of visual hierarchy
Functions in the player should be prioritised in terms of usage and importance to user. However, they were not organised based on that. For example, our data shows that Airplay and Chromecast function are commonly used, but it was buried into secondary layer in live player. Rewind and fast forward function were demanded by users, but it was present as a swiping gesture without any indicator.
2. Differences between the Live player vs SVOD player
Same UI elements were placed differently in the two players. This confuses users to find the functions they need. Users need to spent more time to learn a new interface again.
3. Expecting common features
Lots of users are looking for common features that exist in other streaming apps. Features like episode picker and recommendations after watching movie are missing in FOX+ right now.
Goal
Apart from the issues found, we also need to bring additional functions to the player. In summary, here are the goals of the project:
-
Improve accessibility of functions
-
Align SVOD and Live player
-
Add new functions — “Episode Picker”, “Data Saver” etc.
-
Improve scalability — Modular design
Competitor Analysis
I researched on the player design in 10 other video streaming platforms such as Netflix, HBO, ViuTV and myTV super. Lots of them started using the centre area for key interaction, like pausing, rewind and fast forward.
For Netflix, they revamped the mobile playback UI drastically. It appears to have more visual hierarchy based on the frequency of usage. The most interesting change is how they put “Episodes” and “Audio & Subtitles” beneath the progress bar. It’s actually a clever way to create extra space for the important interactions.
Netflix - Overlay in video player
Constraint
It would be great if we can do all the improvement at once. But, in reality, it’s not possible as we need to prioritise the requirements and fix them one by one. There are lots of modules in Live player. It will need a lot of effort if we revamp the whole thing. Hence, we are focusing on changes for SVOD player and only aligning the basic functions in Live player.
In-player episode picker and recommendation engine also need too much effort to build. They are not possible for the time frame of this project. Hence, we focused on the remaining changes.
Ideation
In order to understand the current playback interactions, I listed them out in a flowchart.
From the data of playback, the top events initiated are interacting with progress bar, playing and pausing. I had to make sure the hierarchy of interactions in the new player matches the frequency of usage. Hence, started brainstorming possible layouts for SVOD and Live players.
Interface Design v1
Since the basic elements of player exist already, I quickly created the new designs in Hi-Fi to get a feel of the real interface. It’s important to test if the size and position of buttons are suitable to interact. I also put the UI and UX changes in details to communicate with other stakeholders in the team.
User Testing 1
After creating Hi-fi interfaces, four user testings are conducted to see if the new design can solve the issue of previous players. A few FOX+ users were invited to the office for the test. I used Invision to create a clickable prototype for testing.
Details of testing:​
-
Reveal current player issues (SVOD and Live)
-
Testing on new player design
— Quality function (Discoverability, Understandability)
— Data Saver function
— Rewind and Fast forward update
— Subtitle and Audio panel update
— Episode Picker function
Key insights from testing:
#1 —  Subtitle is the most important function in player
#2 —  Episode picker and Back button are redundant
#3 —  Quality panel is confusing
​
The most important one to work on is Insight #3.
Too many things are communicating on the same panel. Long text doesn’t not help to communicate better. Users were trying to find the relationship between them but felt confused.
Data Saver is a function to help save mobile data by streaming in SD quality. Turns out saving mobile data is not relevant in HK environment, where everyone has unlimited data and fast internet speed. Watching in HD was more important for them.
We restate our goal for implementing Data Saver and quality function. It’s used to help people who don’t have unlimited data or high internet speed, say in the Philippines market. Hence, the next step was to understand how Philippines users stream video content and their situation of mobile data usage.
User Interview
Understanding the Philippines market
Luckily, we are a diverse company and I found three colleagues from the Philippines to help me understand the situation. Here are some insights I gained after talking with them:
Key insights from testing:
#1 —   Mobile data is expensive and limited
#2 —   Internet speed is slow and unstable because of the infrastructure
#3 —  Buffering and Downloading are very common
#4—  They expect the app picks the suitable quality based on the internet speed
Analysis
Even the target audience of Class C segment in the Philippines, they will need the option for SD Quality and Data Saving function. This is concluded because of the unstable internet connection, and limited but expensive data plan.
We suggest to turn on Data Saver function in the Philippines by default, while they have option to change the setting later. Other than saving data, we would also communicate the benefit of fast loading and less buffering.
Interface Design v2
With the user testing and interview information, I did some improvements on the design:
1. Clearer quality panel
Instead of displaying text to explain, an “Auto” option was added which easily communicated the meaning of their choice.
The Data Saver at the bottom was removed because Data Saver and Quality Switch are two separate concept. Instead, a pop up is used to introduce the function. When it is turned on, an indicator will be shown at the bottom of quality panel. Users can turn on/off the Data Saver in Settings.
2. Remove episode picker
Since we could not implement in-player episode picker at the moment, we thought of leading back the user to the detail page for now. But, the position of button made it almost too easy to exit the player, even if it was by accident. Therefore, it was moved into the “more panel” and labelled with “Go to Series” to tell user that it will exit player.
Final Design
With the second version of interface, I updated the prototype and decided to test it with my colleagues from Philippines. I approached this testing similar to my initial testing. The result was much better in terms of understanding new functions. All of them understood the Data Saver function and agreed it would be useful for the Philippines market.
Logic flow was also created for developers to easily understand how the quality setting should be with different user locations, network and settings.
Learning Outcomes
Despite of setting the goals at the beginning and hoping to improve the product as a whole, there will always be external constraints that will limit your changes. Hence, I learnt to build with the overall future plan in mind, even while adding just one patch at a time into the product with consistency.
​
Another highlight was the iterative nature of the design process. I didn’t realise the need to interview my Philippine colleagues until I reached a bottleneck. I understood the ground reality only after discussing with the test users and my Philippine colleagues, and the insights I got from them became the key to the design. The design process is never linear and its important to be flexible in one’s approach to a given problem.
​
Along the process, I was continuously reviewing with the design team, technology and project managers in order to gain a deeper understanding of the different facets of the product. This would not just help stimulate new ideas but also make it easier to design on top of the existing systems. For example, I worked on understanding how the player functions at the backend, in order to make the design that is most suitable to the current architecture.