As a part of the continued improvement of the Max application, I was involved with the redesign of the video player. I was part of the team that had been tasked to enhance the player experience for Max viewers and help create a system that can easily scale across multiple content types
I was assisting the Warner Bros Discovery design team with the prototyping of the new Max app Video Player that combines the content of Live Sports, Live Channels, Movies, and popular TV Series
This redesign involved a refresh of the existing controls along with more in-depth content discovery features. I helped with the creation of the Action Row, updated how the metadata was displayed, updated scrubber interactions (trick play), and content-specific lenses for in-player content discovery via content trays.
Key Moments
These were a very fun addition to the live sports video player. These tiles similar to others were located in the bottom L2 menu but provided the ability to skip back to specific “plays” or points of interest within the video stream. This was to allow users to easily catch up or find specific moments in a sporting event that they want to re-watch or catch up on.
An essential aspect of my role centered around prototyping this feature, involving the creation of new tile types and the generation of mock data for key moment tiles. Gathering game text from CBS Sports provided valuable examples for refining messaging aesthetics.
Additionally, I ensured the initial focus was on the last tile in the tray (capturing the most recent key moment), centering the focused tile within the tray for enhanced visual appeal, and maintaining seamless tray transitions to a regular position when scrolled from the last element were crucial aspects to preserve the functionality of the peeking feature.
Overall participants understood the feature and what it did. However, there were two minor challenges that participants found during testing.
Iconography - Some of the iconography used in the Key Moments tiles was unclear, but for the proposes of a prototype were sufficient. Although the research findings suggested showing an image of the key moment instead of an icon.
Times - The numbers shown on the Key Moments were associated with the broadcast time the key moment took place. This initially confused the user group, and participants suggested using the period and time of the sport to make things more clear, ie. 2nd 5:51.
Research Findings
Using both UP & DOWN buttons to display player timeline controls promoted ease and reduced learnability issues encountered with a dedicated DOWN discovery option.
A dedicated DOWN-only key press for discovery led to mis-clicks and frustration.
When updated to UP & DOWN for player controls, and a secondary DOWN for in-player discovery, these issues were eliminated, and in-player discovery was not felt as an extra click.
Fade out of player timeline controls after 8 seconds felt “just right” for a new experience; 6 seconds would likely suffice once the initial learnability is reached.
The standard 4-second fade did not allow enough time for comprehension of new categories for the in-player discovery.
Recommend launching with 6 seconds, with the option to test and tune post-launch.
Learnings
I had some good insights around creating a proper and scalable component for the video player in React JS, how to best set up the player for our various content types, and that not following expected conventions around player interaction can cause confusion to the user.