UX/UI, User Research

Spotify: Social
Feature Integration

 
 

Overview

The Client

Spotify is a digital music service that gives users access to millions of songs.

The Challenge

Create a social feature for Spotify mobile app that will improve user engagement and retention.

Approach

Through the Design Thinking approach, I sought to understand the needs of the target user and balance those with the company's objectives and technological capabilities.

Outcome

A social feature that enhances the user experience and seamlessly integrates into the current platform.

Length of Project

2 weeks (Speculative Project)

Role

Lead UX Designer (research, interaction design, visual design)

 
 
 

Research

 

During the research phase, I sought to understand the trends that set the standard for the music streaming industry. I also needed to uncover the needs and frustrations of the target user to better understand how to appeal to them. 

 

Research Goals

  1. Define people's common behaviors when streaming music.

  2. Determine what makes a streaming music experience satisfying.

  3. Determine users’ biggest frustrations when streaming music

  4. Understand how users interact with each other on the music streaming services.

  5. Define the standard for streaming music services.

  6. Understand user needs when streaming music and identify areas for improvement.

Secondary Research: Market Research

First, I conducted secondary research to familiarize myself with Spotify and the music streaming industry overall. In addition to gathering data on user demographics, I researched in depth Spotify’s previous social feature that was discontinued due to low engagement.

 

Secondary Research: Competitive Analysis

A competitive analysis was performed to understand the strengths, weaknesses, similarities, and differences between competitor music streaming services in the industry.

 
 

Image: Competitive Analysis Findings

 
 
 

Define &
Ideate

My competitive analysis produced the following insights:

Findings

  • Social Features: None of the leading streaming services have a fully fleshed out social feature. It appears to be a function that is not expected by users but is appreciated when it is available.

  • Exclusive Content: This seems to be a major key to attracting users. Platforms aim to show that they can deliver the newest, most unique content before competitors. exclusive access is used in place of social communication to make users feel a sense of community and “in the know.”

  • Personalization: Most personalization on these apps takes form as curated playlists. While some apps give the user a profile page, there is limited functionality or options for it.

 

Secondary Research - Provisional Personas

I created provisional personas that reflected the data I had collected through user research. Getting a sense of the general target audience helped me think about how the business would appeal to different demographics with varying needs.

Provisional Personas.png

Primary Research - Interviews

To better understand the perspective of the target user, I interviewed 4 people who use either Spotify or other music streaming apps. I wanted to learn about their preferences, motivations, and frustrations as they relate to listening to music and using social media.

Research Assumptions:

  • Users are interested in knowing what music their friends/ social network listen to.

  • Users want to be connected with their favorite artists.

  • Users’ habits on a music streaming service are similar to their habits on social media platforms.

  • Users primarily use Spotify on their mobile devices.

 

After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic.

Image: Empathy Map constructed from interview responses

Clustering interview responses allowed me to discover trends and patterns from which insights could be constructed. Through this process I identified several user needs:

  1. Customers need a way to control how much of their music activity is shared with their social network.

  2. Customers need to know that they will find the most current, up to date information on their favorite artists.

  3. Customers need a curated music experience tailored to their individual tastes.

 

Persona Creation

Next, I used all of the qualitative data i gathered during the research process to create Dana, a user persona. Dana’s work commute is an hour long each way. She listens to Spotify to relax and pass the time while taking public transportation.

Image: User Persona

 

Point of View Statements & How Might We Questions

After wrapping up primary research, I dug deeper into the insights and needs I had generated. First, I restructured insights into POV statements, an actionable problem statement that defines the design challenge. Next, I restructured those POV statements into How Might We questions that would generate solution-oriented brainstorming.

POV HMW .png


Group Brainstorming

I gathered 4 friends together, 3 of whom are Spotify users, to participate in a rapid ideation session. For each How Might We question, I asked the participants to come up with as many solutions as possible in the given time frame.

IMG_1126.JPG

View the full list of the group’s ideas here.

 
 

Information
Architecture

 

Business and User Goals

I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I had identified common areas, I could decide what product features were necessary for the prototype.

Stakeholder Goals Venn Diagram

 

A high-level list of app features was created to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.

Next, I created a site map of Spotify that incorporated the social features I designed.

Sitemap Sketch.jpg
Sitemap.png
 
 
 

Test

 

Visual Design

 
 

Next Steps

Interaction Design

I completed a task flow and user flow to imagine the ways a user might navigate through the app using the social feature to achieve their goals. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user. 

Task Flow.png
Screen Shot 2018-10-06 at 8.41.21 PM.png
 

Wireframes: Low-Fidelity

I began the process of wireframing with sketches of several of the main screens for the Artist Moments social feature. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose served as a guide for my digital wireframes.

Wireframes: High-Fidelity

I created a low-fidelity prototype of the social features in Sketch. I created a UI requirements document to outline all of the features and elements I wanted to incorporate into the design.  

 

Usability Testing

I asked 4 participants to test out the prototype's usability. The participant pool was comprised of people between the ages of 18 and 45. The participants were given three different scenarios, each with a task to complete. 

Tasks:

  1. Head to John Legend’s Artist Moment, and leave a comment on the video.

  2. View Lady Gaga’s activity in the social feed, and share her music selection to your Instagram Story.

  3. View Kanye’s most recent activity in the Social Feed, and select the option to unfollow him.

  4. In the Social Feed, change the privacy settings of your Britney Spears post to private.

To view the full Usability Testing Plan, click here.

 

Affinity Mapping

I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way of determine what needed to be changed immediately and what could be saved for later.

Findings:

All participants were able to complete all tasks; however there. Navigating to the Artist Moment video and leaving a comment proved to be the most confusing task for users. That task revealed an assumption that I did not realize I had been making: that people would understand the Artist Moments feature based on using similar video features on Instagram and Snapchat.

 

Recommendations:

  1. Add a comment input field under the Artist Moments video.

  2. Add a confirmation message/other visual cue that shows the comment has been posted to the Moments video.

  3. Change the name of Artist Moments to something more descriptive of the feature.

  4. Add share activity to the overflow options menu.

  5. Make the artist’s photo on the home screen link to their social feed activity on the prototype.

 

In order for my social feature blend harmoniously with the existing app, I had to follow the company’s established branding guidelines. Based on the look and feel of the app, I created a mood board for the social feature.

Next, I created a UI Kit, a comprehensive collection of all components and UI patterns used on the app. I used Spotify’s branding guidelines as the starting point and added components such as buttons and navigations bars as well as new icons I had created for the social feature.

Click here to view the final version of the prototype on InVision.

 

If time permits, I would like to add a screen to show how the Social Feed activity and Artist Moments would display on the Artist profile. Now that the recommendations have been incorporated into the prototype, I am interested in doing additional usability testing to determine whether the feature is more intuitive. I will use Zeplin to hand off the design to  the developer team when I have made all improvements to the prototype.