Overview01 Empathize02 Define03 Ideate04 Prototype and TestReflection and Next Steps

Spotify

EMBEDDING NEW FEATURES

Project Overview

Spotify, a leader in streaming music, is looking to further deepen the connection between humans and music. Spotify’s mission is “to help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way.”
Project Scope
Add a new feature to an existing app
Tools
Figma
Role
UX Designer

Challenge

To deepen the aforementioned connection, Spotify is looking to expand its social capabilities. The app is not looking for a re-design, but a seamless integration that adds value to its users.

A few early concepts have been discussed: Instagram-like stories, a more interactive feed, or even a better form messaging. In fact, Spotify removed the messaging capabilities in 2017 due to low engagement, but perhaps this is an opportunity to review.

Objectives

Design a new social feature that embeds within the current Spotify platform. Make sure it embeds smoothly within the app.

Constraints

Branding must remain consistent throughout the features.

This is a concept project.
View Prototype

Design Thinking Process

01 Empathize

Market Research
Competitor Analysis
Heuristic Evaluation
User Interviews
Empathy Map
User Persona

02 Define

POV Statements + HMW Questions
Business and User Goals
Sitemap

03 Ideate

Feature Roadmap
Task Flows
User Flows
UI Requirements
Wireframes

04 Prototype & Test

Style Tile
UI Kit
Hi Fidelity Prototype
Usability Testing
Affinity Map
Revisions

01 Empathize

Research

In order to deliver a valuable experience, I wanted to understand Spotify and it's users a little better, so I conducted empathy research to gain more insight into
  • The music streaming industry
  • Spotify's target users
  • Users' expectations, goals and pain points when using the app
Initial Assumptions
  • Users are mostly of Millennial and Gen Z generations
  • Users want to share music they are excited about
  • Users are tech savvy
  • Users regularly use social media

Market Research

I wanted to learn
  • How do users use Spotify?
  • How do users discover music?
  • Who are Spotify’s competitors?
So, I looked into recent marketing reports to find this data.  Acquiring quantitative data in my secondary research will allow me to focus on qualitative data in my primary research.
Music Listening Habits
  • Listening to music is the second most popular media form of entertainment at 83%, succeeded only by viewing content on social media (87%).
  • In 2018, streaming accounted for 47% of 16-24 year olds’ music consumption (Gen Z) and 33% of 25-34 year olds’ music consumption (Millenial). The national average is 26%.
  • Emotional reactions to music are shown to be stronger when music is chosen by its listeners
  • Spotify listening is dominated by mobile devices. 61% of North American users Spotify primarily on their mobile device.
  • The increase in availability and portability of personal listening devices suggests that people are now able to choose music and curate music libraries for an increasing range of situations and activities.
  • While music is found in many public settings, 55% of music listening happens when the listener is alone.
Paid Subscriptions
  • 30% of Gen Z and Millenials have a paid subscription to a streaming service (in comparison the general population at 19%).
  • Paid subscribers also tended to be male, with 22% of men stating they paid for a premium subscription, compared to 16% of women.
  • Key paid features to 16-24 year olds
  • Offline mobile access; rising to 39% from the 27% national average, making it the top option among the age group.
  • 35% paid to remove advertisements
  • while 34% paid to listen to tracks they can specifically choose
Discovery
  • Approximately half of Gen Z (54%) and Millenials (47%) discovered new music through YouTube, both over-indexes on national average (40%).
  • Additionally, discovery through playlists on music streaming services was popular among those aged 16-44 years (16-24: 26%, 25-34: 28%, 35-44: 27% )
  • Playlists created by respondents themselves were the most popular, accounting for 54% of playlist listening.
  • Playlists created by platforms they listen on (e.g. Spotify Discover, New Music Friday etc.) accounted for 33% of playlist listening, a major indication of how influential these playlists are becoming to music consumption and curation.
  • Playlists created by someone else (friends, etc.) accounted for just 13% of playlist listening
Spotify Demographics
  • 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. The streaming giant has permanently altered how consumers discover, engage with and share music, and according to a 2018 survey, Spotify reaches almost half of Gen Z in the United States each week.
  • Spotify also edges out every channel but Pandora and Amazon Music (only by 1% in the latter) in the over-30s category.
