Redesigning SoundCloud’s Interface — UX Case Study
By: Andre Leung, Derrick Wong, Kevin Vasques, and Vincent Tran
OVERVIEW
SoundCloud is a worldwide music streaming platform that allows users to both listen to music and upload their own. However, despite SoundCloud’s popularity, there are many usability issues that can significantly impact user experience. This resulted in a SoundCloud UI/UX redesign project undertaken by Andre Leung, Derrick Wong, Kevin Vasques, and Vincent Tran. This project was done in the undergraduate class of Informatics 132: Project in Human-Computer Interaction Requirements and Evaluation at the University of California, Irvine. In this redesign project, we targeted issues that disrupted the overall usability of SoundCloud’s website by utilizing information pulled from various user research methods. After identifying these usability issues, we structured our redesign to remedy the problems we found.
OUR PROCESS
Competitive Analysis
This was performed to better understand the user base of music streaming platforms and identify major direct and indirect competitors. This helped us identify strengths and weaknesses of both SoundCloud and other music streaming platforms.
Evidence from our competitive analysis showed that SoundCloud had the same potential user base as its competitors such as Spotify and Apple Music. This is in due part to the similar functions and features that SoundCloud provides to its user as a music streaming platform. A difference found was that SoundCloud was able to have a greater reach due to the user friendliness towards smaller creators on its platform, which is not found within its competitors.
User Surveys and Interviews
We performed 28 user surveys to better understand the characteristics and opinions of users that listen to music. Similarly, we performed 8 user interviews to analyze the goals, needs, and desires of users who use music streaming platforms. For both research methods, we focused on young adults and middle-aged people, since many SoundCloud users are within this group. We found that:
- Spotify and Youtube are the preferred music streaming platforms for many. Therefore, we can study why users of Spotify and Youtube prefer to use its platform for music and from that. determine what SoundCloud lacks in its current design.
2. Furthermore, most surveyed and interviewed users discovered new music through word of mouth, computer-generated recommendations, or through social media. Therefore, we will approach the redesign of SoundCloud with the idea of improving upon its recommendation system by giving more attention to the social aspects of the application.
3. Users find value in Spotify’s easily accessible curated playlists to organize music. Comparing this with SoundCloud, Spotify presents a more accessible playlist feature than SoundCloud does, which could be attributed to Spotify’s high usage.
Personas
Based on the data from the aforementioned user interviews and user surveys, we created three personas — Steve Johnson, Devin Williams, and Joanne Jones — to represent users who use music streaming platforms and to help visualize the audience and how they would react to potential new and improved features to SoundCloud.
Heuristic Evaluation and User Testing
We performed 4 heuristic evaluations using the 10 Nielsen Usability Principles for User Interface Design to further critique and analyze the design and usability of SoundCloud’s interface from a professional perspective. Additionally, we performed 5 remote user tests to identify and evaluate usability issues within the SoundCloud web page. All tested users had no experience with using SoundCloud and were asked to project their thoughts through a think-aloud protocol for us to better understand the actions and thought process of a new user. Using these methods, we found four major pain points in SoundCloud’s current design:
- Playlist function is unintuitive and difficult to navigate
- Visual clutter on the home page
- Contrast and design of interface is inefficient
- Sharing songs is unintuitive
Final Redesigns
Based on the results of the aforementioned user research methods, we used sketching, wireframing, and prototyping in an iterative process to redesign four features of SoundCloud that had the most usability issues: the home page, music player, playlist page, and sharing songs.
- Home Page
SoundCloud’s current home page interface is cluttered, with the font size and general color scheme making it difficult to read the text. Additionally, personalized recommendations and new genre recommendations are not displayed in an orderly or consistent manner. As a result, we decided to rearrange the layout to show personalized recommendations first on the home page, with non-personalized playlists listed after these personalized recommendations. Additionally, since we wanted to improve upon SoundCloud’s social aspect, the right side of SoundCloud’s home page now contains social interactions — recommended people to follow and the “Stream,” which displays posts from followed users. We also utilized different background colors and lines to differentiate between different sections of the home page, following the Gestalt principles to show association.
2. Music Player
SoundCloud’s current music player has small buttons and text that may make it difficult for the user to use. For our redesign, we decided on increasing the size of the entire music player so that it is easier to see and use, increasing the visibility of the system status of SoundCloud. We also rearranged most of the button placements so that they are more intuitive to use. Because SoundCloud has no method of returning to the playlist the current song is playing from, other than having the user click the back button, we added a playlist title button for this task flow. The song progress bar is now represented by a sound wave display so that it is consistent with SoundCloud’s song pages.
3. Playlist Page
SoundCloud’s current playlist management is confusing and unintuitive. Removing songs from a playlist is especially difficult for new users because to do so, they are required to navigate to a separate page within the playlist page. This flow is inconsistent with most other music streaming platforms and thus does not match the mental models of most users. As a result, we decided to add a “Delete Songs” button. We changed the user task flow of deleting songs in a playlist from a separate page in the playlist page to simply within the playlist page itself, matching the user’s mental model. Clicking on the “Delete Songs” button will bring up the delete icon next to each song, and clicking on the delete icon will remove the song from the current playlist after confirmation. The confirmation pop-up message serves as error prevention, but users have the option to turn off the confirmation message for future song deletions for increased flexibility and efficiency of use.
4. Sharing Songs
SoundCloud’s current user interface for sharing music contains unnecessary buttons and actions that the user must perform to share a song. For the redesign, we chose to remove the check box for the “at” feature and instead, made it so that the time point is initially set at 0:00 (the beginning of the song). The user can then change it by clicking on the sound waves of the song or manually typing in a time point. Additionally, we added a “copy link” button to increase the flexibility and efficiency of use of the sharing feature. Users now have the options of manually copying the link by either right clicking, using the CTRL+C keyboard shortcut, or simply clicking on the “Copy Link” button, providing an accelerator for experienced SoundCloud users.
Reflection
Throughout the 10 weeks of working on this project, we realized the importance of conducting user research in order to properly incorporate user opinions in our redesign choices. User surveys and interviews were more difficult than expected because we wanted to keep the questions open-ended but also discover specific information about user interactions and activities. We had a similar issue with the user tests — we wanted to test specific features of the system but also not limit user actions. Balancing out the way we approached user research was important for pinpointing the specific usability issues we wanted to target. Lastly, we learned about the importance of sketching for creating new designs as a group because each of the members of the team contributed unique but effective designs that may not have been discovered if we had performed sketching individually. Therefore, the prototypes we developed were representative of each team member’s thoughts and ideas, and supported by the evidence found in our user research.
Acknowledgements
Special thanks to Professor Matt Bietz, Teaching Assistant Ariel Han, and our peers in Informatics 132 for critiquing and helping us throughout the project.
