Enhancing the enhance feature.
Quickly find your current playing song within your Enhanced playlist. Get more new music faster!
Project: Adding a feature to an existing Mobile App + Design System, Personal Project
Contribution: UX/UI Design, UX Research, Prototyping, Design Systems Ops
Tools Used: Figma, Spotify Mobile App, Figma Mirror, Skateboard
Duration: 6 hours + a few shin bruises
The Problem
Spotify is a music streaming service that allows users to listen to their favorite artists and podcasts on-demand. Within the app, Spotify Enhance automatically recommends and adds music to personal playlists. For users with extensive playlists, finding the current playing song can be difficult to do quickly. This breaks user flow.
The Solution
I’ve introduced a new ‘eye’ icon to the Spotify’s Encore UI Library. This icon will enable users to auto-center the currently playing song in their personalized playlist to interact with the provided Enhance features.
Research & Storyboard
My research began with a first-hand experience with Spotify’s Enhance feature while skateboarding. Good music has a very strong influence on the pace and enjoyment of the session. In the above storyboard, our hero’s user flow is interrupted by having to locate the currently playing song recommended by the new Spotify Enhance feature. As our hero takes a break to hunt down new music, he cools down for too long and influences an early stop to a potentially successful skate session.
Although I truly admire Spotify’s Enhance feature recommending me new music, I find it difficult to quickly locate the song within my Enhanced playlist. I could tap the “Now Playing bar” to access the meatball menu. This will indeed allow me to add the new song to my personal playlist, but the User Flow stops here. Spotify Enhance does not quickly recommend more music if a song is added through THIS flow.
In order to successfully experience the Spotify Enhance feature, the user must locate the current playing song within their personal playlist and tap the “ + “ icon. This will trigger Spotify to recommend 3 more similar songs to be added to the same playlist.
So I thought to myself...
Hear Song > Locate Song > Add Song
↑
How could THIS be done more quickly?
User Flow
As a very minimal addition to Spotify Encore’s UI Library, I’ve introduced an “eye” icon to improve usability. This icon will allow users to quickly “show song in playlist” with an auto-scroll animation. In result, the user can continue to further interact with Spotify Enhance’s user flow.
Prototyping
This project headlined with the thought that most users may be familiar with the current Spotify UI. With Spotify Enhance feature added, the User Experience differs by adding an algorithm to assist the user in finding new music. Adding a “show song in playlist” function will improve the overall experience and compliment the current Enhance User Flow with much smoother and familiar usability.