In early 2012 we found opportunity to refresh our web video player for Netflix.com.
Our objectives were to:
+ Maintain current functionality
+ Increase overall usability
+ Overhaul the visual aesthetic
+ Allow for touch input
+ Improve scalability
+ Eliminate legacy code where possible
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 visually appealing either.
During the design exploration stage we ran through many different directions for how a new player UI would work. As a design team we always start off pushing the boundaries as far as possible and then scale back as we get rid of bad ideas and identify good ones.
After many variations we honed in on a final direction - a “floating UI”. The idea was to have a UI that tries it's best to not compete with the content , to the point where it almost feels to be a part of it. The image below represents the first step in locking down that direction.
After simplifying the visuals and perfecting the interactions, we ended up with our final design.
Final Design - Video Walkthrough
Final Design - Details
Translating the new design to our HTML5 Player
After release of the new UI (originally created for the silverlight browser plugin), it proved to be an effective player UI, so much so we were able to reuse it for our new HTML5 player experience. You can read about it here on our Tech Blog!