Videogram Embed

“Online video is a solved problem.”

There is YouTube. There is Facebook. Vine. Vimeo. They all work more or less the same – you scroll through thumbnails, select one. Pause, comment, like, share. With dozens of startups with all sorts of incredulous ambitions, those working on video deserve our attention the least… right?

Wrong. Despite our initial skepticism, we realised with our first glimpse of Videogram that it was a game changer. It was brilliant. Rough, for sure, but brilliant.

The Product

Videogram has created a new way to watch video. The interface breaks open the content of any video clip, exposing and highlighting the most interesting moments. Instead of just one thumbnail to decide on whether a video is worth your time, you have a patchwork of dozens. Viewers can jump right into whichever they find most interesting, without having to wait for the whole video to load or to scour the entire thing to find the good bits. As it turned out, there are still plenty of problems with online video to solve.

Luckily, Videogram understood those well. A Tokyo-based startup with offices in San Francisco, Mumbai and Seoul, with investment from Turner Broadcasting, NTT DoCoMo, Samsung and 500 Startups, their team seemed to have a unique grasp on video publisher needs and user behavior across very different markets. But without designers in house, the team was struggling to resolve usability issues which were confusing users and limiting engagement.

The Research

It only took a few minutes playing with Videogram to reveal most of its usability problems, but we ran a few user observation sessions just to be sure.

The old embed format

Here’s what we found:

• Users misunderstood the Videogram embed for a photo gallery, due to the white borders and unusual player UI.
• On large screens, the embed displayed too many images, paralyzing the user with too many choices.
• Users couldn’t figure out how to share or comment on a video, since doing so required first closing the video.
• During play, users were using the YouTube timeline to navigate instead of the Videogram keyframes.

We also studied how friends and relatives watch video online using other services like YouTube and iTunes. For better or worse, video watching is often a partial attention activity. Viewers often use multiple devices, browser windows and apps simultaneously to chat with friends, read comments, reviews and profiles, share opinions, even work or shop, all without touching the pause button.

We saw an opportunity to make watching videos with Videogram the best tool to support this fluid experience.

The Solution

Uncovering a narrative

To make it easier to digest the narrative flow of the video, we reduced the number of frames, simplified the layout and reduced the number of image sizes from five to three.

We decided to keep only the 3 biggest frame formats.

An example of the updated manga view. Less cluttered, easier to scan, uncovering videos' narrative just as a comic book would do it.

The new, simpler layout was much closer to the comic book format which had originally inspired the Videogram concept. Users can instinctively feel which frame comes first and in which direction the story unfolds.

We also added a time code on each frame and changed the background to black, a color more readily associated with moving images.

Finally, we redesigned the player UI with a large, more conventional-looking play button and timeline. There are some parts of the online video experience that have become so established that users are confused without them.

Videogram users can access other keyframes without having to go back to the thumbnail grid. It remains an embed, but one you can genuinely interact with.

A fluid UI

With the new embed, users can now transition between three modes—browsing, viewing and commenting—without ever pausing.

Once the video begins, timestamped comments from other users stream by in sync with the story, so you understand the context of what’s being said, and catch others’ responses at the moment that they matter.

Play the video for a demo:

This genuinely fun feature, already popular on music players, is a near first for video. Nico Nico Douga also has realtime comments in the browser covering up the image in garish colours and fonts—perfectly fine for cat videos, but not much else.

In Videogram’s commenting mode, the video moves out of the way but keeps playing, only pausing once you start typing, then restarts once you’ve submitted your comment.

When you share the video, the player automatically grabs the current frame you’re watching to best illustrate your Tweet or Pin.

How we did it

We built the Videogram player prototype over seven intense weeks of iterative design and development.

To keep project momentum, we made a “no homework” rule for meetings. Every Friday we shared a prototype with the Videogram team, clicked around together, made decisions on what was working and what wasn’t, and kept moving.

Everything was in the browser, allowing both teams to run continuous quick hallway usability tests, run demos for partners and investors, and share ideas and feedback based on using the functioning prototype. Once the new UI had been put through its paces, the Cinemacraft team rebuilt the player for production on the basis of our work together.

Both teams understood that while the new version was going to be light years ahead of the previous one, no software is ever finished. This shared understanding allowed us to filter feedback and ideas down to the truly essential, and deliver a focused and beautiful Version Two, on time and budget.

‍