Competitors
In the first half of 2019
  • Spotify was estimated to have a 36% market share of the then 305 million total streaming service subscriptions globally.
  • Apple at 18% comes in second
  •  followed by Amazon at 13%
  • And China-specific Tencent Music at 10%
  • Various other smaller services feature, including Deezer on 3% and US-specific Pandora on 2%
  • YouTube was presumably folded into ‘others’
Crossover Listening: Interestingly, 44% of Apple Music listeners also used Spotify, alongside 32% of Amazon Music listeners and 55% of Deezer users.

Competitor Analysis

To gain a better understanding of what these competitors are doing well and what patterns already exist, I created a competitor analysis. Based on market research, direct competitors included Amazon Music, Apple Music and Pandora as streaming services that provide premium products without ads that allow users to choose the music they listen to and create their own playlists. Tiktok is an indirect competitor that offers users the opportunity to connect with music in a social setting.
Strengths
  • Offline listening
  • Curated and user-made playlists
  • Can use Alexa
Weaknesses
  • No integrated social feature
  • Audio-only content
Strengths
  • Offline listening
  • Exclusive video and artist content
  • Can use Siri
Weaknesses
  • Must have an Apple account
  • App only
Strengths
  • Offline listening
  • Easy access to artist and lyric content
  • Easy to navigate
Weaknesses
  • No curated playlists
  • Smaller library of music
Strengths
  • Integrated social feature
  • Discovery is integrated in to main features
  • Create your own content
Weaknesses
  • Limited Library
  • Cannot filter to limit type of music
Patterns
Patterns across sites tell us what users are used to and what they might expect upon uses Spotify's app.
Common patterns found included
  • Offline listening
  • Personalized playlists
  • Intuitive navigation and organization
  • Can share music via links
  • Offered pathways to discover music

Heuristic Evaluation

What's it like to use Spotify?
With secondary research having answered many questions and provided quantitative data, I focused on qualitative research. I conducted a heuristic evaluation to determine the current usability of the Spotify app using Nielsen's 10 heuristics and evaluated them on the Android mobile app. Doing this at the beginning allows me to identify current usability issues and the extent that they might be addressed within the scope of the project.
Evaluation
Most heuristics had no issues or only cosmetic issues. The two areas where I found minor usability issues were in Error Prevention and Flexibility and Efficiency of use.
Error Prevention
  • Able to remove downloads without any error prevention or messaging. No feedback at all. Simple to re-download. Recommendation: Add a screen to ask user to confirm before removing download from phone. Add feedback to show that action has been taken.
Flexibility and Efficiency of Use
  • The inability to simultaneously add multiple songs to a playlist slows down users’ use of the app. Recommendation: Add option to select multiple songs to add to playlist

User Interviews

It's time to connect users!
I wanted to build connections with Spotify users, so I reached out to people who use Spotify Premium. I still needed to further details to answer the following questions.
  • How do users use Spotify?
  • How do users discover music?
  • How do users share music?
  • Why do they choose premium?
  • What is missing from their experience?
Additionally, I wanted to identify common goals and pain points to understand a typical user's expectations. Conducting these interviews with actual people really helps me to connect to the user as I create my designs going forward.
Type of Respondents
5 females, ages 26 to 34
1 males, age 32

Each uses Spotify 2 or more times per week on either their laptop or phone.
All participants turned out to be iOS users.
Assumption Validations
  • Users are mostly of Millennial and Gen Z generations. Validated thru Market Research
  • Users want to share music they are excited about. Validated. All users discussed sharing their favorite artists with friends.
  • Users are tech savvy. Validated
  • Users regularly use social media. Mostly valid. 1 user left social media entirely due to privacy concerns.
View User Interview Research

Empathy Map

In order to synthesize the information gained from the interviews, I created an empathy map to  better understand the underlying reasons for some of the interview answers and to better empathize with my user.

I used my observation notes (1 color per user) and started grouping them together with like sentiments based on traditional empathy map categories. Then, I arranged the largest groupings (3+ users) to categorize and label them based on the patterns.
Interview Findings
Using the clusters with the most consensus, I interpreted the following insights which determined user needs.
Insights
  • Users want music to enhance their individual activity
  • Users want to have an emotional connection to the music
  • Users often leave the app to share music
Needs
  • User needs to find music that fits their activity
  • Users needs to see personal content
  • User needs to connect within Spotify
View User Interview Research

User Persona

