Content Highlight
2017
Total My List Adds
+13%
My List Adds via Highlight Entry
+7%
Detail Page Playback
+4%
THE OPPORTUNITY
After the success of Content Highlight on OTT platforms, we learned how valuable showing metadata and video previews are to the discovery experience. We want to roll out a similar feature on web to expand the benefits of this interaction model to our other platforms.
The Challenge
Translate the success of our OTT Content Highlight experience into a global web experience. Web supports a drastically different interaction model than OTT, using a cursor instead of a fixed selector. This design should explore web-specific interactions that offer a similar experience without compromising the usability of our discovery pages.
My ROLE
Product Designer at Paramount+ (sole IC designer)
Scope & Ownership
End-to-end ownership of UI, User Flows, Prototypes, Dev Handoff, Competitive Analysis
THE Team
1 Product Manager, 1 Growth Developer Team + 1 Core Developer Team (5 devs)
Platforms
Responsive Web
VIdeos
Prototypes
Demos
Full prototype demo
Brand tile exploration
iOS exploration
OVERVIEW
My impact
Mobile phase 1 (iOS)
CTV phase 1 (tvOS & Roku)
CTV phase 2 (Roku)
CTV Phase 3 (in development)
Phase Breakdown
- Mobile Phase 1 (iOS) - dev done, tested and validated, rollout temporarily paused
- CTV Phase 1 (tvOS & Roku) - tested and in market
- CTV Phase 2 (Roku) - dev done, test launching soon
- CTV Phase 3 (future A/B test) - in development
OVERVIEW
My impact
CTV
iOS
Web
The Problem
Defining pain points
Business problems
User problems
- Users are forced to navigate back and forth between discovery pages and content details pages in order to get the context they need about a show or movie of interest to make a decision about what to watch. This experience can be taxing on the user, leading to cognitive load as indicated by the current bounce rate from web discovery pages.
- The in-market OTT experience sets a higher standard fort the discovery experience by surfacing video previews and metadata about each title upon hover while browsing. Users who come to our web platform receive an experience inconsistent with expectations set by our other platforms which discourages users from returning to the platform.
RESEARCH
Gathering Insights
Competitive analysis takeaways
- Common interaction models amongst compeitors including Netflix, YouTube, and Amazon Prime involve displaying an expanded state of content tiles/posters in the discovery experience to display additional info and video. These are all triggered on a hover interaction after a slight delay.
- All examples include common quick actions that you would find on a details page such as direct link to playback, add to My List, and rate.
- Majority of examples opt for an expanded state that simply hovers above the carousel grid without changing the UI behind it. Examples like Discovery+ however, opted to shit the grid over in order to make room for the expanded state. The general consensus from our team was that this can lead to an overly responsive and disorienting experience, considering how easy it is to accidentally trigger this behavior on hover.
EXPLORATIONS
Early concepts
Unexpected Challenges
WHERE WE LANDED
Picking a direction
- Established new global secondary button styling to unify inconsistency of different instances across the experience.
- Moved away from the hard edges and leaned into our gradient styling that is used throughout other parts of the experience such as hero units / marquees on discovery pages and details pages.
- Reorganized element stacking to more closely align with the rest of the discovery experience
- Established consistent ordering and presentation of metadata across content types (subsequently becoming the new standard for all content types on all platforms)
- Included cast member metadata
WHAT's NEXT?
The future of web Content Highlight
- Support for all content types including live content and hubs.
- Support live stream as the video preview experience in Content Highlight for live content.
- Sizzle videos for hubs as the video preview experience in Content Highlight for brands and thematic collections.
DELIVERABLES
Dev handoff
Design GALLERY
VOD content
Preliminary state
Video preview state
Design GALLERY
In progress VOD content
Preliminary state
Video preview state
Design GALLERY
Locked VOD content
Preliminary state
Video preview state
.png)