Vimeo: Video Player

Introduction

Vimeo, one of the internet’s most beloved online video providers, serves several billion videos monthly. The Vimeo video player is used by independent creators and corporations alike to serve ad-free, HD video within a customizable interface. I was lucky enough to update the design and functionality of Vimeo’s beloved player in 2013.

My involvement

I was the lead designer for this project. I was responsible for all visual design, interaction design, drawing iconography, and some front-end development. Additionally, I was responsible for documenting the visual and interaction design of the player in a 20 page specification for the sake of posterity and institutional knowledge.

Project results

The new player shipped and, largely due to the new all HTML5 playback interface, increased video reliability while decreasing loading time. The new sharing functionality led to increased video views due to network effects.

Problem framing

Vimeo’s player was missing a lot of key functionality. There were weekly requests, internally and externally, for closed captions, sharing, and integrations with Vimeo’s new Tip Jar and On Demand products. Additionally, with the advent of HTML5 video, the player’s interface layer was ripe for an overhaul. I worked with a small team of two engineers and one project manager to add new functionality to the player and subtly update the visual design.

Process

Since the extant player lacked any documentation or written specification, I began by by auditing the visual and behavioral design. I documented all spacing, color, type, and animation values in order to establish a baseline for any design changes. This also made it easier to write the finished design documentation once the new design was shipped.

Sharing menus

Afterward, I prioritized the new features in terms of impact to the player design. The new Sharing menus were most likely to have the biggest impact on the player’s design, so I began there. The menus needed to be responsive, customizable in terms of color and sharing options offered, and needed to retain the big, bold, friendly Vimeo aesthetic. We tried many iterations and shipped a version that combined embeds and sharing together.

Closed captions

It’s hard to believe, but Vimeo didn’t have closed caption functionality until this project was completed! Designing the actual text captions was fairly straightforward, but designing the menu was surprisingly complex. Should the menu be a toggle? What if there was more than a single caption track available? What if there were captions available, but not in the language with which you used Vimeo? What if there were too many captions to show within a single flyout menu? After answering all these questions, we had a Closed Captions system worthy of being included in Vimeo’s player.

Conclusion

From the outset, it was clear that redesigning Vimeo’s video player was one of the most challenging things I’d ever work on. The amount of nuance involved in an embedded video player is staggering: there are an infinite number of sizes at which it can appear, users can remove entire sets of controls, the color of most of the UI can change, and of course, the content is utterly unpredictable. It was an amazing challenge and the project was ultimately successful. We launched in January of 2014 and received praise from Techcrunch, Gizmodo, and more.