Spotify
Seamlessly integrating a new social feature.
- RoleUX Design & ResearchProject ScopeDevelop a new social feature in order to help people connect with each other through music.Project detailsGroup Project : Remote Collaboration with 4 other members.
Duration : 9 weeks plus.
Platform : Mobile Application
Tools : Figma, Sketch, Miro, Illustrator, Airtable, Draw.io and iPad Pro.Target UserMilennial & Gen Z
Project Overview
The Problem
Seamlessly integrate a new social feature to help expand Spotify’s social capabilities and help users connect with each other on a deeper level through music.
Solution
A Mood & Activity feature that allows users to share their current mood and activity with friends and create personalized radios.
A Recommendations feature that allows users to help their friends discover new music.
A Recommendations feature that allows users to help their friends discover new music.
Research
Challenge
To better understand Spotify’s background, market space, and who Spotify’s users are, I started by conducting online research with teams.
Research Goals
Understand the market trends of the music streaming industry.
Identify Spotify’s target market.
Identify Spotify’s competitors and evaluate their strengths and weaknesses.
Understand the role music plays in people’s social lives.
Understand the experiences people have with music streaming services.
Discover goals, needs, motivations, and frustrations of music streaming users.
Identify Spotify’s target market.
Identify Spotify’s competitors and evaluate their strengths and weaknesses.
Understand the role music plays in people’s social lives.
Understand the experiences people have with music streaming services.
Discover goals, needs, motivations, and frustrations of music streaming users.
Market Research
In order to gain more insights on what the current music streaming industry looks like, I decided to start with market research. Through market research, I was able to get a deeper understanding of the current trends of Spotify’s market based on data gathered from secondary research.
- GeneralSpotify has become the most popular global audio streaming subscription service.
The top competitors of Spotify are YouTube, Pandora, Apple Music, Amazon Prime Music, SoundCloud, and Google Play Music.
Over 20,000 songs are added everyday on the platform.
Spotify deprecated their Inbox/Messaging feature due to lack of user engagement.Usage44% of users listen to Spotify on a daily basis.
Around a third of Spotify listening time is spent on Spotify-generated playlists, with another third going on user-generated playlists.
Average users listen to 41 unique artists per week.
In each region, Spotify listening is dominated by mobile.
Spotify listeners frequently turn to the streaming service to soundtrack special occasions.
In 2019 more than 60 million users engaged with this feature (Annual “Your Top Songs”), sharing content 40 million times and streaming 6.5 billion songs from the playlists.Demographics286 million monthly active users of SpotifySpotify is the most-popular channel with under-30s.
29% of Spotify users are millennials.
As of March 2018, Spotify’s user base was dominated by Millennials, with 29 percent of its users aged 25 to 34 and 26 percent aged between 18 and 24 years old.
According to a 2018 survey, Spotify reaches almost half of 16 to 24 year olds in the United States each week.
Spotify has the most youthful user base of the three platforms (Apple, Spotify, Pandora), with over half of users aged 34 or under, compared with 40% of Apple and 39% of Pandora users
Competitive Analysis
After conducting my market research, I analyzed Spotify’s top competitors to evaluate their strengths and weaknesses. This information helped me to understand what the trends are across all competitors, their unique differences, and why users might choose a particular service over another.
StrengthsLarge music catalog.
Advanced music discovery.
Free & Premium.
Non-music content.
Hands-off listening experience.
Lyrics.WeaknessesLimited non-music content.
Limited sharing features.
Low maximum audio quality.
StrengthsLarge music catalog.
Exclusive early releases.
Search songs by lyrics.
Non-music content.
Lyrics.
Siri and Apple Watch integration.
24/7, human-curated Beats 1 radio station.WeaknessesNo free version.
iCloud music library can be buggy.
Country/Region restrictions.
StrengthsIncluded with prime.
Lyrics.
Amazon device integration.
HD and ultra HD audio quality tiers.
Human-curated playlists.
Advanced Search.WeaknessesLimited non-music content.
Limited music catalog. for lower tier.
Can’t create stations.
StrengthsFree version.
Large music catalog.
Import pre-purchased songs.
Free subscription to YouTube music.
Create and share playlists.
Algorithm based recommendations.WeaknessesDifficult to manage music.
Shutting down.
Low maximum audio quality.
StrengthsNew, undiscovered music talent.
Upload own audio/podcasts.
Unlimited track skips.
Engaging social features.
DJ mixing tools.WeaknessesSome major-label music not available.
Mix of user and official band content can be confusing.
Provisional Personas
Now that I had a better understanding of Spotify’s market space through market research and competitive analysis, I wanted to start exploring and identifying who their target users might be. By creating provisional personas, I was able to quickly start empathizing with Spotify’s users and gain a basis for who I would conduct user interviews with to validate this information.
The ExplorerMillennial ( 25-34yrs )GoalsListen to music in the background while he’s doing something else.
Discover new music of different genres.
Create different playlists to listen to based on his mood.PainsDifficult to manage things he wants to listen to.
Hard to discover new, lesser-known artists to listen to.
Streaming service overplaying the same songs.
The FangirlGen Z ( 18-24yrs )GoalsListen to her favourite artists.
Keep track of new releases by her favourite artists.
Share her favourite artists / songs with her friends.PainsPaying for the premium tier service.
Streaming service doesn’t have all of her favourite artists or songs.
Difficult to find what other people with similar tastes like to listen to.
User Interviews
To validate who the real users are and learn about their personal experiences with music streaming and Spotify, We conducted user interviews. I interviewed 5 people between the ages of 25-35 yrs, 13-20 minutes each, asking open-ended questions to learn as much as possible about Spotify’s users and their experiences and relationship with music.
Empathy Map
Through the user interviews, We found that while many Users had their own, unique experiences with music and music streaming, there were common patterns across the role music played in their lives socially, how they listen to music, and how they discovered music. Using an empathy map, I was able to synthesize all of the findings and uncover these key insights.
From the information gathered from all group members, I was able to identify common patterns that allowed me to uncover key insights that would help me understand our users' needs on a deeper level.
Building connectionsUsers shared how music helped build deeper connections with other users.
SituationAll participants most often listen to music while they’re doing something else.
RecommendationsUsers use curated playlists for recommendations to discover new music.
- InsightsUsers build connections with other Users through music.
Users tend to be doing other things while listening to music.
Users want to discover new music that they like.NeedsTo be able to experience music with other people.
To be able to find music appropriate for the current situation.
To be able to find accurate recommendations.
User Persona
With the information gathered from the interviews and the insights & needs discovered through the empathy map, I created a user persona that accurately represented who we were designing for. This persona helped guide my decisions along the design process to make sure the solution I am designing is centered on our user. Meet jonathan.
Jonathan
Male 29 yrs old, tech engineer, single.
- GoalsConnect with people on a deeper level through music.
Find music for every situation.
Discovery new music that suits his tastes.NeedsTo be able to learn what kind of music other people like.
To be able to find music appropriate for the current situation.
To know he can find accurate recommendations personalised to his tastes.MotivationsFinding new music that he likes.
Having an easy way to manage his music.
Connect with people through musicFrustrationsNot able to find all of his favourite music in one place.
Too time-consuming to keep up with new music.
Not easy to add songs to his playlist
Defining the Problems
Now that I knew who I was defining for, I was able to use the insights and needs gained from research to identify what the main problems are that I am trying to solve. I used those insights and needs to create POV statements to better understand the problem from the user’s perspective and then created HMW questions to come up with possible solutions for these problems.
Insights
Users build connections with other Users through music.
Users tend to be doing other things while listening to music.
Users want recommendations to new music that they will like.Needs
To be able to experience music with other Users.
To be able to find music appropriate for the current situation.
To be able to find accurate recommendations.POV
Users needs to be able to experience music with other people because he builds connections with other people through music.
Users needs to able to find music appropriate for the current situation because he tends to be doing other things while listening to music.
Users needs to be able to find accurate recommendations because he wants recommendations to new music that he will like.HMW
Free version.
Large music catalog.
Import pre-purchased songs.
Free subscription to YouTube music.
Create and share playlists.
Algorithm based recommendations.
Brainstorming
I started the brainstorming process with mind mapping. Based on the HMW questions, I went through 10 minute rounds for each question and quickly generated as many different ideas as possible. I then went back in for a last round, 5 minutes each, to write down any new ideas or expand on existing ones.
How might we help Jonathan experience music with others to build deeper connections with them?
Group Brainstorming
After completing my own brainstorming, I still felt the need to explore different ideas. To help me with exploring other ideas that I haven’t thought of yet, I conducted a group brainstorming with team remotely. Through this process, we worked as a team to come up with as many ideas as possible for the same HMW questions with discussions on each topic.
Project Goals
After coming up with different solutions for the main problems identified, I started to lay out the strategy in terms of how these solutions would be implemented. First, I started by clearly defining the project goals to understand what we’re trying to achieve through implementing these solutions.
Business goals
Continue as the lead amongst music streaming services.
Improve engagement and retention in the app.
Expand social capabilities.
Help people listen to music.User goals
Connect with people on a deeper level through music level through music.
Find music for every situation.
Discover new music that suits his tastes.Mutual goals
Connect with people through music.
Personalised music experience.
Product Roadmap
I then started to put the solutions I brainstormed into a list of product features to create a comprehensive product roadmap.These features were sorted into four categories, including Must-have (P1), Nice-to-Have (P2), Surprising and Delightful (P3), and Can-come-later (P4) features. They were sorted based on how well they can help achieve business goals and user goals.
Application Map
Now that I knew which solutions I would be moving forward with, I wanted to understand how these new features would fit into the existing architecture of Spotify’s application. In order to get a better understanding of this, I created an application map.
Task Flow
Now that I knew how these new features would fit into Spotify’s existing structure, I wanted to explore how the user’s would be interacting with these new features to complete key tasks. I first created a UI Requirements document to identify the key tasks based on our user’s goals, and then clearly laid out the specific requirements for each screen in order for the user to successfully complete those tasks.
Using the same key tasks, I created task flows to understand the actions the users would take and the key pages they would interact with to complete those tasks.
Jonathan wants to create a station that fits his current situation.
User Flow
Now I wanted to take an even deeper look into the overall user’s journey while interacting with the new features. In order to more deeply empathize with the user, I created a user flow to explore the scenarios the users would be in and the different paths and decisions they would encounter when trying to complete the key tasks defined.
Lofi Wireframe Sketches
I sketched a few iterations of low-fidelity screens before landing on final lofi wireframes sketches with help of ipad. It also enables me to examine ideas or possibilities before putting everything in the daunting process of digitizing.
Sketches to Prototype
In order to test the design decisions I had made and to test the usability of the design. I wanted to create a prototype to test on real users.
High Fidelity Wireframes
Using Figma, I first started by creating high-fidelity wireframes based on my sketches.
Prototype
Following my wireframes, I then used Figma to create an interactive high fidelity, limited functionality prototype that I would use for usability testing.
Usability Testing
Before usability testing, it is important to set up test objectives, subject, methodology, tasks, and rubrics for measuring the result of the testing before conducting a test. Therefore, I wrote a usability testing plan to define what and why I want to test and get prepared for the test.
I expect a 100% completion rate since all tasks are normal steps for managing finance and were designed using existing patterns of Venmo. I also expect a 90% error-free rate because the prototype is not fully functioning, and users might take alternatives that have not been built up for completing the tasks.
I conducted four remote, usability testing via Zoom with 6 participants, and created transcripts for each participant based on my observation of their interaction with the prototype. Participants were asked to share their screen while navigating the prototype tasks. I requested they think aloud and bring up any steps they considered to be intuitive or frustrating.
I jot down their mistakes, slips, and confusions they expressed in the process. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype.
I expect a 100% completion rate since all tasks are normal steps for managing finance and were designed using existing patterns of Venmo. I also expect a 90% error-free rate because the prototype is not fully functioning, and users might take alternatives that have not been built up for completing the tasks.
I conducted four remote, usability testing via Zoom with 6 participants, and created transcripts for each participant based on my observation of their interaction with the prototype. Participants were asked to share their screen while navigating the prototype tasks. I requested they think aloud and bring up any steps they considered to be intuitive or frustrating.
I jot down their mistakes, slips, and confusions they expressed in the process. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype.
Affinity Map
With all the notes compiled from the usability tests, I started to synthesize all the information through an affinity map. I was able to draw connections to uncover patterns which helped me identify design recommendations to improve the usability of my design. Like the empathy map, it is effective in helping us find patterns and frustrations when users are interacting with the prototype, and identify areas of improvements based on priority levels. where I will fix problems that affect key functions for our app.
Pain Points
I identified common pain points encountered by users during testing leading to my discovery of key insights which helped me to identify design recommendations.
5/5 users had difficulty finding the notifications screen.
5/5 users showed some confusion when viewing the Friends Recommend playlist screen.
3/5 had trouble finding the recommendations feature.
5/5 users showed some confusion when viewing the Friends Recommend playlist screen.
3/5 had trouble finding the recommendations feature.
- InsightsPeople want to have easier access to check their notifications.
People were confused by the redundancy of the Recommendations flow.
People expected the recommendations feature to be in the Settings screen.RecommendationsAdd the notifications icon to the home page.
Change the flow so that users are automatically directed to the Recommend Songs screen first before the playlist screen.
Add the recommendations feature to the Settings.
Priority Revisions
Using the recommendations identified through testing, I started to make these revisions in the high fidelity wireframes.
1. Add the notifications icon to the home page.
- Before
After
2. Change the flow so that users are automatically directed to the Recommend Songs screen first before the playlist screen.
- Before
Before
Before
AfterAfter
3. Add the recommendations feature to the Settings.
Final Prototype
After completing the revisions, I updated my prototype with the revised design.
High-Fidelity Design Artboard
High-Fidelity Design Interaction Wiring
High-Fidelity Prototype Interaction Video
Reflection & Next Steps
I faced new challenges during this project that I haven’t faced before - seamlessly integrating a new feature into an existing design and designing for a mobile application that I wasn’t entirely familiar with.Through this project, I learned the importance of really diving into studying the existing design and flow of the application to introduce a new feature that looks and feels like Spotify’s existing design. Doing a collaborative research with teammates on the background and how the app evolved was also key to identifying the best solutions for the problems at hand.
The next steps I would take this project through from here are:
The next steps I would take this project through from here are:
- Re-TestTo validate the revisions made, I would conduct another round of testing with users.ImplementationOnce I’ve re-tested to make sure the changes improved the features’ usability, we would then implement and launch these new features.