Carolina Barbosa
A product designer in New York.
video-process-thumb2.png

AdBuilder: Video Upload Optimization

Improving video upload time and usability in Kargo's Ad Builder tool.

 
 
 
 

Context

Kargo is a mobile advertising and technology company based in New York City that serves high-quality ads in premium digital publications.

The AdBuilder platform allowed advertisers to quickly create mobile-ready ads (see separate case study). When creating an ad with video, the large file size can lead to long loading and processing times, which affects the users' experience in the tool. We wanted to optimize that experience so the wait time could be minimal, and allow users to perform other actions while the video is being processed.

 
 
How can we decrease the perceived loading time of a video upload, and how can we allow users to use their time efficiently in the tool?
 
 

Background

 
 

Previous loader

 
 

The previous UX of the video upload process had a spinner which—depending on the file size—could take a few seconds to almost a minute. While the video file was being uploaded and processed, the user could not perform any other action such as add in other assets or type in text fields. Once the video was fully processed, the Video Editor (see separate case study) immediately popped up, allowing the user to edit their video asset. The user would then hit "Save" in the modal, which prompted another potentially long wait time as the video was optimized according to the users' edits.

The usability problems were clear: First, users were forced to just sit and wait for an indefinite amount of time for their videos to finish uploading, processing and saving until they could perform any other action. Second, users were struck with a modal popping up without any cues of it, and were prompted to edit their video even if they are fine with their asset as is.

 
 
 

Research & Explorations

We had to understand all the steps involved in the video upload process:
1. Uploading and processing the video file
2. Editing the video file on Video Editor
4. Saving and optimizing the edited file

 

Indicating Progress

 

Video processing/Progress bar user flow. See full user flow.

 

The product manager and I brought up the idea of changing the spinner into a progress bar to the development team, who informed us that we did not have the resources at the time to create a true progress bar that would communicate back and forth with the server for a real-time progress indicator. Due to this constraint, we decide to explore a fake progress bar in which we will have an estimate based on the size of the uploaded video.

 

Editing a Video

Sketches of the dropzone's different states

User flow: how different video assets affect the user experience. See full user flow.

We explored the idea of a message prompting the user to open the video editor, rather than automatically opening the modal. This lead us to analyze how to cater the experience to different kinds of users. Was this a user with a long video file, who would obviously need to trim it down? Or is this a user with a video already trimmed to 30 seconds or less, which is the ideal size for mobile ads? Breaking down the video upload process to multiple steps allowed us to branch off into different experiences, and allows us to guide the user towards creating a better ad experience.

 

Progress Bar Design

 
 

With the progress bar not capable of reflecting real-time loading, we conducted a user research with different designs to see what the perceived loading time was vs the real time. We designed 4 progress bars, each with different visual cues that could help indicate progress, but all which took 8 seconds to load.

A. Control: the bar has a gradient from blue to green (on brand colors).
B. Saturation: gradient + saturation changes from 0 to 100% as the bar loads.
C. Saturation and Stripes: gradient + saturation change + vertical stripes to convey movement.
D. Stripes: gradient + vertical stripes.

The winner was option C, with an average guess of 8.4 seconds. The second shortest was option D, with an average of 9.25 seconds. We ultimately went with option D, as the saturation change did not meet our product aesthetics.

 
 
 

Result

The result was a much smoother experience in the AdBuilder. Now the user has a clear idea of how long their video is taking to upload, and during that time they can continue to add their other assets to their ad. Once the video is done processing, the tool will either automatically save their video if it's under 30s of length, or if it's over 30s of length it advises the user to trim their video to the optimal length.

 

Progress Bar Messaging

 

Messaging on the progress bar

 

Because our progress bar doesn't reflect real-time progress, we opted to not show exact percentiles. Instead, the length itself of the bar gives users the idea of how far along the process is. We also added messaging to clarify what exact part of the process the video file is going through. If the file is taking longer than expected to process (stuck at 95%), the messaging will change to "Almost There!" as to let the user know it hasn't frozen.

 
 
 

Closing Remarks

Development of AdBuilder was put on hold as of November 2017.

Redoing the video upload process was one of the last things done before the product was put on hold, and while we didn't get to see its results out in the wild I think this is a core improvement in the AdBuilder experience and I really enjoyed doing the research and explorations for it.

 
 
 

Team
Product Designer: Carolina Barbosa
Product Manager: Jordan Checkman
Developers: Wade Hampton