launching a premium web ad experience — spotlight ad
How can we create a digital ad format that allows advertisers to fully express their branding while also improving the efficiency of ad operations?
My role: Lead Product Designer, Group Lead (AdTech)
Team: Product Manager, Software Engineer (3)
Stakeholders: Ad Sales, Ad Operations, Product Marketing
Tools: Figma, Adobe Photoshop, Jira, Google Docs + Slides
Year: 2022
context + project goals
Our team received an email with all of AdTech’s primary stakeholders CC’ed. The email listed all of the issues our Ad Sales team were facing with the current version (1.0) of the Spotlight digital ad format.
The primary concerns were:
1) Live Spotlight ads did not match what was sold in our marketing materials
2) Advertisers were dissatisfied with the lack of creative control they had over their ad assets
3) Because of both points above, our Ad Operations work flow was inefficient due to ads having to be revised several times over
Our team was tasked with solving these issues immediately. This project would interrupt our roadmap and require immediate attention in a timely manner.
Our team rallied to execute a solution that would prevent revenue from being lost the next quarter.
the problem with spotlight 1.0
Spotlight 1.0 is a component-based digital ad format created to behave responsively throughout ad slots of different sizes. This made the ad format easy to implement but visually it lacked the flexibility and custom-feel of othe ad formats on the market.
We needed to update this format and create an offering advertisers would be excited about.
The basic anatomy of a Spotlight 1.0 ad
I ran a prioritization exercise with the team product manager so we could align on approach.
product approach
I worked with our squad product manager and engineering leads to figure out what we would be able to deliver under the time constraints.
I ran a prioritization exercise with the team PM so that we could be clear about what Spotlight 2.0 would come to be. From this exercise I created a visual artifact to kick off this project with our team at large ensuring we would be aligned.
project kickoff graphic
design
My design process for this project was focused. Aligning with the other members of our cross-functional team allowed for me to be have a clear direction but also gave me space to be creative while trying to solve this visual issue.
I first conducted a visual audit of competitors to learn what the market expectations were for this type of digital ad. I was able to learn how these publishers were able to create custom ad formats that matched their own aesthetic.
Following the audit I began to mock up concepts in low fidelity and collaborated with the lead engineer on this project to view these ideas in a live environment. I eventually landed on an image-based approach that would allow ad clients to fully express their branding while keeping the ad operations process seamless.
low fidelity image-based ad concepts
early low-fidelity concepts
ad slots on BuzzFeed sites
alignment
Our team agreed that the image-based ad concept would be the best approach. Ad clients would be able to align their branding with BuzzFeed’s but also be able to stand out among the site’s content.
Our sales and ad operations stakeholders were also looking forward to the solution that would prevent the loss of revenue.
I went on to create handoff artifacts that would align on our organization on all levels — from the marketing materials all the way to the pixel-perfect specs for development.
handoff to product marketing (Google Doc)
handoff to art desk (Adobe Photoshop)
handoff to dev partners (Figma)
business impact
Spotlight 2.0 has been a success since its launch. It has met the needs of our ad clients and has reduced the need of ad design iterations by 95%. This project had high visibility across our organization and its impact is still felt today outperforming the first version.
We were also able to retain over $300,000 of ad business due to our quick and spirited rollout of Spotlight 2.0.
Spotlight 2.0 was mostly recently used to roll out HBO’s newest streaming brand, MAX.
reflections
This project was highly collaborative and required me to flex my communication muscles in a variety of ways. Our fully-remote team, dispersed across the world, was able to work together at a quick pace to deliver a high-quality product. This is something I am proud of.
A look at a Spotlight 2.0 homepage takeover.
HBO launched it’s new MAX brand on BuzzFeed using Spotlight 2.0.
Comparing Spotlight 1.0 and Spotlight 2.0