PROJECT

AdBuilder

UX/UI

A web app designed to automate the automotive display advertising process.

THE PROBLEM
The design team's process of manually designing and animating display ads was outdated as our workload increased. Google announced that .swf files were no longer being accepted in Google Ads in favor of HTML5.
PROJECT GOALS
1
To reduce the amount of time required to produce one set of display ads by 90%.
2
To eliminate the need for any design expertise on a per ad basis.
3
To build and maintain an extensive asset library of ad templates, vehicle images, manufacturer fonts, and ad backgrounds.
4
Update the technology stack to adhere to Google's updated standards.
MINIMUM REQUIREMENTS
Each ad has a specific set of variables. These were the requirements to build a master template:
• Client Name
• Client Logo
• Manufacturer Logo
• Incentive Type
• Incentive Price
• Incentive Period
• Vehicle Image
• Vehicle Year
• Vehicle Make
• Vehicle Model
• Call-to-action
• Background Image
MASTER TEMPLATE APPLIED
Each manufacturer template was derived from the master template then pre-approved by the manufacturer compliance departments.
AdBuilder Home
A library of completed ads to give the designer a quick starting point. We're able to search for a template to start from and "edit as new" to swiftly make updates.
Ad Information

Input any relevant incentive information here. Each template is pre-fitted with all of the manufacturer compliant fonts and logos so copy adjustments are typically the only necessary changes. Included is an image library with a front-end facing upload feature allowing the user to add any monthly manufacturer promotional logos, images to match a season, or a dealer logo.
Select Background

Choose from a library of manufacturer compliant backgrounds to give ads for different dealerships a brand new look and feel.
Ad Preview

View, edit, and approve the 4 standard sized banners or create a custom size.
Edit 300x250 Modal

Nudge, resize, animate, and approve all ad elements. The designer is able to use the HTML5 Preview window to view their animation or layout changes and adjust accordingly.
Ad Preview Approved State

After adjusting and approving all ad sizes to the user's liking they're able to continue on to export.
Publish

Export all banners as HTML5 .zip files that are ready for import to Google Ads and publish the banner set to the ad library for the following month.
Dashboard

Where do all of the assets come from? Every month we proactively download new vehicles and manufacturer fonts from their respective marketing portals. As the seasons change we also size and upload new backgrounds through our backend interface to keep the templates seemingly new.
TEAM
Special thanks to TheCreatives™ I had the opportunity to work with that included Ian Prior and Josh Williams.
NEXT PROJECT