Q3 2022

Showpad Video Trimming

This is a project about Showpad Video. Check Showpad Video Redesign and Showpad Video Virtual Backgrounds for more of my work on this product.

#TODO

Context

Showpad Video was introduced to offer a way for sales people to engage with prospective buyers in a post-COVID world.

With it, Showpad users can record a video clip from anywhere within the Showpad platform, showcase any of the assets provided by their marketing teams, share it via any of the several sharing options, and get analytics on how their video is performing.

Upon joining Showpad, I had the great fortune of joining the Video team — one of the smallest teams in the company, but also one of the most agile and best performing.

Problem

It’s not uncommon for something unexpected to happen while you’re recording a video. Your cat may jump into frame, you may get an unexpected call, maybe you forgot that word that’s just on the tip to your tongue…

Unfortunately for Showpad Video users, there was no easy way to cut out any of those from your video — you had to delete your recording and start all over again.

Using the Jobs to Be Done framework, we arrived at the following goal:

As a sales user, I want to be able to trim and delete parts from my videos in order to have a professional looking video without having to rerecord several times.

Final designs

Even though the general composition was in place from very early on, the interface went through several rounds of iterations to refine and ensure that the final experience was as intuitive as possible.

Ease of use

In order to make trimming a video as easy as possible, we made sure to only include the elements that were strictly necessary to the job at hand: the video itself, a timeline, and a handful of actions.

The video trimming interface.

Accuracy

When it comes to editing video, every fraction of a second matters. Dragging a handle with your cursor can land you on the general time you want your video to start from or stop at, but you need to be able to make finer adjustments to get the timings just right.

In order to allow for this, we introduced the nudging controls: whenever you select a handle, you're then able to see the exact time, preview it, and then use either the buttons on the interface or the arrow keys on your keyboard to make finer adjustments.

The nudging controls.

Keyboard shortcuts

We wanted to make sure power users could also make use of these features in a way that made them work faster.

This means every action in the UI has a keyboard shortcut, and there's even modifiers that you can use, like holding shift when nudging to jump a whole second instead of a fraction of a second.

The list of shortcuts available for video trimming.

Edge cases

In this project, we had to take many edge cases into account. Like the fact that dealing with media files of variable lenght on a fixed size timeline can introduce some issues.

While we didn't have the time to implement all ideas, we did make sure to cover as many of those cases as possible, taking into account the likelihood of them ocurring in real life usage.

Some of the forbidden actions that could break the feature.

First time experience

We went through several rounds of refinement and validation. Because this was a brand new piece of functionality, we created a guide to help teach users how to make the most of it. Check the features and guide for yourself below:

Prototype

Make sure to let the animations load to get the full experience!

Outcome

Video Trimming was a major release for Showpad Video and received a significant marketing push. Reception was great, with many customers saying this feature solved their biggest hurdle in adopting Showpad Video, which saw an increase in usage as a result, inline with the success metrics defined early on in the project.