SvF

Case study 04 Spotify

Case study 04 · 2011

Spotify

Designing Spotify's first iPad app around the music.

Role
UX Research Scientist, contract
When
Jul – Sep 2011
Where
New York
Scope
Tablet UX research · UI concepts · prototyping
Two hands holding an iPad running Spotify, with the menu rail, a playlist and album covers on screen.
Fig. 01 — Spotify for iPad, the app our research fed into. It launched in 2012. The video loads from Vimeo only when you press play.

01 — The problem

A phone app on a bigger screen is not a tablet app.

In 2011 Spotify lived on the desktop and the phone. The iPad was new, and an app stretched up from the phone wasted the screen and ignored how people use one: on the sofa, on the table, passed around a room.

I joined the UX and UI research team in New York to work out what listening should feel like on a tablet. The idea we kept coming back to was a digital stereo system: something you leave out, look at and hand to a friend.

I was one of the first on the team to work with the new iPad SDK, prototyping how panels, gestures and rotation should behave on the real device.

02 — Four ideas

What the tablet app was built on.

  1. Big cover art.

    The album art fills the player, and you swipe across it to change songs. The music is the interface, not the buttons around it.

  2. The left-hand menu.

    Search, What's New, Inbox, Playlists and People in one rail down the side, always in reach of a thumb.

  3. Half-panel navigation.

    Each level slides in as a panel over the last one. Swipe one way to go deeper and the other way to go back, without losing your place in a deep library.

  4. Works upright and sideways.

    The same layout compacts for portrait and opens up for landscape, so turning the iPad never breaks what you were doing.

Fig. 02 — My concept sketches: big cover art, the menu rail, and half-panel navigation.

03 — A dark frame

Dark around the edges, so the art could shine.

The concepts put the music on a dark ground with Spotify green for the controls, so the cover art carried the colour. The shipped app kept that frame: a dark menu rail and a dark player built around the album art.

Side menus and sliding panels went on to become common patterns in tablet and music apps. A few years later, Spotify moved its whole product to a dark design.

Spotify for iPad player screen: a large album cover on a dark background with playback controls underneath.
Fig. 03 — The player: big cover art on a dark ground.
Spotify for iPad playlists screen: the dark menu rail on the left, a list of playlists, and a half panel of album art and tracks on the right.
Fig. 04 — The menu rail and a half panel, as shipped.

04 — What I bring from this