Discovery+ Trailer Rail
We designed a Coming Soon rail that displays trailers for shows that have not yet premiered on the Discovery+ platform.
Project Duration: 2 weeks
Team: 2 UX Designers, 1 Product Manager
My Role: UX Designer
Client: Discovery+
P R O J E C T O V E R V I E W
Problem
How might we help viewers organically discover and preview upcoming D+ content?
Outcome
We designed a Coming Soon rail where users could view trailers for upcoming content and bookmark the shows they liked.
S O L U T I O N P R E V I E W
Coming Soon Rail for TV
Find, view, and save trailers for upcoming shows.
Viewers can browse and watch the trailers that will be displayed in a “Coming Soon” rail that sits at the top of each user’s “For You” page.
D E S I G N P R O C E S S
Double Diamond Method
Define
Design Question
Success Metrics
Target Users
Develop
Design Priorities
Interaction Flow
User Tasks
Deliver
Hi-fidelity Prototypes to product team for feedback
Discover
Understand problem and product context.
Assess competitors & industry standards.
0 1 | D I S C O V E R
Project Context
Issues with the Current Experience
Currently, D+ does have trailers for select shows, but they are hidden inside of a show’s page instead of on D+’s home screen.
This means that viewers can only find trailers by first searching for a specific show and navigating to its show page. However, we obviously can’t expect viewers to know what new content is available, so many trailers for upcoming shows are not viewed.
Conjuring Kesha Trailer is only visible to users once they click on the show to see its show page.
Motivation to Change the Current Experience
1. Responding to Viewer Feedback
Our viewers have indicated interest in watching trailers before beginning a new show, but they have no way to organically discover new shows in the first place.
“We have watched all the shows we care about on Foodnetwork and HGTV. Just would like a way to easily find new shows.”
“Make an option where you can preview a show before you watch a series to see if you would enjoy it or not.”
2. Supporting Business Goals
The product team and my design team got together to initiate a pie-in-the-sky project to see how we could change the current trailer experience. From a business perspective, there was interest in this project because through this new feature, we could potentially:
Increase Retention
Increase Engagement
Increase Positive Ratings
Benchmarking against Competitors
As a first step we looked into how our competitors integrated trailers into the viewing experience.
Finding:
We’re lacking most of the features that are standard amongst our competitors, so these missing features helped guide our design priorities in the next step.
0 2 | D E F I N E
Defining Scope & Success
Design Problem
How might we help users organically discover and preview upcoming D+ content?
Target Users
Though this rail will improve the experience of all customers, this feature is primarily targeted towards:
Customers who are actively searching for refreshing new content on the platform
Customers who like to plan ahead on what they will watch next
Customers who watch trailers to gauge interest before beginning the episode of a show
Success Metrics
We worked with the product and business team to define success metrics we would use to assess the efficacy of this feature post-implementation.
% of users who play a trailer on the Coming Soon Rail out of the total number who encounter the rail
Number of users who add the show to “My List” and opt-in to Notifications after viewing a trailer
Increased engagement with content as more trailers are preemptively released on the platform
Positive qualitative feedback from viewers
0 3 | D E V E L O P
Design Phase
Design Criteria
While this was a pie-in-the-sky project, we developed feature priorities for ourselves to keep our ideation focused and feasible.
1. CTV Design
We designed for TV first because TV is the hardest to design for compared to other streaming devices. It would be easier to scale our design down for mobile, tablet, and desktop in the future instead of vice versa.
2. In-line trailers
Able to watch trailers directly on the “For You” page, where the trailer rail is located.
3. Integrated Experience
Our design should naturally integrate into the existing D+ experience, where most content is housed in rails.
4. Key Metadata
Along with show title and show art, display premiere date and the network icon.
5. Closed Captioning
Design must be able to accommodate subtitles.
Interaction Flow
1. As a current D+ subscriber, I want to easily watch trailers for upcoming content so I can anticipate new offerings.
2. If I like a show, I want to add it to My List and get notifications so I can watch it as soon as it’s available.”
User Tasks
User Tasks
Users need to complete the following:
View trailers
Add to my list
Turn on notifications
The issues with “Add to My List” and “Turn on Notifications”
Awareness
Since these are new features for users on the For You page, how do we make users aware of these additional features?
Real Estate
Displaying permanent action icons near each trailer looked ugly and took up prime real estate. Would not be scalable for smaller devices
Interactions
We need to minimize the # of interactions because remote controls are relatively unwieldy.
Solution
After much experimentation, we decided to utilize a tooltip and overlay menu to solve this issue.
01 | Tool tip with “Press and Hold for options” appears in bottom upon initial focus, directing users to click on their remote.
02 | After clicking on the button on their remote, the user sees an overlay with options such as Add to My List and Notify Me.
03 | A toast appears at the top to provide confirmation once users complete an action on this list.
04 | Users will see the same action options if they bypass the tooltip and click directly into a specific show page, like the one above.
04 | D E L I V E R
Hi-fidelity Prototypes
Final Rail Designs
Design 1: Trailer in Hero with Small Cards
Overview
Trailer: Begins playing in top right hero after user focuses on a show card for 3 seconds.
Show cards: Standard small size. Premiere date appears upon focus.
Metadata: Displayed in top hero next to trailer.
Design 2: Expanding Cards
Overview
Trailer: Begins playing after card has expanded.
Show cards: Cards grow and shrink simultaneously to reduce nausea.
Metadata: Premiere date is permanently displayed. The rest show up when a tile expands.
Design 3: Wide 16x9 Cards
Overview
Trailer: Begins playing inside of the show cards after user focuses.
Show cards: Large cards that take up a lot of real estate.
Metadata: Premiere date is permanently displayed. The rest show up when a trailer plays.
Comparing the Designs
Design #1: Small Cards
Pros
Smaller, vertical cards in the rail display greatest amount of content simultaneously
Trailer playing in the large hero is visible and matches the current D+ experience the best
Cons
Users who want to browse though the Coming Soon rail quickly may prefer relevant metadata to be housed in the content cards
Users may forget premiere dates as they browse because the premiere date badge only appears upon focus
The Trailer Rail looks similar to D+’s current content rails so users might be confused
Design #2: Expanding Cards
Pros
Expandable cards save on static real estate without impeding the trailer viewing experience
The way the cards perform and reveal more metadata simulates a theater watching experience
Cons
Dwell interaction may be annoying and distracting to some users
This Interaction is very different from how the rest of the D+ system’s cards perform
Design #3: Wide Cards
Pros
The coming soon rail will be eye-catching compared to other rails on the page, which may increase engagement
Trailer playing inside the cards aligns with competitors and may match user’s mental model the most
Cons
In order to align with the current For You experience, the static cards take up a lot of real estate without presenting much metadata
Large cards may feel annoying and clunky to browse through for users who want to browse quickly
Our Recommendation
We ultimately recommended Design #3 to the Product Team because it had the best balance of usability and aesthetics out of our three final designs.
However, we still decided it would be best to test all three prototypes with users to get additional feedback.
H A N D O F F
Next Steps
We got positive feedback on our designs, but there are still open questions as testing to be done. I anticipate these will be the next steps for our prototypes.
Research
Trailer experiences for customers (UX/R)
How customers are interacting with trailer rail on other platforms (UX/R)
Analyze HBO Max Coming Soon Page & discuss with PMs who have worked on it
Testing
UI/Design Refinements
Rail Position
Usability Testing
Open Questions
Accessibility
Engineering Capabilities
Personalization of Coming Soon content
More Projects
Humankind
Ferndalemi.gov
