KRIZTILLE
UX DESIGNER
prototypemockup-2.png

Spotify Social Feature

 
01-mobile.png
 
 

Spotify Social Feature 

Scope: Adding a Feature to an existing app

Client: Spotify

Role: UX Designer (Research, Visual Design, Interaction Design)

The Challenge: Integrate a social feature in Spotify to help their users make more human connections through music.

The Result: Within a 2 week timeline (80 hours), Spotify has three new features:

  1. An In-app music sharing that allows users to send music directly to their followers

  2. A shared activity feed that shows an overview of common music interests between two users

  3. A media identifier added to Spotify Voice

 
 
 
prototypemockup_2.png
 
 

The Background

Spotify wants to help people make better, more human connections. Spotify is looking to design a seamlessly integrated social feature that not only elevates the music experience, but ultimately provide value to their users.

 
 

The Process

 
designprocess-01.png
 
 

A user driven process drove the strategy and design solutions throughout this project to ensure I'm meeting both Spotify's and their users' needs. 

 

RESEARCH

Tools: Market Analysis, Competitive Analysis, Provisional Persona, 1:1 Interviews

Using secondary research, I aimed to gain a better understanding of Spotify as a leading music streaming service.

With an app audit, I sought out to identify current features available in the app, and to experience how its being used to listen to music. Overall, Spotify has basic features that allows users to share music through third-party app integrations like Instagram Stories or Facebook Messenger. An Inbox feature was also available at an earlier version of the app, but was dissolved due to low-engagement and high-maintenance cost.

The market analysis and competitive analysis was done to understand how Spotify performs in the current music streaming industry, to identify their competitors and their current target demographic. 

Insights from our secondary research are then used to create our provisional persona to provide an overview of who the current target user is.

I followed up the secondary research with my primary research. I designed open-ended questions for the contextual inquiry based on the provisional persona and insights from secondary research. The 1:1 interviews will be used to gather qualitative data--the user's key drives, motivations and preferences for using Spotify. 

 

DEFINE

Tools: Empathy Map, Persona

Using an empathy map to understand our users better, I looked for common themes and patterns that will be used to gain insights and needs. 

INSIGHTS

Participants have a need to use multiple apps to identify songs they’re interested in.

Participants feel a sense of validation when they share a song or artist that their friends enjoy.

Participants sometimes lack motivation to share or recommend music to others. 

NEEDS

Participants need a way to access information about a song more efficiently. 

Participants need meaningful interactions when it comes to sharing music.

Participants need an insightful way to learn about others’ music preferences.


The insights gathered from our research and user interviews help form the persona, Spotify's ideal target user. 

 
 
 

IDEATE

Tools: Point-of-View Statements, HMW Questions, Business, User and Shared Goal Diagram, Product Roadmap, Sitemap, User Flow, Task Flow, Low-Fidelity Wireframes, High-Fidelity Wireframes

Point-of-View Statements and "How Might We" Questions guide me throughout the ideation and brainstorming process. Point-of-View Statements allowed me to reframe the challenges into actionable problems based on needs and insights. The HMW Questions will jumpstart the brainstorming process with a focus on coming up with as many ideas for potential solutions. 

For example: How might we help Sam feel more connected with his peers through music?

DL_Capstone2_Spotify_Brainstorming-p22.jpg
 

STRATEGY

Keeping in line with the shared business and user goals, and technical considerations, I created a product roadmap to identify and prioritize features based on their importance to Spotify and their users.

 

CREATING THE FRAMEWORK

I framed how the new feature will integrate with the current structure of the Spotify app with site-mapping. This showed a hierarchy of existing content , and how the new feature will be added.

SPTFY Sitemap.png

A user flow and a task flow is used to show how the persona will interact with the app given a scenario. While a user flow shows a top level overview of the steps, a task flow is more detailed and granular. 

Scenario: Sam wants to send a music recommendation to a friend.

 

TASK FLOW


