SoundCloud • A-R.XYZ

SoundCloud


About project

UX UI Design case study for SoundCloud mobile application. SoundCloud is an online audio distribution platform and music sharing website based in Berlin, Germany, that enables its users to upload, promote, and share audio, as well as a DSP enabling listeners to stream audio.

Technologies
Summary

SoundCloud is here to stay, more than a decade SoundCloud help us stream, create and share audio and music. Since its mobile application launch, the user didn't see many refinements in their interfaces and experiences whereas, its competitors are steadily improving their UX to sustain their competitiveness. This user experience and interface case study analyses the current application to enhance the discoverability of audio and music.

SoundCloud
Key deliverables
  • - Competitive analysis

  • - Understanding and fine-tune user flow

  • - Create wireframes

  • - Design high-fidelity mockups and prototyping them

Expected results

The new design helps users to:

  • - Easily discover latest music and tracks from th artists

  • - Renewed Stream screen, more specific and improved interactivity

  • - Fresh Library and Profile screens with featured "Dim" layout

  • - Improved Player and Mini-Player

Design process

Competitive Analysis
SoundCloud

The project started by understanding the client SoundCloud and their competition. Analyzed more than 6+ brands/website and applications and settled with three direct competitors Spotify, Bandcamp, JioSaavn . This analysis showed the necessity for design upgrades and the need for focusing on mobile applications rather than web player.

User research & findings

My user research consists of the following steps

  • - Surveys to distinguish ideal participants

  • - Preparing interview questions

  • - Conducted user interviews

The key insight of my user interview was to identify the userflow, and various scenarios to improve the current design of the application. Results say more than 70% of respondents found the application thoughtfully needs a revamp, age group between 20-25 suggested implementing modern - light interfaces than the current one, 60% of respondents prefer other applications particularly due to puny visual aspects or user interface and ease of finding/recommending tracks. It seems participants use the Upload menu very unusually, during the interview 90% of them didn't use/upload any music/audio last year in SoundCloud. During my research on the internet, I found that creators are leaving SoundCloud when they get popular. In total I interviewed 10 users, whereas the major challenge was to analyze and categorize users.

User personas
SoundCloud

From my research and findings, I created a persona of "Roy Deo" who is 26 years old, living in Bengaluru. Creating a user persona helps me focus the user primarily and involve him throughout my design process.

Design system

It is really important to understand the current style guide and branding of SoundCloud and identify the core values of the brand. SoundCloud reflects energy and diversity, considering this fact I designed a style guide. One major update from my end is the switching of font family to Roboto from Interstate, although the typeface switch compromises its traditional look, it can bring a fresh modern feel for the user.

SoundCloud

Colors

SoundCloud

Fonts

SoundCloud

Typo sizes

SoundCloud

Icons

SoundCloud

Buttons

Wireframes

The research, finding, and suggestions from the participants from their interviews resulted in creating the wireframe. The wireframe created using Figma, and Material UI Kit was the reference. From the splash to mini-player everything is made from scratch, some important changes like pulling the "Upload" icon from the top navigation to stand-alone element in the home screen is one of them. Brand new sign-in and registration screens are designed and updated the "Artist Portfolio" with a new design. Constantly communicated with selected users on their feedback and communicated with fellow developers on the implementation and potentialities in the wireframes.

SoundCloud

Splash screen

SoundCloud

Signup

SoundCloud

Typo sizes

SoundCloud

Home - Landing

SoundCloud

Streaming

SoundCloud

Library

SoundCloud

Playlist

SoundCloud

Profile

SoundCloud

Mini-player

SoundCloud

Player

User interface

After understanding and enhancing the userflow from the wireframes, I started working on the prototypes. Like wireframes, I used the same software Figma for prototyping along with Adobe Illustrator as graphic design software. The colors and the typeface look cleaner and resonant, the interfaces are more clear and improved the userflow. The new home screen features Artists, Latest Tracks, Playlists, Uploading, and Latest Releases along with many other classifications. All icons are updated to Google Material Icons and the image - album arts are styled more appealing, the playlist's multiple tracks are displayed as vertical album arts iconified to 33.33% width. The "Dim" mode is introduced with a new color pattern. As mentioned previously, more featured classifications and profile layouts was introduced helping users discover new content. This or a similar feature could significantly enhance the experience for users when discovering new music.

SoundCloud

Splash screen

SoundCloud

Signup

SoundCloud

Typo sizes

SoundCloud

Home - Landing

SoundCloud

Home - Landing (Dim)

SoundCloud

Streaming

SoundCloud

Streaming (Dim)

SoundCloud

Library

SoundCloud

Playlist

SoundCloud

Profile

SoundCloud

Mini-player

SoundCloud

Player