Spotify Chime Extension
Overview
This project was made for a upper division design class here at UC San Diego called Social Computing. In this class we explore the intersection between social behavior and computational systems. The final project for this class was to design a social computing experience that is functional and can be "played" by multiple people within a specific setting.
Problem
As one of the most popular music streaming platforms, Spotify has made pivots to introduce social interaction through features such as Spotify Blend, which generates a joint playlist based on music preference. However, these Blend playlists do not offer much opportunities for users to interact with each other following their creation. To strengthen bonds between users, our team sought to expand the Spotify Blend experience by conceptualizing Spotify Chime, an interactive karaoke feature.
My Contributions
My role in this project was a UX Designer and Researcher. I mainly contributed to creating surveys, ideating and creating the materials for prototyping, and creating the high fidelity designs.
Timeline
7 weeks (Feb - Mar 2023)
Exploration and Discovery
We had three research objectives:
To assess how people currently use music platforms to interact with each other.
To understand how music platforms benefit users or what keeps users on these music platforms.
To analyze the strengths and limitations of competitor apps (i.e. online music platforms and other music collaboration platforms.)
Surveys
What platforms do people use to listen to music?
How do people engage with others through these platforms?
What worked for people when engaging with others?
We conducted an online survey to understand the following questions:
Through convenience sampling, we surveyed 53 peers from classes, student organizations, and work. Our survey included 2 demographic questions and 11 questions about how users interact with music and music streaming platforms.
Findings
Spotify Blend
We also wanted to understand how current Spotify users feel about one of the methods that Spotify has fostered to create social interactions between friends: through Spotify Blend. Spotify Blend looks at users’ music interests based on the music they’ve liked and “blends” it with up to 10 friends. Although most respondents have used Blend before, 26/40 respondents felt neutral about their experience with Blend / didn’t find Blend enjoyable.
Our assumption is that these mixed reviews on Blend is due to the fact that the only social interaction that Spotify blend really fosters is combining playlist–after that point, not much interaction occurs between people.
Competitive Analysis - Music Streaming Platforms
We conducted competitive analysis on other platforms that allow for social interaction through music: Karafun and Tastebuds.
Karafun is mostly a karaoke facilitation app, informing us on the fundamental aspects of a karaoke application: a song library and methods to categorize songs (by genre, by mood, etc.). While Karafun can be used to cultivate connections between people through singing, it mostly relies on in-person singing. We want to create a novel concept that bridges people online through the power of karaoke.
Tastebuds has found a way to connect new people through the power of music! This is a successful example of how platforms can bridge connections between weak ties through a common interest. This inspired our interest in opening our idea space to both singers and viewers. On the other hand, Tastebuds focuses on making new connections but not strengthening existing ones. We want to explore how we can create an app that makes the best of both worlds: bringing new connections together and strengthening existing ones.
Design Process
Design Goal
According to our research, many Spotify users feel as though the Spotify Blend feature is great at first, but many users tend to lose interest in Spotify Blend playlists after that initial connection with another user.
To help cultivate relationships and add social connection to Spotify Blend, our team will design an extension to Spotify Blend where users can create karaoke videos with people in their Blend playlist, where users can sing parts of their favorite songs. Users will be able to create Chimes, view Chimes, and duet artists in Spotify Chime.
User Flows
We split Chime into 2 user groups:
Singers - Those who participate and sing in Chimes
Viewers - Those who watch other users’ Chimes
We decided to put emphasis into our “viewer” experience because in our survey, it was noted that some of our participants would feel uncomfortable singing to their phone on Chime. We decided to add a way to watch other users’ Chimes so that these users can still interact with Chime, friends, and artists. These flows were created to understand what kind of screens our team needed to prototype.
Singer Experience
Viewer Experience
Wireframes
We created wireframes to conceptualize our high fidelity screens.
First Iteration of Prototyping
In our first prototyping / user testing session, we wanted to prototype how users would experience viewing and making Chimes. Our team had the opportunity to conduct our prototype in front 115 people!
Viewer Prototyping
To simulate a viewer looking through Spotify Chime, my team and I filmed and edited our own karaoke videos and showed these videos to the whole lecture hall. At the same time, we had our audience use a Slido link to comment and react to our videos real time, similar to a livestream. We decided to do our prototyping this way because we wanted to prototype how viewers could interact with other users’ Chimes.
Spamming
“Pretty alright, ppl spamming chat can be annoying but that's just chats in general”
“I would sing the songs I want. I’m not sure if it was mentioned, but I’m wondering how each song is chosen and how you choose who to sing with.”
Need more guidance for lyrics and singing timing
“Maybe guided lyrics like karaoke”
Party in the USA - Performed by my team (Ethan (me), Frances, and Ryan)
Singer Prototyping
Feedback and Key Takeaways
How can we create an end-to-end experience of the app?
How can we create a stronger bridge between creators and viewers?
Increasing creativity and customization for creators.
Flesh out high fidelity UI
After our prototyping, we sent a survey to our audience to gather feedback and get opinions on how to move forward and improve Spotify Chime.
To simulate a singer creating a Spotify Chime, we simulated a real life Chime notification going off and having different parts of the lecture hall sing different parts of a song! This would emulate a user getting the Chime notification, singing their part, and sending it out to the rest of the users in the playlist.
“Spamming of chat is something I didn’t enjoy”
“Just a little confused, will the songs be just chosen from random? Or will someone in the group initiate it?”
“finding a way to perfect the timing of the lyrics with the music”
For Next Prototyping
Confused on how the songs will be chosen for Chime
Second Iteration of Prototyping
We came back 2 weeks later to get a second prototyping session in front of a live lecture hall again. We wanted to do another evaluation of our prototype to improve on the feedback from the first prototyping session.
Singer Prototyping
The main feedback for the singer flow was that the process for selecting and recording a song to sing for the Chime was confusing. To address this confusion, we developed a UI flow of how voting for a song worked in front of our audience, which is Spotify recommending three songs from the Blend playlist and the users in the playlist would vote for one song, which would be considered for next week’s Chime.
Real time viewer feedback and reactions to our Party in the USA Chime!
Viewer Prototyping
The main feedback for the viewer experience was how the spamming of the comments detracted from the experience. In this prototyping, we decided to use the class Slack channel to send in our karaoke videos from the last prototyping session. The audience would comment and react to the videos in the Slack channel. Instead of a livestream format commenting system we did last session, we wanted to test a stable comment system, similar to Instagram and TikTok.
Takeaways
We conducted another post-survey after this round of prototyping. After reviewing survey results, participants generally had positive thoughts about our prototype. Things to consider from the survey were quality of life changes, such as a search bar, hashtags, and duetting other users. Considering the time left for the project, we ended user testing / prototyping to go onto finalizing our designs.
Final Design
Style Guide
For our style guide, as we were adding a new feature to spotify, we tried to replicate the spotify UI and add in the UI pertaining to Spotify Chime. We looked to premade templates on the Figma community page for specific Spotify UI components. While due to the time constraints of this project we couldn’t make a really specific design system, however we tried to adhere to some consistency with this style guide.
We looked to the actual Spotify UI get inspiration on how to integrate Chime into the already-existing Spotify UI. We figured that Chime would be a pretty big feature, so we added Chime onto the bottom navigation bar to clearly represent that feature.
Discover
Users can see how other users conducted their Chimes with the same songs. Developed based on the results from our first prototyping session, where many survey respondents expressed their interest in where they could see others do Chimes.
Creating a Chime
Chime assigns a random song from the Blend playlist and parts from that song to every individual involved in the playlist. This is utilized to unify friends together in a remote, karaoke-like style. Once all users have submitted their parts, the Chime system would mix their clips together for a fun video at the end. In our initial survey results, it was shown people felt closer connections to people after singing with them. My team and I wanted to use karaoke as a medium to bring people together, in which Spotify Chime came to life.
Friend Feed
The friend feed, where users can interact with their friends’ Chimes and see how your friends showcase their Chimes with differing songs and performance styles.
Engaging
Users can also engage with Chimes, where users can react, comment, or do both to the Chimes presented to them. We understood that most users prefer to just view the experiences of others. From the first and second prototyping session, our findings showed that a stable commenting system would deem a better user experience than a livestream type commenting system.
Next Steps
Introduce a duet feature with artists
We hope to introduce a duet feature with artists and allow singers to sing along with artists and their songs.
Refining the design
We would also refine our designs and reflect Spotify’s branding better, and also introducing aspects such as grid and margin spacing.
Conduct Usability Testing
We would conduct more usability testing to test our interactive prototypes to see if desired interactions are executed properly.
Have better design documentation for development
We would also better document our design components, so that if this ever gets passed to engineers, the design handoff is much smoother.
Reflection
Design is a VERY iterative process
I learned that design is a very iterative process, and it isn’t really linear. There were times where we had to scrap entire ideas due to constraints or feedback, it was a bit frustrating to go back to the drawing board at times. But through this project I learned that iteration and testing only help to make your designs more usable and user friendly.
Design is a key factor in social computing and encouraging interaction
I also learned that design is huge factor in social computing, the way something is designed can really enhance social interactions and connections, it’s really more than just creating aesthetic visuals or making something usable.
Being creative with the design process while working with constraints
And out of all my projects, I think this project had the most creative design process. We had to work around prototyping for an entire lecture hall, instead of just a few people. 7 weeks was a bit of short time of us, and yet our team was still able to go through a proper research phase and go through two rounds of user testing.