SoundCloud • A-R.XYZ

SoundCloud


About project

Design case study for SoundCloud mobile application. SoundCloud is an online audio distribution platform and music-sharing website based in Berlin, Germany. SoundCloud enables users to upload, promote, and share audio or music, along with 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, user didn't see many refinements in their interfaces and experiences. Its competitors are steadily improving their experiences and interfaces 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-tuning user flow

  • ‣ Create wireframes

  • ‣ Design high-fidelity mockups and prototype them

Expected results

The new design helps users to:

  • ‣ Discover the latest music and tracks from the artists more effortlessly

  • ‣ Renewed streaming 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/websites and applications and settled with three direct competitors Spotify, Bandcamp, JioSaavn . This analysis showed the necessity for design upgrades and concentrating on mobile applications.

User research & findings

My user research consists of the following steps

  • ‣ Surveys to distinguish ideal participants

  • ‣ Preparing interview questions

  • ‣ Conducted user interviews

Key insights 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 minimal interfaces than the current one. A 60% of respondents prefer compititor applications 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 never useed or uploaded any music/audio last year in SoundCloud. During my research on the internet, I found that creators leaves SoundCloud when they gain popularity and grow outside platform. In total I interviewed 15 users, and 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[M] old Software Developer, living in Bengaluru. Creating a user persona helps me focus the user primarily and involve him throughout my design process.

Goals

  • ‣ Listen to the newest releases from favorite artists as it comes out Know what music trending

  • ‣ Create the best playlists, share them, playing them at parties

  • ‣ Manage playlist and library and listen to the right music for the current vibe or mood

Needs

  • ‣ Connect and follow favorite artists

  • ‣ Keep up with trends and the latest releases from favorite artists and genre

  • ‣ Discover new music, trends, and what's friends are listening to

  • ‣ Tailored recommendations according to mood and taste

Pains

  • ‣ The old-school design language is not pleasing, choosing competitors primarily due to aesthetics

  • ‣ Missing trends as its not easily discoverable

  • ‣ Hard to manage playlists and libraries

  • ‣ Overwhelmed by recommended music which he is not into, or during a different attitude

Design guideline

It is essential to understand the current style and branding guidelines of SoundCloud to pinpoint the core values of the brand. SoundCloud reflects energy and diversity; I made tweaks to the existing guideline keeping these principles as core values. One major update was the adaption of the font family to Roboto from Interstate. Although the typeface switch compromises its traditional look, it helps bring a fresh modern feel to the user.

SoundCloud

Colors

SoundCloud

Typography

SoundCloud

Icons

SoundCloud

Buttons

Wireframes

The research, finding, suggestions, and refined user flow from the user interviews led to the creation of the wireframes. The wireframes were designed using Figma, with Material 2 kits. From the splash screen to the mini-player everything is created from scratch. Some modifications, like pulling the "Upload" icon from the top navigation and keeping it as a stand-alone element on the home are one of them. Brand new sign-in and registration screens are designed and updated on the artist Portfolio page. Constantly communicated with selected users, and their feedback was communicated with the team during 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 user flow from the wireframes, I started working on the prototypes. I used the same software Figma, for prototyping with Adobe Illustrator as graphic design software. The colors and the typeface look cleaner and resonant, and the interfaces are straightforward which improved user flow. 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" was introduced with a new color pattern. As mentioned, featured classifications and profile layouts were introduced to help users discover new content. 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