Accessible Ad Background Generator
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
All the auto-generated ad combinations results should be accessible to ensure maximized effectiveness when they reach international audiences.
The system should save advertisers time from customizing the background colors of their ads by providing desirable and accessible suggestions.
Advertisers should have the flexibility to customize the auto-generated background set for creative purposes.
Screenshot of Native's auto backgroud generator
Establish design principles
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
Establish design requirements and rules
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
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
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
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