SoundCloud • a-r.xyz

SoundCloud

UX UI Design case study for SoundCloud mobile application.

Project Type: UX UI Design

Release: 2021

Role: UX UI Designer

Agency: Personal Project

Technologies:

Link: SoundCloud

About SoundCloud

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.

Project 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

  • User flow

  • Wireframes

  • Prototyping

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

  • Screening 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 aged between 24-30, living in Bengaluru. Creating a user persona helps me focus the user primarily and involve him throughout my design process.

Styleguide

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

Wireframing

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.

Prototyping

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.