Building Spotify's custom ad experiences
1 Designer, 2 Devs, over 2 months
Product Design
Mobile
Visual Design
Design Systems
~2-4 minute read
As the product designer, I...
Established the first self-serve interactive ad experiences at Spotify .
Created and managed a component library of 60+ reusable campaign creation elements.
Partnered with marketing teams and direct clients to translate campaign feedback into strong UX/UI improvements.
The Problem
Spotify Stage Studio (The Stage) is a platform that was created to host Spotify's more interactive ad experiences, like quizzes and playlist generators. This platform drives some of the most unique advertising use cases on the platform. When I joined the team, the process of creating one of these campaigns was highly manual, this meant that we had:
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
Through a combination of stakeholder interviews & competitive analysis, we uncovered a few insights that would guide design. These findings validated that our focus should be on flexible templates over deep customization. They should feel like Spotify rather than injecting the brand into the user's listening experience.
Impact & brand association
Advertisers cared far more about ad performance over flashy experiences and pixel-level customization.
Unique identity & credibility
Brands choose Spotify for its identity. Running an ad that feels like it's in partnership with Spotify lends it to being more credible.
More bang for their buck
The most valued output from the experiences are the playlists that users receive. They live in the user's library forever and feel authentically Spotify.
Process
The first step was creating a base component library to handle the scalability of all future templates. I broke this up into 3 distinct sections:
Layout Guidelines
I followed Spotify’s design system (Encore) for this, as it was simple and already robust. Every experience would need to account for 72px safe area that allowed for a top navigation/back button.
Dynamic Components
Knowing from research that brands want a “co-branded” feel, I followed the same logic for a lot of the dynamic content that would be present in the experiences. This included things like buttons, typography, and anything the user would be editing.
Static Components
After building all of the customizable content, I worked on the static (ish) components like playlist previews, search functionality, and progress indicators.
After laying the groundwork, I began working on the 3 core experiences that would launch with the MVP. These included a Playlist Generator, a Quiz, and a User Analyzer. From identifying themes in existing experiences, I broke down the flows into a few key pieces. Every experience had a landing page, loader, and reveal page. So I designed some reusable layouts to support those.
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 a whopping 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
The final design allows brands to mix and match pre-built templated pages for the various experiences.
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.