DEEP-DIVE CASE STUDY

Brightcove Live Streaming

USER RESEARCH | STRATEGY | INTERACTION DESIGN | VISUAL DESIGN

Streaming a live event can be stressful. There are lots of moving parts, everything from the embedded player for your website, to testing and making sure that the video looks good as it's delivered to web, mobile and TV devices. Brightcove entered the world of live streaming in 2012 when it acquired Zencoder, a cloud-based video encoding platform. Zencoder was API-based and difficult for non-developers to use, so Brightcove's management was eager to have a web-based solution that plugged right into our Brightcove Media Suite. They hired a PM and expanded the design team so they could have dedicated resources tackling this project, with the aim to have an MVP within three months.

brightcove-live-monitor.jpg

Research + Discovery

Hello, nice to meet you.

Our first goal was to get out and meet some users so we could flesh out personas and scenarios. Partnering with our sales and support teams, the PM and I departed on a two-week road interviewing and observing 10-15 customers in action.

The magic number is two.

From our meetings, we found that two personas emerged— Patrick and Howard. Patrick runs the full live streaming event end-to-end  (everything from embedding the player code on their website to pressing the "go live" button on-location) and sets things up just before going live. Howard, on the other hand, is in charge of multiple live streams from different locations, so he sets things up several weeks in advance and works with a small team of web designers, video producers and A/V technicians who help him run the actual live events. 

Wireframing, Testing & Iterating

Throughout our design process, we visited a number of scenarios with our personas. Below, you'll notice a March 30th release date prioritized for our persona, Patrick. He doesn't test his events ahead of time, so he goes right through event setup and starts streaming. The wireframe below is an exactly of a clickable prototype that we tested with our users. We found that many of our users thought of live event video assets differently than uploaded video assets, so we included a player embed code right here in the completed event page.   

Design Details + Key Findings

Mobile-friendly design 

Early on, we experimented with views for users on-the-go during a live event. We prioritized the live stream, plus access to real-time stats such as number of current viewers, viewer device types and top geographic locations.

Keeping tabs on live events

One thing we observed is that customers were often running around doing a number of things during live events, so we wanted to make sure that the stream status and current viewer count was large and easy to read from a distance. By color-coding green, orange and red bars, video producers could easily tell if there was a problem with one of their streams during broadcast.

Editing saved video & creating clips

Soon after launch, we heard from a number of customers that they wanted an easy way to trim their live video events directly through the live streaming module (either as part of the saving process or soon thereafter). We created an easy trimming tool and updated the "Completed Event" page to included video clips saved from the original video asset.

bright-live-clips-saved.jpg

Results

Within two months of launching the Live Streaming module to all Brightcove customers, we had already achieved 80% of our sales goal for the entire year. All beta customers remained Live customers and several recommended the product for wider adoption within their overall organization.