SoundCloud

February 29, 2016 · 7 details

I use SoundCloud…a lot. As in, all the time, every day. I’ve been using it to curate new music for a few years now, and it’s been so fun to watch the platform evolve with each passing week. I admire SoundCloud’s ability to ship new features and improvements so often, striving to make the site faster and easier to use for everyone.

The SoundCloud team recently redesigned their iOS app – a surprising refresh of their mobile offering with a slick new listening interface and a beautiful new way of interacting with your music.

So far the reviews of the app have been overwhelmingly negative. The app currently sits at a 2.5 star rating on the App Store, and some folks are diving pretty deep into why the new app is a flop. The further I dig, the more it’s clear that this redesign was intended for listeners, not for the musicians who represent the backbone of the service.

For the sake of this post, I’m going to focus purely on the new interactions and design elements – not on the relative merits of the feature offering (or lack thereof) in the new app. I hope this works for everyone out there!

Listen while you read

Design Details is also a podcast, a weekly conversation about design process and culture. Listen to the latest episode while you read, or subscribe in your favorite app.

Design Details Podcast
Loading...Grabbing the latest episode
Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed
Selecting a song

Okay so this interaction is a bit jerky, with a strange black flash. I believe that’s being caused my recording software, so I won’t hold it against SoundCloud. If there’s anything I think we can take away from SoundCloud’s redesigned iOS app is the total, focused and uninterrupted prominence of listening to music.

Notice that when I start playing a song, the album art fills my screen and SoundCloud’s signature waveform bubbles into view. It’s insanely minimalistic and clean, which, depending on how you use SoundCloud, is either a major win or an abysmal let-down (i.e. no more commenting). The last I heard, the SoundCloud team has intentionally stripped away features from the app and will revisit them in time.

For now, this feels like a listener’s heaven.

Play/pause

How about this: no more fumbling for the play/pause button while you’re driving down the road. No more tapping aimlessly on the bottom of your phone to try and navigate through your music.

I like this.

Tap anywhere on your screen to play or pause the song. Notice the light bounces of the waveform as the song’s state changes.

Next song

Switching between music apps on an iPhone is one big guessing game. Spotify, Hypem, the native music app – all different styles, different controls and different layouts. When I’m driving down the road at 75mph, the last thing I need is to be looking at my phone to change songs.

SoundCloud is on to something with this new interface – just swipe left or right (outside of the waveform) to change songs. It’s so simple, it makes you wonder why this hasn’t been done before.

PS – if this has been done before, I’d love to take a look!

Scrubbing

I feel like a broken record now, but wow – I’m totally loving this quick scrubbing of the track waveform. No more itsy-bitsy slider nestled in between buttons and song controls – nope, just slide your finger along the massive touch area to scrub your song.

If you’ve been paying close attention throughout these past few videos, I’m sure you’ve noticed one slick design detail here: the very subtle parallax effect on the music controls and album artwork as the song progresses. The cover art slides slowly to the left, creeping along, as the seconds tick by on the track.

Back to the stream

To get back to the main song stream, just swipe down. No back button, no ‘close’ text. Just a simple gesture to get you back to the start. This feels really nice to use, I can’t lie.

One other detail to notice here is the animated toolbar icon, subtly reminding you how to get back to the song in progress. This is definitely an element of design that I haven’t seen in any other iOS app up until now, and I must admit it feels quite nice. I think that, if used in moderation, other app designers could take a cue here to add some motion and life to the core UI of their apps.

I actually chose the wrong track here to demonstrate another detail, but the bottom toolbar is actually semi-transparent. A subtle gesture to hint at the song playing underneath. I love it!

Slow motion for me

This is one of those subtle details that 99% of people will never notice, but in my opinion adds so much to the life and overall feel of the app. As you swipe down to return to your feed of songs, the artwork of the current track slowly scales back and fades into the distance.

Search

This isn’t another groundbreaking design detail, but it’s a nice touch to the app that I felt was worth highlighting. Tapping on the search bar in the app results in some wonderfully-smooth transitions and fades.

It doesn’t feel sudden or rushed, but instead serves as a well-paced way of guiding you into the keyboard view. A wonderful touch.

Design Details Podcast

Design Details is also a podcast, a weekly conversation about design process and culture. Listen to the latest episode while you explore more posts, or subscribe in your favorite app.

Design Details Podcast
Loading...Grabbing the latest episode
Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed

Copyright whenever. This isopen source.

Apple PodcastsOvercastPocketcastsGoogle PodcastsCastroBreakrerRSS Feed