Spotify — how do you think I feel today?

A case study on designing a mood filter feature for Spotify’s UI

💡 The initial idea

Obviously, I’m not a data scientist or analyst, frankly, not an expert on numbers at all… you can ask my former maths teachers. (If any of them reads this: I’m sorry.) And, yes, my role in this project was to focus on the UI site and the visual design.
However, I had this one initial idea that I couldn’t get out of my head:
I saw one of the competitors sorting mood data into an X-Y diagram of certain mood qualities. My limited knowledge of data told me, however, that the wide spectrum of mood qualities needed to extend the 2D room.
Especially, when the idea was to create a feature that uses the user data input not only to sort songs but also to predict and suggest similar songs. And, talking of business needs, it certainly would make more sense to Spotify, if the data and insights already collected, could be transferred to other uses as well. This is why I decided on a bit more complex data model — a concept that would be crucial for the feature design.

I visualized a rough draft, of how I imagined the data should be categorized and decided on the qualitative criteria for moods: energy, brightness, and intensity. How this will look like in practice, you’ll see in a minute.

Sketch of how mood qualities could be placed in a 3D scatterplot

🧐 What? Where?

I found out that there were two entry points to the app:
First was you’d access the app via the regular menu icon. You’d then find the home screen with a playlist overview and a minimized music navigation bar at the bottom. The second would be the song quick access via the miniature player (e.g. on the phone’s lock screen or expandable top menu), which would then lead directly to the detail page “current song playing”.

  • It proved, however, that within the song detail page, users would almost equally try to find the mood feature in the song controls at the bottom of the page as well as in the extended options in the top right corner.
    This proved that it would make sense, to place the feature at several locations.
  • When the users accessed the actual mood filter function — a completely new designed page — the users proved a lot of curiosity and spent some time on the site to try out various options. However, this disregarded the intended page’s hierarchy of 1) the user first selecting a mood quality from the X-Y axis (energy or brightness) and then 2) define it by further attributes and/or an intensity slider.
    Iteration: The hierarchy would be visually marked more clearly by precise instructions and higher opacity of the inactive options.
User flow: happy paths, unhappy paths, and maybe-not-so-happy paths

Styles & Atomic Design

Styles and Atomic Design Elements — all custom rebuild by me
Hi-Fi Prototype Screens with the placement of the new Mood Filter Icon, 360x640px tested on a Samsung Galaxy S7

Curious about the result?

Below you’ll find the full experience. You can see, that the mood filter works by first setting the qualitative factor of a mood’s brightness (bright vs. dark) or energy (energetic vs. calm). After setting the main mood, it’s optional to specify the mood further by either sliding the intensity bar (low to high, pre-set as neutral) or selecting suggested associative mood tags.
Depending on how you’d modify the main mood or the slider bar, the associative mood tags suggestions would change. This opens up the option to further individually specify moods and use these tags for individual ratings and searches tags, while not changing the song’s basic allocation within the data scatter plot (which is necessary to link to other songs by similarities).

👁 Key Takeaways

While creating this design I got to know first-hand what possible obstacles I’m still to encounter in the real-life UX/UI world.
The challenges of adding a feature to an existing product, don’t necessarily lie in the conceptualization of the feature itself (because frankly, options are endless), but how to then stay true to existing design standards, not disregard hierarchies, and to make the actual use of the new feature suitable to both user and business needs.
However complex this task was, I really enjoyed the insights I gained from it and hope to soon prove my analytical thinking in the field.

Berlin-based career changer, foodie, cat lover. On the exciting journey to UX & Voice. M.A. Media Studies & former project manager in Audio.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store