Opening the Kimono: Design Considerations for Advertising Automation Templates

Share the knowledge

I recently had the opportunity to work with ListenLoop on a series of ad creative templates for their advertising automation software. Given the varied and interesting challenges, I wrote this post to elaborate on my design.

By way of background, ListenLoop offers a software that combines the principles of marketing automation and retargeting. Their software helps B2B companies convert anonymous visitors and known leads into sales opportunities through personalized display advertising. ListenLoop’s product team gathered feedback from clients about the display ad templates in their software platform, including the “face” template shown below:

Screen_Shot_2015-08-24_at_2.18.49_AM

That being said, ListenLoop often receives requests for templates that do not utilize this type of humanization. For my first task, I designed a “text-only” ad creative capable of being implemented in standard 728×90, 300×600, 160×600, 300×250 display sizes.

My original conception of these ads was an understated and modern piece which leveraged simplicity in order to grab the attention of potential customers. Therefore, I decided to use the Flat UI framework as a source of inspiration. After presenting three different designs, the ListenLoop product team recommended that I continue to develop and refine the concept below:

Screen_Shot_2015-08-24_at_2.20.28_AM

ListenLoop has set the bar quite high when it comes to ad personalization. One of the biggest challenges I confronted for this particular ad creative was the fact that ListenLoop’s technology dynamically injects a prospect’s logo into the template, which could result in a mix of colors, styles and layouts if prepared incorrectly.

This was solved by using Source Sans Pro as the primary font style, largely due to the fact that it works so well with popular user interfaces. I strategically incorporated a muted color scheme, allowing the prospect’s logo to “pop” again an otherwise nondescript background.  In the example above, I combined ListenLoop’s standard logo colors, turquoise and white, with an infusion of wet asphalt to create mellow accents. Moreover, I enhanced the text by superimposing it over a light gray background.

Another common use for advertising automation is promoting webinars, and the ListenLoop team asked me to design a template specifically for this purpose.  Adopting a similar color scheme and font as a point of departure, I subsequently incorporated various shapes into the layout in order to craft a more playful atmosphere.

The challenge here was to make the template sufficiently flexible so that each client has the capability to modify the colors, background images, footers, and call-to-action buttons in order to properly coincide with their branding and campaigns.

Screen_Shot_2015-08-24_at_2.21.29_AM

Finally, I was tasked with developing a creative that looks and feels like a modern email message. This creative had to be flexible in its sizing and fully capable of adapting to various text lengths and prospect logo dimensions, primarily due to the fact that the sender/receiver, subject and message would all be rendered dynamically.

When designing the layout and icons, I used several popular email client UI’s as a sort of inspiration. I decided to continue using the identical design taxonomy I had developed for my previous concepts in order to maintain consistency across all advertising templates.

ad-creative-blog-post-3

Here, the most challenging part of the design process involved strategically placing the ‘to’ and ‘from’ elements (e.g., person’s company name and logo) within the product in order to optimize available space. In my initial drafts, I incorporated the avatar/profile picture of the sender and receive into the ‘to’ and ‘from’ fields alongside their names.

Due to the fact that the company logo of the sender and receive would be dynamically integrated into the email creative, I had to accommodate for varying image sizes in each of the standard ad formats (mostly wide, not tall logos). I accomplished this task by ensuring that each design featured an identical max-width.

Stay tuned for my follow-up post where we measure the impact of these design changes on conversions and clickthrough rates!