⋅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.

MVP that shipped

First pass at designing file drop zone states

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).

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

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.

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).

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.

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).

Early Design

Refined 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.