UX Design by Rebecca LeVine
Music can be an intensely personal and individual experience, but there’s a key communal component to it too: from dancing with thousands of fellow fans at an outdoor music festival to discovering an up-and-comer at a local open mic night.
The current pandemic has wreaked havoc on communal experiences of all kinds. Fortunately, people have found creative ways to stay connected with friends, family, and even strangers during quarantine, often assisted by technology: for instance, “watch party” features on Netflix and Amazon Prime allow people in different locations to watch movies and TV shows “together,” in real time and synced automatically.
Why not apply the “watch party” approach to music?
I started to imagine how a new Spotify feature could accomplish this: users already have the ability to “follow” artists, as well as friends, so it didn't seem like too great a stretch to incorporate a way for users to interact more with one another. It seemed fitting, too, that this interaction should be specifically music-oriented, rather than a traditional social feature like messaging, stories, or a news feed.
There were quite a few questions that would need answering. Would it be possible to design this feature without it being overly disruptive or invasive? I had the feeling that many users were keen to avoid integrating their social media profiles with their accounts on other apps; would it be possible to create a social feature that didn't feel like, or rely on, social media? Could this “listen with” feature create a communal listening experience, or would it just be annoying?
RESEARCH
I started by researching Spotify's past and present social features, as well as the social features available on other music apps like Apple Music and Amazon Music. I also thought about products in other spaces that serve a function analogous to the one I was considering: that is, products that allow multiple users to consume some kind of content together remotely, like Teleparty (formerly Netflix Party).
Once I had the flows worked out, I began to build the first hi-fi prototype, using Spotify's UI (a combination of the assets Spotify makes available, including their logo and brand colors, and my copying their branding and layouts as best I could).
At this point, I recognized a few issues. First, I'd situated the Listen With feature under "Your Library," so as to avoid interfering at all with Spotify's actual home screen. However, some initial testing suggested that this wouldn't be an intuitive location for the feature.
To address this, I added a labeled "Following" icon to the bottom navigation and located the Listen With feature there instead, since users "listen with" the friends, artists, and celebrities they follow.
ITERATION
Next, I used what I’d learned in my research to create a user flow (click to view) and a roadmap for the feature I’d be building. Armed with those, I went about creating a combination wireframe and lo-fi prototype using Adobe Xd.
Initial Takeaways:
1. Existing music apps, including Spotify, allow users to share music and collaborate on queues and playlists, but they don't have the functionality for users to listen together in sync remotely.
2. Third party apps exist that allow users to listen in sync remotely, but these are essentially set up like radio stations: multiple people can listen to the same music at the same time, but they do so by "tuning in" to the playlist that a "host" is DJ-ing.
3. Remote, synchronized content-sharing exists for video-viewing apps, but no analogous product currently exists for listening to music in sync remotely.
Next, I created a survey to gauge interest in the feature I was considering, and to gain insight into people's preferences and concerns regarding social features in music apps more generally. Here were some takeaways.
Only 6%
said social features are a top 3 reason they use their preferred music app. Content selection, design/usability, and price all ranked much higher.
In these initial lo-fi sketches, I imagined some of the features "Listen With" would have: the list of artists and celebrities you follow, with CTA buttons next to each person who was currently available; and a messaging feature between friends, in which control of what was being listened to, as well as conversation, could be shared between participants.
I also built out several Settings screens, incorporating the term “unavailable” and the End Session banners.
These initial hi-fi versions show how users might listen along with artists/celebrities and with friends, as well as how they can interact with the friend they're listening with. To simplify the processes, I eliminated the planned messaging feature, replacing it with simple reaction emojis and two interaction options: Recommend Song and Request Control.
Spotify's actual home screen. The bottom navigation only includes 3 icons.
In the home screen I made initially, I kept the same 3 icons in the bottom navigation, nesting the "Listen With" feature under "Your Library."
I added a "Following" icon to the bottom navigation—a more intuitive home for the "Listen With" feature.
Another issue had to do with the notifications. In this iteration, the notification for an action completed successfully by the user (e.g., "Request sent") looks identical to the notification that an action has been undertaken by someone else (e.g., that the user's friend accepted their request).
To address this, I redesigned the latter so that the user can easily distinguish between the two. I based the design on one Spotify uses to notify users of new music and other features.
The notification I designed to show that the user has completed an action—in this case case, requesting control of the music being played. Spotify uses a semi-transparent black square and white checkmark for other notifications throughout the app.
In the second iteration, I kept the success notification the same, but redesigned the notification alerting the user of their friend's activity. I also added shortcuts and a CTA button within the notification.
In this iteration, a notification that someone else has completed an action—in this case, accepted the user's control request—appears very similar to the success notification.
TESTING + REVISIONS
Next, I recruited several interviewees to test the revised prototype over Zoom. I asked them to complete a series of tasks and answer some questions; they shared their screens with me, and with their permission, I recorded the calls.
I assembled the feedback I received into this affinity map.
I used the insights I gleaned from the usability tests to make further revisions to the prototype, including:
1. Using the term "unavailable" rather than "offline" to describe users who can't currently be listened with; "offline" means something different in the context of Spotify.
2. Adding a clear way to return to the Listen With main screen once a song has been recommended.
3. Adding an "end listening session" option, rather than having to end a session by pressing pause.
4. I asked each interviewee whether they thought ending a listening session should take them back to the home screen or to the Following screen. They all said ending the listening session should return the user to the Following screen, so I kept this as it was.
In the revised version, a banner at the top of the screen offers an option to end the listening session.
In this iteration, the only way to end the listening session was to press Pause.
I added tappable text saying "Back to Listening With [Person's Name]," so there would be a clear way forward from this screen.
Users weren't sure how to move on from this screen.
“Listen With” on Spotify
Listen With, the feature I designed (on spec) for Spotify, allows users to listen along with friends, artists, and influencers remotely and in real time. Friends can recommend songs and share control of what they listen to together, and the feature would integrate smoothly with the existing functionality of Spotify.
ROLE
Lead and solo designer— discovery, user research, design, testing
DESIGN TOOL
Adobe Xd
DURATION
3 weeks
When offered a list of potential social features, including the ability to listen with friends and to listen with public figures, as well as other features like in-app messaging, Instagram-style stories, and an activity feed,
23%
said they'd like to be able to listen to music in real time with public figures (artists, celebrities, influencers)
41%
said they'd like to be able to listen to music in real time with friends.
But when asked to label their feelings about Listen With features as "annoyed," "indifferent," "interested," or "elated,"
59%
said they'd be "interested" or "elated" by a feature that let them listen in real time with public figures
59%
said they'd be "interested" or "elated" by a music app feature that let them listen in real time with friends
