SoundCloud: The Design Patterns & Flow

Music is something I cannot live without. I listen to music literally for every occasions — working, studying, working out, or partying… And I’m that type of annoying person who tries to go out to a show at least twice a month. My favourite streaming service to use for music is absolutely SoundCloud. It is an excellent platform not only for exploring independent music, but also for discovering new artists too. SoundCloud has a wide number of underground artists who make great music but not that well known (yet), many friends of mine who are DJs and producers are on SoundCloud too. I’ve been joining the SoundCloud community for over 5 years now.

But today we are not talking about the music, we are talking about the User Experience flow and design patterns of SoundCloud. We’ll dive in and see how this music-streaming product gained so much attention from design perspective.

User Flow

Simplified typical User Flow for SoundCloud users

Design Patterns

Navigation

This is the overall look of the Home Page once you first opened SoundCloud. It is pretty standard and straightforward. The top navigation bar stays sticky on the top and keeps being there when you browse through. In the middle, the left side is the explore section which includes things like More of what you like, SoundCloud Weekly, Charts, Newly Uploaded, and many different playlists by categories or theme. All of these albums/play lists are designed in cards style with carosouls — that you can swipe and change. On the right side, it contains sections like Who to follow, Liked Tracks, and Listening History. The bottom is the music bar which shows you what track is playing right now.

HomePage of SoundCloud

Let’s take a closer look at the top navigation bar. This navigation bar is pretty standard. It shows the three main sections SoundCloud has: Home, Stream, and Library. In the middle, it’s a huge search bar for you to search tracks and artists by keyword. On the right side, it’s your profile section. It shows a profile picture and your name, which is also a hover menu. Right beside the avatar, there is an option for Upgrade (to SoundCloud + which is the paid premium version) and Upload (for artists to upload tracks). On the very right, there are icons for notifications, messages, and more.

Top Navigation Bar of SoundCloud

Searching

When you have a specific thing on mind, you will go straight to search by keyword. When I typed in “old school”, SoundCloud suggests two tracks/mixes for me that I may like based on my past listening history. Then it automatically predicts what you were going to type afterwards, and display many results with “old school” in it.

Search Bar and predictive results when you type in “old school”

As I was writing this article, I wanted to listen to some chill music to study to. So I typed in “study mix” in the search barm, and the results came out below. I knew it woud take me a while to write this and I don’t want to change music every couple times, so I filteretd it by length to >30 mins. Additionally, you could also filter it by tags too. The tags are mostly reflected to the genre. You could filter to different genres of music (that all match with the studying vibe) based on your mood sand preferences.

Search Results Page — Tracks

The search function is not just for tracks. It is also for Go+ tracks (paid Hi-Fi tracks), People, Albums, and Playlists. When you are searching for specific people/artists, things get tricky. Because there are many artists have the same name. So now what you can do is to filter by location and find the one you are looking for.

Search Results Page — People

Streaming

Once you find your track, you’ll stream it. I particullaly like the playbar design when listening to a specific track. It is very simple and visually-appealing. For texts, it only displays the artist name, track name, tag/genre, and time uploaded. On the right side, it shows a picture of the track cover. The orange “Stop” and “Play” button is very easy-to-see. Then at the bottom, the track is shown in speicific soundwave, which shows users briefly how this track is composed, and can help users to drag to the point they want more easily. For comments, it actually hides it but instead shows people’s profiles. That is a very unique design that hasn’t been seen elsewhere.

Playbar Design when listening to a specific track

When a track ends, SoundCloud will autoplay tracks that they recommend for you based on your listening history. Of course, you can turn this feature off too if you prefer, by simply swiping the big orange toggler.

Autoplay on SoundCloud

Inputs

Input fields — such as text inputs, checkboxes, file uploads, buttons, and selections — allow users to enter information into a product for processing.

Since I am not an artist and only use SoundCloud to listen to music. The text inputs I interact with are very limited. Outside of searching and writing a comment, there’s no much need for me to enter texts.

The “Write a comment” field under a track

But I do follow a lot of artists. Every time I follow or unfollow an artist, I did notice a very interesting pattern SoundCloud uses when it comes to buttons. Orange is SoundCloud’s brand color and it’s absolutely used in all primary CTAs. When on the Home or Search Page, the “Follow” CTA remains black and white (because it is a secondary button in those cases). But when on a single artist page, the “Follow” CTA changes its design to the orange background and the white text suddenly (because it is a primary button in this case). And when you actually click the button and follow the artist, the CTA changes again — not only on its icon. but also changed to a white background with orange texts and borders.

The CTA “Follow” when on Search or Home Page
The CTA “Follow” when on Artist Page
The CTA “Following” when you already following an artist

Overall, SoundCloud presents a great product not only in its services offered, but also in its user experience deliver. Its easy navigation, quick-to-learn flow, attractive orange CTAs, highly visual-focused design, and many other details — together make SoundCloud a very usable and accessible product.

Wo