⟵ back

— product design

Reimagination of the SoundCloud Music Player

Winter 2019
Final Result: bit.ly/SoundCloud_LX


For the KPCB Design Challenge, I decided to design the music player feature on SoundCloud’s mobile app. Below is a side by side comparison of the SoundCloud Android UI currently (on the left) and my redesign (on the right).

Below is a side by side comparison of the SoundCloud Android UI currently (on the left) and my redesign (on the right).

The following contains a walkthrough of my analysis of SoundCloud’s UI, and my decisions behind my redesign 🤓

Analysis of Current UI

Because I am an Android user, I am used to the constant chatter of how Android’s always get updates to apps later, how we’re always “green” and “different, etc., so the first thing I did was compare the Apple SoundCloud app (left) and my Android SoundCloud app (right).

There are couple small differences between both UI’s, and the first is the 4th icon. On the Apple app, SoundCloud chose to use the loop button whereas on Android it’s the icon for viewing the music queue.

The second small detail is that on the Apple UI, the comment icon displays the amount of comments while the Android UI does not. Both have the number of likes the song has recieved but not comments.

This brought forth the questions:
– Why only the slight difference between both UI’s?
– Is the music queue or looping a song more important to a SoundCloud user?
– Why was the amount of likes more important that the amount of comments on the Android app?

Other iconographic differences I chalked up to different Android/Apple standards (i.e. the share icon). What is similar about both UI’s is that the focal point of the UI seems to be the album art. It takes the entire screen and everything is overlayed or placed on top of it.

This results in the iconography at the bottom is hard to discern, especially with such busy album art.

(Informal) User Research

Given my own time restraints, in order to gather some user data, I just asked around my friend circle about their experience with SoundCloud for some informal research to begin my needfinding.

Out of the 4 friends that I gather my informal research from, 3 of them mentioned the album art taking up an inordinate amount of space. One of my friends mentioned that the UI was very cluttered and eventually offput her so much she stopped using SoundCloud.

2 of the 4 people mentioned that SoundCloud had an interesting progress bar and that it was unique to the app.

Comparative Analysis

In addition to asking around my friend circle, I wanted to see how other music applications treated their UI so I looked to Apple Music and Spotify.

Spotify puts much less emphasis on their album art, as well as gives their user easier access to the shuffle and loop buttons, while SoundCloud does not. Spotify’s iconography is not cluttered by a busy background and takes up much less real estate than SoundCloud’s UI.

Apple Music’s UI also gives users and easier way to shuffle and loop their songs, however users do have to scroll a little bit to see those two options. What is common between Apple and Spotify however, is that both UI’s do not put much emphasis on album art.

With these things in mind, I started to construct my redesign.

Music Player Redesign

Given that SoundCloud is a music distribution and music sharing platform, in my UI I decided to follow suit and give less attention to the album art. Because SoundCloud contains more user-generated content and gives anyone the opportunity to upload music, I felt the emphasis should be given to the music and title itself rather than the artwork that accompanies the music.

I decided to be consistent and include the number of comments as well as the number of likes just to give the user more visibility of the system status.

I also kept the progress bar because after asking around my friend circle, they all agreed that it was SoundCloud’s little “signature” progress bar that they had never seen in other music or audio playing apps.

I decided to allocate more space for the title, in comparison to apps such as Apple Music and Spotify, because in my own experience, songs on SoundCloud tend to have longer titles due to the app catering toward more user-generated content, such as mixes which publishers might want more room to specify concerts they took the audio from, etc.

My decision to not use the “Go to queue” icon and instead put the option to view the queue in the menu on the top right. SoundCloud automatically makes a playlist called “Liked tracks” and the comment section of SoundCloud provides users with a forum-like experience so I decided that the liking and commenting was more integral to SoundCloud’s experience.

Car Mode

During the course of this project, while I was driving around with my friend, I noticed that her Audible app had giant icons while her podcast was playing through the car speaker. I asked her what it was and she explained that “Car Mode” would activate whenever she got into her car.

My SoundCloud is playing in my car all the time while I’m driving and there is no change in UI to accommate drivers that may want to quickly skip or pause a song so I designed a “Car Mode” screen.

I chose to leave the soundwave progress bar out of “Car Mode” because I wanted to create a simple and informational screen for drivers to be able to quickly glance at. The title, play, forward, and rewind buttons take up the most surface area because it’s more accessible for drivers to interact with without being completely distracted by the busier UI.

Final Prototype

Linked below shortly!

Found @lucylouxu (almost) anywhere