BuzzFeed: Trimmer/Captioning

Role: Product Design Intern

Timeline: Summer 2018

Key Activities: User Interviews, User Flows, Wireframing, Static Prototyping 

TL;DR:

Over the course of several weeks, I redesigned the clip management features of Vidder to create a more logical flow for captioning and trimming clips and to increase user confidence. 

Context

Vidder is a video-creation tool that serves a variety of BuzzFeed video producers, social curators and teams like BuzzCuts (advertising turned into meme ads). It has most important editing features while being easy-to-use for all skill levels.

Problem Definition

Vidder has a trimmer tool for changing the length of clips in a Vidder project. It lacks precision users need, leading them to use Premiere and other tools for trimming. It’s also hidden within the captioning interface. You can see the original trimmer below:

 
Screen Shot 2018-06-13 at 4.56.07 PM.png
 

Users

Social curators, video producers and the creative team at BuzzFeed

  • varying levels of experience with video editing, with some being experts with Adobe Premiere and others only editing using Vidder

  • create videos for news, branded content and more

Constraints

I took lead on this project and worked closely with our engineer during user testing, which gave me a unique opportunity to grapple with a problem on my own.

Goals

  1. Increase user confidence in trimming and make it feel as precise as captioning

  2. Make learning the captioning/trim processes faster by simplifying

  3. Make finding the captioning/trim functionality obvious

Process

Understanding the Problem

Users have to click into a clip and are entered into the trimming state by default, with the option to switch to a captioning state using a segmented button UI. This felt unnatural since trimming is an action that usually happens only once during the editing process. The trimmer tool lives alongside the captioning tool, which has its own unique model with a double timeline.

By analyzing the existing tooling and looking at other tools such as Premiere and the Apple Photos app, I was able to identify two courses of action:

  1. Make the UI more visually representative of the trimming action

  2. Use the same interaction model for both captioning and trimming

How Will a User Switch Between These Tools?

My first iteration had 3 different modes, one for viewing, one for trimming and one for captioning. Each had a different color for that tool. The view mode would allow for a more logical default state when clicking into a piece of media.

 
 

I had some informal interviews with users to ask about how users interacted with the existing tools. These interviews left me with a couple of takeaways:

  1. Users use the caption tool more often than the trimming tool

  2. Users use the captioning tool for quickly scrubbing through videos

This made me realize that there wasn’t a need for the captioning tool to be separate from a viewing tool. Instead, the two tools (captioning and trimming) could share a single timeline.

I went back to the drawing board to make some sketches on how this interface could feel more cohesive and logical. I drew out several different versions, picked my favorites, recreated them in Sketch and received feedback from my team.

 
 

Following feedback on my sketches, I switched the locations of the timelines and adding whitespace to the edges of the interface to make it feel more organized.

 
 

How Does a User Interact with These Tools?

Next, I had to develop the interaction of trimming clips. Mocking up the interaction of switching modes and dragging clips was nearly impossible with static mocks, so I decided to learn Principle to create moving prototypes.

I had never worked with Principle before, so one of the other designers on my team spent a few hours guiding me on how it works. He prototyped the dragging action to show me how Principle handled movements, and I used that to build out what would become my ultimate solution.

The solution I decided on gave the user the ability to scrub throughout the timeline and click one of the playheads to start adjusting the start and end points of the clip.

 
 

Impact

This feature is still in development, but the team will run usability tests to gather feedback. Ideally, the feature will be functional enough that users won’t have to spend time in other pieces of software trimming their clips before they upload them to Vidder, reducing the overall time of their workflows. However, this will be the last feature implemented, as active development on the product has been discontinued since it's currently stable and covers all major use cases.

Conclusion

I learned a lot from the project, especially the following:

  1. Some things can’t be represented with words- As much as I tried, explaining how I wanted the trimmer to function was never clear enough to get feedback from the rest of the design team. I ended up needing to learn how Principle worked and how useful prototyping motion could be, and I’m excited to learn more prototyping tools, especially the more robust ones like Framer or Origami.

  2. When in doubt, sketch it out- For the early stages of this project, I felt extremely tied to the original interface and my iterations were very similar to it. However, my mentor suggested I draw out as many different iterations as possible on paper before I committed to something, and that helped me to arrive at a better solution. In the future, I intend to make sketching a key part of my design process for brainstorming.