Carolina Barbosa
A product designer in New York.
01d_Ad-Creation_Filled.png

Kargo AdBuilder

A simple drag and drop interface to create 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.

Kargo's AdBuilder platform allowed advertisers to quickly create mobile-ready ads. Users could choose from a variety of templates based on their existing assets, and the interface provided various tools to optimize their assets for a mobile experience. With the growing variety of templates and options, the interface needed a visual update and an improved user experience.

 
 
How can we make AdBuilder clearer and more concise to increase users’ understanding of the tool?
 
 

Background

 

Previous AdBuilder design

Previous AdBuilder design

 

Once the AdBuilder gained users, we learned that there was a general frustration and lack of understanding of the general interface.  The main issue was a lack of association between the asset areas on the phone preview on the left, and their respective dropzones on the right.

For AdBuilder to be a quick and effective tool, assets needed to be grouped more effectively, and the association to where they belong in the ad template needed clear cues.

 

Brainstorm & Exploration

 

Whiteboarding session for the new AdBuilder interface

 

During our brainstorm, the product manager and the designers explored ideas for increasing that association between dropzones and assets. We approached our engineers to understand the feasibility of some of those ideas. The wasn't a budget nor resources for a full rebuild of the interface, so we narrowed down our solutions.

 
 

Sketches of the dropzone's different states

Sketches of interface ideas

Sketching out how to better organize the required fields

 

Clearly defining those asset areas was the most important issue to tackle, through visual cues such as icons and highlighting the areas as they were hovered on so the user could make a clear connection of which dropzone belongs to what asset. We discussed giving as much room for the phone as possible, since the ad preview is the most important visual in AdBuilder.

We also wanted to enhance the platform's behavior while a video file was being processed, allowing the user to perform other actions in the meantime. (See separate case study)

 

Result

 
 

The redesign was very well received, with AdBuilder's beta clients reporting an easier time using the platform and a clearer understanding of it. The team was also very pleased with the redesign as it was more flexible for current and future features we were working on.

 

Stronger Visual Association

When the asset field is hovered on the left side, its correspondent area in the ad preview is highlighted.

 

Asset Types & Features

 
 
 

Background

Backgrounds can be images or color. Within the color picker, the user can select a solid color or a gradient. The user can also select a border color for the overall ad.

 

Image

 
 

For quick image editing, AdBuilder is equipped with an image editor. Its tools include resizing, rotating, flipping, retina sizes and image replace.

 

Video

 
 

AdBuilder has its own video editor (see separate case study). Its tools allow the user to crop, trim, change the position of the mute button, and also select an end card.

 

Carousel

 
 
 
 

Some templates allows users to create page or image carousels. Page carousels allow the user to customize within each page all assets (such as images, copy and clickthrough URLs). Image carousels allow the user to add multiple images instead of just one hero image.

 

Call to Action Button

Depending on the template, the user can either add their own copy to an already styled button, or they can upload their own image for it.

 

Flourish

Flourishes are effects that give the ad a little extra experience as they scroll into view. For a quick preview of what each flourish does, the thumbnails in the dropdown animate on hover.

 

Text

 
 
 
 

Users can type and edit their copy to fit the character limit provided by each template. They can also edit the font family, size, color and styling.

 

Clickthrough URL

 
 
 
 

Arguably the most important asset of the entire ad, the clickthrough URL is necessary to complete the ad.

 
 
 

Closing Remarks

Development of AdBuilder was put on hold as of November 2017, so not all parts of the redesign were fully implemented.

AdBuilder was and still is a very dear product to me. I was involved with it since it was first pitched in early 2016 (then called AdBuilder Lite), and designed all iterations of it from MVP to its most recent version. It was the first product I worked on in my transition from a graphic designer to a UI designer.

 
 
 

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