Spotify web

An analysis of Spotify's web properties to build a case for centralizing creative infrastructure.

When I joined Spotify, I was in a unique position on product, focusing on Premium, while liaising with the brand team on campaigns. This role enabled me to work with the entire business to evangelize the brand and bring that into product experiences.

As a result of this proposal, I formalized a team within Central Design to build out a centralized-yet-distributed, audience agnostic, approach to design systems at Spotify, called Encore.

Updated homepage for spotify.com

Gathering context to provide focus on an actionable, high impact user journey.

To get started, I needed to understand the current constraints. At an organizational level, each piece of the flow was built by different teams, which created discrepancies in the execution. While these may not have been perceived by a user, Spotify teams were telling different narratives for similar features or rebuilding common elements in different ways.

A representation of the current flow we were working with to purchase Premium.

In order to pay for Spotify, users had to go through the website making that flow a perfect candidate to provide focus. By analyzing data for the month of February 2017, we learned that a majority of the traffic were new visitors and over 40% of which were looking for music. Sessions didn't last long and interactions were limited.

I facilitated a global workshop with cross-functional partners, from product and brand, to take apart each page. The goal was to identify inconsistencies and prioritize based on impact.

Workshopping inconsistency with a global team.

Key takeaways:

  1. Language inconsistencies, even within plan offerings
  2. No interactive or playable elements
  3. Misinterpretations of brand elements
  4. 23 different button and 4 styles of navigation
Premium art direction supplied by the brand team.

A visual exploration based on the homepage would help set the tone for any new brand alignment.

The Brand team, Chelsea Alburger and Erik Herrstrom, gave an overview of the current state of the Premium branding work. We all partnered up to explore how we can create an inspirational base to guide the flow into reality as I moved forward. Based on the workshops, I defined three themes to guide our explorations:

  1. Contextual: Keep in mind who a user is and where they are within the flow.
  2. Simple: Users should get what they came for, easily.
  3. Engaging: If users explore, content should be discoverable.

I focused on how we can celebrate the content that the service provides. To keep the format simple, I was inspired by the grid within the product and played up a more marketing style format. Once reviewed, the goal was to align with leadership on a baseline flow that could be implemented within the next few months.

What if the site took on a more editorial look and feel? What if Spotify could lean more into the content and celebrate Artists work to help drive engagement from incoming users? Is the website more of a destination?

Taking a different approach, I was curious how to bring users closer to music by combining our product styling with our marketing style. This could help build consistent expectations and streamline how teams work together more efficiently. Ultimately, this was too drastic of a proposal, but was tested by the Growth team.

Website as a player concept.

The language is a key piece of what guides a user through a journey, I partnered with one of Spotify’s UX Writers, Tamara Hilmes, to redefine the complete narrative and pair that back with the visuals. By collaborating together, we were able to create more cohesion with the updated elements.

A consistent layer on top of the current experience.

Creating an inclusive working environment brought the vision to reality.

Before moving forward with the ideal future, I took a step back to formulate a consistent, solid foundation to later build on top of. Since the Growth team had been part of the process from the beginning, they were eager to bring this work to test. This was the foundation necessary for creating a reusable React component library between the Growth and Premium teams.

This A/B test ran to several million users with positive results and was ultimately rolled out to all users. There was an increase in Premium upgrades, more people scrolled past the fold, and there was a 4% increase in plays in the Web Player. Without those early relationships, the vision would have stayed in concept.

By pinpointing the consistent elements, we had a baseline for generating a more engaging, contextual experience.

While consistency was an important part of this story, I wanted to look beyond the current state and identify what we'd need in the future. The result helped understand what I needed from leadership in the coming year.

Landing page.
Premium landing page.
Log in page.
Payment experience.
Switch plan.

Cards were a way to merchandise Spotify Premium offerings. Additionally, they became a brandable element that a user could connect with through their payment experience and into the Consumer product.

Card formats.
Payment success.
Account page.

To reinforce the scalability of this design, I took into account the constraints of our tech stack to build a mobile web variant. Using adaptive design techniques, the end result was more aligned patterns across mobile experiences to lower cognitive load on users.

Mobile screens.

Online Store