Pimp My Spotify

2018  /  Strategy & Design
A group of three screens showing the music player.

This is an exercise in speculative design to explore potential enhancements to the Spotify listening experience. The first round of work focuses on content architecture, navigation and discovery. This material was originally published on Medium.

 

Opportunity

+

As the world’s favorite streaming music service, Spotify has developed an enviable set of capabilities — both manual and automated — to open up the seemingly infinite digital music catalog, to facilitate listeners discovering new music, and to drive listener engagement and satisfaction.

A black background with an image of the planet saturn.

SCALE OF CATALOG

Let us not forget just how magical it is to be able to access some significant fraction of the world’s recorded music almost anywhere, at anytime

A black background with a white circle in the middle.

DATA FLYWHEEL

The scale of the audience coupled with the ability to mine behavioral data for individual and cultural insights – e.g. ‘Take a page from the 3,445 people who streamed the “Boozy Brunch” playlist on a Wednesday this year’ – portends interesting developments in product capabilities

A black background with a white circle in the middle.

ALGORITHMIC DISCOVERY

The runaway success of Your Discover Weekly and Your Release Radar attest to the hunger for discovery

-

But in this effort it also remains hampered by a set of issues including:

A black background with an arrow and three crosses.

DESIGN PATTERNS

Design patterns that don’t make for the most fluid — let alone delightful — listener experience

A black background with a white circle in the middle.

CONTENT CURATION

Content curation strategies that don’t celebrate the richness of the catalog or the diversity of individual taste

A black background with a white circle in the middle.

ACTIVE EXPLORATION

An under-emphasis on features that would allow the listener to really explore the long-tail of the catalog and build affinity through personal narratives of discovery

Proposals

In this round of analysis and exploration, I take on the content architecture, navigation patterns, the problem of discovery, and the challenge of just getting started. To summarize the subject matter below, I explore the following topics:

A black background with a white circle in the middle.

CONTENT ARCHITECTURE

A restructured content architecture that caters more intuitively to the listener’s varying dispositions with respect to familiarity vs. novelty of what they choose to listen to

A black background with a white circle in the middle.

OFFLINE EXPERIENCE

Better support for an Offline Mode to view and manage downloaded music

A black background with a white circle in the middle.

QUICK-START PREVIEW

Preview Mode in which any musical content being viewed is played automatically, making the actual music the driver of a set of informed skip/stay decisions to select what to listen to

A black background with an arrow in the middle.

CONTENT/TASK NAVIGATION

Adjustments to the UI to reduce friction in navigation across and up the catalog hierarchy, and between the screens supporting different modes of interaction — BrowsingNow Playing, and Up Next

A black background with a white circle in the middle.

UBIQUITOUS RADIO

Better integration of Radio into the play options for any node where it’s applicable — playlists, songs, albums, artists and genres/moods

A black background with a white circle in the middle.

Catalog Structure 1 – Content Architecture

Like any mature platform in this age of category-killers, Spotify has the enviable problem of having developed a lot of features to cater to many different needs & desires.

But there’s just too much of it! Aaaaargh! A little bit of something for everybody, but repeated everywhere, and scattered all over the place. 

The current structure suffers from gotta-also-have-it-there duplication, missed opportunities for rationalization & consolidation, and an unnecessary depth that buries some of the most promising material (hello Discover, where are you?)

A page of the radio station 's website.
The current structure is not organized according to clear principles, and is riddled with duplicates

A quick look at the current structure reveals the following opportunites:

Browse could be rationalized and integrated with Home.

Discover being buried under Browse is the biggest lost opportunity to leverage the power of data to increase the listener’s exposure to music they don’t yet know but could love. Upgrade now please!

Search hangs out at the top level, but applies only to online content (try it in flight mode). Oh, you can also filter the various segments of Your Library as a proxy for offline search, but really? I’m not saying that a consolidated presentation of search results across multiple datasets is easy, but c’mon it’s 2018!

Radio is just a different way of listening, not a doppelganger of the catalog. Better to allow the user to browse a single hierarchy, and then select the way they want to listen.

A table with the following categories of music.
The proposed structure is more compact, predictable, and built around the listener’s knowledge model

In this model, content known to the listener which directly reflects their activity is grouped under For You

Discover, which extrapolates from that activity to surface music the listener may not yet know, is elevated to the top level.

And All presents more general ways of listening based on activity across a larger population.

Of course, for a new listener, the All tab would be the most logical starting point (Discover would be limited to New Albums & Singles, and For You would just be Concerts Near You). As they built up a history, more sections would open up.

A whiteboard with red and blue markers on it
Explorations of primary organizational axes for content
A spotify playlist with two different colored covers.
A spotify playlist is displayed on the screen of an iphone.
A spotify playlist screen with the name of friday.
Content categories on the Home screen would be organized across 3 tabs
A black background with a white circle in the middle.

