Channel Tray

Product Design Lead | TV | Design a new feature

Allows users to quickly browse through the channels they regularly watch with live previews.

The Channel Tray is a feature for TV streaming devices. It allows users to quickly browse through their favorite channels and see a live video stream of what's currently playing on them without tuning away from the channel they are currently watching. The feature solved for multiple known pain points and also opened a path to newer functionality and user benefits.

I led a team that designed this feature. Worked with multiple product and development teams to define, design and deliver this product. The feature did exceedingly well in user testing and was positively received on launch.

What is the ask?

How can we support the user's habitual channel browsing and tuning functions on a new product?

Users who are switching to live streaming products are in a majority of cases moving from a traditional cable or satellite TV provider. These users have well-established habits & behaviors, a key one being their expectations around channel browsing and tuning. How can we fulfill these user expectations around channel browsing and tuning on the new products they are moving to?

Who are we designing for?

Older users transitioning from traditional TV services.

User segmentation data from AT&T's live streaming products showed that the largest cohort of users were older and their primary viewing device was the TV. They are creatures of habit and over-index on watching news and sports.

Data also showed a majority of AT&T live streaming product users had transitioned from traditional cable or satellite TV providers.

What do we know?

Users watch a small number of channels regularly and they want to get to these quickly.

User expectations from traditional TV providers

Cable and satellite TV remote controls offer dedicated Channel Up/Down buttons, PREV button (takes users back to their last watched content) and a number keypad which support low effort channel browsing and tuning.
Jumping back and forth between (2) channels you are watching is rated as a top 10 frequent and important task on DIRECTV (AT&T's satellite TV product).
In survey data, a little less than half of DIRECTV users rate their experience of flipping through channels as a 9 or 10 (out of 10).
In user testing where users were allowed to build their ideal remote control button set, the PREV button was listed as a top 10 button on the remote control.
Users attach a lot of importance to channel numbers and for many it is the primary path by which they tune to different channels.

How many channels do users actually watch?

Of the ~190 channels available to the average TV household in 2018, under 7% (12 or less) are actually tuned to.

Issues with current experience in Open Video

OTT device remote controls have very limited buttons compared to cable/satellite remote controls and none offer dedicated Channel Up/Down buttons, PREV button or a number keypad.
Market research data shows that 76% of AT&T TV NOW users said they would be extremely/very interested in being able to quickly access and switch between previously watched channels.
Without a number keypad, there is no way for a user to directly tune to a specific channel number.
An existing feature of using the left/right keys on the remote control to channel surf has had a lukewarm reception. Without channel numbers, the channels are ordered alphabetically but users have no familiar patterns or habits around this order. This results in users surfing through channels without knowing what channel is next.
An existing feature that displays recent channels watched by the user has underlying issues that do not solve for the channel surfing and tuning needs of users. The carousel does not refresh in real-time, is not device specific and covers too much of the currently playing video.

Design Ask & Goals

Help users quickly access the channels they regularly watch.

Design Ask

Given limitations of OTT remote controls, how might we help users moving from legacy TV services quickly access the channels they regularly watch?

Design Goals

Minimize time needed to get to previous channel
Elevate the channels the user regularly watches
Leverage learned behaviors around channel browsing and tuning from traditional TV services
Give users context of what channel they are browsing to next
Provide users with quick info of what is airing on each channel

Measures of Success

Feature reporting indicates that it is a primary access point through which users begin live TV streams
Feature is the primary method by which users switch to their last watched channel

Design Directions

Explored two directions. One rooted in traditional channel surfing; the other in easy access to a small set of channels.

Channel Change

This direction was based on mimicking the channel surfing behavior that traditional TV users have seen for decades. Users can tap LEFT/RIGHT from video to go to the previous/next channel in the channel line-up.

While the direction built off existing user expectation, it did not work with the learned behavior that users had of using their Channel UP/DOWN buttons on traditional remote controls. In this version, the user was also committed to a channel change the instant they tapped left/right on their remote. While this matched traditional TV behavior, it started a team conversation of whether that was a behavior we wanted to match.

Channel Tray

This direction focused on enabling the user to browse through the channels they regularly watched without taking them away from the content they were currently watching. The design took advantage of of the learned behavior of using Channel UP/DOWN to browse through channels but also extended it to display more than just the previous or next channel.

Tapping UP from video displayed the tray. Users could then see what was airing on their last watched channels and decide if they wanted to tune away from what they were currently watching.

In the iteration above, when a channel was highlighted, a live preview of what was currently airing on the channel began to play. This solved a issue that users often ran into - tuning to a channel only to discover it was on an ad break. It also solved for something we weren't even looking at - a way for users to quickly create custom sports views of multiple games and to tune to the one that looked most interesting.

Evaluating the Design Directions

We evaluated the 2 directions against the design goals and primary user stories which indicated that the Channel Tray was the stronger direction. We then did further design iterations on the tray before taking it into user testing.

Testing

The Channel Tray design had uniformly positive feedback and multiple users expressed repeated interest in the feature.

To validate if users shared our perception that the Channel Tray was a good solution, we built a prototype and brought existing users in for testing sessions. The design did exceedingly well in testing. It had uniformly positive feedback and multiple users expressed repeated interest in the feature.

Some key feedback that came out of testing

Focus on program over channel: User decisions to tune to a channel were driven more by what program was currently airing on the channel rather than the channel itself.
Number of channels in the tray: Users confirmed what previous research data had indicated. Namely, that they watched a handful of channels regularly and saw value in quick access to these channels.
Visual style: Multiple users had feedback that they liked the minimal visual style that provided 1-click access to their regular channels while keeping the focus on what they were currently watching.
Using live preview to watch multiple games: An unanticipated but nice surprise was hearing users talk about how this feature would help them watch multiple games at the same time.
User perception of using left/right keys on the remote control to channel change

Comparison to Networks carousel on Youtube TV

From the competitive audit, we had identified this feature as similar to the Channel Tray but with some key differences. Namely -

Carousel listed all available networks, not a sub-set
Focus was on the channel and not on the content
UI took over more of the screen and took user focus away from the currently playing content

We were curious how this implementation compared to the tray.

Final Design & Delivery

Press UP to see your recent channels. Highlight any channel to see a live preview.

Press UP from fullscreen video to see your recently watched channels sorted in chronological order. Each channel tells you what's airing on the channel and how much time is left for the program to end. Highlight any channel to see a live preview.

While the channel drives the order, the focus is what is playing on the channel. The tray UI occupies a minimal screen area allowing currently playing video to keep center stage.

What's Next

Executing on more 10ft devices. How does this translate on a phone or tablet?

The Channel Tray was first implemented on Roku. The feature almost immediately moved into the Top 4 most used screens in the app. Design has been completed and initial development is underway on other 10ft platforms. We are also looking at if/how this could extend to phone, tablet and web.

What did I learn?

What you leave out can matter even more than what you keep in.

We could add more channels in the tray. We could add more metadata to each channel. We could allow users to favorite channels. We could add an entry point to the Guide. Each of these and more came up multiple times from stakeholders. We worked through all of them. We figured out how each of them could fit into the design. And in the end, in each case, we made the call that it took away from the simplicity of the core feature. We weighed the additional benefit against the core need and the core need won out every time. And to me, it's at the heart of why this feature has done so well. Those decisions meant that we focused on 1 thing and 1 thing only - How might we help users quickly access the channels they regularly watch?