Overview
Role: Sr. Product Designer
Problems
•Player Experience inconsistency across Platforms
•Design does not maximize Player Controls
Goals
•Deliver a consistent experience
•Improve Channel Navigation & VOD Discovery during playback
•Enhance Control Panel scalability
•Improve the ability to “Browse while Watching”
Process
Discovery
•Benchmarking
•Workshops
•Usability testing
•Analysis from Streaming Research and insights teams for validation
Design
•Lo fi Design concepts
•Hi fidelity designs
•Specifications and annotations
Challenges
•Maintaining consistency across platforms and devices
•Working with integrating with global navigation
•Incorporate unique discovery features within the player experience
Discovery
Benchmarking
The first phase of discovery was benchmarking competitors and top streaming apps, first capturing all Pluto TV player controls across all platforms to get an insight to the current state of the design and experience. Then I captured players from many of the other streaming apps in the market including, Paramount+, Max, Tubi, Peacock, Netflix, Hulu, Freevee, Plex, Apple TV+, Hulu, Amazon Prime, as well as some cable providers.
Workshops
The next phase was to run two workshops to capture feedback and input from all key stakeholders. During the workshops we tried to capture the following items:
•Reviewed benchmarking and audit of current state of Player Controls
•Define and align on key requirements, objectives, and business goals defined by key stakeholders
•Identify all key considerations for a Unified Player XP across platforms
•Define and prioritize UI features, elements, and components needed for Player Controls (Live TV & On Demand)
Workshop #1 - Discovery & Definition
What we found:
During our exercise to determine our key Goals & Objectives, we had each stakeholder add stickies that we grouped into themes.
•Simple & Scalable
•Understand the user expectations and customer perspective
•Enhanced functionality with prioritized top-level features
Themes:
Simple & Clean UI
•Simplify controls by prioritizing top-level features vs. one click (layer) below
•Flow from player to guide or VOD is evident and obvious to both a first time user and returning users
•Reduce information clutter. Purpose is to watch, consume and relax, and how can we foster that experience
•Give users the proper controls in the right locations
Consistent Design & Layout
•Both Live TV and VOD player to have cohesive look and feel and to like part of one product.
•A system that’s universal between live and vod with enhanced offerings to keep our users engaged.
•A UI that is more or less identical across devices - mobile, tablet, TV, web.
•Maintain consistency in layout and UI components (buttons + meta data) across the experience
User Scenarios & Customer Perspective
•Understand our customers perspective when using the player controls panel (what are the use cases, how might they benefit)
•Enhanced player controls for optimal UX for users/customers
•Build a clear understanding what are the top-routines users are looking or expecting to find on the player controls
Scalable
•Create scalable components that account for our primary use cases
•Account for both lean back + lean in users
•Player controls need to cater to all users with a scalable solution that works for most
User Types
•Lean Back user
•Lean In User
•Engaged User
•Return User
•Kids / Children using Kids Mode
Workshop #2 - Sorting Exercise
Define & Prioritize Key Features
To define and prioritize the key features, I ran an exercise where all the stakeholders sorted the player control features and functions into categories of Must Have, Should Have, Could Have, and May Have. These were then aligned to the Live TV and VOD players to help prioritize how we may consider placement into a unified player control layout and design. After tallying the votes for each element, I was able to synthesize the data and identify the key features that we were going to feature in the player controls for both Live TV and VOD.
Design
Lo Fidelity Design Concepts
Hi-Fidelity Design Concepts
Validation
Analysis from streaming research & insights teams for validation
Study Goals
•Access the clarity and usefulness of the icons/options within the control panel
•Explore reactions to the Mini Guide concept and it's potential role and value
•Uncover feelings around the ability to browse content by accessing a discovery tray within the player
Overall Feedback
Users largely reacted positively to the player design. With affordance animation and channel focus it was clear that they could browse channels. They quickly noticed the featured icons and engaged with them.
Mini-Guide
Users praised the visual nature and that it provides an efficient way to browse while watching. The feature is intuitive and can scroll up and down to see what is currently playing. Users were pleased with the information provided with the channel, and overall reactions to the metadata are positive and met the users expectations.
Discovery Tray
We were able to validate the approach of stacked tray showing a content row peek vs. a tabbed approach, as it clearly indicated to the users that they could scroll down to access content, and after engaging would frequently use feature. And the tabbed approach did not stand out enough.
Final Designs
CTV
Live TV Player
The Live TV player was simplified with a simple and clean design, offering access to channel browsing with an affordance to the Mini-Guide, as well as all the key functions the user would need including, Restart (plays content On Demand), Add to Watch List, Favorites, More Info, and Subtitles. We also gave access to the Global Nav to more easily get to all sections of the app within one click.
Mini-Guide Feature
As part of the effort to enable discovery of content within the player experience, we designed a Mini Guide that is integrated within the Live TV player. This allows the user to browse now playing content on channels without having to leave player experience to go the guide to view full EPG. This feature tested extremely well.
Discovery Tray
The Discovery tray also allows users to discover content within the player experience, displaying recommended content to continue to drive users to engagement without leaving player.
Mobile
Live TV - Full Screen Player
VOD - Full Screen Player
Live TV - Expanded Top Player