Overview

Online video has been curated, but not meaningfully organized. It's not browse able. YouTube gives an amazing repository for videos, but it's difficult to truly find what you're looking for (because you don't know what's on). Blippy existed as a short-lived web experiment for online video. It allowed people to create their own communities of video and video-watchers.

Role

I joined the team in August 2012 to lead all design efforts (UX, visual, research, interaction).

Goals

Our vision throughout the process aimed to help you figure out what to watch on the internet. A large part of solving the high level problem lied in building a tight and sustainable community. We came up with three focal points that would help us accomplish this:

  • Consumption: How might we build the best experience for watching video on the web?
  • Curation: How might we help people collect videos into meaningful and useful buckets?
  • Comunication: How might we help facilitate discussion between video watchers to build a sense of community?

Video Consumption

How might we build the best experience for watching video on the web?

The ability to play a video while browsing through other content remained an important feature throughout our product. We noticed many people on YouTube wanting to browse at the same time a video was playing. This still happens today. They open a video, then a new browser tab to queue a new video or search for others. Throughout our development process, we explored different layouts that would show both the playing video and browseable content. We were unsure how much space to devote to a playing video vs browseable content. Ultimately, a split layout allowed users to be more in control of their viewing experience.

I sketched various layouts to explore how the key UI elements could integrate: the video player, browseable content, a queue, and comments.

Version A uses a 30% sidebar to show the user profile and a queue. The other side shows a player and browseable content underneath.
Version B splits the player and browseable content right down the middle for a 50/50 layout.
Version C places focus on the player and gives a quick access to navigation along a left sidebar. Browseable content remains in between these two in a thin column.
Version D, like B, splits the browseable content and player evenly. The queue is accessible as a strip across the top.

Of these sketches, we decided internally to build D first. We wanted to be able to show more browseable videos at once to increase the chances that the user would find at least one interesting video. It also seemed most intuitive with the flow we’d intended, which started with browsing videos to watch before selecting one to play. Putting the video player on the right let users start from the left and move naturally to the right. We had some initial concerns in the team that it felt like weird positioning since advertisements are generally placed on the right. In our first developed iteration, we went ahead and built this to see how users would react.

This is one of our first iterations on the video player. The dimensions and interactions remained largely the same throughout the process as we received positive feedback about it during user sessions.

We found in our Retrospective interviews that users initially were not used to the player being small and positioned at the right, but eventually loved the layout. More importantly, everyone loved the ability to browse and perform other activities while a video was playing. Shown below is one of latest iterations in the player. On the left is a community page created by a user interested in animation videos.

Users liked the ability to browse content and watch a video at the same time. We maintained this proportion and interaction for the player in our latest iteration

Video Curation

How might we help people easily collect videos into meaningful buckets?

We understood that people watch YouTube videos from all sorts of places on the web: YouTube.com, personal blogs, news articles, Reddit, etc. It wouldn't have been realistic to expect everyone to immediately join Blippy to watch video, but we still wanted to make sure people could organize what they were watching into meaningful buckets. In one of our early versions of the product, we built a bookmarklet (compatible across browsers) to allow people to save videos to Playable. This gave users a chance to take our experience with them wherever they went on the web. Below is a brief storyboard I created to communicate how the curation process works.

Communication

How might we help facilitate discussion between video watchers to build a sense of community?

To establish a tight-knit community, we knew we first had to build a way for people to communicate with each other. It seemed just as important to build meaning around each video. So, it made sense to include a conversation stream just below each playing video. In our early versions, comments are also visible on each "video card". As well, a sense of identity proved to be an important factor. Each user had particular passions (e.g. sports, cooking, funny videos). Both communication and identity were embedded in what we called the "annotation" of a video. This is what users add to a video as a caption. We hoped for this to be a good way to spark conversation on a video.

A comment thread is visible for each playing video, shown directly underneath it. Adding a comment is extremely simple.
Comments were also visible for each video card shown in the home feed.

Introducing Channels

Our product took a large turning point when we realized there might be a better way to connect people with common passions. This was about the same time we changed the product name to Blippy and implemented community channels to be the focus. With this new form of organization, which organized videos via community rather than personal collections, the site needed a way to let users easily communicate to each other about whether a video belonged in a community or not. We took inspiration from sites like Reddit to design an upvote/downvote system.

We designed and implemented the ability to vote videos up/down to help each community channel maintain relevancy and quality.

Conclusion

During user studies, Blippy showed promise and elicited positive responses from people, but ultimately failed to reach a critical mass to sustain its user communities.

Users in our studies consistently expressed how much more relevant videos were in Blippy compared to YouTube (even though these were all videos from YouTube). Every one of our users liked the ability to browse content while watching video. Our sessions with users also proved that each person has a particular passion when it comes to video. Each user would spend more time in one community than others (e.g. cooking, design, TED, or sports).

The team in the end decided to stop development on the product due to lack of growth. While the interactions proved successful, some key aspects of Blippy prevented it from growing. Users in our sessions mentioned that they did not have a sense of community. While we tried our best to let users invite their friends and build their own communities, it seemed there wasn't enough incentive to do this on Blippy versus any other video curation site. Another part that felt unclear to users was the "blip" action, our equivalent of a tweet or pin. A majority of users did not understand that the blip button would post a video to a community channel. This source of confusion, paired with a lack of community, led to the team's decision to shelve Blippy.

I'm very optimistic that in time, there will be a better place for online video. In my mind, Blippy came the closest to this idea. Through iteration and testing, we showed how much people prefer being able to browse while watching a video. Our community channels organized video in a way that kept people watching video after video. Most importantly, we were starting to see people with similar passions sharing video and connecting with each other.