Product Design

SoundCloud Design Challenge

My relationship with SoundCloud over the past few years has been rocky. On one hand, I love the motive behind the service, in the freedom it grants artists, but on the other hand, I’ve struggled with appreciating the experience and visual identity of the product itself. As an evolving designer, I decided to challenge myself with a redesign.

I believe that as an underdog in the music-streaming space, SoundCloud has a unique opportunity to explore and define its own success through design. Because SoundCloud is an immensely complex app that has already undergone years of research and user validation, I decided to focus my redesign on search and navigation. In my opinion these are the areas of the platform that could use the most help. I wanted to keep this one short and sweet, but if you’re reading this SoundCloud, I’d love to tackle some more of the app! 😃


USER EXPERIENCE

Objective

Having started my career in fine arts, and later focusing on graphic design, I believe my strength lies in the visual spectrum of product design. This is not to say that I ignore the research and ideation behind problems and their solutions, but I recognize that I need to refine my skill in this area. For that reason my objective was to assume the roles of User Researcher, Data Analyst, and UI/UX Designer while working on this challenge.

My project goals for the redesign were:

Side note: I do not work for Soundcloud, and the views from this case study are strictly my own. Unlike the designers who work at Soundcloud, I don’t have full access to all the user data that influenced its current design. As a result, this case study is not exhaustive, and I am not suggesting that Soundcloud abandon its current design and adopt my redesign

Market Research/Who is SoundCloud

SoundCloud is a music streaming service that caters to musicians and provides them with a platform to curate, discover, and share great tracks without going through a middle man. Since its debut in 2007, SoundCloud’s user base has grown to more than 175 million monthly listeners, giving amateurs and pros around the world the freedom to have a closer connection to their audiences.

While currently an underdog in the streaming industry space, SoundCloud’s users are consistently creating great content while pushing forward SoundCloud’s relevance in the industry and its mission to “unmute the web”.

Hypothesis

As I started to gain a better understanding of SoundCloud as a company through market research, I began to notice certain problematic patterns and started developing certain hypotheses as to why problems existed. Hypotheses:

User Research

Before I began my redesign project, I conducted what might be termed guerilla interviews with six users to arrive at a better understanding of for whom I was designing. I wanted to know:

I asked multiple questions in an aim to uncover what each individual believed the strengths and weaknesses of SoundCloud were, as well as more technical questions about the flow and experience of the actual app.

Target audience demographics

Among the six SoundCloud listeners I interviewed, there were four males and two females. The age of the male users ranged from 18 to 22 years old, while the female users ranged from 21 to 27 years old. Half of the participants are currently college students and the other half are recent graduates in full time jobs.

While no official data exists publicly about SoundCloud’s age or gender demographics, after various conversations with people as well as some news articles that estimated the stats, I felt like this was a fairly representative sample of SoundCloud’s current user base. Furthermore, it seems that the majority of users are in college or are recent graduates.

To make this even more interesting, 58% of the users I interviewed identified iOS as their preferred mobile OS. Additionally, 67% of the people use the service and application at least once per week.

Hypothesis check and initial results

Following the interview, I immediately realized there were some miscalculations I had done while coming up with my initial hypotheses to the problems found in the app. Talking to real users helped me understand that SoundCloud’s amateur-like community and repository of fresh talent must be fully showcased as it is the big differentiator. It was the one constant found across age, gender, and mobile OS. Therefore I wanted to focus on curating mood content and organizing playlists in order to engage the habits of users. The refined hypotheses:

Personas of a typical Soundcloud user

From my research, I materialized a more robust profile of the typical Soundcloud user. I illustrated the type of behaviors I would be designing for with two different personas, based on the types of users I found, which generally fell somewhere on the following spectrum between casual listeners and professional listeners.

Casual Listeners:

Prefessional Listeners:

Personas based on the analysis of the 10 people I interviewed:

With whom do you relate with more? Are you like Bryan, who uses SoundCloud to share his personal tracks and gain inspiration? Or are you like Victoria, who uses SoundCloud to find popular songs that will resonate with her social circles? Or some of both? Either way, I’ll be designing with users like you, Victoria, and Bryan in mind.


USER INTERFACE

Wireframes

I sketched out a new search and navigation flow that addressed the issues found in my own research as well as the usability tests I performed. I quickly realized that I needed to validate the assumptions I was making and conducted a quick supplemental research (surveying 10 additional users strictly on the usability of the wireframe) to ensure my redesign was backed by data. Some ideas were readily executable, and others needed further thought, as can be seen in the final design.

Design

Navigation

The navigation system is perhaps the most important aspect of an application, as it allows users to easily move through desired flows and perform actions, yet its visual magnitude should be subdued as to not interfere with content.

Immediately after opening the application, SoundCloud users are met with two features competing for their attention — should they scroll through the navigation or surf through the content? Both options are important in their own right, but one must focus on the primary function of the app. Throughout my research, users were three times more likely to scroll through content before switching views. The added option increases the cognitive load on the user, which in turn reduces maximum usability as pointed out by Kathryn Whitenton of NN Group.

Furthermore, the navigation differences that existed between iOS and Android affected users and their transition between platforms. It makes sense why Google has been adapting its navigation patterns to ease the disconnect with its iOS users. SoundCloud’s approach still utilizes this older navigation system, immediately alienating potential iOS converts.

In addition, the lack of labels or titles between sections leaves users confused and unsure of what they’re looking at—the cognitive load becomes even greater. This is especially concerning when the users I sampled reported using iPhones as their primary platform.

For the solution, I bridged the principles of the iOS and Android navigation systems in order to appeal to both types of users: The navigation bar will now be placed in the bottom of the screen to facilitate one-handed accessibility, as well as reduce distractions. Integrating labels with active icons and including titles will allow users to quickly determine which screen they are currently browsing and minimize the time it takes to locate something (e.g. Profile).By refusing to label all navigation icons (regardless of active state), there is a reduced amount of repeated content and saturation of color.

