OCTOBER-NOVEMBER 2020
SPOTIFY
Music Club: An engaging social feature that allows music lovers to connect with their kind, on the basis of shared taste and emotions.
—OVERVIEW
WHAT
Music is known to evoke emotions and stir a special connection between humans. Spotify, leader as a streaming music service, wants to make a move into helping that connection further. I designed the new feature by tapping into the human nature that searches for someone who can relate to their emotions; has similar interests, personalities, and proclivities.
WHY
Spotify is the group lead as a music streaming service and wants to retain that position. For this reason, they want to improve engagement and retention in the application. In order to do that, they want to expand on their social capabilities by introducing a new social feature.
HOW
I designed and based the new social feature inspired by the classic Book Club model where individuals who share the same wavelength, catch up with each other about their interests and bond over their commonalities. I coined it Music Club to keep it simple and straightforward. The Music Club includes groups of people who thrive on their common music interests; they create and collaborate playlists based on moods, emotions, time of the day, activities, etc.
PROJECT GOALS
Design a new social feature and integrate it seamlessly in the existing Spotify application.
Construct a prototype to test the new social feature with the existing Spotify user; acknowledge their frustrations and excitements around it.
Role — UX Designer
Tools — Figma, InVision
Duration — 4 weeks
Scope — Research, Strategy, Interaction Design, Interface Design,
—RESEARCH & ANALYSIS
What is the status quo of the music streaming industry worldwide?
Market Research
Demographics
Competitive Analysis
I learnt from the market research that nowadays, especially if we account for the pandemic, users are drastically shifting to online services, which gives a much bigger boost to the music streaming industry. This necessitated an exploration of the ethos of the competitors’ offerings to the users to create a favorable user experience. I wanted to analyze how the direct and indirect competitors such as Pandora, Apple Music, Amazon Music, Tidal, Youtube Music, etc, are standing out; what social features are they offering to retain customer engagement and traffic.
User Interviews
Conducting the market research was really helpful in defining the demographics, hence the range of personas ranging from Gen Y, the Millenials, and surprisingly the Baby Boomers. At this point I knew whom to interview for empathy. I recruited essentially 11 Spotify premium members who were in the range of 23 - 30 years to understand their existing behavior and interaction with the application. Talking to them on a personal level also helped to reveal several frustrations and in general create an empathy with them. Following the patterns that started surfacing I uncovered certain insights and defined the user needs.
User Persona
I wanted to look back at the user needs, goals, frustrations and motivation that I deduced after talking to all the interviewees when designing the new feature. To make it convenient for myself I created one persona that would represent all the aspects of the user. This persona converged all the important details of a user that were to be considered to define and ideate a solution.
—DEFINE & IDEATE
Defining the problem statement and coming up with the solution.
Individual Brainstorming
At this point I was clear about my user’s needs. I created “how might we” questions to make it easy for myself to brainstorm ideas that will fulfill these needs.
Group Brainstorming
I also conducted a group brainstorming session. I was lucky to recruit the participants that were not only regular Spotify users but also avid music listeners; they were very enthusiastic about pitching in their ideas. I benefitted from this synergy effect since by then I had a pool of ideas. I finessed these ideas into one keeping in mind the goals and needs of the user.
Product Roadmap
The next step was to evaluate these ideas that were to translate into a new social feature. For this purpose I created a product roadmap - this gave me an overview of all the work and highlighted its scope. Through the product roadmap I strategized and aligned these ideas in terms of their priority level (which solution is ideal in terms of fulfilling the user needs with less time consumption, effort, and budget), the goal that they helped fulfill, and the technical effort they required.
—INFORMATION ARCHITECTURE & INTERACTION DESIGN
Seamless integration of the feature in the existing application
It was certainly a challenge to find the right fit for the feature in an already existing ecosystem (the application). I was conscious to not hinder the ethos of the application, thereby did not want my user to meet an unpleasant surprise.
Application Map
The social feature I introduced is a Music Club directly associated with the user, thereby I instantly thought that it should be nested in the library of the user. I made space for it next to the already existing section in the Library. Complying with the existing interface I integrated the feature in the homepage to remind the user where they left off every time they visit the application. I intentionally considered the impact the new feature will bring and incorporated it into the layout.
Task Flow & User Flow
To consider how the new feature will be dealt with, I mulled over the UI requirements. I set two tasks keeping in mind that they touch base with the user needs and goals. Following that I created a document that recorded all the detailed components required to ensure consistency and usability.
I mapped out both task flow, and user flow to analyze how the user will reach and perform a task from point A to point B. This allowed me to consider what new screens needed to be designed to aid the user towards completion. I also considered the several decisions a user may take when mapping out user flows. I mulled over all the possible trajectories that a user might take to complete the tasks. To ensure a fluid interaction and optimum usability, I made sure that all the important components are included in the architecture.
—HIGH-FIDELITY WIREFRAMES & USABILITY TESTING
Creating high-fidelity wireframes to test for usability
High-fidelity Wireframes
I created low fidelity wireframes (hand drawn sketches) to visualize the placement of the new feature. Once I was content with the outlook I moved onto creating high fidelity wireframes. This was fragile work considering it was imperative that the new feature be integrated seamlessly. I was aware to not include any new element that would breech the set UI guidelines of the brand. Therefore to ensure cohesion and consistency, I traced all the elements of the existing design; observed the distances, the typographical hierarchy, the stroke weight, and translate all of it to the new screens I designed for the social feature.
While the social feature takes the estate in all the existing screens of the app, it also demanded new screens such as a full fledge “comments screen” which is the backbone of the new social feature
Prototyping
I took the high fidelity wireframes into the InVision application to add interaction and prepare for the usability testing. Based on the the user tasks set earlier in the define phase, I created all the screens required for the task completion, for the mobile version of the Spotify application.
Usability Testing
I relied on the Evaluative Research - Think Aloud Strategy; participants were encouraged to voice out their thoughts, emotions, decisions during the process of testing.
After conducting the tests most users mainly faced an issue what I believe occurs from acting upon Momentum Behavior - they become loyal to a route they have chosen to perform a familiar task. To make a comment they tapped on the text that said “15 comments” expecting that it would lead them to a comments screen, whereas I had created a flow where they select the music, delve into it to, and then come to a realization where they want to start a discussion about the song, thus making a comment. Following that behavior I designed a comment icon on the song detail page as opposed to user expectations. The user interaction with my prototype did not necessitate a design iteration, as much as it was a resultant of a limited prototyping; nevertheless it did allow me to learn something new about the user behavior, therefore I considered add that interaction in my revised prototype.
Through testing I felt more confident about the integration of the new feature since none of the participants felt like they were interacting with something that was not a part of Spotify. One of the participants even inquired that why they didn’t have this feature on their app.
—REFLECTION & NEXT STEPS
Information Architecture
Given that there was an already built application, it was crucial that the new feature fits in correctly. It was a great learning experience for me to consciously incorporate the new feature without creating any disturbance.
Group Brainstorming Session
I would have never understood the power of synergy effect had it not been for the group brainstorming sessions. So many innovative ideas came through during the session and it was a great experience in terms of working as a team.
Next Steps
My next steps would be to hand off the project to the developer and maintain a strong communication so the end product ensures optimum user experience, all the while looking out for more advancements, based on user reviews and experience.