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.
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
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.
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.
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
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.
For quick image editing, AdBuilder is equipped with an image editor. Its tools include resizing, rotating, flipping, retina sizes and image replace.
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.
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.
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.
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.
Arguably the most important asset of the entire ad, the clickthrough URL is necessary to complete the ad.
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.
Product Designer: Carolina Barbosa
Product Manager: Jordan Checkman
Developers: Uma Moiseenko, Christian Tate, Wade Hampton, Navin Islam