SOUNDCLOUD LTD.
SoundCloud is the world's leading social sound platform where anyone can create sounds and share them everywhere. Recording and uploading sounds to SoundCloud let's people easily share them privately with their friends or publicly to blogs. SoundCloud can be accessed anywhere using the official iPhone and Android apps, as well as hundreds of creation and sharing apps built on the SoundCloud platform.
goals
The goal of this redesign is to offer a more effective way of viewing and browsing through a significantly wide range of music and audio. The second goal is to help the user discover tracks based on what he/she likes and listens to.
Process
(Processed developed during my time at Unikrn)
1.) Project Brief
Client
Vision
Goals
Challenges
2.) Target Audience
User Personas (If required)
3.) User Experience
Research
Wireframes
4.) Design & Revisions
5.) Build Guidelines
Color
Typography
Illustrations
Etc.
6.) Implement
7.) Question & Answer
8.) Iterate
Return to Design & Revisions
CHALLENGES
As a consistent SoundCloud user, of both the online media player as well as the iOS mobile app platforms, I find that there are a lot of small steps needed to perform simple tasks. For example, the "Add to Playlist" function is hidden in a 3-dot drop down. A Soundcloud spokesperson says this is to "reduce clutter", but to hide a key function seems very questionable. The mobile application is another headache within itself. Even with consistent updates the application crashes upon certain requests, the shuffle function only shuffles and repeats your most recent liked/reposted songs, there isn't a repeat button like it's online browser counterpart. The list goes on. I asked myself what is the most effective way of viewing and navigating music in large quantities while still keeping the feel of being a music social network?
USER EXPERIENCE
My research found that SoundCloud users are typically lost when it comes to navigating. Key elements for users are hidden and navigating to specific pages requires going through a series of tedious click throughs/discoveries. With the addition of a sidebar users have a clear indication of where they are on the website and allows them to conveniently navigate to other pages. This has proven effective with not only other streaming services but websites that require browsing through an overwhelming amount of content. Which should be the case for SoundCloud the "World's largest music and audio platform."
COLORS
TYPOGRAPHY
ILLUSTRATION
Icons
VISUAL examples
Landing Page
(Click for fullscreen)
Going Vertical
Vertical multi-level navigation has been one of the more useful UX implication in recent practices. It’s flexibility in scaling for small screens as well as it’s navigation convenience have placed it as one of the most used trends in newer web applications. This is evident in it’s appearances on websites and applications such as Facebook and Spotify. For this SoundCloud redesign/reUX I stuck to an accordion navigation.
A useful benefit of having an accordion navigation is being able to have a hierarchy system. Having collapsable menus is a great way to keep menus organized and help ease the user through navigating a website. For the most part, UX designers can’t make everything self-evident but the most we can do is make it self-explanatory. Pages are clearly labeled and users are left with a better idea of where they are on a website. In this instance, the user is on their “Playlist” tab. By clicking playlist that aggregates the drop down with the users playlist they have created, which in turn aggregates the main section of the page with said playlist. Some drawbacks of this practice is that it can’t go as far two levels deep within it’s hierarchy. But luckily in this case users wouldn’t go further than one layer deep. This would be a problem if used on say, eCommerce applications that have multi-layered menus i.e. Men -> Sweats -> Cardigan -> etc.
Profile/Playlist View
(Click for fullscreen)
Wall/Stream View
(Click for fullscreen)
Apart from our first goal, which is to offer a more effective way of viewing and browsing through a significantly wide range of music and audio, our second goal is to help the user find new music. On the current platform, finding new music that fits the user's taste can be really difficult. On the current platform's stream/wall page, if you found a song you like there is no clear way of finding songs just like it in terms of genre or style, easily fixed with a "Station" button that. Also there is however a "Discover" tab which unfortunately is hidden in plain sight with the same hierarchy as "Stream" and "Top Charts". The discover feature should be something users look forward to using everyday. That's why in my iteration, we have a "NEW" icon that is displayed above Discover to direct attention when page scanning.
A quick and easy alternative I've included is the "You might also like..." section in the bottom right-hand corner. This module is essentially a preview of the Discover tab. Easily accessible, visible and prompts users to click "See more".