Spotify Offline States

If you live in a crowded city, you inevitably ride the subway. In cities like Vienna or Stockholm, you get amazing mobile coverage.
In cities like Toronto and Istanbul, you don’t.

Spotify is the leading music streaming service in the world, and yet it does not take into account that one might be offline due to circumstances beyond their control. Like commuting in a non-European city.

Spotify home screen, saying home screen is not available while offline, and asking the user to connect to the internet and try again.
Connect, you must, hm-hrm.

Technically, the note in this screenshot is true. The user is viewing Home, and they are offline, and Home is only available when online.

What’s troubling here is the lack of any guidance into functionality that is available when offline. The interface implies that going online is the only course of action for making the app function again.

It does not mention that one can download songs for offline use, or that one has multiple playlists available at that moment, ready for offline consumption.

Playlists window, with a green 'downloaded' identifier next to a couple of them.
Enjoy some.

Finding a Remedy

My gut reaction was to add a button below the copy, taking the user to offline playlists.

Spotify offline home screen with an added 'downloaded playlists' action button.

Being the professional that I am, I did not just stop there and call it a day. I use Spotify exclusively through playlists, but Spotify has added multiple other ways to save and find music, including views for saved artists, albums, and songs: There must be others who use these options as well.

Making Use of Available Functions

Spotify actually already has the necessary functions and methods to make this work, it just needs a few interface components and a proper flow to glue it all together.

1. Show What’s Available

When offline, Spotify already uses contrast to differentiate between downloaded songs and unplayable songs in a playlist. Use that one level above, to mark playlists and categories that have playable and unplayable content.

A playlist showing downloaded and unavailable songs, with the latter faded away.

2. Emphasize the Filter

Spotify also has another function when drilled down to its lists: the option to view only downloaded items.

This is, however, hidden in every view it is in. You have to swipe down past the scroll view and press a small “hamburger menu” icon next to the search/filter function to reveal the option, and then select the “Downloads” item to view only downloaded content.

3 screenshots: The regular albums view, filter/sort options, and the albums view showing albums that only have downloaded items in them.

And even when applied, it is not clear that there is a filter in place. Just at the very bottom, there is a small text saying a filter is in place that might hide some results.

3. Make It Easier To Find

I like Apple’s solution to this actually. Right inside the list to view albums/artists/etc., they have a “Downloaded Music” item that shows all those options again, but -get this- only for downloaded stuff!

How crazy is that?!

Apple Music app screenshots: One has Downloaded Music highlighted as an option in the main Library screen, and the other showing the same screen with the title Downloaded Music.

It even has a warning at the top, saying this view only shows items that are on the phone. How delightfully functional!

Getting to the Final Solution

Remember the first screen? Let’s combine that with a notice at the top that shows the user a filter is applied, as well as a way to get out.

That’s really more than enough as a first step to making an app function again.

Would I really stop there?

Nope, of course not.
If the user has no offline content but has opened the app while there was no connectivity, I would make sure that they see how to download music the next time they are online. Show the settings for downloading music too, like the quality or the network to download from.

But let’s not get ahead of ourselves. One step at a time, do the easier thing first, then we’ll get to things that require additional effort.