Spotify

Spotify’s mission is clear: “to help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way.” As a music streaming service, Spotify is the group lead and it wants to stay that way. For this reason, they want to improve engagement and retention in the app. In order to do that, they want to expand on their social capabilities.

• This is a fictional project, so the project brief was a mix between fiction and publicly available data.

Overview

Empathize

Research Plan

I wanted to start off my researching by setting creating a research plan. I wanted a research plan in place so I could define a direction for research early and use that to guide the research. To set this direction in a simple manner I made a few research goals to encompass what I was looking to discover. These were 1) Learn about Spotify’s consumer base, 2) Find trends in Spotify’s industry, 3) Learn about potential features that could be incorporated into Spotify, and 4) Learn what drives users to use Spotify and what elements have room for development. With these goals I sat down to determine what methods of research I would use to find information about these goals. These research methods were:

Secondary Research

1. Market Research

2. Competitor Analysis

Primary Research

1. 1-on-1 Interviews

Market Research

I wanted to learn more about Spotify during my market research. Primarily, I wanted to know information about Spotify’s user base and industry. The other thing I wanted to learn more about was some usage statistics from Spotify. I was hoping these would start to show a trend for the direction I should take my design in.

Market

• Spotify has 293 Million monthly active users

  • 130 Million of these users are subscribed to Spotify premium

  • 163 Million ad supported  users

• Spotify holds about 36% of the global music streaming market

  • 14% of the population use paid music streaming services multiple times a day

• Spotify’s market cap in May 2020 was $ 26.5 billion

• 55% of users register to spotify using their Facebook account.

• 29% of Spotify users are between the ages of 18-24

  • 29% are between the ages of 25-34

• 56% of Spotify users are Male, 44% of Spotify users are Females

• In 2019 Streaming accounted for around 80% of all music revenue

• Spotify is a globally known platform but its largest audience is in the United States

• In recent times, use of collaborative playlists have had an increase in usage

• Spotify users are sharing more content through their social media

• One of the key  performance factors for music streaming services is library size

• 80% of consumers in the United States say that a variety of music and a low price point are the most important features in a music streaming service

• 70% of all digital music revenue in Europe was from paid subscription services

Usage Statistics

• 52% of users are listening to Spotify on their smartphone

• A Premium subscriber consumes about 2.4 MB per minute on Spotify

• On average Spotify users tune into Spotify  for around 148 Minutes a day

• 44% of Spotify users listen to Spotify on a daily basis

• A third of listening time on Spotify  is spent on Spotify  generated playlists

  • another third of the listening time on Spotify is on user generated playlists

Competitor Analysis

After I learned about who was using Spotify and some of the trends of use, I wanted to take a look at some of Spotify’s competitors. I was wanting to find out what some of their strengths and weaknesses were so I could compare them to how Spotify was operating. I chose to learn about direct competitors and indirect competitors. Direct competitors being other main stream music streaming applications. The indirect competitors I chose were applications that either streamed underground music (Soundcloud) or another app (Youtube) that had music streaming options but wasn’t primarily focused on it.

Provisional Personas

To determine who would be the right people to interview, I sat down and made some provisional personas. I looked at the research and created personas that embodied the trends I found. The provisional personas can be found here.

Heuristic Evaluation

Before I got started on the Interviews, I wanted to sit down and do an analysis of Spotify’s existing UI. This gave me the opportunity to look at the patterns Spotify was already exhibiting in their app. I looked over the IPhone app using Jacob Nielsen’s 10 principles of User Interface. I found Spotify worked well in a lot of categories but there were a few areas where it struggled. The evaluation can be viewed here.

1-on-1 Interviews

For the interview phase, I interviewed 6 participants about their experiences using Spotify. I looked for participants who used Spotify frequently, most of which said they used Spotify daily. I was looking to find out positive and negative experiences users had with using Spotify. Additionally I tried to centralize the questions around social features, since that is the direction Spotify was wanting a feature developed for. I utilized some of the screener questions to find out what device people were using Spotify on the most consistently. This allowed me to see what device I should develop the feature for. The interview transcripts can be viewed here.

Define

Empathy Map

After completing interviews I wanted to compile my findings into a format that helped me empathize with the user. I needed a way to organize the information that displayed patterns so I chose an Empathy map. Using the Empathy map I was able to organize all of the findings from the interview and initially categorize them in regards to the user experience. Afterwards, I took down all of the sticky notes and created new categories from patterns I noticed and put up all of the sticky notes that fell into those categories.

User Persona

With the user needs in hand I decided to create a user persona. I felt a user persona would be really helpful when it came to brainstorming a solution. It would give me someone I could keep in mind and think “Is this a feature that would benefit Chris.” Having that allowed me to think of some good ideas, as well as shooting some ideas down that were fun but didn’t match the needs I found from researching.

Ideate

HMW Questions/ POV Statements

I felt the best step for the beginning of the ideate phase was to create some HMW questions and some POV statements. These allowed me to take the insights and needs from my empathy map and form them into actionable statements. Having the HMW questions was very helpful when it came time to group brainstorm because it gave everyone in the group a good starting point to direct their ideas.

