SPOTIFY SOCIAL FEATURES

Project Details

Problem

Spotify needs to add new social features that seamlessly embed in the current platform in order to improve engagement and retention.

Process

Research
The research phase included gathering existing information about the streaming music industry as well as conducting primary research with users. This would provide an understanding of the landscape in which the client exists and a better idea of the user I would be designing for.

Goal:
To research Spotify users, the streaming music market and analyze direct competitors within the field.
Deliverables:
Market Research | Competitive Analysis | Provisional Personas | Heuristic Evaluation | User Interviews

Market Research

Research was first conducted on the existing statistics, demographics and trends within the industry by examining resources online.

Spotify Key Statistics

• 217 million active users (of these, 100 million are Spotify Premium subscribers)

• 44% of monthly-active users use Spotify daily

• 52% of users listen to music on their phones

• Around a third of Spotify listening time is spent on Spotify-generated playlists, with another third going on user-generated playlists

Spotify User Demographics

• 72% of Spotify users are millennials

• 26% of Spotify users are between the ages of 18 and 24

• 3rd largest group of Spotify listeners are 55+

• 23% of males / 20% of females are Spotify members

Spotify Social Features (Past, Present, Future)

• Large chains make up the majority of coffee shop business, creating much competition for smaller establishments

• A saturated market makes it harder for coffee shops to stand out from the crowded field

• Lack of a website makes it more difficult for customers do discover the cafe and find important information about its offerings

Trends

• Streaming’s contribution to overall music industry revenue increasing yearly (75% in 2018, up 12% from the prior year)

• Number of hours spent listening to Spotify increased 25% from 2014 to 2017

• Number of unique artists listened to increased 37% from 2014 to 2017

Challenges

• Relatively week differentiations between top streaming services

• The major record labels control the bulk of its catalog

• Doesn’t own the physical distribution channels for music (tech conglomerates dominate the battle for smart speakers and voice-enabled devices)

Competitive Analysis

An analysis of Spotify’s direct competitors was conducted to compare the platforms as well as the strengths and weaknesses of each based on UI and heuristics. Direct competitors were established by having 10% or more of the streaming music market share and having 20 million or more monthly users.

Provisional Personas

Demographic groups of Spotify users discovered in market research were used to create provisional personas. Generalized assumptions of each group were created to provide an overview of the types of users I believed I would encounter in further research.

Heuristic Evaluation

In order to better understand the existing app and the current design, I evaluated the design principles it already employs.

User Interviews

Primary research was conducted using 1-on-1 interviews with strangers who currently use Spotify. I created a script of open-ended questions in order to get the participants to tell stories about their experiences and frustrations with the app. This allowed me to gain valuable insight and build empathy with users. Link: Full interview guide.

• 6 interview participants

• 4 male / 2 female

• Age range from 29 - 41 years

• All Spotify Premium members

• All have used Spotify within the last month

Define
In the define phase, I synthesized the research I’d conducted in order to establish a definition of the problems I needed to solve. This would give me a clear direction and ensure the design would be user-focused going forward. With these problems defined, I would have a clear path for moving into the ideate phase.

Goal:
Define the problems of the project through research synthesis in order to guide next steps
Deliverables:
Empathy Map | Persona | POV Statements & HMW Questions

Empathy Map

By recording each behavior, comment and experience of the interview participants I was able to begin grouping them based on similarities. First, I focused on the experiences they had, then further looked into the patterns of behavior. These patterns illuminated specific user insights, from which I could understand the needs of the user.

Insights:

• Users like getting music recommendations from other people

• Users enjoy sharing the music they like

• Users enjoy finding music that fits with what they already like

Needs:

• Users need to be able to discover new music from others

• Users need to share their music with others

• Users need music suggestions to be based on their existing tastes

Persona

I further synthesized the data collected in primary research to create a user persona, which was based on the patterns found in the empathy map. André is the archetypal user, based on the experiences of my interview subjects. He would serve as the user I would keep in mind and reference going forward to ensure I was designing with the user in mind.

POV Statements & HMW Questions

To fully establish the solutions that would need to be created, I first created some concrete and actionable problem statements. These were formed from the point of view of the user persona and addressed the established insights and needs. Next, I created HMW questions, which would provide specific questions that would fuel the ideation phase and make sure the solutions were a direct response to the user’s needs.

Ideate
In the ideate phase, I used multiple methods to generate as many solutions as possible to the How Might We questions. This would provide a large number of ideas that could be expanded upon and refined to provide the best possible solutions to the user’s needs.

Goal:
Generate ideas for solutions, features, information architecture and flows
Deliverables:
Individual Brainstorming | Group Brainstorming | Goals Venn Diagram | Product Roadmap | App Map | Task Flow | User Flow

Individual Brainstorming

My process for brainstorming was to give myself 3 minutes to think of and write down as many possible solutions as I could to each HMW question. I then did a second round of 3 minutes each to come up with additional solutions. The purpose was to generate as many ideas as possible (even if they weren’t all realistic or usable) and then revisit them to see if any would be effective ways to solve the problem.

Group Brainstorming

