Objectives:

In early 2012 we (site design team @ Netflix) found opportunity to refresh our web video player. Our objectives were to:

+ maintain current functionality / minimize user retraining

+ Increase overall usability

+ Overhaul the visual aesthetic

+ Allow for touch input

+ Improve scalability

+ Eliminate legacy code

My Role:

+ Conceptualized and finalized visual design

+ Co-led user interface design

+ Conceptualized then collaborated with prototyper on motion design

+ Wrote visual and UI spec

+ Collaborated with silverlight engineers during production

+ Aided in QA

ORIGINAL

This was the original Netflix.com video player. It worked well enough, but suffered from many interaction issues: small hit zones, no touch support, and no way of switching episodes without exiting playback, just to name a few. It wasn't that pretty either. :)

OVERVIEW

I started with very 'blue sky' concepts, with the intention of scaling back as needed. It's usually more fun to give yourself the freedom to explore first before building in the product constraints.

Here's an example of a very early conceptual sketch of the player. I was playing with a circular progress bar to try to illustrate an idea I had; that story-lines have a cyclical quality to them as opposed to being linear. In a story you usually have stability, conflict, resolution, and then back to stability. Wouldn't it be cool to have a progress bar that reflects this cyclical quality? Since it didn't make it past the concept phase, maybe not.

Many more sketches followed, from floating players, to ones affixed to the bottom that slid up when activated, to transforming players with various modes and menus...

Early concept of the new player, I called it "Katana"; simple, precise, fatally awesome.  Not awesome enough, I ditched it because it couldn't really scale once more controls were added... — Early concept of the new player, I called it "Katana"; simple, precise, fatally awesome. Not awesome enough, I ditched it because it couldn't really scale once more controls were added...

Another early concept of the player called "Superflat" - visual design inspired by the superflat art of Takashi Murakami.

Early concept seeing what the player would feel like affixed to the bottom edge of the viewport

Early concept called "Shuttle" - this direction got closer to what the final design would be.

After many iterations and exploratory sketches (30 or more!) I started to narrow down to a final design. Some guiding principals the team and I developed along the way helped that. For instance: we decided that video player controls that 'float' would provide the best visual effect. We landed on a fly-out menu system to handle all of the controls (i.e. episode chooser, volume, etc.). We solved for scalability with a control bar that could scale appropriately depending on the number controls available to the user-- as well as the viewport width. We made the player touch-capable by carefully deciding on hover/click states for each control. The final redesign was upon us!

REDESIGN

Alas, the final design (below). I found a lot of opportunities for improvement and was able to execute on most of them considering the time allotted for the project. The final design went into production and currently serves as the primary UI for the Netflix.com video player.

The final visual design for the Netflix video player

Interaction Highlights

Pause Screen

My favorite addition to the new player, the Pause Screen. I wanted to capitalize on that moment we all have: you're watching something, hit pause, and go take care of something for a couple minutes. When you return you hit play and continue watching. The Pause screen is a way to 'welcome back' the user when they return. It uses the paused video frame as a background image, and overlays the content's metadata information on top. A quick reminder to the user of what they were last doing before that much needed bathroom break.

Progress Bar Focus

Designing the progress bar to 'float' above the controls gave the video player a nice aesthetic. To continue with the theme I wanted the progress bar to react to the user by moving out of the way when it was no longer the focus of the interaction. This 'push down/up' animation was the result. The progress bar always hides when a menu is activated and then re-appears when a menu is dismissed.

Scrub Nub + Trickplay

The previous 'scrub nub' was very small, hard to target, and didn't feel grab-able. I came up with a nub that would grow on cursor hover. In the active state, it 'squishes' into the progress well as the user drags the nub along to scrub through content.

Additionally, trick-play needed a revamp. The old version of the interaction took up the whole screen and unnecessarily caused a shift in context for the user. Instead, trickplay would now resolve into a simple thumbnail preview.

Volume Slider

The volume slider. Some nice-to-haves that I added in during development:

expanding 'nub' - larger 'hit-zone' makes it easier to grab, animation reinforces its an affordance that can be interacted with.
reactive speaker icon - depending on the volume level the speaker icon changes: 3 waves = 100% volume --> X = mute.

Episode Menu

My design partner, Loretta Hui, came up with this layout for a scalable episode chooser. I finalized the visual style and worked with engineering to create the animations seen when transitioning between seasons and episodes.

THE PRESS

When we released the player, Netflix was still licking its wounds from the Qwikster incident. :)

To our surprise, many people seemed to like the player and saw it as a sign that Netflix was still focused on improving the user experience for it's customers.

Here are some of my favorite reviews, click the preview images for the full article.