in ,

A closer look at Spotify’s app design process

  • Has Spotify’s forthcoming CD-quality ‘hi-fi’ tier piqued your interest in its service? You might be like me: I have an ‘audiophile’-oriented streaming service already on deck but I have had the occasional dalliance with Spotify’s free tier over the years — to sample its catalog and its playlists. The promise of a hi-fi tier has pushed me off the fence and into Premium where Ogg Vorbis streams max out at 320kbps, offline listening permits playback whilst out of mobile range and Spotify Connect allows me to send streams to compatible third-party devices. The Premium tier is also free of ads. Well, unless you count Spotify promoting its own offerings. More on that later.

    The final technical details and performance of Spotify Hifi will have to wait until its launch, but here in this article, I will take a closer look at how Spotify was designed, and what those design decisions mean for the listener experience.

    I had a realization as I got into using Spotify more frequently: it’s not a music streaming service but a platform for playlists and podcasts.

    Spotify prioritizes automated hands-off music playing rather than the immersive listening preferred by audiophiles going deep into an album or artist. It often seems aimed at de-emphasizing artists in favor of gaining user allegiance to Spotify’s algorithmic playlists.

    Spotify is similarly all-in on podcasts. It has spent hundreds of millions of dollars to acquire some prominent podcast studios and individual shows such as Gimlet Media and Joe Rogan, and receives revenue from this type of content since Spotify inserts its own ads into the podcasts using a platform that it also purchased.

    In design circles Spotify is seen as setting the pace in several areas:

    • Designing for a global audience based on large-scale user research
      Creating a consistent look and feel across a wide variety of devices and platforms
    • Spotify has 365 million users in over 150 countries, 165 million of whom are Premium tier subscribers. Designing products that are easy and enjoyable to use for such an obviously broad range of people and across a multitude of devices is really difficult. Designers hate to hear clients say “Our user is everyone”: it usually signals an inability to prioritize. But in Spotify’s case, “everyone on all devices” is justifiably their target audience. So how does the Swedish company manage this?

    One design tool Spotify’s app design team is known for using is personas, which is a method of creating rich descriptions of archetypal users that represent clusters of needs and usage modes. Personas are synthesized from interviewing, observing and collecting feedback from actual users. They help the design and engineering teams focus their efforts by helping them stay connected to who they’re creating the product for, and to avoid simply designing for their own interests.

    We can learn a lot about who Spotify thinks its main audience is by understanding the personas they’ve built to guide development. Spotify is admirably open about its design process, so we have some documentation to go from, not just armchair speculation.

    Looking at the five personas (named Nick, Olivia, Shelley, Travis, and Cameron) and how their music listening habits are described, it’s obvious Spotify is targeting people in their 20s and 30s. Also, that music listening is largely framed as an accompaniment to social interactions or gatherings; or to match moods or activities. Audiophile is not a persona Spotify has much interest in.

    This sets the stage for how we can approach the user interface design of Spotify’s apps. Good design is never arbitrary, it’s always serving a set of goals. For this analysis I’ll focus on several core inter-related attributes that are commonly top-of-mind for UI development: Mental Model, Discoverability, and Visual Design.

    Mental Model
    To help people understand what they can do with a product or interface and how to navigate around a set of functions, you want to provide a clear “mental model”. In an ideal world, the mental model offered up by the product mirrors the one that the user brings from experience with similar products. When models align, the product (here, an app) feels “obvious” and “intuitive”. In reality, users’ mental models can vary widely based on their level of experience, where they live, language, cultural background, age etc..

    This means designers must make choices about what parts of the mental model can be assumed to be familiar, and which parts they will need to “impose” on the user for them to learn. Strike the wrong balance and you risk people getting lost or missing out on functionality.

    Spotify keeps things familiar with the usual ways of organizing content by artists, albums, playlists, etc. — these all exist in a Library. It’s simple to “like” an album to add it to your library. But individual tracks are treated differently. There’s no way to see a list of all the songs in your Library, and the only way to add individual tracks to your Library is to put them in a pre-established playlist called ‘Liked Songs’.

    I’ve done some work on media management systems over the years and one of the trickier problems is helping people understand what they have: what’s on their local device versus in the cloud, what they own forever vs what’s subscribed to temporarily, etc. It sounds simple enough, but we’ve probably all had the experience of boarding an (Internet-free) aeroplane only to discover that tracks we thought were on our phone are only references to files stored online. UI design can make or break this sense of functional predictability – get it wrong and it erodes trust and creates dissatisfaction.

    The free tier of Spotify is simple: you don’t own anything, you can’t download anything, you can’t add your own music – it’s all streamed in real time. The Premium tier adds the ability to download for offline listening but, unlike say Qobuz, you can’t purchase outright. Overall, Spotify’s mental model ranges from very simple to moderately simple, supporting the company’s aim of being a low-effort listening experience.

    Discoverability
    Discoverability is about how quickly and easily a new user can get up to speed on what a product or service has to offer, and continue to explore it over time. For a service like Spotify with a free version that wants to convert people into paying Premium subscribers, this is especially important. Non-paying users are more fickle and will leave if they don’t find what they want quickly enough (goodbye Premium upsell).

    The design motto here might have been “Spotify abhors a vacuum.” Every opportunity is taken to lend a helping hand with automated suggestions, thereby avoiding a blank library or empty playlists.

    To that end, Spotify is aggressive with music discovery. With most other music streaming services, creating a playlist first requires choosing a seed track from which similar music is spun up. Spotify instead has an always-visible button to start a playlist at any moment, and only then will it start offering track suggestions based on what it can glean from your intent. If you name a playlist “Gym workout”, Spotify will infer that you’re after high-energy music, and will offer suggestions accordingly.

    Sharing playlists with friends was something that Spotify pioneered, and it’s still prominently pushed inside the app. That it’s a multi-step process to turn off the ‘Link Facebook account’ nag in the desktop app’s sidebar is a deliberate design decision. I’m not normally a user of this kind of sharing capability, but recently a good friend of mine underwent cancer treatment and created a shared playlist and invited her friends to add upbeat music to it. The response was huge and she really got a lot of enjoyment and comfort from it, so there’s undoubtedly value that can be had.

    Spotify is especially heavy-handed about promoting podcasts and gives them conspicuous placement on the home screen. If you’re a “music first” listener, this can feel a bit like an obstacle course – just when you think you’re past the podcast listings, more pop up unexpectedly. It feels like they’ve been jammed into the interface, suggesting a strong company mandate to make its sizable podcast spending spree pay off, and to pull on the ad revenue that music playback doesn’t provide.

    Spotify is more successful with its approach to overall navigation. Persistent browser-like back and forward buttons make it feel safe to dive into branches of content and then come back to where you were. I also appreciate the Recently Played icon at the top of the mobile app which gives a quick way to access your recent history. Strangely, this is buried on the desktop app.

    Back on mobile, the persistent navigation bar at the bottom of the screen keeps it simple with just three options: Home, Search, and Your Library. That’s two fewer than Apple Music whose designers have violated the rule of thumb that people can only easily memorize four options.

    Visual Design
    Visual aesthetics are often what people think design is, but I’m tackling it last here as work on colors, fonts and iconography typically doesn’t start in earnest until the mental and navigation models have been thoroughly worked out.

    Spotify has adhered to its green and black brand colors over the years, but infuses playlist and album screens with other pops of colors and gradient tints, predominantly pulling from album art. There’s a richness to the UI. It’s almost never stark or boring. Having said that, all the streaming services have largely coalesced around a common look and layout. Seen from a distance, you’d be hard-pressed to tell one from another. In its current incarnation, Spotify isn’t taking any visual risks.

    Something I haven’t seen elsewhere is on the now playing screen: a short video provided by the artist/studio will loop in the background. Swipe up on the mobile app and there’s also a space for artists to provide commentary on a track. (Though I have to imagine that the design team behind this idea envisaged something more verbose than Billie Eilish’s curt annotation of “This was the last song we wrote for the album”)

    The Spotify apps do make good use of animation, especially on mobile. There are “micro-interaction” animations — like when the heart icon is pressed to like a song. These aren’t over-the-top to become tiring over time. They are enough to be enjoyable but not too much that they can’t be ignored.

    Concluding remarks
    When I first tried Spotify years ago, I didn’t jive with its mental model and found it confounding to navigate. Since then, it’s changed – as have I – and I find its current design mostly straightforward. You’ll need to decide if you’re OK with auto-generated playlists (they are good for music discovery) and navigating the podcast obstacle course, all in exchange for Spotify’s extensive catalog and its popularity with others for music sharing. It’s not designed with audiophiles in mind, but if you’re looking for a one-stop paid streaming service and its catalog satisfies your tastes better than the more niche services, then from an interface design point of view it has a lot to recommend it.

    Further information: Spotify

    Written by Adam Richardson

    Adam Richardson is an award-winning designer of products and digital experiences and a lifelong hi-fi enthusiast. He's worked with companies around the world on everything from consumer electronics to financial services to mission control for NASA. Adam is currently based in Baltimore, Maryland.

    Vicoustic room makeover: installation day (as a short film)

    Letters to the editor – Weeks #47-48, 2021