Catalog Structure 2 – Online vs. Offline

Unaccounted for in the current structure — but crucial to supporting offline use — is an easy way to switch between views of the whole catalog and my downloaded music. Ignoring this need leaves a big hole for Spotify around travel and adventure—flying, hiking, road trips off the beaten path, etc. — i.e., precisely the kinds of experiences where music can really strike a chord.

Amazon has already solved this really well with the Kindle which has a top-level toggle between All and Downloaded, making it a breeze to provision for, and then access my reading in flight mode.

A close up of the spotify app with three different colored sections.
A menu with several different playlists and albums.
A menu with the downloaded music and playlists.
A black background with a white circle in the middle.

Getting Started

With all that fantastic content to wade through, we’re often left facing the paradox of choice. Sometimes it just feels impossible to make the right selection, because there’s always the possibility of a better option. This of course, is not particular to choosing what you want to listen to on Spotify. It’s the bottomless mimosa problem that plagues all large “content” consumption platforms — whether we’re talking about viewers endlessly squirreling away shows in their Netflix Watchlists, or the poor dating single’s maddening inability to focus on the cutie drinking a martini across from them right now (ahem!). When the supply is endless, the bubbles just don’t feel like champagne any more.

I’m often left wishing for something that feels as immediate and tangible as the ‘dumb’ radio in my car. Actually hearing what the channel has to offer helps me make a split-second skip/stay decision as I flip my way through to find what works for right now. And somehow that seems to be the key—accepting the serendipity and joy of ‘right now’ over the imagined perfection of ‘the right one someday’.

I propose a new way of browsing whereby we automatically start previewing the music in the node currently highlighted (this could be the default behavior of a user setting). This changes the browsing paradigm from scrolling to pagination, and so also the visual presentation of the browse grid. Within each tab, content carousels are laid out within accordion sections, which the listener can flip through.

A picture of the spotify app on an iphone.
A close up of the spotify app with an image of a woman
A close up of the spotify playlist screen
Tap or vertical hold & drag to flip between different content themes

Swiping between the different options within each carousel changes the ‘station’. It promotes focus on the choice at hand, and the appeal of the music (or lack thereof) acts as the forcing function driving a simple yes/no choice, just like it does with that dumb radio, or old-skool TV, or the latest version of the Netflix TV experience.

A close up of the spotify app with a person in it
A close up of the spotify app on an iphone
A screen shot of the spotify app.
Horizontal swipe to navigate laterally and preview different music options within a content theme

In this paradigm, when the listener chooses to play a new piece of music (album, artist, playlist, whatever)— either by starting the app or by browsing and selecting — the appropriate track would start playing in Preview Mode.

Once initiated, Preview Mode would allow for (1) single-action preview of other music as the listener browses through the catalog, and (2) access to the Last Played track through the bottom row should they wish to go back to what they were hearing.

After a minute of playing in Preview Mode, the system state would switch to Playing, which would continue playing the currently selected music as they browse other options, and require them to explicitly choose to play (preview) any other music they wish to listen to.

A series of drawings showing the process of creating an app.
Flow between silent, previewing, and playing states as the user browses content
A close up of the spotify app on an iphone
A close up of the spotify app on an iphone
A spotify playlist with several different colored images.
All play starts in Preview Mode, enabling fast switching to previewing other music, and the option to return to the last played track.
After a minute of preview, the system transitions to Play Mode, which keeps playing the current track till another option is explicitly chosen for play/preview

Extending this idea further, Preview Mode could be applied at any level within the hierarchy, e.g. when the listener is viewing an artist, selecting between one of their albums, considering a genre, or picking between playlists in a genre, etc.

Cueing up the music to minimize any delay as the listener flips through stations could be a non-trivial challenge for the less predictable paths, and so the quality of the recommendations becomes even more important to keeping their experience smooth and delightful.

In some ways all this may well feel like a lot of additional complexity in the design system to eliminate one extra click per musical unit while the listener is browsing. But if we’ve learnt anything from the success of TinderSnap et al, it should be that eliminating friction from browse mode is critical to delivering a more playful experience, and that play is the path to increased engagement.

A close up of the spotify profile page
A phone screen with the user 's profile and an image of a man.
A phone screen with the sound of silver on it.
Preview Mode at various levels (content nodes)
A black background with an arrow in the middle.

Basic Navigation – Lateral Movement

Supporting an easier way to preview would also suggest the opportunity to develop an easier way to browse the hierarchy.

Lateral Movement, e.g. between albums by an artist, playlists in a genre, recommendations from my friends, etc. currently requires navigation back ‘up’ the tree to the parent node in order to go ‘down’ again. It never feels great because it’s just inherently inefficient.

