I’d hate to see SoundCloud go.. so here’s what I did.

Boris Yu
9 min readAug 14, 2017

--

I started using SoundCloud about four years ago to upload my own music and to discover new grassroots musicians. It was around May 2016 however when news broke out about the company potentially going bankrupt. In less than a year and a half after SoundCloud told the public about its subscription service “SoundCloud Go”, we see this $10 premium service slashed down to just $1 for three full months.

July comes around and the internet is flooded with articles about SoundCloud running out of money, laying off 40% of its employees and the potential loss of all user-generated content.

Unfortunately I’m not an angel investor nor do I have a business plan that will save the company. However from the perspective of both a designer and user of the platform, I took this opportunity to create an independent study project exploring the tools and services of the current SoundCloud. The goal is to redesign a user experience centred around the concept of discovery.

Revisiting SoundCloud

Though it’s been four years since I’ve started to use SoundCloud, the service was around for much longer. To find the opportunities for a redesign, I revisited previous versions of Soundcloud that were released. Since I primarily use the smartphone version of SoundCloud, I focused my research on the mobile product.

2013 was when SoundCloud released version 2.5 which served as the building blocks for future updates.

With the 2014 released, the visual branding of the app became much more apparent and is close to being identical to the current version.

The 2015 update saw features such as Shuffle, Play Related Tracks and Repost/Share be added to app. Surprisingly however, the number followers who comment on these blog posts went from 91 in 2014 to only 5 in 2015. Though engagement has drastically dropped, one core comment remains: where are the features that allow listeners to engage with the content?

User Research

The comments from the blog were from 2015 and so as a next step, I interviewed users who currently use the app and asked for their opinions on both functionality, flow, and visual design. These users consist of those who use the platform as a means of sharing their work and those who simply listen. Of those interviewed, the main points are as follow:

  • Personalization is lacking compared to Spotify or Apple Music
  • Recommendation feature does not promote discovery of new music
  • Visualization of tracks is unique and on brand

Approach

Based on this initial research about SoundCloud’s business model and the comments I received during the user research phase, two key questions were derived to guide the design process:

  1. On a design level, how can the mobile app better support discovery and user engagement?
  2. In a situation where SoundCloud redefines their business with features such as Patreon and Bandcamp, how will the experience for listeners change?

As the first step of this redesign, I created a new user flow to demonstrate a new experience. Rather than the original four tabs, I designed five tabs with each of them focusing on either music, engagement, and personal.

There are three main channels of focus: music, engagement and personal.

Overall Design

1. Branding and Visual Identity

SoundCloud’s visual identity while clean, lacks in regards to providing a stimulus where users want to engage with the app. The main comment I received during my interviews was that while navigation was easy, the UI was flat. The white background acts as a blank canvas for emphasis on user content but in this case, lacks any call-to-action (CTA).

Lack of a visual language renders SoundCloud’s UI significantly flat compared to Spotify

While it felt logical to create cover art for artists spotlight and playlist, it simply did not go in line with SoundCloud’s brand and purpose. Unlike Spotify, SoundCloud is created from user-generated content as opposed to just releases from music labels.

Original approach to cover art

Taking a step back however, SoundCloud’s appeal is how its platform supports users; anyone from anywhere can upload their own content. With this as the basis for the design, I opted for dark metallic gradients as backgrounds to support the spotlight content. Rather than having individual playlist cover art, these CTA banners will promote the discovery of new music and artists through the Home, Artists, and Community tab.

2. General Interface

Adjustments were made in terms of font size, color and white space to the UI of the current app. These decisions were based on creating a layout that best demonstrates a hierarchy of information.

Left image: current design, Right image: new design

Tab Design

1. Home/Browse

In music apps such as Spotify, the Home screen first consist of tracks and playlist that are recommended for you based on your listening history before moving to new content. The Browse screen is where the search bar exists and generic categories to discover additional content. With this redesign of SoundCloud however, I wanted to promote discovery in this first tab as opposed to a passive approach to listening. While there is no visible problem of users wanting to discover all the content on SoundCloud and being an active listener, the approach I decided to take in light of the first key question gears SoundCloud towards a music discovery service as opposed to a music streaming service.

Home screen will focus on discovering new content on the SoundCloud database

The current Home screen for SoundCloud displays the activity of users that someone is using. However, it was discovered during the user research phase that most users jump directly into the Browse screen to search for music and users. By having an initial CTA (“The Uploads”) that draws attention, an opportunity is created to not only discover new tracks, but to explore different categories of music. At its core, the Home screen flips the approach of providing users with what they want with what they may want.