Meet Joy...
Based on my interview findings, I created Joy, a user persona. I took the needs directly from my empathy map findings and goals from those directly expressed by the interview participants. Joy portrays a composite of Spotify users, so I will think of her as the potential user that I want to design for.

02 Define

What problem are we trying to solve?
Now that we know who we’re designing for, we need to figure out the problem that we're going to design for. This will give us a clear-cut objective as we spend time and resources coming up with solutions.
To help us define the problem we use

POV Statements + HMW Questions

POV statements help us connect our empathy research findings to a defined problem. These statements use the insights of our empathy map and needs from our user persona to frame a statement from the user’s perspective and helps shape the problems we are trying to solve (i.e. "How Might We" questions)
INSIGHT
People want music to enhance their activity.
People want to have an emotional connection to their music
People often leave the app to share music
NEED
User needs to find music for their activity
User needs access to personal content
User needs to connect in Spotify
POV Statement
Joy needs to find music for her activity because people want music to enhance their activity.
Joy needs to see personal content because people want to have an emotional connection to their music.
Joy needs to connect in Spotify because people often leave the app to share music
HMW Question
How might we help Joy find music for her activity?
How might we help Joy see personal content?
How might we help Joy connect in Spotify?

Business and User Goals

What do the business and users have in common?
I wanted to identify common goals between the user and business along with technical constraints. This will allow us to determine viable solutions further down the road. The User Goals came directly from the user persona.
Common Goals
  • Access to exclusive artist content
  • Access to choice of music
  • Human, emotional connection inspired by music
Constraints

03 Ideate

Let's solve that problem!
Now that we defined the problems and we've determined common goals, we can brainstorm to generate ideas quickly to answer the following questions.
  • How might we help Joy find music for her activity?
  • How might we help Joy see personal content?
  • How might we help Joy connect in Spotify?
To begin brainstorming, I used mind maps for each HMW question. I noticed that there was some overlap with how people find and share music and it made me consider how social media apps often start with a comments section.
And then I brainstormed with a group of 5 Spotify Premium users online using round robin and brain netting techniques. After committing about 10 minutes to each question, I shared the common goals with the group and asked them to vote for their favorites with these goals in mind. Top votes (4+ votes) included
  • Curated playlists that are a mix of friend’s music (All participants voted for this one)
  • Artist Feed
  • Color moods where your likes are color-coded to specific moods
  • Tiered users for access to exclusive content based on level of engagement
  • Houseparty*: create an event within Spotify and invite guests to collaborate ahead of the event
*I chose not to include this feature at this time, since my research showed that Spotify users largely listen to music as a solo activity and do not actively engage in playlists created by others.

Product Feature Roadmap

How should we implement these ideas?
The roadmap is a list of features from the brainstorm sessions based on common goals and previous research that supports it. These are prioritized by the number of goals that they meet, ability to integrate into Spotify's information architecture and the amount of effort required to implement. For this project, I chose to concentrate on the first 3 features.

Application Map

Where will the user find these features?
Now that we have our features prioritized, it’s time to work on the app map, which shows the proposed structure, labels and organization of the application and how the user will navigate these. Rather than recreate the entire site map, I concentrated on the areas that would be changed with new features.

Task Flows

What will our user do?
Using the HMW questions to determine the tasks and the feature roadmap plus sitemap to see how we could accomplish those tasks, I created task flows to focus on a high-level view of the actions the user would need to take to accomplish these tasks.
  • Task 1 - Joy wants to listen to her friend's daily mix
  • Task 2 - Joy wants to read and add to the comments on the song by one of her favorite artists
  • Task 3 - Joy really likes a song and wants to add it to her moods playlist
HMW Questions   +   Site Map   +    Feature Roadmap    =    Task Flows

UI Requirements

What UI elements will we need on each page?
UI Requirements outline the user interface elements that will be needed for a user to accomplish their task. This is a reference document that will be updated as new tasks are defined. I used POV statements to craft user stories, Task Flows to determine the pages needed and User Flows to determine other elements that may be required.
POV Statements User Stories
Task Flows Pages
User Flows Additional UI Elements
User Stories  +   Pages   +   UI Elements    =    UI Requirements

Wireframes

Time to start building out the pages!
We started with sketches (lo-fidelity) to complete ideas quickly and move on until finding a solution that meets all requirements based on research.

04 Prototype and Test

Let's put it all together and test it out!
After sketching low-fidelity wireframes, I began to digitize the hi-fidelity wireframes for prototyping by focusing on Spotify's patterns. To ensure consistency, I started with a Style Tile and UI Kit.

