Carolina Barbosa
A product designer in New York.
01_Video-Editor_Default Copy 3.png

Video Editor

Optimize your video assets for mobile ads.

 
 

Context

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

Videos are crucial to the mobile ad experience. 84% of viewers are watching marketing videos via their phone devices, and 64% of consumers claimed that watching a marketing video on Facebook influenced a purchased decision in the last month (source). 

The AdBuilder platform allowed advertisers to quickly create mobile-ready ads (see separate case study). Its Video Editor tool needed a revamp to improve its user experience and accommodate upcoming features.

 
 
How can we create a video editor that is simple and compact, but also has everything the user needs to translate their video assets to a mobile ad experience?
 
 

Background

 

Previous video editor design

 

The previous design of the video editor has roots in older Kargo products—this design was originally intended to just allow for video trimming, and served a very specific purpose. As AdBuilder hoped to expand its video editing capabilities for users, this interface grew inadequate.

 

Research

 
 

This tool lives within a larger platform and is just one step in the process of building an ad on AdBuilder. Its level of complexity has to be kept to a minimum so the user can easily complete this step and move forward.
I researched various video editing apps, as they fit many tools in a small amount of space. I also looked into the video editing tools existing in iOS and Android, as well as social media apps. The user should be able to come into the AdBuilder Video Editor with a sense of familiarity.

     

    Brainstorm and Explorations

     

    Sketches of interface ideas

     

    - Modals allow the user to clearly see that they are still in the ad building process.
    - Don't reinvent the wheel: many of the existing tools have similar or exact same behaviors regarding trimming.
    - The end card is the image that takes place of the video once its done playing. Freedom to choose an end card is an important feature, as default settings such as the first or last frame often result in blank or uneventful stills from the video.

     
     

    Explorations on the video trimmer

    Explorations on the end card selection

     
     

    Result

    The result was a compact design, with all available editing tools and room for more to come.

     
     
     

    Editing Tools

     

    All tools available on the Video Editor

    Breakdown of the End Card Selection flow

    Crop Orientation and Mute Button Position

     
     

    Closing Remarks

    The final design's implementation was halted with AdBuilder being put on hold in November 2017.

    Despite that, it was a project that excited many people in both the product team as well as sales and marketing. It was also a project in which the product manager gave me greater responsibility as I expressed a desire to be even more involved in the product, so it was a chance for me to get better at creating userflows, do user testing, and I was free to research and explore solutions, which I then presented to the whole team for feedback. I felt a great deal of ownership in this feature and I'm really proud of it despite it not being completed.

     
     
     

    Team
    Product Designer: Carolina Barbosa
    Product Manager: Jordan Checkman
    Developers: Uma Moiseenko, Christian Tate, Wade Hampton, Navin Islam