For the Love of Sound · Redesign of the 24h old Soundcloud mobile app
Yesterday Soundcloud launched a radically rethought mobile app. Just a couple of days before and totally unaware of the upcoming relaunch, I had started redesigning their old mobile app on my own. Due to what feels like fortunate (or unfortunate?) timing, I now can actually run my work against the official release of the Soundcloud product team. That is what this post is for.
Soundcloud 3.0 changes everything
Perhaps the most perplexing contrast to Soundcloud’s successes over the past years has been it’s mobile app. Though I rarely ever heard even power users complain about it (I guess it somehow did the trick) Soundcloud’s mobile app felt outdated and lacking way behind other global players setting new UX landmarks and best practices with every other release (see here for old screenshots). With yesterday’s release all that is in the past. The new app is focused and slick. But beyond the extreme visual overhaul, the update came with far reaching changes to the overall orientation of not just the app but perhaps even their entire product strategy.
If you haven’t checked it out live yet, go to TheNextWeb, The Verge, FastCompany or the Wall Street Journal for a first impression of the brand new app. Other than that, just go find it in the app store.
Soundcould 3.0 seems to be intended as a tool for consumption rather than creation and interaction. All the focus is on listening. Recording is out. As product lead Brian Yeung puts it “if you have an application that focuses on one thing, you can have a much cleaner experience”. Then again, after a complete re-architecture of the code-base, features like commenting, playlist creation etc. might still be in development rather than intentionally left out for good.
Last week and without any insight into actual user behaviour metrics — or let alone Soundcloud’s strategic thinking, I wouldn’t even have thought about gutting the app like Yeung and his team did. As a daily user, I simply felt the old app poorly represented the actual product and left me longing for a more complete mobile experience. This is what informed my approach.
Soundcloud 3.0b · My Redesign
As a Berlin based PM by day and interaction designer by trade and passion, the state of Soundcloud’s old app just provoked me to eventually open up Sketch and see for myself what exactly took Soundcloud so long.
As a remainder: Producing an app at Soundcloud’s scale is incredibly hard. Finding the best possible solutions for dozens if not hundreds of interacting features and details takes months. And usually large numbers of talented product designers and engineers. I cramped a mere fraction of that kind of thought process into a handful of early mornings and late evenings. My designs below are incomplete, and at times inconsistent. With very little time and primarily focused on having fun shaping the app, my drafts are meant to outline a certain direction and provide a hint at a possible aesthetic. Nothing more.
So take the following designs with a grain of salt. Please watch out for the image captions. Right click ‘open image in new tab’ for full resolution views. Download all screens here (screens on iPhones) and here (screens only). Step by Step:
The Feed · The Track
Obviously, there’s an endless number of ways to listen to music on the web or while on the go. In my opinion, the still mostly unsolved problem here is getting to an answer for “What should I listen to next?”. This, by the way, is a problem generally shared by most media platforms (think Youtube, Spotify, Hulu etc.). So to me, what is special about Soundcloud is how sounds can be discovered. Once you’re connected to a couple of friends or artists, what excites me most is being introduced to new material through their likes, comments and reposts. Actually though, Soundclouds streams on the web are populated only by direct posts and reposts and not yet by likes, saves or comments. Facebook’s and Twitter’s home feeds on the other hand are more and more trying to capture and present the full range of social interactions on the respective platforms. As a Soundcloud user, I would love to browse through other user’s activities instead of manually clicking through individual profiles (try soundcloud.com/alex/comments or /likes).
Take a closer look at the Feed screen above and notice how this home feed shows posts, reposts, comments and likes in a Instagram-for-sound kind of way. The artwork is front and centre. Detailed meta data informs the user’s decision to either keep scrolling or playing any given track. Most importantly, it is possible to switch from the ‘All posts’ option to filtered streams which show either only tracks, only comments or only likes.
Pulling the feed down beyond the first post would reveal a search which could by default target only the respective current feed.
The Track interface (right) manages to provide one-tab access to all comments, reposts and likes by using the same mechanics as described for the home feed. Also, liking and commenting (which would likely trigger a modal) are integrated in a mobile friendly way. Please note that this is not a ‘currently playing’ screen (Not shown. Check out this screen to see how the navigation would introduce a fifth icon to accommodate a ‘currently playing’ screen whenever needed).
Throughout the entire redesign, I continue the self imposed principle of not altering or compromising the cover art in any way.
The user profile
Having played with the new official Soundcloud app, I noticed how the new implementation of user profiles allows for a more playful exploration of other user’s tracks, sets and likes. Meanwhile, the information density and general clarity of structure is of secondary priority. This could prove to be a well justified trade-off; or could cause confusion and unnecessary steps for highly active users.
The User Profile drafts above aim at fully representing the user and extending his or her ownership over tracks, likes and comments on to the mobile device. Following and messaging (a newly introduced feature of the web app) are accessible left and right to the avatar. A cover image (again, available on the web) and the user’s bio are accounted for. On scroll in the track list, the profile transforms into a more minimal and less intrusive header. This way, full user representation can be achieved without unnecessarily harming the UX around content.
In order to display clean lists, meta data such as the play-count, the like-count and the repost-count are translated into a general engagement score indicating overall popularity (notice the orange bar right to the cover art). Both the related actions and metrics can optionally be accessed by swiping any entry from right to left.
Check out the smaller image to the above for both the actions and a list of sets.
Notification Center
In all screens you will find a bell icon and counter in the upper right corners. These indicate the number of notifications, which represent the total of new activities (e.g. new followers, comments on my tracks) and new messages. Tapping on the notifications icon triggers an overlay, users are staying where they instead of being pulled out of context.
The activities feed functions the same as the home feed, yet displays cover art in a more compact and ‘productive’ way. Generally, the differences in cover art size depend on the character of any given context: Media in the home feed is new and fleeting and therefore displayed with big, curiosity-feeding visuals. Covers in a profile’s track list are small because their overall ‘location’ within the app is constant. If necessary, they are easily retrieved. Here in the activity feed, media is not new (since you are the one who posted it initially) but fleeting. An increased interest in metrics (how often did my track get played) justifies the medium sized media items.
The Messages view is fairly straight forward and modelled after the established best practices for messaging. Tapping on a message leads the user to a full chat like conversation-view.
Recording
By now, this could be the most controversial screen. Below in Opinion, you find my take on whether or not this feature should even be part of the app.
One of the visually most notable visual elements is perhaps the bright orange recording button in the bottom right corner. When tapped, it triggers the Recording screen shown above. The recording’s time and Soundcloud’s sound wave are displayed on top of a blurred-to-abstraction view of the device’s camera. The intention here is to highlight both being in the moment and recording that moment — while focusing on sound but without ignoring your surroundings. While this feature may not be technically feasible, it’s playful character might animate users to overcome the threshold of recording their first sound at all.
Tapping the stop icon triggers a follow up screen (not shown here) that allows for adding a title, description and cover image while uploading the sound in the background.
Opinion
Even just as a passion side project, it has been great fun working on this interface. I wish I have had more time to put an extra effort into details and add more of a unique and creative element to the design.
This is where I see the official app’s strength. It focuses to do one thing extremely well. In line with that, all related functionality is owned by the product team who dares to incorporate new concepts while leaving well established patterns behind. This kind of innovation is as risky as it is bold. Here, it rises in uniqueness and character over less daring concepts (like my redesign) which, at times, bank and rely on proven but boring precedents.
Considering the big picture changes introduced by Soundcloud, I am both excited and sceptic.
By promoting passive (mostly listening) rather than active use (recording, commenting, messaging etc.) of the new mobile app, Soundcloud risks neglecting the core collaborative aspects that make it exciting and outstanding compared to the range of basic streaming services.
While presenting at what I believe was LeWeb Paris, I remember Alex Ljung pointing out the magic and untapped potential of everyone of us walking around with a recording device in our pockets. In my understanding, unlocking that very potential is Soundclouds vision.
People sure are using their phone’s cameras. Soundcloud should own the mic — and provide the best available listening experience. I figure yesterday’s release is a mere first step for a new mobile Soundcloud.
I’m beyond excited for whatever is up their pipeline.
Disclaimer
This redesign is in part inspired by Tobias van Schneider’s recent post on ‘stupid side projects’. Other than a general love for and interest in product design, my admiration for SoundCloud as a whole was a main motivator to get started in the first place.
As mentioned above, when I started work on this, I had no idea about the official new app. So my redesign couldn’t have and is in no way intended as a counter proposal to Soundcloud’s work. The timing here is coincidental.
I have no formal relation to Soundcloud at all. Obviously I do not own the rights to any of the artwork used to populate the layouts. If anyone is unhappy about my usage, let me know and I’ll make changes.