Spotify Now Playing Overflow menu
Tools used: Figma, Protopie
Problem Statement
With millions of people using Spotify as a music streaming service, the need to have a good UX with eye soothing interactions becomes a necessity, which Spotify has, but in my opinion, it fails in one user journey; the overflow menu is present at the top right of the now playing screen which houses many options which are generally hidden from the general view of the user. It can be accessed by tapping the three horizontal dots on the top right part of the now playing screen. With the size of the screens increasing, the thumb zone shows the accessibility of a mobile screen with just one finger/thumb has become increasingly challenging, especially in the top right and left corners. Seeing this, I intuitively approached this problem to create an experience using certain unique interactions to solve the accessibility problem.
Now, if you look at these images, you will find the following issues clearly shown:
-
The overflow menu is present in the red zone (as seen in the heat map).
-
Having some repeat icons of shuffle and repeat in the overflow menu as well as on the now playing screen.
-
The list of items in the overflow menu is not consistent (having both vertical and horizontal icons, not to mention they are scrollable inside the same screen).
My Solution
I propose a solution to the above-mentioned problem by redesigning the overflow menu and its interaction. I had two solutions to this problem; the first one was to drag down the album art to reveal the hidden options which get highlighted as per the user's choice and position of finger/thumb; the second option included the long press of the album art (previously called 3D touch) to reveal the hidden options in a more consistent format.
-
After careful consideration, I decided to go with the second option of the long press (as it is present in many applications to view hidden options, e.g. Instagram posts) and added haptic feedback for the same. Also includes the option of swiping up to expand the minimised player.
-
Although I did include the first option for readers to test out, it is also a unique yet effective way to access the hidden options. (My reason for disregarding this option was that generally swiping down on the album art in the now playing section of the screen minimises the music playing screen, so this would contradict the existing interaction).
These are the visuals designed in Figma of the redesigned screens,
Although I have tried to prototype the designs as much as possible to feel like an actual app, it has certain limitations, which cannot be covered unless it is properly coded (or maybe I haven't figured it out yet).
In this case, the user cannot view all the options present in the overflow menu. In addition, the music player itself is static with no music bar and absence of music playing.
As an open-source for everyone to view and edit the prototype according to their usage, I have provided the links for the source file, the cloud browsing, and the QR code to get started on your smartphones immediately.
Note: You need to have Protopie installed on your computer to edit source files.
Video of Option 1 of my redesign.
Or scan this code from the Protopie Player App in your phone.