Brainstorming

When it came to brainstorming I wanted to take multiple approaches. The first approach I decided to take was some solo brainstorming. To do this I would, set a timer for 3 minutes and sit down with some pencil and paper. One need at a time, I would use that 3 minutes to sketch as many possible solutions as I could think of. I would then go through all 3 of my needs using this process. After going through all 3 needs, I repeated the process one more time. Here is an example of what a brainstorming session looked like. The rest can be found here.

Group Brainstorming

The second approach to brainstorming I had was to run a group brainstorming session. I gathered four other participants to participate in group brainstorming. It really helped to have the group bounce ideas for answers to the HMW questions off of one another. I typed it out on a whiteboard to keep everyone updated on what others had said.

Project Goals

Having brainstormed some possible solutions to the project at hand, I wanted to take a step back and make sure that I knew exactly what the goals were for the business and the user. I didn’t want to design a feature that did not benefit both the business and the user. So to figure this out I made a diagram comparing user and business goals while also taking technical considerations into mind.

Feature Roadmap

After I laid out the goals, I could sit down and lay out some features that I intended to add to Spotify. Using the goals and research I had done earlier, I was able to assign priority to the different features. I put all of this into a feature roadmap that can be viewed here.

Site Map

With the Site Map, I wanted to make it clear how the new elements would fit inside of Spotify’s existing architecture. Since Spotify wanted to make sure the integration was seamless, I had to find a location for the new features that made sense but weren’t redesigning Spotify’s existing layout.

Task Flow

With the new hierarchy all laid out it was time for me to make some task flow diagrams. These were important because I needed to think through how a user would move through the app.

User Flows

Using the task flow diagrams I made, I decided it would be beneficial to dig deeper into the motivation behind the user’s actions as they navigate through the web site. To do this, I sat down and made some User flow diagrams. User flow diagrams can be viewed here.

Design

Low Fidelity

Since I was adding new features to Spotify, it was important to analyze how it would look incorporated into Spotify. Some of the features I was adding, namely the group radio station, were a little difficult to design in the early stages because I didn’t have much to reference. I thought of all important elements that would be needed in a feature like that and tried to create one that looked like it may fit in Spotify.

High Fidelity Wireframes

My low fidelity wireframes were a decent start but there were a couple things that I really needed to improve on. Some of the additions I made did not fit in very well with existing patterns in Spotify. So the first thing I did when designing the high fidelity wireframes was to reconfigure things so they looked like what you would find existing in Spotify. Additionally, I removed the tab I had added. Instead of that, I opted to locate it in the “Your Library” section because I felt it fit well and served for a more seamless integration.

Prototype

High Fidelity Prototype

Using the high fidelity wireframes above I created a prototype using Invision. I wanted to test if users were able to find the added features and if they were able to navigate the functionality of the group radio feature without any problems.

Usability Test

Before I started testing users I wanted to lay out a plan for the usability tests. This helped me lay out exact tasks that I wanted to complete and help remind me of all the important things I needed to say to the user before the test. This is the plan that I used in my usability testing. I chose to run remote thinking out loud usability tests. I wanted to use the thinking out loud test so I could hear the reasons users were confused, or if anything blatantly stuck out to the users. Due to the corona COVID - 19 Pandemic I was limited in my ability to conduct in person tests, so I performed all 5 of my usability tests remotely. The findings from the test are here.

Affinity Mapping

Similar to the research phase, I ended up with a lot of data that I needed to organize into a more actionable format. I decided to do an Affinity map to help organize my findings into patterns. This helped me find problem areas so I could prioritize fixing them.

Branding

Spotify already has some really strong existing branding. With that being said, I felt it was important to create some branding deliverables for practice but also to create a document that could be easily followed should anything new be added to the app later on. I started by creating a mood board for Spotify. Using that and the existing app as inspiration, I went on to make a brand style tile for Spotify including the most important elements.

UI Kit

With all of the new elements I added to Spotify, I felt it was important to create a UI Kit. This combines some existing elements like the branding information Spotify is currently using, with some elements I had added. It also displays how to indicate the states of certain features in a way that matches the design patterns Spotify has been using. The full document can be viewed here .

Updates to High Fidelity Prototype

• Added a new feature pop up to help users find the group radio feature

• Created an empty version of the group radio session

• Changed the Following section to Friends

• Added a tooltip to alleviate confusion on the Group Radio Player screen

Final Version of the Prototype

After usability testing I updated the prototype with solutions to the problems I found while testing. Here is the final result.

Conclusion

I was really surprised to find out how much I enjoyed working in an existing product. Having to find a way to create something new that fit well with all of the existing material was really challenging, but fun. If I had more time, I would flesh out the group radio feature even more. See what cool things I could add to it and how I could make it as easy to use as possible.

Next Steps

• If budget allows perform user surveys to get user feedback on introduced feature

• Hand off to the development team