The benefit in following these existing navigation patterns is in the ease of developing the app, while also being user-friendly since most users will feel at home regardless of their OS. There was no need to reinvent that wheel, but there is value in bending the rules to create a unique yet familiar experience.

Exploring

One of the main questions I sought to answer through my user research was whether or not the presentation of a screen affected its usage. Simply put, are SoundCloud users uninterested in discovering music outside of their subscribed artists? Or did UI have an effect on app usage? To answer this question, I conducted a relatively simple experiment during the interviews.

Before I started this experiment, I printed various versions of a visual exploration that varied in simplicity and content without any indication as to brand. Then I prompted the user to visualize an ideal discovery interface and explain what their minds arrived at when they heard the word “explore” in an application context. I repeated this again, with discovery. Afterwards, I asked the participants which printed version more closely matched their vision.

Out of the six people who participated in this experiment, all ignored SoundCloud’s current approach. Furthermore, there was a distinct desire for SoundCloud-suggested content, as many users would use the service as a discovery platform in addition to a streaming one. The analysis from the results suggests that SoundCloud users are willing to try new content from parties outside of their subscriptions, and the way this content is presented affects its usage, and therefore value.

For the solution, I combined the search and explore sections, as I recognized that search builds on the foundation of the exploration function to provide a valuable experience: users finding value in the discovery of new music: The hashtags were removed as discovery elements and were adapted as a quick filtering method in the new discovery page. Giving people that ability to quickly see what type of music is recommend for them will incentivize them to go deeper down the flow.

Behavioral design expert Nir Eyal illustrates how to create a habit in a user, or manufacture their desires, with his Hook Model. The key is to guide users through a certain sequence of experiences, from trigger to action, reward, and investment. And repetition matters here, as Eyal explains: “the more often users run through [these sequences], the more likely they are to self-trigger.”

The discovery page is now designed in accordance with the Hook Model, and therefore invokes increased product usage. Trigger, action, variable reward, investment, and repetition.

  1. An internal trigger (the desire to find a new artist) will guide the user to SoundCloud’s discovery page.
  2. The user is then invited to perform an action, from selecting a new and hot artist or playlist based on her mood.
  3. She is rewarded by listening to track, artist, or playlist she identifies with, either from current mood, past artists listened to, or current subscriptions. The user is seeing value in achieving her task efficiently.
  4. The more the user uses the feature, the better the suggestions become. By investing time in SoundCloud, her discoveries become more personal and unique. This in turn establishes a meaningful engagement that will motivate the user population to interact with the product, again and again.

Searching and Filter

Ahhhh…the final stretch. While search is a seemingly straightforward piece of UI with many examples to reference, the process of how it should function is a bit more complex. I wanted to give the user interface a more functional and clean look by adding more white space and grouping/nesting similar items into buckets for better scan-ability.

However, the first question I had was: How would I display the results? This included the whole experience—from the moment the user actually taps the box to the moment she selects her desired song. Research by the NN Group shows that if a user searches something, the chance that she will search for said item again increases exponentially. I therefore made it my first priority to include a recent searches view that combined with the automatically pre-populated suggested data in an effort to remove some cognitive load, since in many cases these data will be accurate for the user and make the process more convenient.

User research with the current app showed that people often took multiple taps and swipes in order to locate their desired content. This was due to the way SoundCloud organized its content—there was no sense of hierarchy. I also discovered that about 80% of users would search for the same version of a song or the same artists with a certain name—if Kate searched for “Stacy’s Mom”, there was an 80% chance she was looking for the original by Fountains of Wayne; similarly if Ben searched for The Eagles, chances are that he meant the popular band. For that reason I decided to showcase the top content for each bucket. In doing so I decreased the time it took to locate a certain song or artist for a large portion of my users.

The last Item that I felt needed revision was filtering. If a user was not able to find her desired content during the initial searching stage, she would have to delve into the rabbit hole of scrolling through thousands of songs and content.

Currently SoundCloud doesn’t offer a filtering method: they place content based on buckets, at which point users would have to swipe horizontally as shown and discussed above. 90% of users I tested had experienced a situation of rage-quit after being unable to find a certain song, playlist, or even artist due to a lack of proper filtering.

As SoundCloud is both a streaming service and a social platform that serves as a portfolio for new artists, upon searching for something, it becomes immediately apparent that multiple versions of songs exists within SoundCloud. You have the original, the cover, the remix, the translation, and many more subcategories that exist within the content itself, making filtering a stronger priority than for streaming services that mainly deliver only the licensed version of a song.

My solution involves providing as much information to the algorithm as possible in order to locate the content the user is looking for. Details like upload date, duration, and tags greatly increase the chance of locating relevant content. Tags are the bread and butter of SoundCloud as every artist brands her content with one. If I know I’m looking for the Spanish translation of Logic’s song 1-800, I would select the desired hashtags and by doing so I would be guided through the correct path.

Reflection

Going into this project, I knew this would be the perfect opportunity for me to hone my design skills. I wanted to gain a more holistic view of the design process and put the skills I acquired at Uber to the test. I figured the best way for me to accomplish this would be to just throw myself into a project, and go from there.

Looking back now, that is a complete understatement. Within the last two months, I was able to work on all the skills I set out to improve in order to deliver this project, and picked up some new ideas along the way.

I think one of the best things about designing is that you learn as you go with every project. You learn what works, and what doesn’t. You learn how to do things faster, better, and more efficiently. And that’s a wrap. Thank you so much for reading!

Have a project? Let’s talk about it.

Get in touch