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

Anyone seen the online participant?

Let’s start by framing the issue. I’m a product designer inside a progress staff that focuses on bringing new customers to Spotify through the online. When our staff began engaged on the spotify.com homepage, which is the touchdown web page of our web site, we discovered that an amazing majority of people that go to wish to take heed to audio straight on the positioning (i.e., they’re in search of the online participant). But, that they had hassle discovering it and had been annoyed with the quantity of friction it took to take heed to something.

While this launch could seem to be a easy change, it was simpler stated than performed. It got here with challenges in design, engineering, and experimentation. For one, the positioning info structure had grown in complexity over time as totally different groups had added new content material and parts to the positioning. As a consequence, returning guests needed to depend on outdated habits to search out the online participant, like scrolling to the underside of the web page to search out the hyperlink. New guests had an extended person journey earlier than they might play something — that’s, in the event that they even made it during the a number of steps to get there!

Because the web site had existed for a lot of years, earlier groups who had been already preoccupied with website upkeep and bug fixing didn’t have time for design enhancements. So earlier than we may arrange an experimentation framework as a way to take a look at designs for a brand new homepage expertise reliably, we needed to put money into modernizing the tech.

Gather, perceive, dash

After the person researcher gathered insights by surveys and net analytics to assist body our pondering, the subsequent step was to outline our most typical website guests, their main person targets, andthe issues that bought in the way in which of reaching them. We developed person personas to uncover and prioritize alternatives in order that we may start exploring tips on how to create the optimum expertise for each new and current customers. 

These person personas additionally guided the collection of design sprints that adopted, by which we invited members of a wide range of disciplines — product designers, a UX author, a product supervisor, an engineer, and a person researcher — from different net groups that work on spotify.com. The preliminary design dash laid the groundwork for getting everybody on the identical web page about enhancing the positioning. The aim was to share analysis, agree on a imaginative and prescient, and discover higher methods to collaborate going ahead. 

After reviewing insights, opponents, and the person journey for every persona, we brainstormed methods to simplify the paths to listening by workouts, like “How Might We” and “Crazy 8s”. Some concepts explored eradicating pointless steps, making the online participant simpler to entry, or that includes playable content material on the homepage. The dash members then labored collectively to slender down concepts primarily based on person influence, feasibility, and groups’ enterprise targets. These early discussions had been essential in establishing our imaginative and prescient with them to point out that we had been fixing for person and enterprise wants concurrently. 

After deciding on which ideas had been most promising, we created prototypes that may enable us to get suggestions from customers. The evaluation of the person checks knowledgeable the brand new route for spotify.com: an expertise that may give individuals instant audio entry by touchdown them on the net participant. But this work was just the start as a result of, whereas we had selected an method to take away listening friction, we additionally needed to optimize for sign-ups and Premium subscriptions.

This design dash allowed the groups to discover totally different concepts rapidly, keep away from working in silos, and design a extra unified route of options. We continued to work with these groups all through the venture by jam periods, sprints, and month-to-month conferences to share updates.

A transparent imaginative and prescient

With a newly outlined route, we labored with a product supervisor on a daring user-centric imaginative and prescient for the brand new homepage that may encourage the staff, information the work, assist us plan a robust roadmap, and get buy-in from the opposite net groups. To construct assist for our imaginative and prescient, we translated it by design ideas and documentation about our targets and technique, and shared these throughout the corporate.

In this imaginative and prescient, spotify.com would offer easy accessibility to audio content material, introduce guests to the model by exhibiting Spotify as a substitute of simply speaking about it, and empower guests to decide on how they wish to hear, e.g. the Spotify plan, app, or expertise that’s proper for them.

In order to ensure that guests may nonetheless attain their main targets, we held one other design dash that targeted on enhancing the positioning structure and navigation system. In the MVP design, we’ve carried over the navigation menu and footer on the outdated spotify.com and re-designed it to be extra unified with the online participant.

The imaginative and prescient served as an necessary reference all through the venture for each my staff and stakeholders. Regular collaboration with these groups saved us in examine to ensure that we had been unifying person and enterprise wants.

Tests, tweaks, and teamwork

We knew that altering the spotify.com homepage to the online participant could be a serious enchancment for customers, but we additionally knew that, due to the web page possession challenges and use of a number of tech stacks to construct the positioning, it might trigger a substantial workflow change for different groups. Design and information science collaboration enabled us to validate our approach in direction of the imaginative and prescient incrementally, by breaking down the design into a number of experiments.

We initially shipped experiments that despatched homepage guests to the online participant after logging in or signing up, which higher catered to the intent of recent customers making an attempt to take heed to audio. After every take a look at launch, we reviewed the metrics in opposition to our baseline to grasp if the answer was performing higher or worse. In our first take a look at, we noticed a rise in retention, our main success metric, and subsequently, decided that we may roll out the brand new expertise.

As is to be anticipated, there have been additionally unfavorable person ends in experiments, so we tweaked parts of the design and re-ran them. 

In our closing take a look at, we noticed that sending spotify.com guests to the online participant considerably elevated sign-ups, Premium subscriptions, and retention on Spotify on virtually all units. We are at the moment engaged on rolling out this transformation to all homepage guests globally.

What we realized

Bring stakeholders in early. We had common design conferences and sprints all through this venture to verify we had staff alignment and buy-in given the scope of the venture. We invited members from totally different disciplines and different net groups to get a well-rounded perspective of what we wished to attain.

Lead with a imaginative and prescient. While together with stakeholders within the design course of, we created a daring user-centric imaginative and prescient for the brand new homepage as a way to make the longer term extra attainable. It guided the experiments, helped us plan a roadmap, and bought dedication from stakeholder groups.

Even failures present priceless perception. Negative person suggestions is commonly discouraging, however it’s necessary to spend time understanding the outcomes as a result of it’s potential that a number of small adjustments may flip outcomes. While we noticed some failed experiments, we gained priceless perception in understanding the larger image of what we wanted to do subsequent, together with being extra strategic with design tweaks within the closing experiment we ran.

Despite the outdated know-how, advanced website structure, and unfavorable take a look at outcomes, the staff’s collaboration and dedication to the imaginative and prescient had been key to our success. This new expertise will open up extra methods to enhance the person expertise and uncover extra progress alternatives for spotify.com.

An enormous shout out to the staff who labored 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 an enormous shout out to our companions in insights, product, and tech in addition to the designers and net groups that helped make this rollout occur.