SoundCloud Redesign: Case Study2020

ui/ux design

There is a large social aspect to music other than just consuming it. It speaks for us, it feels for us and plays a larger role than just being an everyday soundtrack.

Sharing music and connecting with others of the same taste, transcends any words used to connect with others in conversation.

SoundCloud’s online community and unique library are not to be forgotten rather, capitalized on. To increase user retention, I put an emphasis on the immersive potential and social capabilities in this UI redesign. In short, I aimed to reimagine SoundCloud as a music-based social media app.


balsamiq / figma / typeform / adobe illustrator

IDENTIFYING THE PROBLEM


Finding The Desireables
To get a better feel for the potential users and what they desire in a music streaming platform, I launched a Typeform survey on streaming preferences and habits.

These were some of the findings:
    ︎Streaming platforms are the leading method for music discovery (Spotify being the most popular)
    ︎The most desired features are curated playlists, radio functionality and social capabilities

Why Not SoundCloud?
After understanding what the desireables were, I needed to further investigate what was turning users away from SoundCloud’s mobile app.

Here is what some of the participants had to say:
    ︎The layout is repetitive and overwhelming with its features and disrupts the natural flow through the application
    ︎Current interface confuses some users making it hard to instantaneously pick up and listen
    ︎Overly aggressive with ads


Verdict: VALUE + SIMPLICITY + SOCIAL + PERSONAL = New Design



THE PROBLEM


The current layout of SoundCloud’s mobile application inhibits an intuitive user flow, sociability and appears cluttered.
 

USER PERSONAS: THE EXTREMES

When designing anything, I start off by imagining the “extremes” and what those users might be like. When taking care of the extreme type of users, I find that the middle takes care of itself.


 

APPROACH

Home Screen
︎Reorganized for horizontal scrolling to create easier access to desired content. This contrasts the original design where vigorous vertical scrolling is needed to reach simple tasks.
︎Top portion is dedicated to encapsulating a personalized experience for the user. The “Made For You” section was carried over from the original design, only brought to the top. This is so that users may quickly access personally tailored content even if they don’t have time to browse the app.

Stream
︎Implemented a “media view” for a more immersive experience and to put a focus on album/playlist art. Here the user can interact with their stream similar to Instagram; tap to play, double-tap to like.
︎SoundCloud also allows its users to upload personal images for tracks/playlists. Therefore, having the ability to engage with the stream similar to Instagram was an influence in emphasizing SoundCloud’s social capabilities.

Profile
︎To further push for musical intimacy between users, artists and their social circles, I’ve added a “Spotlight” feature. This allows users to pin a selection of playlists, tracks, and albums for others to see.
︎The main goal for the profile designs were to summarize and display what your music taste is like to others.

IMMERSIVE USER FEEDBACK


︎Giving users in-app feedback on actions performed is important for empowering the user through design.

︎Tracks/playlists that are in the “play state” will display the album art followed by a dimmed layer to contrast what is playing in the stream versus what is not.

SAME FEATURES, LESS CLUTTER


︎To simplify the user interface without sacrificing any features, I moved the account settings into a compact side menu. Here, users may access their profile, messages, settings and notifications at any time.

︎All track/playlist related options can now be accessed by the dotted button at the botton right of each track/playlist. The most popular actions are placed at the top to encourage sociability and ease user flow.

QUICK COMMANDS & MORE INTERACTIONS


︎Using pressurized touch or holds, I wanted to give users the ability to quickly access key commands that can be customized in their settings. For example, quick commands for a more social listener may be set to share, play and follow. 

︎This interaction allows users to efficiently execute most actions without having to lift their finger as often. As a result, pushing for a smoother user flow and personalized experience. 


REFLECTION


The biggest take aways that I’ve learnt through this passion project is:

    ︎Who I am as a UI/UX designer and what my design mantra is when approaching challenges. I learnt that I love to use design to create personal connections between human and product through meaningful and sometimes personal user interactions.

    ︎Have a passion for your work. SoundCloud has been a part of my childhood and knowing that they have not been as successful in the music streaming industry has fuelled this case study. I’ve had a good sense of what the brand is about and because of this, used their strength as a forefront thought when designing.


© Derek Lin, 2021
Updated: 03.28.21