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 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.
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.
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.
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 .
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
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.
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.
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.
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.