8m read
882 words
Playlist Palette
Role
Product Designer
Tools
Figma
Claude Code
Timeline
2 weeks
View Playlist Palette's GitHub
CONTEXT
Building a website that transforms a Spotify playlist into a full-screen color gradient
Playlist Palette turns a Spotify playlist into an animated, full-screen color gradient that’s generated from the album art inside of it. Users would be able to connect their Spotify account, pick a playlist, then watch it become a beautiful field of color that you can interact with to discover the songs that shaped it.
SCOPING
Pivoting from mood visualizer to color matching
I initially wanted Playlist Palette to parse through each song and analyze the tempo, lyrics, and genre to translate that data into a gradient that reflects the emotional tone of the playlist. However, I had to narrow the scope immensely because Spotify's audio-feature data is either deprecated or unreliable. Also, the overall goal of translating that data into emotion is something that I was not qualified to do nor have the knowledge of such psychology.
I shifted the goal to matching color to color. The gradient doesn't tell you what a playlist feels like but, what a playlist looks like.
Read Lyrics
Spotify audio-feature deprecated.
Analyze Tempo
Spotify audio-feature deprecated.
Understand Genre
Spotify audio-feature deprecated.
Extract Color
Most apt comparison and achievable without Spotify API.
DESIGN DECISIONS
What decisions did I make?
Transitioning from muted to bright
The connect and playlist-picker screens are dark and minimal on purpose. I wanted the gradient reveal to be bright to add an eye-catching reveal. I treated the first two screens as a held breath rather than an onboarding flow, which meant resisting the instinct to "improve" them with more visual interest.
Cover overlap
An early version showed every song as its own point on the canvas but, I realized that not every song in a playlist has its own unique album cover. To make the gradient more accurate, I made sure to skip the color extraction for album covers already counted. This not only increases accuracy of the gradient but, it improves legibility.
Minimum song count
I chose to limit the API only parse through playlists with more than 25 songs. While the number is arbitrary, the design decision isn't. I wanted to ensure that there were enough songs and album covers to get the visualization of a playlist. If the playlist had a limited amount of songs, it'd be hard to establish a true pattern.
NEXT PROJECT
