DEEP-DIVE CASE STUDY

Brightcove Studio Redesign

USER RESEARCH | STRATEGY | INTERACTION DESIGN | VISUAL DESIGN

Starting from Scratch

Shortly after we kicked off Brightcove Live Streaming, the team and I were tasked with designing and building a UI/pattern library from the ground up. The current Brightcove Studio (Video Cloud), was built in Flash, so that made it incompatible with mobile devices and also meant that it was extremely rigid when it came time to build new modules or features. Live was the first module to launch as an html-based, standalone module, later to be housed within Video Cloud.

HTML & Photoshop Libraries

With the help of Bootstrap, we crafted a complete UI library that could be used by both front-end developers and shared across the design team. Building out new features and clickable prototypes was a snap and designers could even build their interfaces directly in HTML.

brightcove-live-monitor.jpg

Design Details + Building Blocks

Mobile-friendly design 

Early on, we experimented with viewports for different screen sizes. Below on the laptop, you can see a larger analytics panel to the right of the video player. On the tablet and phone below that, you can see that graphs change from horizontal to vertical in orientation and key information is prioritized differently based on form-factor

Skinning Existing Modules

After we had the new look and feel established, we could easily re-skin existing modules so that they followed our grid and layout rules. Front-end developers had an easy time rolling out the new interface, while backend engineers developed robust APIs. Everything came together quickly, especially compared to working in Flash/Flex.

System-wide vs Module-specific Settings

While planning out the design system, one thing that took careful consideration was third-party integrations and how/where users would maintain those settings. Let's say you're adding a video to your Brightcove library and at the same time, you want to push it out to your YouTube channel. It would be a bummer if you had to log in to YouTube every time you performed this action, so we opted to keep account integrations in a global settings panel since a user would rarely need to update account information. With that in mind, we decided to expose the list of YouTube channels and playlists on the video details page for easy access.

Contextual menus + modal windows for quick tasks

With the old studio, users had to click through multiple screens to do simple things like getting a player embed code, setting thumbnail preview image, and other common tasks. In the new studio, we introduced a right-click contextual menu with access to most-used tasks. These were popped up in a modal window to allow for things like quicker publishing of videos and changing basic meta data.

bright-live-clips-saved.jpg
modals-select-image.jpg

Results

After launching the new Brightcove design system, our time from concept to launch was cut in half, since designers had the Photoshop library and custom Bootstrap styles for easy wireframing. Instead of spending an entire sprint on design assets and a second sprint on implementation, we could launch entire new features in a single sprint.