Spotify Classical Moods: Accessibility
Summer 2020
During the course of user research as part of my Spotify Classical project, I stumbled across two intriguing comments from visually impaired users of the IDAGIO classical music streaming service. These ended up teaching me more about accessibility than I ever had through my UX studies.
A self-taught user experience designer completing more than 30 online courses from the Interaction Design Foundation at the time, I was the sole user experience researcher and designer on this self-initiated passion project, with no affiliation or connection to Spotify or IDAGIO.
Starting from a (really big) affinity diagram
Following weeks of user research, I created an extensive affinity diagram that compiled data, statistics, opinions, complaints, and observations gleaned (on zero budget) from a host of sources:
🖋️ Reviews of music streaming apps — including Spotify, Apple, Amazon Music, Youtube, IDAGIO, Primephonic, Tidal, and others — on Apple’s App Store and Google Play store
📊 Quotes, facts, and statistics from news articles
💬 Comments left on classical-music news boards like Talk Classical, Reddit
Discovering an inaccessible feature
Hidden among the hundreds of comments and opinions were two accessibility concerns, both from App Store reviews of the IDAGIO classical streaming app:
“Inaccessible with VoiceOver”
“I am totally blind. I was trying to pick a mood. The message read to click on the circle to choose the mood. I was not able to pick.”
Curious, I decided to look closer at IDAGIO’s Moods features on a variety of platforms.
IDAGIO’s Moods feature on mobile
IDAGIO’s innovative — but inaccessible on mobile — Moods feature
IDAGIO’s Moods feature was unique among music streaming apps I researched at the time. No other major streaming service, including Spotify, had anything like it. Moods allowed users to select a mood and a playlist of classical music curated by IDAGIO’s music editors would play.
The problem was picking the mood.
Users were instructed to “tap and hold” a circle on the page.
Moving your finger around the circle, you could pick from one of 16 moods.
Upon selecting a mood the app would automatically start with the associated playlist
The playlists were somewhat random in order and there was no way to pick which tracks one would like to hear.
Or to easily return to the classical track you first picked — it started another piece in the playlist
Here’s a (shaky, slightly blurry) video of the experience:
As I was adapting the mobile version of IDAGIO to Spotify Classical as part of my project, I recalled the accessibility issues I’d run across creating the affinity diagram.
Testing IDAGIO’s Moods with a friend familiar with screen readers like VoiceOver confirmed that, in fact, it was quite difficult to use. She suggested the ability to tab through the different moods to be able to select.
“If I can’t tab through the options, I can’t choose anything.”
My testing friend’s advice was, in fact, exactly what IDAGIO has on the desktop version of the app. So it seemed the obvious solution was to repeat this on mobile, as well.
IDAGIO on desktop allows impaired users to tab through Moods
Spotify Classical’s Moods
Moods like Bubbles
In redesigning Moods to be more accessible for the new Spotify Classical app I was creating, I wanted to keep the innovation of IDAGIO’s Moods if I could, but make it livelier than just a series of rectangles, like on the desktop version.
My thinking was not only to visually mirror the circles used throughout the Spotify Classical user interface, but also that moods were often like bubbles, coming and going.
It got inspired by a friend’s Chromebook screensaver:
Design inspriation: a bouncing bubbles screensaver
Unfortunately, I didn’t have the time — and wasn’t technically proficient enough — to mockup my creative vision:
the 16 different mood bubbles would sort of float and bump against each other on-screen with the Pick A Mood remaining steady in the center.
However, the final, static version ended up providing a balance between IDAGIO’s innovative (but inaccessible) mobile version and its more staid desktop version.
The Mood is . . . Happy
The most important result came from testing the Spotify Classical version of moods — our tester was able to perfectly navigate through the moods. She ended up on “Happy.”
Other case studies from the Spotify Classical project:
📱 Spotify Classical: Product Design
🖋️ Spotify Classical: UX Research