Personalized Hero
2017
Hero CTR
+92%
Hero My List Button
+51%
Avg Home Video Plays
+44%
Data from iOS A/B test (top performer)
THE OPPORTUNITY
The marquee (hero module) is a core discovery element that can shape user’s first impressions of Paramount+. Today, the marquee receives little engagement and drives only a small fraction of content discovery. We want to rethink how we surface content in this unit and set a more positive tone for the rest of the discovery experience.
The Challenge
Consider what we’ve learned about areas of our discovery experience that have proven successful, and how we could apply this to surface content in a way that’s more consistent with the discovery experience, yet uniquely takes advantage of the additional real estate. We want this design to drive more clicks, content discovery, and average minutes watched.
My ROLE
Senior Product Designer at Paramount+ (sole IC designer)
Scope & Ownership
End-to-end ownership of UI, User Flows, Prototypes, Handoff, Competitive Analysis
THE Team
1 Product Manager, 2 Product Directors, 4 Dev teams
Platforms
A/B Test: Fire TV, iOS, Web · Full Rollout: All CTV, iOS, iPad, Android Mobile & Tablet, Web
VIdeos
Prototypes
Demos
CTV pt. 1 - Poster redesign test
CTV pt. 2 - Personalized CTA test
iOS
Web
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
- 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.
Unexpected 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
- 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.
- 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
WHAT's NEXT?
Personalized CTAs A/B test
DELIVERABLES
Dev handoff
.png)
.png)
.png)
Design GALLERY
Variant 1
OTT: Default state
OTT: Scrolled with video
Web: Default state
Web: Scrolled with video
iOS
Design GALLERY
Variant 2
OTT: Default state
OTT: Scrolled with video
Web: Default
Web: Scrolled with video
iOS
