Verizon Media Ad Platforms:
Designing the holistic experience from ad booking to consumer conversion
Out of the many projects I've worked on at Verizon Media, my favorite type of work usually involves high-level planning and strategic thinking. In this entry, I would like to describe what it is like to work at Native - a Verizon Media demand-side ad platform - where we help advertisers leverage their business with design and strategy, as a result making it more effortless and compelling to buy from Verizon Media. 
MY ROLES
As a product designer, my job is to tie together the ad booking and customer conversion experience. This is what it looks like if I break my responsibilities into two parts:
 
Advertiser booking on Native and DSP:
  • Product maintenance and improvement
  • Design system maintenance
  • Booking feature innovation
Consumer conversion: Ad format
  • Ad format innovation support
PROJECT OVERVIEW
 
Auto-background
generator for fullscreen ads
At Verizon Media’s Ad Platform team, it has always been one of our focuses to optimize the ad booking process by making it more effortless and intuitive for advertisers who use our platform to reach out to consumers. A typical ad booking flow involves an advertiser declaring a campaign objective, define target audience specifications, and submit ad assets such as title, details, and images.
 
In this particular design challenge, the team would like to enhance the full-screen experience when an ad is displayed on a phone. For instance, when an advertiser uploads an image of the ad, the system will autogenerate a set of primary colors taken from the image that is accessible against both light and dark text.
Strategies
In order to tackle this challenge, the following questions will determine the direction and final outcome of the design: ​​

1.

What are the design principles and how we should prioritize them?

2.

How should we pick the colors?

3.

How should we pick the limited set of CTA colors?

4.

How do we make sure that the gradient colors are also accessible?

OUR GOALS
Help advertisers speed up the creative workflow by auto-generating an appealing background color and high performing CTA. At the same time, provide advertisers flexibility and freedom for their creativity.
DESIGN REQUIREMENTS
  • Colors that get generated must be accessible
  • Must provide gradient background option for advertisers
  • Allow advertisers to choose their CTA button colors
PRINCIPLES
  1. Accessibility
  2. Performance
  3. Speed
  4. Brand aesthetics
  5. Freedom
ASSET UPLOAD
WORKFLOW
  1. Choose photo 
  2. Provide ad details 
  3. Background color
  4. CTA configuration
CTA BEST PRACTICES
  • Contrasting colors
  • Appropriate sized click target 
  • Good control of colors
  • Padding
LOW PERFORMING CTA
  • Low contrast 
  • Lack of focus
  • Ambiguous click target
USERS
  • Demography (infants, women, men, millennials)
  • Brands (Walmart, JC Penny, Nike, WayFair, Apple)
  • Industries (fashion, automobile, electronics, retail, fitness)
Final deliverables
RULES
In order to generate a background color that harmonizes with the image uploaded, the system would pick a set of primary colors. A set of 6 colors (including 2 gradients) are given to the advertisers to customize their ads. This particular ad template has two themes: light and dark. The light theme comes in 3 different colors, two of them are solid, one of them is a gradient color combined by the two solid colors and the default black text. The dark theme comes in the same color options but has the white default text color.

The way the colors are chosen is based on their contrast against the white or black text. The system picks four of the highest contrast colors, two for each light and dark theme. By doing that, we’re able to identify the primary colors that has the highest contrast and hence meet the accessibility requirements in most cases. 
CTA COLORS
Part of the product’s requirements is to define the default set of CTA button colors that an advertiser can choose from. We believe it is important to provide the flexibility advertisers need to customize the button for their brand requirements. To understand what colors will be the most useful for our advertisers, we conducted simple research by documenting the CTA button colors from different online stores of different brands.
 
The result indicated that black and white are the top CTA color choices by widely known consumer brands such as Apple, Nike, and Zara. Other popular CTA buttons include red, blue, and green. In the end, we’ve chosen black and white for the default CTA colors for its neutrality and popularity amongst top brands, yet advertisers can also choose from red, blue, and green for their CTA.  
AD BOOKING UI
On top of coming up with a system for the autogenerated-background color, the team also needed an update in the booking UI to accommodate the new changes.