Facebook: Video Ecosystem

Introduction

In 2014, Facebook sought to update all of its video players in order to incorporate new features and establish the Facebook Video brand. I worked with engineers, project managers, and other designers to create the visual and interaction design language of Facebook’s video ecosystem.

My involvement

I was responsible for designing and prototyping video players, interaction paradigms, and visual language that would be used within all of Facebook’s video products, including iOS, Android, web, embeds, and the 360° video player.

Project results

Shipped video players and interaction paradigms for web and mobile platforms that power billions of video views each day. Watch time and daily video views were increased as a result.

Problem framing

Because Facebook had ignored video for so long, a lot of basic video quality-of-life features were missing. Volume controls were finnicky and hard to find. No affordances existed for displaying playback options like speed or resolution. Even basic things like scrubbers and timecodes were displayed inconsistently and with poor user feedback. Additionally, Facebook was branching out into new content types such as embedded video and 360° video. Without the requisite interaction and systems design, Facebook’s video empire would lack the most basic user-interface elements it needed to succeed.

Process

When I joined the team, I worked to design video players across all platforms concurrently. In order to effectively communicate the Facebook Video brand, the players for web, iOS, and Android needed to share a visual and behavioral language. Designing for all platforms also allowed me pivot to support any platform-specific engineering effort without needing time to adapt the design.

Autoplay

While I had experience designing video players, Facebook’s video ecosystem posed a variety of new challenges. The biggest challenge was around autoplay. How do you design video players differently in a world where videos play by default? The goal was no longer to get the user to click on a video thumbnail. Instead, the goal was to get the user’s attention. We experimented with every manner of indicator, from whimsical dancing speakers to plain text messages, to communicate the concept of autoplay and “click for sound”. However, we never found the right solution until I worked with Brady Voss, another designer and close friend, on the Channels project.

Channels

What’s better than getting someone to watch a video? Getting them to watch two videos. Or three. Or four. Since autoplay made videos play automatically, we had the opportunity to bring the user into a richer experience when they tapped or clicked on a video. Brady Voss and I worked together to create Channels, an experience that allows the user to enter a miniature, darkened News Feed full of videos related to the video they clicked on. This new experience required a number of new interaction and visual design decisions, as well as a new video player that could sit comfortably within a ~350 pixel wide area.

Embedded video player

About a week after joining the team, I was asked to design an embedded video player that could launch at F8, Facebook’s annual developer conference. I worked rapidly with one engineer and a lot of feedback from stakeholders to create a basic, but nice looking embedded player that can be seen across the desktop and mobile web today.

360° Video Player

I worked closely with engineers from Oculus to create Facebook's first 360 degree video player. We needed to provide the user with a way of manipulating the video from within News Feed or fullscreen on desktop and mobile. We opted for a combination of manual control (click and drag on desktop, tap and drag on mobile) and gestural control. We launched on Android with the best content ever: a tour of a setting from the yet-to-be-released Star Wars: The Force Awakens.

Asset and design language management

One of the less visible, but still wildly important, aspects of my role was maintaining the design language for the video ecosystem. Everything, from the 1px black outline on the scrubber to the corner radius of a flyout menu, needed to be documented and maintained in a way that was easy for designers to copy and engineers to implement. I kept thorough documentation and specs for everything I designed so that it could be used later.

Conclusion

At the time of this writing, Facebook serves billions of video views per day and is considered to be the world’s fastest growing video platform. The interfaces I created are used to play every video on the platform.