Role: Product Design Intern
Timeline: Summer 2018
Key Activities: User Interviews, User Flows, Wireframing, Static Prototyping
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.
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.
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:
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
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.
Increase user confidence in trimming and make it feel as precise as captioning
Make learning the captioning/trim processes faster by simplifying
Make finding the captioning/trim functionality obvious
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:
Make the UI more visually representative of the trimming action
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:
Users use the caption tool more often than the trimming tool
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.
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.
I learned a lot from the project, especially the following:
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.
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.