The lateral swipe capability is already enabled for switching between tracks on the Now Playing screen, where the horizontal axis is the obvious way to organize sibling nodes. The same gesture — from the edge of the screen — would work just as well when viewing any node in a list.

A screen shot of the music player.
A screen shot of the sound of silver music.
A green screen with headphones on top of it.
Horizontal swipe to navigate laterally between albums by an artist
A spotify player with the name of baila reggaeton.
A spotify page with the name of the player and headphones.
A spotify page with the word esenciales on it.
Or between playlists in a genres, or any other set of nodes in a list

By making the presentation of each node more card-like — with the current node delimited to a part of the screen, and room left for the presentation of other nodes around its periphery — we could also reinforce the concept of each content unit (song, album, artist, playlist, genre) being a node in the network, existing in some relationship — and thereby connected — to other nodes.

A black background with an arrow in the middle.

Basic Navigation – Vertical Movement

Vertical Movement could be made more efficient too by using more of the top row as the tap area, and also allowing for the same via a strong downward flick when the screen has scrolled to the top (à la Inbox).

A drawing of a phone with arrows pointing to the bottom.
A drawing of different types of doors and windows.
Linear vs. circular models for vertical gestural navigation between different views/concepts
A spotify page with the play button next to an image of a man.
A screen shot of the spotify app.
A green button is on the screen of an app.
Tap the top row or flick the screen down when scrolled to the top to navigate back up

At the bottom of the screen, the persistent presentation of the Now Playing track as a row below the content browsing area also suggests the opportunity to apply the same UI component in the Now Playing view to enable easier access to what’s Up Next.

(I’d bet that the fraction of users more actively managing their queue would increase through more obvious access to the capability which is currently tucked away behind an icon in the top right corner.)

A series of sketches showing different ways to use the same app.
Flow connecting various views/concepts – Top level, Artist, Album, Now Playing, Up Next, Related Content – through vertical tap/swipe gesture navigation
A picture of the spotify playlist screen.
A picture of the music player with the caption
A screen shot of the spotify app.
Tap or swipe up the bottom row to reveal Playing Now or Up Next. Tap or swipe down the top row to back up

And the Tab Bar? Ok, if you’ve had the patience to read this far, you probably have some questions regarding the decision to replace the standard iOS tab bar with Android-esque tabs across the top. It was primarily driven by a desire to keep the bottom of the Home screen clear for a quick tap or swipe up and apply a consistent vertical swipe pattern to navigate between BrowseNow Playing, and Up Next. The efficiency of being able to select a tab with the thumb is easily replaced by a horizontal swipe gesture to navigate between the tabs.

A black background with a white circle in the middle.

Radio

Radio is already available for every node type — playlists, songs, albums, artists and genres/moods — but presented explicitly only on genres. On the rest it is tucked away behind a ‘…’ (more) menu. I’ve already discussed the redundancy of having a parallel hierarchy in the current Radio section.

Given its potential for loosening up the way that listeners relate to the catalog just as Shuffle Play did a few years ago (self-declared “Album Purists”, just let the hate flow through you!) I would argue that Radio would be better incorporated into the experience as an explicit listening option for every applicable node.

A bunch of different drawings on paper
Exploratory sketches of various aspects of the Radio feature

I propose that Radio and Shuffle are offered as paired play options within a split of the big green button. I am also acutely aware of the potential downside of the friction introduced by a more complex primary action, so a lot of exploration and testing would be needed to build confidence in a truly viable interface proposition for this.

A series of drawings showing the process of creating an image.
Vertical vs. Horizontal modesl for flip gesture navigation between Regular Play, Shuffle Play, and Radio
A screen shot of the exit shuffle feature.
A screen shot of the sound of silver app.
A picture of the sound of silver on an iphone.
Shuffle and Radio are accessed through a split play button

Social

Music is a social experience — intimately tied to the definition and expression of our identity and the way we relate to people — and no one seems to be tapping into that; not really. This topic is easily meaty enough to merit its own full-length investigation, so I will limit the exploration here to the aforementioned proposal to incorporate Friend Activity into the Discover tab using the same bi-level grouping UI as applied to More Like Your Recent Listening. It’s just a start.

Next Up

Here’s a list of the topics I anticipate taking on in future rounds, i.e. the list of issues I haven’t sufficiently processed yet:

Playlist artwork & the art of the album cover

Synesthesia: Previewing music with richer narrative context

Social discovery: The return of the mix tape

Merchandising for one (everyone)

Dynamic genres & moods: Unpacking the Daily Mix

Could Auto-Play Similar or Boil the Frog be the “Uber Pool (yes, cringe!) of music” ?

Queue management

Following, hearting, saving, and downloading. Why so confusing

Advanced catalog exploration

Integrating GeniusWhoSampledWikipedia, etc.

Holler at me