In order to get a wider base of possible solutions from differing perspectives, I gathered three friends and facilitated a brainstorming session with the group. I gave them the background of the project and told them about the persona, then I gave them 10 minutes per HMW question to work together and collaborate on a series of possible solutions. I then had them revisit each HMW question for an additional 5 minutes to try to generate more solutions. Link: Full group brainstorming findings.

Goals Venn Diagram

A Venn diagram of the business goals and user goals was created to see where they overlap. Designing in the intersection of the goals of the business and user is vital to maximize the value of the product and ensure the solutions developed are serving that intersection as much as possible. Link: see the diagram.

Product Roadmap

From the brainstorming exercises, I picked the solutions that would solve the HMW questions in the most effective way. I also considered the complexity of each solution and what that would mean in terms of resources for creation and implementation. I laid out the features that would be included based on which question they would answer. They were assigned a priority level with priority one being a necessity, while priorities two and three would be created if time and resources allowed.

App Map

To establish which new screens would need to be created in order to implement the new features, I created an app map. The information architecture would give me a better idea of what I would be designing and where it fit in with the rest of the already-existing screens and features.

Task Flow

To begin visualizing the flow of the app, I created a task flow, which showed the linear way in which three particular tasks would be accomplished and the screens and actions that the user would take along the way.

User Flow

A user flow diagram was created to put the focus on the user and the path they would take in a number of given scenarios. This shows a non-linear path that focuses more on the user than a specific task. The diagram includes screens and actions, but also the decisions a user makes along the way.

Design
With solutions generated, I needed to establish how the features would be designed. Most importantly, I had to figure out how to incorporate new features into an existing app in a seamless way by incorporating design patterns already in user throughout Spotify.

Goal:
Establish layout and create high-fidelity wireframes to be used in prototype
Deliverables:
Low-Fidelity Wireframe Sketches | Style Tile | High-Fidelity Wireframes | UI Kit

Wireframe Sketches

I sketched low-fidelity wireframes to establish the layout of the new features and how they would integrate into the current app. I used design patterns that currently exist in Spotify and applied them to the new features in order to create a seamless integration.

Style Tile

Using Spotify’s branding guidelines, I created a style tile to be used as reference when moving into high-fidelity wireframes. This gave me a single document I could use to access visual attributes of the brand and ensure my design was consistent with established branding.

High-Fidelity Wireframes

Based on the layouts in the low-fidelity wireframes, I designed wireframes that fit within the existing design patterns and visual language already within Spotify. I added the new social features that I had generated during ideation by integrating them seamlessly into the existing layout in a way that would not distract users from the Spotify they’re used to.

Prototype
In order to test how users interacted with the new features, I created a prototype that would allow me to observe interaction and provide information for updating UI in further iterations.

Goal:
To create a clickable prototype and conduct usability tests
Deliverables:
High-Fidelity Prototype | Usability Testing

High-Fidelity Prototype

Usability Testing

The high-fidelity wireframes were used to create a clickable prototype in InVision that would allow for users to navigate through all new features in the app. Link: Interact with the full prototype.

I conducted moderated usability testing with random participants in order to get real user feedback and identify any pain points and causes of hesitation. I created a usability testing plan to outline methodologies, subjects and script prior to conducting the tests. Link: Test planning document.

Objectives:
1) Test how effectively users can navigate the app
2) Test how users find playlists being played near them
3) Test how users find out what playlists are currently popular in Montreal
4) Test how users turn on the discoverability of their profile
5) Test how users find and listen to the “liked” playlist of someone they follow

Results:
Conducting the usability test with 5 participants, I recorded the screen as well as audio while they completed the tasks given to them while being instructed to “think out loud” as to help me understand their decisions. The data collected would help inform further iterations. Link: Usability Test Findings.

Iterate
The information collected during usability testing would need to be synthesized into actionable recommendations for updates and further iteration.

Goal:
To identify priority improvements and make revisions to high-fidelity wireframes

Deliverables:
Affinity Map | High-Fidelity Wireframe Revisions | Final Prototype

Affinity Map

I synthesized the data collected in usability testing by creating an affinity map. I recorded each action and instance of frustration or hesitation and then grouped them by commonalities. This grouping of patterns allowed me to see what issues the users were having when attempting to complete a task, which I collected into three major insights. From these insights, I created a recommendation for a UI update to address the pain point and improve the user experience.

Link: Full Affinity Map

Wireframe Revisions

Addressing each of the UI revision recommendations, I iterated upon the existing high-fidelity wireframes to make improvements based on experiences in usability testing. I integrated the popular playlists in the users’ city and country into the results of the Near You feature, clarified the wording in the social settings to make the discoverability of the user’s profile more clear and added playlists to the search criteria in the search feature.

Final Prototype

The high-fidelity wireframes were then used to create an updated prototype that could be shared with the client and iterated upon further.

Link: Interact with the full prototype.

Reflection

Next Steps

Creating features in an already-existing app with established design patterns presented new challenges that forced me to think differently about my design process. Examining the app’s UI and heuristics gave me valuable direction for seamlessly integrating new features that didn’t feel foreign to the user.

• Conduct further usability testing and iterations

• Redline the design in preparation for handoff to developer