System for Success: Atomic Design for Google Display Ads

The process for creating Google Display ads, using a system to optimize collaboration between Design and Marketing teams.

Our design team wanted to implement a design system that could quickly generate different variations of Google Display ads in multiple sizes. This system had to balance creative freedom and brand adherence. We wanted a user to be able to change content, colors, backgrounds, buttons and other visual elements without further involvement from a designer. However, it was important to create a controlled environment so the ads would stay on brand and follow a conceptual and visual pattern.

We love Atomic Design as a methodology for almost everything we build: client projects, website designs, style guides, marketing collateral, etc.
 
A huge benefit of using Atomic Design for our Google Display ads is that it allows marketing professionals to A/B test and optimize ads independently from a designer. Although it requires more hours up front to set up, it pays off in the long run.

What is Atomic Design?

Atomic Design is a methodology inspired by chemistry created by Brad Frost. Just as all matter is made out of atoms that combine to form molecules, which in turn make up more complex organisms; Atomic Design involves breaking an interface down into its basic components and then working up from there to create a cohesive design system.

The basic idea is to separate and organize each design element and build more complex layouts using smaller parts. Design systems are often modeled after object oriented programming principles. As designers we want structure but also flexibility in the creative process. Atomic design principles are most commonly utilized to create user interfaces and websites, but they can be applied to other design projects as well.

A System For Google Display Ads

Goals

• Create a system that can quickly generate different variations of Google Display ads in multiple sizes.
• Enable a marketing professional to change content, colors, backgrounds, buttons and other visual elements with ease, even if they aren’t as well-versed in design systems or Figma, while keeping the designs within a set parameter.

Step 1: Atoms/Molecules

Figma is a great design tool for creating design systems of any kind. Designers can create and utilize components and streamline the process.

Atoms and molecules were created by breaking down elements required to create a successful ad. This includes ad sizes, overlays, background image fills, colors, buttons, text styles and company logos.

Ad Sizes and Overlays

Ad sizes and overlays were created for the most commonly used Google Display ad dimensions.

Ad Sizes and Overlays are molecules created in Figma for Google Display Ads

Color System and Text Styles

A color system and text styles were created to support consistency.

Color Systems and Text Styles are molecules created in Figma for Google Display Ads

Background Images

The background images are saved as a fill so they automatically adjust to the size of the display ad.

A set of background images in Figma for Google Display Ads

Buttons, Logos, and Text Styles

It was challenging creating buttons, logos and text styles that fit all display ad sizes. This process required quite a bit of testing and refining of each element.

Buttons, Logos, and Text Styles are molecules created in Figma for Google Display Ads

Step 2: Organisms

Creating display ads doesn’t require us to go further than organisms, since we are not creating an interface with more complexity.

This is where the power of Figma and plugins can be utilized. We wanted the users (marketing professionals) to operate with ease.

Custom constraints using auto layout for each Google Display Ad size

Each ad size has custom constraints for text and buttons using auto layout. This is a great way to give users feedback on how much content can fit on each ad. Content that goes outside the constraint will be clipped.

Step 3: Plugins 

Two Figma plugins are used to give users creative freedom with ease. 

Find and Replace plugin

This allows the user to look for text and replace copy on all ads at once.

Find and replace plugin for Figma allows to look for text and replace copy on all Google Display Ads at once

Select Layers plugin

This allows the user to replace layer styles such as buttons, logos, and text styles. Each ad component follows the same naming convention, therefore the user can mass select layers to edit.

Select Layers plugin for Figma allows to mass replace buttons, logos, and text styles

Step 4: Publish Library + Train Users

Once the design process was finished, it was published as a library that can be accessed by other users. It’s important to lock the source file in order to avoid the user creating changes in the system. The next step is to train the user on how to use the library, plugins, and how to export the finished ads.

Google Display Ads Library in Figma

Step 5: Design Starter File 

A separate file was created using a few ideal combinations of visual elements while allowing the user to change specific elements, like text, logo or buttons. This is a great way to showcase what visual elements go well together and it gives the user something concrete to start with.

Version 1: “FileMaker Developers” Ad Campaign

Google Display Ads variations for "FileMaker Developers" campaign

Version 2: “FileMaker Experts” Ad Campaign

Google Display Ads variations for "FileMaker Experts" campaign

Closing Remarks

The last step in building a design system for Google Display ads was to test out the system. The results? Our marketing team was able to create and export four versions of ads to A/B test in less than 30 minutes. This type of testing can provide a strong basis for growth design or data-driven design, therefore a system that supports these goals can be incredibly valuable. The marketing team can also optimize ads independently from a designer. As the data comes in through Google Analytics, the team is able to change minor and major elements quickly and easily.

Got Design?

Please get in touch with us if you’re interested in Beezwax’s help improving UX Design on your Web, Data or integration project.

Leave a Reply