Video Uploader & File Management

Simplify packaging for all BuzzFeed video creators

When I joined BuzzFeed, the company was very focused on experimenting with different kinds of video content. My team was tasked with creating a web uploader and asset manager that could be easily used for both short, lightweight videos, as well as high-production videos.

My role: I worked with a product manager and lead UX for the project, designing wireframes and prototypes, testing with users, and working with engineers through the product’s development.

portfolio
portfolio

The Problem

When we began this project, the existing UI for uploading and packaging videos was geared towards producers making really high-production videos, and required installing a Mac app, training sessions, and entering data into what was essentially a very scary spreadsheet. This process was clunky, frustrating for producers working on tight deadlines or trying to upload edits, and alienating to producers trying to upload basic short-form videos.

As more and more teams started making video content (and making their own one-off scary and siloed spreadsheets), it became clear to the tech team that there was a need for a centralized internal tool for uploading and managing videos. Plus, getting all of our videos within the same tech ecosystem (aka our video API) would mean that we could build other useful future tools for creators, such as performance dashboards and alerts/notifications.

MVP: The "Quick Uploader"

The tough part about creating a universal uploader was that every team had vastly different needs. We started with designing a MVP version of the uploader for the users with the simplest video workflow: video producers making short Facebook meme videos.

User Stories:

  • I’m a producer on the entertainment team. I made a 5-second meme video and I want to send my asset to a curator to publish. I also want to be able to know where and when my video gets published, and I want to know how it does.
  • I’m a News Producer. I want to be able to upload a breaking news video AS FAST AS POSSIBLE to get it out in the world.

MVP Features:

  • Only 1 file (optional to add a thumbnail)
  • Minimal form fields to fill out
  • No ability to go back and edit/replace the file
  • No QC (aka: no step in the process where video gets sent to the Quality Control team for notes)

The focus of the design at this stage was to make sure that producers could upload their files quickly while filling out a minimum amount of information about the file. While the design itself was straightforward, the challenge at this stage was in working with product to eliminate form fields to the slimmest amount possible.

portfolio

MVP that shipped

portfolio

First pass at designing file drop zone states

portfolio

Drop zones, After



Part II: More complicated form fields and asset types

As we onboarded more teams, we also needed to incorporate more form fields. To tackle this, we did an audit of all existing metadata form fields in Total Package (our existing Mac app for video uploads that we were working to replace).

portfolio

Audit of existing form fields, compiled mostly by my product manager and engineering lead

portfolio

Moving the form fields to a Sketch file, where I did some various explorations on how to visualize sections

In order to onboard more teams, we had to consider how our tool should handle the vastly different file type needs of different teams.

  1. Consider that different teams have different required files to upload. While some teams needed a tool to quickly drop in 1 .mp4 file and thumbnail, teams like Tasty (food content) and Nifty (DIY content) made videos that needed to be uploaded with a bunch of additional files: .mp4s formatted separately for Facebook and Youtube, thumbnails (also for FB and YT), “beauty shots” for Pinterest, and “Facebook comment” images.
  2. Accommodate additional optional file types and new future types of files. Workflows for video teams were constantly evolving and changing. For example, as translating and adapting content became important to the company, stakeholders requested the ability to upload “textless .mp4s” - video files where all the text is removed, to make it easier to translate.
portfolio

Early wireframes: I explored a system where users (like a Tasty food video producer) can choose a “template” that would open up drop zones for all of the required files for that project type (like a Tasty recipe video).

portfolio

Early wireframes incorporating more form fields and drop zones for required files

Another thing I had to consider was the fact that certain producers needed a way to associate versions of the same video under the same project. I spent a ton of time trying to nail the flow for packaging for different social platforms, making prototypes and testing with users and teammates.

portfolio
portfolio

Early sketch, and an early prototype demonstrating a flow that would allow producers to upload files for different platforms in succession. One thing I learned while user testing: people kept missing the button to "package" for another platform (bottom left).

portfolio

Early Design

portfolio

Final(ish) Design



Final Product

We successfully rolled out the full-fledged web uploader to all teams. The former Mac app has been successfully deprecated, and video producers at BuzzFeed now default to our tool to upload videos. It’s now used by a wide range of employees, like the BuzzFeed News team uploading interview and news clips, our live show AM to DM to upload daily shows for Twitter, the Youtube team to upload episodes of shows like Worth It, and the international Tasty team to upload recipe videos in different languages. It’s still pretty cool to walk by people’s desks and see it up on people’s monitors.

portfolio
portfolio