When I joined Spotify, I was in a unique position on product, focusing on Premium, while liaising with the brand team on campaigns. It was a horizontal role, which exposed the fractures in our brand and how that was being applied across different experiences.

I set out to create a vision that would establish a point of view around how to give the Spotify brand a proper home in our Premium web funnel — bringing user sentiment full circle from Campaign to Play.

The result became a narrative tool to influence and formalize a team within Central Design to focus on centralizing and distributing Design Systems at Spotify.

This created fractures in how the brand was perceived by a customer, and even how internal teams reused common elements. At an organizational level, each piece of the flow was built by different teams, which created discrepancies in the execution.

So, how could the product team create a scalable web system that would allow our users to make consistent connections to our brand?

For example, in order to pay for Spotify, users had to go through the website. This made the premium web flow a perfect candidate to provide focus for this vision. Tied to our revenue.

By analyzing data for the month of February 2017, the Growth team learned that a majority of the traffic were new visitors or existing visitors were looking for music. Sessions didn't last long and interactions were limited.

I facilitated a global workshop with cross-functional partners to identify inconsistencies in our brand and componentry, prioritize focus for an MVP, and create a shared perspective around brand elements in product.

Key Takeaways

→ There were language inconsistencies in how we communicated Spotify Plans

→ No interactive or playable elements on objects visitors expected to play

→ Misinterpretations or old assets from the Spotify brand

→ Several different versions of components and styles leading to accessibility issues

The concept needed to work systematically. How could the team take a single song, album, or playlist — and turn it into the soul of the experience?

Spotify's brand color palette could be extended to create dynamic, music-driven backgrounds. By sourcing color from album art we could create cohesive and personalized pages, and use consistent layouts to control the visual noise.

Circular was a new typeface Spotify was adopting across products. It was introduced to create a cleaner, more legible typographic hierarchy that aligned with the brand's evolution.

Language was a crucial element that was unaligned throughout the experience. Tamara Hilmes curated a story to redefine the premium narrative and pair that back with the visuals.

When I looked beyond the MVP, there was a supportive, technical layer that would help us scale for the future.

Key Takeaways

→ Interactive content that ties back to data from Spotify

→ A skeletal system that can support a variety of different asset types and data

→ Reusable styles and components that can be used across business areas

→ Adaptive formats to leverage the different ways a visitor could experience Spotify.com

Creating adaptive components, like cards, were a way to merchandise Spotify Premium offerings. Additionally, these could become a brandable element for users to connect with through their payment experience and into the Consumer product.

To reinforce how this design can live in a responsive world, I also designed a mobile web variant. Using adaptive design techniques, the end result was more aligned patterns across mobile experiences to lower cognitive load on users.

Since cross-functional teams were involved from the beginning, they were invested in the shared outcome from this vision.

The Growth team leveraged the consolidated visual foundation to run a baseline test. There was an increase in Premium upgrades, more people scrolled past the "fold", and there was a significant increase in plays in the Web Player.

Additionally, the team also constructed reusable cards in React, moving away from Bootstrap, to help create a tighter relationship between our Home and Premium pages. This reduced the product cost to test new plan formats.