SoundCloud • A-R.XYZ

SoundCloud

Design case study for SoundCloud android 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.

SoundCloud
Summary

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

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

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, and 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

The key insights of my user interview were to identify the user flow 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 competitor applications due to puny visual aspects or user interface and ease of finding/recommending tracks. Participants rarely use the "Upload" menu; 95% of them never used or uploaded any music/audio last year on SoundCloud. During my research on the internet, I found that creators leave SoundCloud when they gain popularity and grow outside the 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 on 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 tweaked the existing guideline keeping these principles in essence. One major update was an 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 findings, 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 designed from scratch. Some modifications, like pulling the "Upload" icon from the top navigation and keeping it as a stand-alone element on the homepage are of them. Brand new sign-in and registration screens are designed and updated on the artist Portfolio page.

SoundCloud

Splash screen

SoundCloud

Signup

SoundCloud

Typo sizes

SoundCloud

Library

SoundCloud

Home - Landing

SoundCloud

Streaming

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 categories. All icons are revamped to Google Material icons, and the image - album arts are styled more attractive. 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. 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