Spotlight Unit
2017
Unit CTR
86%
Additions to My List
45%
Reminder Added
34%
THE OPPORTUNITY
Whether it’s an original series with popular IP like Halo, an exclusive blockbuster movie like Top Gun Maverick, or a high-profile live event like the Super Bowl, Paramount+ is always promoting new content. Today however, the monotonous structure of our discovery experience limits our opportunities to promote content in an attention-grabbing way.
The Challenge
Design a unit that directs user’s attention to a single title at any particular moment in the discovery experience. This unit needs to cohesively integrate with our existing discovery page structure without disrupting. To achieve this, we will need to seamlessly transition between our “Content Highlight” (video preview) experience and a single title takeover moment.
My ROLE
Senior Product Designer at Paramount+ (sole IC designer)
Scope & Ownership
End-to-end ownership of UI, User Flows, Prototype, Dev Handoff, Competitive Analysis
THE Team
1 Product Manager, 1 Product Director, 4 Developer Teams (8 devs)
Platforms
CTV, Web, Native Mobile & Tablet (iOS, iPad, Android Mobile & Tablet)
VIdeos
Prototypes
Demos
Upcoming event state
Live event state
Multi-item support
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
Problems
- The homepage marquee/hero unit is our primary space in the discovery experience to promote high profile releases and events, however this unit can only be displayed at the top of the page and currently receives very low engagement from our users.
- If users choose to skip over the top marquee/hero unit, we've missed our opportunity to place a more prominent spotlight on potential content of interest.
- While the Homepage carousels are personalized to each user through machine learning, the monotonous visual appearance diminishes the value of this personalization, leaving little opportunity to grab the user's attention once they've scrolled past the marquee/hero unit at the top of the page.
Goals
- Product Goal - Diversify our merchandising capabilities to drive more awareness and engagement with live events and new content
- Business Goals:
- Drive more clicks and video plays on live events and tentpole releases
- Drive more overall awareness of upcoming live events and new releases (Details Page visits, My List adds, and notification adds)
User problems
RESEARCH
Gathering Insights
Competitive analysis
- Competitors appear to opt for simplicity in their layouts of single-item promo units, keeping the amount of controls and metadata to a minimum, allowing the content and video preview experience to take center stage.
- While many competitors seem to embrace a prominent layout that primarily draws focus to their single-item promo unit, it's still compact enough to offer visibility into the neighboring content above and below the unit.
- Many single-item variations of competitor examples allow the unit to be agnostic to where it falls within the page, displaying it at the top of the discovery experience or between carousels further down in the scroll trajectory.
EXPLORATIONS
Early concepts
- Iteration 1 Overview:
- Started very basic, primarily leveraging existing design system components, patterns and assets already used throughout the experience, but scaled to take advantage of the larger real estate.
- What Didn't Work About Iteration 1:
- Presented challenges with production assets, creating scenarios where the poster asset would look redundant against the initial background artwork before video preview.
- While the enlarged poster presented opportunities to scale this unit to support multiple items, its size felt distracting and overpowering next to the video preview experience that was intended to be the focus.
- Iteration 2 Overview:
- More of an experimental approach, exploring new patterns designed to draw the user's attention and distinguish the unit as a visually unique part of the experience while keeping the design grounded with stylistic properties consistent with the foundations of our design system.
- What Didn't Work About Iteration 2:
- Introduced multiple patterns new to the Paramount+ design system during a time when we were striving to unify our discovery experience.
- Increased complexity for production design, introducing workflows to support new classes of production assets.
Unexpected Challenges
Transitioning in & out of content highlight
Evaluating dev constraints
All 4 developer teams did a spike to find a solution to transition in and out of our content highlight experience to make room for a promotional spotlight unit without breaking the mechanics of our current discovery experience. Each team came up with their own unique solution, some platforms having more limitations than others.
Working toward a solution
We explored 3 different approaches to achieve a smooth transition in and out of Content Highlight. This required working closely with all 4 dev teams to establish a consistent solution that could work for all platforms, compromising in some areas to ensure the solution was simple and achievable enough to deliver in the near term.
A solution for all platforms
WHERE WE LANDED
Picking a direction
- With the final design, we met in the middle between iteration 1 and 2, leveraging existing design components and patterns with less drastic alterations and a simpler UI structure with the flexibility to be agnostic to where it's surfaced within the scroll trajectory of any discovery page.
- With the importance of the upcoming live event use case for this unit, we decided to add a custom countdown experience to heighten anticipation for the event.
- To simplify the MVP solution, for any upcoming Live events or VOD content, we stuck to a generic primary CTA label, "Go To Details", that could apply to all content types.
WHAT's NEXT?
The future of Spotlight
- Support for all content types so it can reference not just shows and live events, but also movies and "Hubs."
- Added support for multiple items, including a mix of both promotion and content items in a single carousel.
- Multi-item support could leverage the "peek ahead" UI in the form of a nested carousel within the unit.
- Support for Add to My List on OTT platforms by leveraging existing tooltip prompt (bottom right corner) and long press functionality.
DELIVERABLES
Dev handoff
No items found.
.png)