SoundCloud UI/UX Redesign (2020)

SoundCloud UI/UX Redesign

ui/ux design

2020

There is a large social dimension to music. It speaks for us, it feels for us and connects us to others. Sharing music with like-minded people creates bonds beyond the reach of words. SoundCloud’s online community and unique library are not to be forgotten but rather, capitalized on. To increase user retention, this redesign highlights the immersive potential and social capabilities inherent in the SoundCloud platform.

role: ui/ux designer

state: concept

Process

Identifying the Problem

Why Not SoundCloud?

Finding The Desirables:
A Typeform survey was launched to gain insights into the preferences and habits of potential users.

Survey Results:
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

User Feedback:
︎The layout feels repetitive and overwhelming due to its numerous features, and disrupts the natural flow of the app

The current interface confuses some users, making it difficult to quickly start listening

The Problem:

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

User Personas

Designing with a focus on extremes ensures consideration of user needs at both ends of the spectrum, allowing the middle ground to naturally resolve itself

Approach

Home

The layout was reorganized to enable horizontal scrolling, allowing for easier access to desired content. This approach contrasts with the original design, which required extensive vertical scrolling to complete simple tasks.

The top portion is designed to provide a personalized experience, with the "Made For You" section repositioned from the original design to sit at the top. This placement ensures quick access to tailored content, even when users have limited time to browse the app.

Stream

A "media view" was implemented to create a more immersive experience and emphasize album and playlist art. This design allows interactions with the stream to be similar to Instagram, enabling tap-to-play and double-tap-to-like functionality.

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 foster greater musical intimacy between users, artists, and their social circles, a "Spotlight" feature was introduced. This feature allows the pinning of selected playlists, tracks, and albums for others to view.

Immersive User Feedback

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.

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

Quick Commands

Pressurized touch or hold interactions enables quick access to key commands, which can be customized in user settings. For example, a social listener might set their quick commands to share, play, and follow.

Supports a smoother user flow and personalized experience, allowing users to efficiently execute most actions without having to lift their finger as often.

Same Features, Less Clutter

The user interface was simplified by consolidating account settings into a compact side menu, providing easy access to the profile, messages, settings, and notifications at any time.

All track and playlist options are now accessible via a meatball menu at the bottom-right of each item. Popular actions are prioritized at the top to enhance sociability and streamline user flow.

compact side menu

options via meatball menu