Spotify Now Playing overflow menu
Feature Design
The problem
Spotify's overflow menu sat behind three dots in the top-right corner of the Now Playing screen. That corner sits in the difficult-to-reach area of the thumb-reach diagram, particularly on larger phones. I explored ways to bring the same options within reach through the album artwork.
The original screens show three issues:
The overflow control sits in the red area of the thumb-reach diagram.
Shuffle and repeat appear both on Now Playing and in the overflow menu.
The menu mixes vertical and horizontal lists, with scrolling inside the same screen.
My redesign
I prototyped two options. In the first, dragging the album artwork down reveals options and highlights them as the thumb moves. In the second, a long press on the artwork opens the options in a consistent layout.
I chose the long press because it was already used to reveal options in apps such as Instagram. I added haptic feedback and kept the option to swipe up to expand the minimised player.
You can try the drag-down version too. I set it aside because swiping down on the album artwork already minimised the Now Playing screen; using that gesture for the menu would conflict with the existing behaviour.
I designed the screens in Figma and built the interactions in Protopie.
Try the prototype
Open the prototype link below in your browser, or in Protopie Player on your phone. You'll need Protopie installed on your computer to edit the source files.
I built the prototype to demonstrate the interactions. Only some overflow options are available. The music player is static: it doesn't play audio or show a playback progress bar.
The drag-down version is a separate file: download Option 1 (.pie).
Tools
Figma · Protopie · iOS · Open-source .pie files
Source file
Prototype
