From Web Page to Web Player: How Spotify Designed a New Homepage Experience

Anyone seen the web player?

Let’s begin by framing the problem. I’m a product designer within a growth team that focuses on bringing new users to Spotify via the web. When our team started working on the spotify.com homepage, which is the landing page of our website, we found that an overwhelming majority of people who visit want to listen to audio directly on the site (i.e., they’re looking for the web player). But, they had trouble finding it and were frustrated with the amount of friction it took to listen to anything.

While this launch may seem like a simple change, it was easier said than done. It came with challenges in design, engineering, and experimentation. For one, the site information architecture had grown in complexity over the years as different teams had added new content and elements to the site. As a result, returning visitors had to rely on old habits to find the web player, like scrolling to the bottom of the page to find the link. New visitors had a long user journey before they could play anything — that is, if they even made it all the way through the several steps to get there!

Because the website had existed for a number of years, previous teams who were already preoccupied with site maintenance and bug fixing didn’t have time for design improvements. So before we could set up an experimentation framework in order to test designs for a new homepage experience reliably, we had to invest in modernizing the tech.

Gather, understand, sprint

After the user researcher gathered insights through surveys and web analytics to help frame our thinking, the next step was to define our most common site visitors, their primary user goals, andthe problems that got in the way of reaching them. We developed user personas to uncover and prioritize opportunities so that we could begin exploring how to create the optimal experience for both new and existing users. 

These user personas also guided the series of design sprints that followed, in which we invited members of a variety of disciplines — product designers, a UX writer, a product manager, an engineer, and a user researcher — from other web teams that work on spotify.com. The initial design sprint laid the groundwork for getting everyone on the same page about improving the site. The goal was to share research, agree on a vision, and find better ways to collaborate going forward. 

After reviewing insights, competitors, and the user journey for each persona, we brainstormed ways to simplify the paths to listening through exercises, like “How Might We” and “Crazy 8s”. Some ideas explored removing unnecessary steps, making the web player easier to access, or featuring playable content on the homepage. The sprint participants then worked together to narrow down ideas based on user impact, feasibility, and teams’ business goals. These early discussions were crucial in establishing our vision with them to show that we were solving for user and business needs simultaneously. 

After deciding on which concepts were most promising, we created prototypes that would allow us to get feedback from users. The analysis of the user tests informed the new direction for spotify.com: an experience that would give people immediate audio access by landing them on the web player. But this work was just the beginning because, while we had decided on an approach to remove listening friction, we also had to optimize for sign-ups and Premium subscriptions.

This design sprint allowed the teams to explore different ideas quickly, avoid working in silos, and design a more unified direction of solutions. We continued to work with these teams throughout the project through jam sessions, sprints, and monthly meetings to share updates.

A clear vision

With a newly defined direction, we worked with a product manager on a bold user-centric vision for the new homepage that would inspire the team, guide the work, help us plan a strong roadmap, and get buy-in from the other web teams. To build support for our vision, we translated it through design concepts and documentation about our goals and strategy, and shared these across the company.

In this vision, spotify.com would provide easy access to audio content, introduce visitors to the brand by showing Spotify instead of just talking about it, and empower visitors to choose how they want to listen, e.g. the Spotify plan, app, or experience that’s right for them.

In order to make sure that visitors could still reach their primary goals, we held another design sprint that focused on improving the site architecture and navigation system. In the MVP design, we’ve carried over the navigation menu and footer on the old spotify.com and re-designed it to be more unified with the web player.

The vision served as an important reference throughout the project for both my team and stakeholders. Regular collaboration with these teams kept us in check to make sure that we were unifying user and business needs.

Tests, tweaks, and teamwork

We knew that changing the spotify.com homepage to the web player would be a major improvement for users, yet we also knew that, because of the page ownership challenges and use of multiple tech stacks to build the site, it would cause a considerable workflow change for other teams. Design and data science collaboration enabled us to validate our way towards the vision incrementally, by breaking down the design into multiple experiments.

We initially shipped experiments that sent homepage visitors to the web player after logging in or signing up, which better catered to the intent of new users trying to listen to audio. After each test launch, we reviewed the metrics against our baseline to understand if the solution was performing better or worse. In our first test, we saw an increase in retention, our primary success metric, and therefore, determined that we could roll out the new experience.

As is to be expected, there were also negative user results in experiments, so we tweaked elements of the design and re-ran them. 

In our final test, we observed that sending spotify.com visitors to the web player significantly increased sign-ups, Premium subscriptions, and retention on Spotify on almost all devices. We are currently working on rolling out this change to all homepage visitors globally.

What we learned

Bring stakeholders in early. We had regular design meetings and sprints throughout this project to make sure we had team alignment and buy-in given the scope of the project. We invited members from different disciplines and other web teams to get a well-rounded perspective of what we wanted to achieve.

Lead with a vision. While including stakeholders in the design process, we created a bold user-centric vision for the new homepage in order to make the future more attainable. It guided the experiments, helped us plan a roadmap, and got commitment from stakeholder teams.

Even failures provide valuable insight. Negative user feedback is often discouraging, but it’s important to spend time understanding the results because it’s possible that a few small changes could flip outcomes. While we saw some failed experiments, we gained valuable insight in understanding the bigger picture of what we needed to do next, including being more strategic with design tweaks in the final experiment we ran.

Despite the old technology, complex site architecture, and negative test results, the team’s collaboration and commitment to the vision were key to our success. This new experience will open up more ways to improve the user experience and uncover more growth opportunities for spotify.com.

A huge shout out to the team who worked on this rollout:

Eileen Murphy, Product Design Manager

Tawsif Khan, Senior Data Scientist

Julian Saenz, Senior Engineer

Felix Bouleau, Senior Product Manager

Lucy Walsh and Bella Chiu, User Researchers

Also a big shout out to our partners in insights, product, and tech as well as the designers and web teams that helped make this rollout happen.