Jinal Shah is a UX Designer at Beezwax. She shared 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.
Color System and Text Styles
A color system and text styles were created to support consistency.
Background Images
The background images are saved as a fill so they automatically adjust to the size of the display ad.
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.
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.
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.
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.
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.
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
Version 2: “FileMaker Experts” Ad 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.