Spotify web

An analysis of Spotify’s web presence to instigate conversations with design leadership for a centralized team to focus on our web properties.

Our users were experiencing inconsistent executions between our brand and product experiences. Keeping in mind the larger landscape of web surfaces, I dove into a specific Premium web flow to drive focus. So, how can the product team create a scalable web system that makes clear connections to our brand?

As a result, I had the opportunity to formalize a Web Design System team within our Central Design organization. It opened conversations between Brand and Product and led to more structured collaborative efforts.

Updated homepage for spotify.com

Our users have to go through our website to learn about our product offerings, purchase Premium, listen to music or get support.

By focusing the premium web flow, I was looking toward the Revenue and Growth teams to make an impact on how we obtain and sell users on Spotify. However, each of the pages within this flow were designed and developed by different teams around the globe. The organizational lines were evident in our executions.

By analyzing data for the month of February 2017, over 150,000,000 people were visiting the web experience—40% were looking for music.

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

I gathered cross-functional members from Brand, Engineering and Product Design from various parts of the business to take apart each page, identifying the inconsistent bits to inform how we can start to prioritize.

Workshopping inconsistency with a global team.

Overall, the language was inconsistent across the board, even when comparing Premium offerings. You couldn’t play music. There were misinterpretations of brand elements. Buttons were all over the place. Within 7 pages of an experiences, we served over 24 button variants, 4 navigation types, 5 different ways to present our offers.

Premium art direction supplied by the brand team.

I partnered with two Art Directors from the Brand team to begin exploring the visual directions for the experience.

Based on what we gather in the workshop, the three of us kept the same principles in mind: contextual, simple, and engaging. No idea was a bad idea and we all took concepts into different directions.

It was my job to take in the parts that worked from each and drive that into a realistic experience. I focused on creating an experience that used a majority of the same bite sized bits as the current implemented solution to frame this as a realistic, achieveable vision. Small improvements to get to a greater vision.

A consistent layer on top of the current experience.

Because of relationships formed along the way, this vision was able to influence product teams and touch real users.

Our growth team, working on the homepage, was part of this project from the beginning and wanted to take this work and apply it to the homepage and subsequent premium landing page. We partnered up to implement some of the consistency based design decisions as well as build more reusable components for more teams.

This A/B test, ran to about six million people, beat out the old, inconsistent design and we rolled the design out to all users. There was an increase in Premium upgrades, more people were scrolling (the fold exists for us, apparently), and there was a 4% uptake on plays through the web player.

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

While consistency was an important part of this story, I wanted to look beyond the current state to identify what we would need in the future. This helped with planning for the coming year and what I was looking for from design leadership in order to get there.

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

Cards were a way to merchandise Spotify Premium offerings. Additionally, the cards became a branded element that a user could connect with through the payment experience and into the consumer product.

Card formats.
Payment success.
Account page.

To help reinforce the reality of this vision, I built out mobile design considering the limitations in our tech stack while also tying in patterns from the mobile consumer experience. The goal here was to help align our patterns across experiences to lower cognitive load on users and help associate common patterns.

Mobile screens.

Online Store