Browse screen focuses on recommending music based on listening history

With the Home screen as the dedicated page to discover new music, the Browse screen becomes an area to recommend users new music based on their listening history and also songs/playlists they have listened to. Other than small aesthetic details, the layout of this page remains similar to the current version of SoundCloud.

2. Playlist/Song

Through my research, the feedback I received for the Playlist and Song screen has been positive. Using the music’s waveform as a progress bar is unique to SoundCloud and provides an engaging visualization for the user. One point that was made however was the inability to comment on another user’s comment. Digging a little further into this feature, I realized it was rather difficult to even make a comment.

The current comment system requires a two step process which involves two different screens

My solution to this was to change the way the comment tool is triggered. The waveform allows users to scroll across to skip ahead in the song. What if the comment feature appeared during this moment?

Though this does not solve the problem of being able to comment on another comment, rethinking the interaction for commenting so that it becomes a simple gesture for the user allows for additional updates in the future.

While exploring the comment tool, I also realized a majority of the action tools such as “Shuffle” is hidden away in the three dots. To make these core action tools more accessible, I decided to redesign the layout of these tools on the Playlist and Song screen.

3. Artist/Community Screens

With a mix of both passive/active listeners and content creators, SoundCloud attracts a range of users. Some may be on SoundCloud to discover new grassroots musics while others are using the platform to promote their music. With a diverse range of users, SoundCloud has released additional services such as Go and Pulse to cater to these users. Unfortunately, these releases have yet to help SoundCloud establish a working business model.

Let’s assume in this scenario that SoundCloud decides to take a similar approach such as Patreon and Bandcamp where creators can be supported through either song sales or subscriptions. If this is the case, then a stronger presence of artist and communities will need to be established.

Similar to discovering new music, I am proposing two new tabs where users are able follow artists and communities and be notified of their latest updates. SoundCloud in a way is similar to Vimeo where there it is a platform for both users and creators. Rather that just promoting new content, it works for SoundCloud to showcase the amazing talent and provide a method of promotion for artists and communities.

The Artist and Community profile pages shares the same layout as the current design on SoundCloud with the exception of a new subscribe button. Spotlight items are also emphasized through drop shadows as opposed to larger images to maintain a consistent look throughout.

Subscribe button brings users to updates and subscription packages

The subscription page contains the most recent updates from the artist/community and also a screen listing different subscription packages. This feature was added as an extension to SoundCloud’s business model. The current monthly-fee has not worked for the company

4. User Profile

The current SoundCloud User Profile screen is split between two tabs that groups likes, saved songs and etc, while another tab consists of profile settings. The decision to consolidate the two tabs into one was based on a functionality standpoint. Through competitive analysis and from a user’s perspective, having personal information and settings in one area allows for easier accessibility and a consistent flow of information.

Next Steps!

This independent study only scratches the surface of the type of work that SoundCloud may potentially have to go through with their new CEO. In no way am I suggesting that the redesign above is all that is required to save SoundCloud. Rather, it serves as a reminder to anyone in design that a final product is only the tip of an iceberg. Throughout the three weeks, I was able to map out a basic ecosystem between user needs and the user experience. Yet these different simple tools for interaction and engagement is built upon a more complex foundation of what SoundCloud is and offers.

If in the case that SoundCloud does go through with a restructuring of their business model, how will those services be included in both the web and app platform? Will interactions such as commenting/liking or the current layout of tabs be different? How will the user journey for a listener be different from that of a creator?

My last article talked about empathy as an ethical responsibility as opposed to an item on a checklist. With this SoundCloud redesign, I cannot say that I am now a master UX designer but I do understanding that UX is more than just tools we include to create better and empathetic experiences; it is the thinking behind why this specific tool will connect users to the overall ecosystem.

What initially began as a redesigning of the SoundCloud interface turned into a design project which explored the company’s history, business model, services, tools, and forms of engagement. Perhaps what I have here does not solve SoundCloud’s imminent problems but I definitely learned a lot when it comes to systems thinking. There is definitely much more to design for such as new search categories (e.g mixes, live content, radio, etc.) but for the time being I am going to stop here.

I’m excited for what ever project may come up in the future and I can’t wait to share it with the design community here!

--

--

Boris Yu

Freelance experience designer exploring “!” moments www.borissyuu.com @withadime