Xbox Gets TV

Xbox 360 opened as a TV & video platform in 2011. 

Hulu, YouTube and others were core to the success of this program, and deemed as hero apps. 

Located in the strategic Bay Area, I directed a team to design 2 hero app experiences, powered by Kinect and Xbox technology.

How Might We

Enable controller, gesture and voice interactions concurrently in the experience?

Translate the Metro design language for TV? 

Comply to and evolve the Human Interface Guidelines (HIG)?

Hulu Plus Home

Hulu Plus on Xbox

In partnership with the Hulu design team, we analyzed their information architecture, and mapped the experiences into the still-being-defined page views and Human Interface Guidelines.

Our team was in a strategic position to support content partners like Hulu with the developing design guidelines, as well as to propose/evolve interaction patterns and components by collaborating with the platform team.

 

Hulu Plus Gallery

Content is king

3P apps were not expected to be 100% consistent. The “secret sauce” to their success should be highlighted. With Hulu, they had a collection of curated, rich metadata including world-class content artwork.

Inspired, I pushed for a creative direction showcasing the visual artwork, while minimizing text metadata, all in a subdued background.

Hulu Plus Details

Signature UX

Another signature experience is the “one-click” access to resume a show you’re watching.

This, and other features introduced during the time, marked the beginning of the binge watching phenomenon.

Experience Outcome (XO)

As a Hulu Plus user, I want to resume watching a TV series.

Play Video

Gesture UI

We utilized Experience Outcomes (XOs) to meet core user needs. One of which was to ensure users could resume watching a TV series in an input modality most natural to them – with hand gesture, their voice, or the game controller. 

This motion study captures an end-to-end gesture experience without any gap or dead end .

Hulu Plus IA

IA & Metro

Another challenge is to incorporate a highly complicated information architecture into a flat, rectilinear Metro design language, resulting in a simple UX for the users. 

What people are saying

The best experience for Hulu Plus you’ll find on Xbox… This app has taken a major leap forward in design.”

YouTube on Xbox

Our team also partnered with YouTube in a design partnership to adapt the its experience to be in compliance with the platform guidelines. 

As opposed to high production videos, YouTube is known for its user generated content. We took it as the secret sauce to ideate on.

YouTube on Xbox

Information hierarchy

First, we asked for an algorithm to optimize for HD-quality key art, extracted from the video to visually represent the content.

Then, to tackle a more complex set of structured data, we introduced more layers of information hierarchy for text metadata, such as time stamps, number of views and creator username. Additional patterns we introduced include Categories, Channels and Playlists.

Autoplay

A large number of YouTube videos are short-form. Autoplay keeps videos playing without the users having to select the next video.

This was deservingly deemed as a signature UX, as we strove to push for a Leanback TV experience. 

In tandem, users are given the option to browse for other relevant videos to watch, without leaving the playback screen. 

Helpful overlays

Yet more features associated with user generated content – actions for social connections, content moderation and media controls. 

The Action Bar, along with a gesture-friendly Filter & Sort pattern, were well received and added to the platform guidelines. 

Experience Outcome (XO)

As a YouTube user, I want to
find a video to watch.

Play Video

Happy path

This motion study articulates how a user might navigate from the Xbox Dashboard to Video Playback, using hand gestures. 

Alternatively, the user could traverse multiple layers of navigation by using their voice.

YouTube wireframes

Gesture, voice and controller modes

Fun fact:
This project required 3 sets of wireframes to be crafted for each key flow. One for each input modality. 

What people are saying

The crown jewel. This will be the app that everyone uses… this is by far the best iteration.”
Guyism, 2011