Scaling Spotify's interactive ad platform from bespoke to self-serve
1 Designer, 2 Devs, over 4 months
Product Design
Mobile
Visual Design
Design Systems
~3-5 minute read
As the product designer, I...
Owned the end-to-end design of Spotify’s interactive ad platform, including listener-facing experience to the advertiser creation tool and internal ops tooling.
Helped shift the platform from 100% agency-dependent to self-serve, reducing minimum ad spend from $1M to ~$30k and opening a previously untapped mid-market segment.
Validated a templated-over-custom strategy through stakeholder research, then built the design system to scale it.
The Problem
Spotify’s interactive ad formats (like quizzes and playlist generators) are some of the most unique ad offerings at the organization. However, they were locked behind a minimum spend of $1M dollars. The platform was unable to grow due to this and because every campaign required bespoke agency work. The real challenge was figuring out how to make the format accessible without degrading what made it so valuable.
Sole reliance on external agencies to create these experiences
High barrier to entry for clients due to bloated costs that come with bespoke campaigns
Campaigns that took months to create, wasting time for clients and partners
Context
For more background on Spotify Stage Studio, here is an ad experience that has recently run on the platform.
Research
To test early assumptions about what advertisers needed, I ran interviews with 6 clients and agency partners. This ranged from large clients who had run campaigns before, to mid-sized brands who had previously been unable to afford the format.
The most useful insight that surfaced was: clients assumed that flexibility and creative control would be the most valuable, but what they actually cared most about was performance and a feeling of credibility. When asked to rank priorities, pixel-level customization consistently fell to the bottom, while a feeling of the experience being co-branded with Spotify rose to the top. The association is what made the ad feel trustworthy to listeners.
A competitive analysis ran in parallel reinforced this. The experiences that performed best were ones that felt native to the platform they were run on. Taking listeners out of their music listening experience was already jarring, but feeling like you were in an entirely different ecosystem led to more frustration and lower engagement.
This reframed our approach from focusing on putting as much flexibility into the brands’ hands, into figuring out how to provide enough expression within Spotify’s identity without making the ads feel restrictive. This distinction helped drive all of the future design decisions made for templates and components.
One finding that shaped the scope for this project was that the most valued output was the playlist listeners received at the end of an experience, because it lives in their library forever (unless manually deleted). This led the team into prioritizing the simple playlist generator as the lead template, and designing a polished “playlist reveal” page as the highest impact moment of every experience.
Process
The core design decision was to lock Spotify’s brand as the canvas and give advertisers control to work within it. The component library was built with this in mind, focusing on bringing in patterns and elements from the Encore advertising design system.
Because Spotify’s visual language would stay dominant, I broke out the components into dynamic and static ones. This meant things like buttons, type, and colors would need to work within Encore’s constraints. Brands would get expression without overriding and breaking design patterns.
Dynamic Components
Static Components
The actual ad creation tool is the other half of this experience. The self-serve portion that allows advertisers to assemble premade experiences from the template library without agency involvement. I owned the design for this section too, but those assets are not available to share here. For a similar example, check out the standard audio/video ad editor that standard consumers have access to here.
The core design challenge there was validation of brand assets and copy in real time. Formatting, file types, and visual accessibility were three things we needed to ensure would work without manual review for every experience. This challenge mirrors the listener side of the tool:
How might we give advertisers meaningful creative control while making it impossible to produce bad outputs?
We knew that most users of the self-serve tool were marketing-experienced and had some design sensibilities. This helped set a baseline of trust. But the combination of custom colors, background images, and overlaid text just presented too many fail states to leave solely to human judgement.
I partnered directly with engineering to build a robust validation system into the tool. When users filled out the forms to create the experience, colors were checked against contrast guidelines in real time, image uploads were validated for file type, and minimum resolution, and background images would be automatically blurred to support readable text and accessibility.
Text color was removed as a choice entirely (defaults to black or white based on background). This decision came out of user feedback showing that brands did not miss the option, and everyone benefitted from a guarantee of 3:1 contrast ratios.
The result of this was an experience editor that was open enough to be expressive, but constrained enough to have outputs that were always on-brand and accessible.
Testing
We ran a test using the pre-built experience for playlist generation as a Spotify House ad. The goal of this test was to get quantitative metrics like conversion rates and clickthrough. We also put this in front of internal teams and power users to get qualitative feedback.
Testing Results
Conversion Rate
A conversion rate of 2%, which aligns with the targeted average of other experiences.
Impressions
The experience landed at 22 million impressions, on par with bespoke experiences.
Engagement
An average of 22 seconds was spent in the experience, only 2 percent lower than bespoke.
Solution
When this launched, it shipped with 3 core formats -- A playlist generator, a quiz, and a user analyzer. All 3 of these were built using a library of less than 30 components. Each of the experiences shared common pages, like the landing page, loader, and playlist reveal page. The interaction would change based on the needs of the format, but everything else stayed consistent.
The listener-facing experience was designed so that the Spotify canvas never moved, but advertisers had room to express their brand within the container that felt platform-native.
For the creation tool, it was built as a multi-step editor. Advertisers uploaded their assets, copy, and color palettes. Once built, experiences moved through a revision process and approval from stakeholders. Since we had robust validation, we did not need to have internal teams review and approve iterations of the experiences. They were guaranteed to follow standards out the gate.
One thing that extended the system’s usefulness beyond just the product offering was the hack week project I took part in. I packaged up the component library into a simple Figma file for internal teams, with documentation that provided a guide for non-Figma users to be able to drag and drop to create and pitch their own experiences. They could also directly submit feedback via a Slack channel I established. Democratizing the system made it belong to the organization as a whole rather than just myself as the designer.
Impacts
Early outcomes of this platform have been promising. It just recently launched but here is what we know so far:
Pricing for experiences dropped from $1 Million minimum ad spend to around $30k, unlocking a previously untapped segment in mid-sized markets.
With a larger pool of ad clients using the platform, the reliance on our agency partners went from 100% of campaigns to 47% of campaigns in the first 3 months.
The time to create an ad experience went from weeks of agency work down to an average of 23 minutes (given the ad copy and assets were prepared).
Reflections
Navigating design constraints
When I began my design journey in 2021, I had a belief that constraints meant a stifling of creativity. As I have grown in this world, however, I find so much more benefit in viewing them as ways to sharpen focus. If something doesn't work given your constraints, it is clearly not the right path forward.
Designing for scale
Knowing that this system would outlive my time at Spotify, it really changed my focus from making design choices that work in the moment, to creating a foundation that others would be able to build on. I really got to flex my documentation skills to prepare future teams for use. It also meant that file hygiene was radically important.