Personalized Hero

2017

A/B test

Foundational

Phased

Hero CTR

+92%

Hero My List Button

+51%

Avg Home Video Plays

+44%

View on Paramount+

Download on iOS

My protoypes

My Role

Scope & ownership

CTV

iOS

Web

The Problem

Defining pain points

Business problems

The marquee only accounts for a small fraction of content discovery for it's level of prominence and connection with user's first impressions.
Low clickthrough rate.
The marquee serves primarily as a marketing tool that lacks personalization.

User problems

No visibility into the content that will be surfaced in each slide, placing the burden of discovering potential content of interest on the user.
Sets a negative tone for the personalized discovery experience that follows.
Lacks any clear incentive for users to interact due to an absence of any connection to the user or their preferences.

RESEARCH

Gathering insights

Competitive analysis takeaways

Many competitor examples of intragrid spotlight units tend to opt for displaying content items in a carousel format vs displaying pagination controls like many examples we've seen of hero marquees.
These nested carousels are often recycled carousel components already seen throughout the rest of the discovery experience.
Surfacing multiple content items at this level (within the unit) can give users a clearer understanding of the type of content they will find in this collection before committing to exploring further. This follows the same logic that has proven successful at Paramount+ as far as why we surface content in a carousel format throughout our discovery experience.

There seems to be a missed opportunity by competitors to leverage the proven advantages of “peeking” content offered by carousel UI as a substitution for the pagination controls often displayed in hero marquees
As a user, is it more enticing to know there are 8+ items in this unit (conveyed by pagination controls) or to see that next item teasing you from beyond the edge of the viewport that might just be that show or movie you were looking for?

Phase 1 consisted of a test focused specifically on measuring the impact of the "peek ahead" UI to track any changes in CTR, % of new content discovery, minutes watched, and video plays.
Marquee Content Discoveries: +26%
Marquee Video Mins: +17%
Marquee CTR: +15%

EXPLORATIONS

Early concepts

The sizing of the posters peeking off the right edge of the viewport needed to be thoughtfully considered to avoid them invading the safe zones of the background artwork while also keeping large enough to be legible from 10ft away.
The difference in overall sizing of the active poster on the left and the peeking posters on the right needed to be distinct enough to easily identify the left poster as the active item
The active poster needed a clear visual treatment that affords a selection interaction as an entry point into the content while visually separating it from the left peeking poster

Given we had no predefined visual patterns in our mobile app design system for a "peek" UI, I had to start from scratch
Challenges centered around establishing a mobile "peek" UI while maintaining the rich, full view artwork background that was a foundational part of our design system
The peek element needed to be clearly legible against the background artwork which led to explorations involving color extraction and filter effects to achieve a card overlay that allowed natural colors from the artwork to come through without compromising accessible.

TECHNICAL Challenges

Building mobile peek ahead

Dissecting the design with dev

The background module was the most complex part of the design to translate into code as this included a filter effect that involved reflecting the edges of a background image around its perimeter.
The background image transformation scales it to match the width the card in the foreground, meaning we needed to create a visual effect that makes the scaled artwork appear like it's filling the viewport when it actually is not.

Competitor references

Finding a solution

View walkthrough

I worked closely with developers throughout implementation to establish specs that could dynamically apply a blur and reflection filter effect to any image we place in the marquee.
These filter effects were nested inside a programmatically created alpha gradient mask, carefully constructed to avoid exposing the edges of the transformed image.

WHERE WE LANDED

Picking a direction

Phase 2 ultimately became focused around measuring the effectiveness of a poster selector vs. a button selector as a wayfinding mechanism and entry point into the active marquee item. Since interaction expectations differ across CTV, mobile, and web, we needed to validate which pattern translated best across input types. The intent was to find the approach that most consistently increased clicks and discoverability, while reducing the cognitive load of getting from browsing into watching.

‍

Android TV Results - Variant 2 Wins
- Marquee CTR: +5%
- Marquee Video Mins: +10.08%
- Marquee Video Plays: +2.14%
iOS Results - Variant 2 Wins
- Marquee CTR: +91.95%
- Marquee My List Button & Primary CTA: +87.88%
- My List Only: +50.75%
- Avg Homepage Video Plays (marquee): +44.1%
- Avg Content Discovery (marquee): +30.4%
Web Results - Control Wins

Final prototypes

WHAT'S NEXT