Redesigning SoundCloud
Breaking it down, and building it back up
Why?
SoundCloud is a pretty cool place — listeners can follow artists to access brand new music and artists can build a following by releasing singles and even full albums. But as the regular users know, interacting with the platform can be frustrating.
Compared to the simple and beautiful designs of other music services, SoundCloud feels clunky and outdated. Both the web and mobile app experiences are laden with counterintuitive design and awkward flows.
Yet despite this, I’ve become immersed in the community because I believe in what the platform provides. I want SoundCloud to be even more awesome.
As a user I care about:
- A clean, intuitive and functional interface
- Learning more about the artists I’m listening to and discovering new ones
- Sharing and communicating with my friends
The current website does a decent job covering these basics, but they can all be done better. Let me break it down…
1. The Navigation Bar and Player Widget
Problems
The search bar is too wide. At its max-width, the site is 1240 pixels and the input field for the search bar is 668 pixels. Usually the autocomplete feature finishes queries after just a few characters have been typed.
The player widget is on the bottom of the page. Navigation bars serve to provide access to links and functions that may be needed at any time. On a music streaming site this includes pausing the current song and skipping forward and backward between tracks. Although the player widget is visible on every page, its position at the bottom doesn’t intuitively communicate its utility.
Clicking my username brings up a dropdown menu. This behavior is odd without any visual indication that there is a dropdown menu underneath (i.e. a downward chevron). After using the site for years, my intuition still tells me it should take me to my profile. I mostly click there to get to my profile, likes and playlists.
Solution concept
The width of the search bar’s input field is reduced to 108 pixels, freeing up space for the player widget, which has been added in the middle.
Important links are right on the navigation bar instead of nested in a dropdown. The profile picture navigates to the user’s profile and the icons on the right link to their settings, likes, playlists, messages and notifications. The upload link has been removed since it doesn’t need to be accessed at all times. It belongs on the profile page.
2. The Stream
This is where songs and playlists posted by people you follow appear, with the newest at the top, like Twitter’s Timeline.
Problems
It’s hard to discern which song is playing. Other than the small play/pause buttons, there’s no styling, highlighting or emphasis to distinguish the current song from the others. Tracks that have been skipped maintain the orange progress indicators in their waveforms, which is misleading.
Only three to five songs are visible at once. A site for streaming music should be able to display more than this in a single page.
The Stream doesn’t automatically scroll. I regularly leave the Stream open in my browser to play songs while I’m doing other stuff. When I come back to the page I have to scroll down and scan the waveforms to pick out the current song. I usually resort to reading the song name from the player widget and performing a page search (Cmd + F) to find my spot. This flow is inefficient and hacky.
The avatars on the waveform are virtually meaningless. They’re too small to visually identify anyone who’s commented. Their only value is to let a user know there are comments on the track, the number of which is already indicated next to a comment icon below the waveform.
Reloading the Stream is slow and clunky. When I navigate away from the Stream and then return to it, SoundCloud tries to present me with the song that was playing, which is nice, but it doesn’t work every time. When it does, it achieves this by rendering every single track that came before it, which uses a lot of memory and takes way longer than a normal page load (and it looks bad). There is definitely a software solution for this.
Solution concept
The active song is clearly indicated by its expanded size, large artwork and visible waveform. Additionally, more songs can be displayed in the same amount of space.
There is an option to have the Stream automatically scroll as it plays through. Enabling this feature moves a track to the top of the page when it begins playing, as shown above with the Goldroom song.
It’s clear, judging by the amount of playbacks to comments, that most users aren’t commenting. Comments can be visually distracting so I’ve added the option to hide them.
The buttons to download, like, repost, comment, add-to-playlist and share are replaced by icons. The icons alone sufficiently convey their function and they don’t need to be translated to multiple languages. To keep the interface neat, the icons are only visible in the hover state (but the current song always has them displayed).
The amount of time since the song appeared in the Stream is indicated by a dynamically updated bubble—à la Path—that appears next to the scrollbar, like this.
I mentioned earlier that I want to learn more about the artists I’m hearing and discover new ones. The sidebar in my concept displays a highlight on the artist of the current song, and links to their profile. This section is especially useful when the song you’re listening to is a repost of an artist you’re not familiar with. It gives you a glimpse into their profile without needing to navigate away from the Stream. It also displays their follower count and a checkbox to indicate whether or not you’re following them.
3. Sharing
Sharing is an essential part of music discovery and SoundCloud’s user culture. As it stands now, the repost is probably the most common and effective feature for sharing a song with your friends and followers.
I love the repost feature but I think SoundCloud would benefit from an increased focus on private sharing and messaging. More time spent sharing internally translates to more time spent on the site, and more exposure to promoted content (Spotify has done a decent job with this). Also, users continually return to platforms their friends are using to share and communicate.
Problem
The share view doesn’t encourage internal sharing. To send a message you have to move to the third tab, and navigating there is not the obvious choice.
SoundCloud would benefit from a design that encourages users to socialize within their platform first.
Solution concept
This two-tab design promotes messaging first, without removing access to external network sharing. Integrating both options in the same view will help bring in new users and keep regulars coming back.
4. Messaging
The current messaging system is functional as is. However, it can be simplified to increase fluidity between the Stream or other pages.
Concept
When the messaging icon is clicked in the navigation bar, the messages view slides out from the right side of the page, similar to the notifications panel in OS X Yosemite.
The list of conversations is visible in a familiar layout without removing access to the Stream or other pages on the left. Clicking on a conversation slides into a conversation view, much like in a smartphone messaging app.
5. Notifications
SoundCloud has two types of notifications. Notifications related to account activity are displayed in a dropdown from the navigation bar. There are also pop up notifications indicating song activity on the page.
Problems
Account activity notifications aren’t comprehensive. Users are notified of a few types of activity: follows, @mentions in a comment, likes and reposts on playlists, and likes and reposts on uploaded tracks. Given the similarities between Twitter and SoundCloud’s content distribution, I would also expect notifications for likes on reposts and reposts of reposts.
Song activity notifications persist for too long. They end up blocking whatever is displayed at the top of the right sidebar and items in the dropdown menu. Sometimes they get stuck there if I navigate to my profile when a notification is still visible.
Error notifications don’t dismiss themselves. I don’t know what causes these errors but they occur frequently and can cover the whole right side of the page (continuing beyond the bottom) unless I manually close them, one at a time.
Solution concept
When the notifications icon is clicked, a panel slides out from the right just like in my messaging concept. This pane is scrollable and there are no additional pages to view notifications.
Notifications now include likes on reposts and reposts of reposts. This is useful because notifications drive engagement around a platform and subtly condition people to keep coming back. Plus, it’s fun to know when your friends are listening to and engaging with the same content as you.
Page activity notifications are styled consistent with the rest of the design, fade out as expected and don’t obstruct anything important.
Closing thoughts
This is by no means an exhaustive list of critiques and concepts. I considered redesigning the Explore view, profile pages, settings dashboard and playlist builder. How cool would it be to drag and drop songs into playlists on the right sidebar?
At the time of writing, SoundCloud serves over 175 million monthly listeners. Clearly they’re doing a lot of things right. Still, their platform plays an important role in music discovery and distribution and its design matters.
We know SoundCloud is a chill space for artists and listeners alike. Let’s hope they start making some spiffy changes to the web and mobile apps. I would love to see more people I know using SoundCloud regularly.
[EDIT] P.S. This was my first foray into the world of UI/UX design. The reception has been overwhelming and truly awesome. Thanks to everyone who read, commented and reached out.