Style Tile and UI Kit

Since Spotify is an established brand, I wanted to create a Style Tile and UI Kit to make sure the new elements remained consistent with the rest of the app.
I used the assets they have available to create this style tile and added elements for use on these features. Similarly, I created a UI Kit based on already established patterns in Spotify to build the hi-fidelity wireframes and added components to be used in the new features. This was to create consistency throughout the app experience.

Prototype

From there, I mocked up hi-fidelity wireframes for use in the prototype. This way we can assess any usability issues prior to deciding specific details.

Here, I used Figma to to generate an interactive prototype to test the homepage, friend mix playlist page, mood playlist page, mood modal, song page, song menu page
View Prototype 1

Usability Testing

It’s important to test the features that have been designed to determine usability. Poor usability can hurt customer trust in the brand and it’s difficult to regain that trust. Additionally testing allows us to identify wins and opportunities to improve.
Think Aloud Remote User Testing
I asked the participants to dictate aloud what they are doing and explain their choices as they completed their tasks. I observed their behavior and reactions as they did so. This method allows me to better understand the mindset of the user as well as observe any behavior such as non-verbal cues or behavior that the user may not be fully aware of.

Six users participated between the ages of 24 to 38. All were iOS users who used Spotify at least twice a week. Prototype shared via Figma and I met with participant over Zoom.
Tasks
  • Find Cathy’s mix.
  • Find a Taylor Swift song on Cathy's playlist to add to your happy moods playlist.
  • Add and post a comment on the song.
  • Find and browse through a moods playlist.
After completing each task, I asked users for their impressions to try to gain additional insights. Once testing was completed, I recorded my observations. All users were able to complete the tasks successfully with a 98% error-free rate. I recorded findings for reference at a later point in time.
View Usability Test Research

Affinity Map

What did we learn?
An affinity map is a great way to categorize observations to see what functions well, what could use improvement and what may need more testing. Taking the observations from testing, I wrote them down on post-it notes (1 observation per note) and color coded them by user. I then grouped the notes with similar observations and categorized them as I saw patterns emerge.
Observations
Categorization
Findings
  • Most users wanted to search for mixes before browsing and all users could successfully navigate. However, some users were confused by seeing a mobile prototype on a desktop and realized they would use it differently if they had it on their hand.
  • Half the users were very excited about the comments feature
  • Some users expected to be able to use the nav bar to add a song to their moods playlist
  • Half of the users expected the comment to appear at the bottom
  • Half of the users expected the Friend Mix playlist to be highlighted somehow
  • All the users had to guess what the comment notifications meant
Recommendations
  • Sort comments to have the newest on the bottom. (low effort, medium impact)
  • Re-design comment notification icons. (high effort, high impact)

Revisions

Fixing some issues.
Based on the recommendations suggested from the affinity map findings and prioritizing those by effort vs impact, I made those updates.
Updating the UI Kit
Since the UI Kit is made to be a living document, these changes needed to be reflected there as well.

Final Prototype

Reflection and Next Steps

Reflection

There were quite a few challenges on this project. I wish I'd had the opportunity to work with Spotify developers or other designers to better understand the decisions that drove certain interactions. I had many questions and while I was able to find some answers online, having direct access would have been invaluable.

Aside from branding, I had to pay attention to the flows by the established information architecture as well as Spotify's mission to become a wordless, icon-heavy interface. This required a special attention to detail.

All my interviewees during the research phase were iOS users, so as an Android user, that presented an additional challenge. I wanted to make sure I replicated those iOS interactions in the new features in order to ensure a seamless experience.

Additionally, I learned the value of context when testing. Due to Covid-19, the testing was done largely remotely with users on their desktop and, per participant comments, some gestures like swiping didn't come as naturally as they would with their phone in hand.

Next Steps

Based on testing, there's still some room to explore
I’d like to do further research on interactions and navigation on mobile to encourage the use of the moods playlist without interrupting their activity.

I’d like to conduct another round of testing using a physical phone to determine whether the re-designed icons are clear and, depending on the new research, to test the improved moods playlist experience.
Afterward, it will be time for the developers to start coding.
Once testing and revisions are complete, I'll hand over all appropriate documentation to the developers and additional team members to implement.

From there, I'll be available as needed to answer questions and work on updates or new feedback.