Peacock is a video streaming service that operates as an extension of NBCU. My role was to define the experience for core navigation components on TV, desktop, tablet and mobile. Several features shipped as a byproduct of this sprint.

Problem

Since Peacock is only supported on LG Smart TV's we wanted to focus on the navigation experience for this view. Most people who have this TV also use the LG magic remote. This remote is a common pain point for LG TV Smart TV users. The LG magic remote has additional navigation capabilities.

Aside from the traditional up, down, left and right controls it also has a pointer option. So the user would have to point at the screen then click their selection. I had to assess how the pointer might affect the navigational UI components while streaming Peacock.

Sketching

‍

Blockframe

Blockframing is one of my favorite visual design exercises as it allows me to see the specified design in shapes and sizes without getting distracted by the details. Since the focus is on navigation I highlighted those elements in the blockframe. From here it became easier to translate the components into the UI.

Design

I inherited a design system that consisted of components which would be translated across each device. Since this is a video streaming service I started with the components for TV and worked down. The core component states that I focused on were:

• Arrows, how does the arrow sit on each rail when scrolling vertically and horizontally as well as other navigation choices ?
• Rails, how is the thumbnail displayed when a user is browsing ?
• Buttons, what action does a user take when a button is active (click vs hover) ?

Arrows (TV/Desktop)

The screens below display how the arrows transition when the user hovers on the arrow. It also shows how the arrows react when the user scrolls vertically and horizontally. I explored several options that would highlight the role arrows play in navigation.

For example the arrow does not appear at the bottom instead a preview of the next rail appears. The arrows remain aligned to each rail regardless of scroll orientation.

The focused arrow has a white glow, this is why the focused thumbnails have similar focus state.

Rails

The content from each movie sits on the rails. I wanted to highlight how the movie would look when interacted with. The below image displays what the thumbnail looks like on hover as well as how the other rails react. Hovering over a partially exposed rail does nothing while hovering over the two fully visible rails enables highlight. Only one rail is revealed at a time when scrolling vertically.

‍

Buttons

The conversation on buttons was around what each state would look like. Since there was a hover and select option it was important to define the difference between what the button states looked like in focus and on click. We had determined that hovering is a passive interaction while selecting is active. The branded button became the selected visual for the select action.

Based on common user patterns it was best to associate click with select and hover with focus.