Spotify Miniplayer Design
overview
As an avid user of Spotify, music is with me throughout my entire day, especially while I am working. With lots and lots of windows open across multiple desktop screens, it’s easy for the Spotify app to get buried under other tabs. When I come across a new song that I really like, I have to click through my tabs to find my Spotify app and take a look. This usually breaks my workflow, and I end up getting distracted as I fall down the rabbit-hole of browsing new songs to add to my playlists.
​
I noticed the frequency with which this happened and began to think about what could improve my user experience. I took this problem as a chance to expand on the features Spotify provides and reimagine what a desktop miniplayer would look like.
role
UX/UI Designer
competitive analysis, wireframing, and prototyping
STEP 1.
basic research
I primarily gathered my research from online discussion boards to acquire some ideas for potential features I could include. While browsing Spotify's community form I discovered that many other users have requested this mini player feature for some time. I particularly related to the following post:
"...On the web player on Chromebook, there is an excellent pop-out player that remains on top of other tabs and windows you open, has the album/song art and has simple controls like pause, play, skip, and rewind that show when you hover over it. . . It's crazy to me that this feature hasn't been implemented already for the desktop application, or if it has then the fact that it's been removed. It's super annoying to have to stop what I'm in the middle of to open the Spotify window just to see what is playing, or to skip or save a song. Something with just the basics of these features would make a huge difference and make usability so much easier."
Submitted by angryhufflepuff on 2019-08-08 02:00 AM
Competitive Analysis
Thanks to this preliminary research, I learned that Spotify's web player (this was my first ever visit, oops!) has a picture-in-picture option available to users. I was quickly disappointed however, as this mini player only consisted of album art and basic listening features like pause and skip.
Sources on the internet provide options to install third-party software to stream from Spotify, such as lofi.rocks and silico. I compared these different mini player services based on their features and weaknesses to get an idea on what existing services offer users.
In order to figure out user pain points, I sifted through reviews and tried using these services myself.
Key Features
After comparing these different services, I noticed that they all lacked a "like" feature, which is one that many people requested. Using the insights gathered from my research, I compiled everything I would want to see in a mini-player for Spotify:​​
Like Button
The option to like a song right from the miniplayer would provide more convenience
Playback Features
Additional features such as the mix and repeat button in addition to play and pause.
Album Art + Info
Relevant information such as the Album, Artist, Song names, available at a quick glance
Seek Bar
Help keep users keep track of which part of the song they are currently listening to
STEP 2.
design
Wireframes
My main concern with my wireframes were to find a way to fit all the key features I wanted into a compact mini player that would not take up too much screen real estate. I reasoned that users would value features like the seek bar, song information, and music control options most, which led me to reduce the size of the album art.
STEP 3.
hi-fidelity prototype
I tried to follow Spotify's current UI to the best of my capability in terms of the font choice, icons, and rounded corners. As for colors, I decided to utilize the dynamic gradient backgrounds that Spotify normally uses to maintain a sense of brand consistency.
280 px
_gif.gif)
110 px
150 px
150 px
STEP 4.
final thoughts
This mini project was a fun opportunity to create something tangible out of a usability issue I've had for a while. I set a time constraint to challenge myself and test the speed with which I could wireframe, design, and prototype a feature.
​
Though I was able to grasp several user pain-points from online communities, with a larger time frame I would have expanded my research to interview users to better understand their needs. I would also conduct usability tests to determine whether the UX is intuitive and easy to navigate, and test different size options.
​
​
After making and finalizing design iterations based on newer research, the next steps would be to integrate this feature into Spotify's current system through the design-to-development handoff process. The feature would then probably be beta tested with a small population of users before being released. It would be so exciting if Spotify really released a mini player feature!
​