Auto-Background Generator

Verizon Media

Accessible Ad Background Generator

Goals

Help advertisers speed up the creative workflow by auto-generating a high performing background color and CTA combo. At the same time, the design should give advertisers the ability to modify the ad design for branding requirements.

Definitions of Success

Accessible

All the auto-generated ad combinations results should be accessible to ensure maximized effectiveness when they reach international audiences.

Time Saver

The system should save advertisers time from customizing the background colors of their ads by providing desirable and accessible suggestions.

Creative Freedom

Advertisers should have the flexibility to customize the auto-generated background set for creative purposes.

Screenshot of Native's auto backgroud generator

Step 1

Establish design principles

Design documentation

The first step is to establish and document the high-level design principles and prioritize the list of design requirements base on their importance from an advertiser's perspective.

Documentation of goals and principles

Step 2

Establish design requirements and rules

Default CTA color set

The second step of the process is to establish a default CTA color set that is useful for the advertiser's diverse branding purposes. In order to do that, we have to understand the most common CTA colors by collecting the types of CTA colors being used by different brands.

The research result indicated that black and white are the most common CTA color choices for most brands, other common colors include dark red, green, and blue. To incorporate the findings into the design and honor our commitment of providing advertisers the flexibility to custom their ad design, I've chosen black and white as the default button suggestions and the color red, green, and blue are secondary options.

Establish a default CTA set

Rules for choosing accessible dominant colors

In order to ensure all the results generated are accessible, I've established some rules that will guide the system to generate an accessible ad template set.

In short, The system will pick 4 dominant colors from the ad image asset that has the highest contrast to two of default text colors (black and white) to ensure accessibility. If the generated results are not meeting the contrast ratio requirements, there are two system colors as fallbacks (dark and light) to ensure the accessibility of the ad.

Establish rules to generate accessible colors

Step 3

Access rule effectiveness

Stress testing the effectiveness and the rules

To ensure the engineering implementation is truthful to the UDS design and implemented in a timely manner, I created a shared tracker that tracks the implementation progress and all the feedback related to the visual treatment of the UDS components.

Rule testing with design mockups

Result

Flexibility for brand requirements

The new auto-background generator generates two sets of background colors (light and dark themed) and two fall fallback options that enable advertiser to customize the ad appearance for their unique branding needs while meeting the accessibility requirements.

Effortless accessible ad design

With the newly implemented feature, advertisers can now effortlessly obtain a set of accessible and brand-safe background colors effortlessly. Since the ad decoration process has been cut short, advertisers can now spend more time on creating impactful digital strategies instead of minor cosmetic changes.

Auto background generator demo

Product screenshots with UDS implementation

Hulu

eBay Canada

Ashley HomeStore