Yahoo Video Player Redesign
Timeline
Q3 2015
Platform
Mobile, Web, Tablet
Role
Sole Product Designer
Description
With a renewed focus on video, Yahoo saw a crucial need to redesign the video player across all platforms and properties. Aligned with Yahoo’s new internal design language, the redesign was completed in time for the first, free global livestream of an NFL game (partnered with Yahoo) in Q3 2015 which garnered over 15 million unique visitors.
The Problem
An audit revealed too many different video experiences across all of our platforms and properties (finance, sports, news/homepage) – even more than 10 play buttons were counted during the audit. The goal was to come up with a scalable design that would offer a consistent and optimized video consumption experience.
Spotlight 1
Aligning with Yahoo’s internal design language guidelines for iconography, I polished a set of player control icons. While originally creating icons to be pixel-perfect, there were a few optical illusions that had to be addressed. Depending on the icon’s placement and positioning relative to other icons, the stroke and/or height of a few icons were increased or enlarged.
The pause bars utilize a thicker stroke for substance, and the CC, replay, and settings icons all have a slightly taller height compared to the rest of the icon set. The curvature of the shapes follow pre-existing guidelines from Yahoo’s internal design language.
Final Designs
Mobile: Lightbox Walkthrough
Impact
A new video player rolled out across all Yahoo platforms and properties just in time for the first (ever) free, global livestream of an NFL game in October 2015. The Buffalo Bills vs Jacksonville Jaguars game noted:
15.2M unique views
33.6M total views across all devices
>460M total minutes of watch time
<1% rebuffering rates experienced by viewers
Streams could reach up to HD quality (maximum bit rates over 6.74 megabits per second and 60 frames per second)
Not only did the redesign offer a consistent and clean experience in time for the NFL partnership, but I also created new features to further optimize video experiences across Yahoo with lightbox (a video-focused experience centered around curated and related playlists) and pinned players (displaying a pinned or minimized video player when a user scrolls down a page) which was adopted by all properties and platforms. I received an internal award (“Most Impactful Design Associate”) in 2015 for this project.
Learnings
As my first project upon joining the company, I had to hit the ground running to meet a three-month deadline. It was a very collaborative effort involving product and engineering. In fact, I learned how to create and pass on intricate specs on-the-go. It was also my first experience working on an icon set, growing my skills on accessibility, scalability, and pushing pixels.