A bad video experience starts with this…

It's just a video player, right?

The video player plays a huge role in everything we do here at Viacom. So, when we were asked to re-think the design of our video player controls we realized that the stakes were high. We knew this would not be an easy task as the video player is a complex tool and was going require a lot of work. Our video team has done an amazing job providing users with a high-quality/reliable fast content loading video experience so we had to make sure that the design and user experience reflected that.

The player we produce will be used by all our brands. Some will customize the UI but most of them will not. This makes everything even more complicated, as we need to design something that works across all of our brands and this is where we failed when we designed the first version of the player in 2015.

What we've learned from the first re-design?

We had a good start, which was basically the idea to clean up the UI, get rid of bars and unnecessary elements. We also tried to come up with a different UI, by exploring big controls icons for key actions like Play/Pause and smaller icons for all the other actions, and on top of that we also thought it would be great to design all the icons from scratch.

Old player on the left side, first re-design on the right side.

The process for the first re-design consisted of two designers, working in different projects, one was the video player for web(desktop) and the other one an app for video consumption, two players, different platforms, no consistency, it could not work. In fact, the designs were not well received by both the brands and the users:

  • The UI didn't fit multiple brands look and feel
  • The UI was not working properly in small formats
  • Big controls were distracting users from the video
  • There was no consistency between desktop and native player
  • We delivered a product without doing any user-testing

We needed to go back to the drawing board and come up with a better process/structure, and that is just what we did.

Going back to the drawing board

The new process/structure that was put in place and remains in place consists of designers working closely with the user research team and also relying more on feedback from our brands, they were the first in questioning the position of controls in the middle of the video for example. This allows us to iterate on our designs more quickly and reliably, as we are able to answer key questions by testing our assumptions/hypothesis with real users.

We finally were able to come up with a design that both the brands and our users really like. We tested different positions/layouts in which users were unanimous when choosing the design they most preferred. The new version of the player has all the controls at the bottom of the screen; everything related to “controlling” the video is on the left hand-side and all the other actions, on the right-hand. The second re-design, also helped us to clean up the interface, giving even more focus to the video instead of the UI, and keeping some level of customization for the brands, such as progress bar colors, font style, load icon… The new player is on MTV.com, VH1.com and CC.com — check it out!

The new UI

Specific Use-Cases

  • Because the web player is always on a webpage with sharing options, the share icon will only appear in full screen mode and when embed.
  • The same for the video title, it will only show up when the title is not on the page
  • The scrubber will appear on mouse-over on web, but it will always be on native
  • On embed, we have included the brand logo on the upper left side
  • Volume icon is not available on mobile, because of gadget's buttons

Future

We will keep working on fixes and improvements to the existing video player but will also think about new features, from next up, to pause state, from lower thirds to vertical video.

Part of all the different views mode we explore for the player