I created a UI Requirement based on the user flow to list the specific elements that will be on each screen. This gave the client and other stakeholders a chance to weight in before the requirements are implemented. The UI Requirement acted as a guide or checklist when sketching the wireframes.

 

THE WIREFRAMES

With the user flow, I made low-fidelity wireframes which are sketches to show the kind of content that will be used on each key screen. This allowed me to rapidly cycle through ideas and design solutions. 

 

High-fidelity wireframes were created from the initial sketches to show a more refined iteration of the new features. These will be used during the usability testing phase as a mid-fidelity prototype.

VIEW ALL SCREENS HERE

 
 
 

PROTOTYPE

Tools: Prototyping with Marvel, Affinity Map, Moodboard, Style Tile

Prior to the usability test, I created a plan that defined the test objectives, goals, and procedures. The test was completed with 8 participants who were asked to go through the app as they normally would as Spotify users.

User Tasks:

  1. You are to share a song, an album, and an artist:

    From the home dashboard, select the current song that is playing and share it with a few suggested followers.

    From the home dashboard, select an album to share with a few followers.

    From your profile, select an artist and recommend it.

  2. You are going to see what recommendations has been sent to you. Go to Your Library and see your recommendations. 

  3. Identify a song through the search tab

 
 
 

The usability test was conducted to observe and evaluate user interaction with the prototype, to identify current and potential pain points, and to determine the area of success or failure in navigation, layout, and design.

Overall findings showed that there were many errors due to the confusion with the recommended icon used, the placement of key screens, and confusion over the language used in the content. However, the participants view the features to the app favorably.


INSIGHTS + RECOMMENDATION

Affinity Map was used to organize my notes and observations from the usability test into themes and categories.

The Affinity Map revealed the following insights:

  • Users are confused about the meaning of the “star icon” in signifying a recommended feature. They are used to seeing it as a “favorite” icon.

  • Placement of the recommended icon was initially thought to be in the ellipses, this is something users are familiar with when it comes to finding more options.

  • Participants found the language confusing with “Your Recommendation” and “Shared Activity”. It was not clear to them that it was in relation with another user.

  • Participants are looking to see an indication of when they have recommendations, and would like to know who it is from.

The insights led to several design recommendations that aimed to solve the confusion over the iconography, placement, and language used:

  • For both the icon and the placement of the "recommended" feature, the option will be nested under "Share" and replaced with the label: "Spotify Followers"

  • The language used under "Shared Activity" will be clarified to indicate that it’s in relation with another user.

  • A notification or indicator of items received from other users will be added.

 

For the visual direction, I created a moodboard and style tile based on Spotify's current branding to show the application of typography, color, iconography and imagery.

 
 
 
 
 

ITERATE

Tools: High-Fidelity Wireframes, Updated Prototype, UI Kit

UPDATED HIGH-FIDELITY WIREFRAMES

The high-fidelity wireframes were updated based on the design recommendations. A few screens were added as part of the on-boarding process so the user is aware of the new feature. 

 
 
 

UPDATED PROTOTYPE

An updated prototype reflected the following:

  1. An on-boarding feature announcing the new shared feature was added both on the welcome screen and once users logs-in to the app.

  2. The "recommended feature" is now nested under the Share options labeled as "Spotify Followers"

  3. An inbox feature with items sent and received is available in the "Your Library" section. The items in the inbox lead directly to the song, album, or artist source.

  4. The "Shared Activity" between two users has additional information on the sub-header, explaining the purpose of the screen.

  5. The song identifier has been added as a feature in Spotify Voice

  6. The success feedback for sharing a song, artist, or album to a Spotify user has been simplified to match Spotify's visual design.

 
 
 

UI KIT

I used existing elements that Spotify currently has to create the UI KIT to maintain a consistent application of visual design in the app.

 
 
 
 

NEXT STEPS

  • Usability tests with the updated prototype

  • Implement design recommendations based on insights gained from the usability test

  • An A/B test to see which of the on-boarding process will convert better