Listen for SoundCloud
I worked on a set of projects to improve listening on SoundCloud, including a page used by millions every month.
Company
SoundCloud
Role
Product Designer
Skills
UX · UI · Prototyping · Sketch
Overview of the project
When I worked at SoundCloud, a major focus was the listening experience. This case study brings together a few closely related projects: the Embedded Player, the redesigned Listen Page on the web and the new Collection feature.
Shortly before I joined, SoundCloud launched a full redesign of the web app with a new interface and brand direction. My first role was as a prototyper, using HTML, CSS and JavaScript to explore ideas with the design team. One of the first projects I worked on was the Embedded Player, alongside Marcus, one of our designers. The player was all over the internet, so it had to look and work well in many different contexts. It had millions of impressions every day, making it both an entry point into SoundCloud and a major brand asset. Prototyping with BackboneJS, mock data and real APIs gave us a much stronger sense of the final result.
We needed the Embedded Player to look great wherever it was on the internet, and this was an important part of the iterations
Working on a tricky area
Alongside the Embedded Player, the Listen Page on the web was another major entry point into SoundCloud. Our mobile app had recently been redesigned from the ground up, so we wanted the web Listen Page to feel connected to it. The new mobile app focused on artwork, the waveform and a minimal interface. We wanted to see how much of that could carry over to the web.
SoundCloud has a loyal fanbase, so changing the Listen Page was tricky. There was a lot to consider: description, hashtags, recommended tracks, artwork, comments, metadata and the waveform. The waveform was especially important. It had been part of SoundCloud from the beginning, was present in the new Embedded Player and mobile redesign, and felt unique to the product. We didn't want to lose that on the web.
Bigger play button, focus on artwork, easier recommendations and clearer artist positioning were among the improvements
Trying to bring alignment
These are early design explorations for the web Listen Page, with more emphasis on artwork and the waveform. The web had far more information to display, but these designs helped bring it closer to the new Embedded Player and mobile app. Even then, we had challenging feedback from the community. By focusing more on artwork, we had also taken away the ability to see it in full.
We had underestimated how the web Listen Page was used, and how different it was from the Embedded Player or mobile app. It wasn't just a place to play a creator's music. It was the web home for the track itself: a place to upload, manage metadata, read comments, engage with listeners and more. As a team, we kept iterating on those learnings and pushed the Listen Page towards what still exists today.
A better look at the overall design that we were pushing forward at the time
Improving the listening experience
Another part of the listening experience was how people came back to tracks they loved. Other music services like Spotify and Apple Music were gaining ground, so we knew this was an area to improve. From the beginning, calling the feature “Collection” felt right to me. It felt close to collecting music in physical formats, and I kept that idea in mind when designing it for the web.
Having alignment across platforms as well as bringing a strong sense of collecting the music was important
Looking to the real world
I make electronic music, and I knew the joy of buying vinyl records, crate digging and displaying a music collection at home. That played a big part in how I thought about liking, collecting and listening to music on SoundCloud. We had already pushed artwork forward with the new Embedded Player, Listen Page and mobile redesign, so it made sense to continue that for Collection. We wanted to capture the feeling of buying, collecting and displaying vinyl records.