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 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.
‣ Competitive analysis
‣ Understanding and fine-tuning user flow
‣ Create wireframes
‣ Design high-fidelity mockups and prototype them
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
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.
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.
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.
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.
Home - Landing
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.
Home - Landing
Home - Landing (Dim)