Listen for SoundCloud

We were tasked to redesign the listening page which at the time had over 175 million users every month.

Company

SoundCloud

Role

Product Designer

Skills

UX · UI · Prototyping · Sketch

Listen for SoundCloud

Overview of the project

When I worked at SoundCloud, a major focus was the listening experience. This case study combines a few of those projects together, as they're closely related, such as the Embedded Player, the redesign of the Listen Page on the web and the new Collection feature.

Shortly before I joined the company, a complete redesign of the web app had launched which introduced a new interface and a brand direction. My first role was of a prototyper, where I used HTML, CSS and JavaScript to explore ideas with the design team. One of the first projects I worked on was the Embedded Player, with our designer Marcus. The SoundCloud Embedded Player was all over the internet, so it was important to nail the look and functionality. Because the Embedded Player had millions of impressions every day it was the entry point for many into the SoundCloud experience as well as being a strong brand asset. Prototyping was a big part of the design process with not only front-end technologies like BackboneJS but also using mock data and real APIs to get us a solid idea of the final result.

An example of my work
Loading

We needed the Embedded Player to look great whereever it was on the internet and this was an important part of the iterations

Working on a tricky area

As well as the Embedded Player, another entry point for many into SoundCloud was our Listen Page on the web. Our mobile app had only recently been redesigned from the ground up so it was important for us that the Listen Page on the web had a similar look and feel. The new mobile app had a focus on the artwork, the waveform and a minimal interface. We were curious if some of those attributes could be brought over to the web.

SoundCloud has a very loyal fanbase so making changes to the Listen Page was tricky. There was a lot to think about. We had to consider the description, hashtags, recommended tracks, artwork, comments, metadata and the waveform. The waveform was important as it had been a fundamental part of SoundCloud's interface from the beginning. It was present in the new Embedded Player and the new mobile redesign and we felt it was something unique to SoundCloud, so we didn't want to lose it on the web.

An example of my work
Loading

Bigger play button, focus on artwork, easier recommendations and clearer artist positioning were among the improvements

Trying to bring alignment

What I'm showing here were earlier design explorations of the Listen Page for the web that put emphasis on the artwork and the waveform. We had much more information to display on the web, but with these designs, it felt like we were still bringing some alignment to the new Embedded play and the new mobile app. But even then, we faced challenging feedback from the community. Though we'd wanted more focus on the artwork, we had taken away the ability to see the artwork in its entirety.

We had underestimated how the Listen Page on the web was used and how it served a different purpose to the Embedded Player and the mobile app. It wasn't just a place for a listener to play the creator's music but it was an actual home on the web for the music itself. A place to upload, manage the metadata, read the comments, engage with listeners, and more. As a team, we continued to iterate on those learnings and push the Listen Page into what still remains there today.

An example of my work
Loading

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 revisited tracks they loved. Other music services like Spotify and Apple Music were gaining ground so we knew this was an area to improve on. From the beginning, calling this feature “Collection” felt right to me as it felt close to collecting music on physical mediums in the real world. I kept that idea in mind when designing this feature on the web.

An example of my work
Loading

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 knew the joy of buying vinyl records, crate digging and displaying my music collection at home. That played a big part in designing the experience of liking, collecting and listening to music on SoundCloud. We had already been pushing for a focus on artwork with the new Embedded Player, the new Listen Page and the new mobile redesign so it made sense to continue that for the new Collection feature. We really wanted to capture that feeling of buying, collecting and displaying vinyl records.

Want to know more?

Find out more about me and how I work.

Learn more
© 2023, James Morris Design