Artboard 4.png
Artboard 4.png

SPOTIFY SYNC


Research  | Wireframe | Prototype | Interaction Design | Visual Design

 

View Prototype

SCROLL DOWN

SPOTIFY SYNC


Research  | Wireframe | Prototype | Interaction Design | Visual Design

 

View Prototype

NEW music sharing feature

*This is a fictional Designlab capstone project, and is in no affiliation with the Spotify company

 

Overview

  • Designlab challenged us to create a feature called the "Sync" feature that could be integrated into the Spotify App.  

  • In a nutshell, the feature would allow users to sync their phones with other Spotify users to listen to the same music they are listening to in real time.

  • The new feature would align with the current Spotify brand.  

Challenge

  • This feature must allow users to listen to the same music no matter where they are.  Some of my primary questions were:

    • Why would users share music privately or publicly?

    • Why would users sync their music?

    • What specific Spotify persona would receive the greatest value from this feature?

Solution

  • Introduce a new feature in the Spotify app that would give users the ability to sync their songs with others.

Part 1: empathize

  • I started by thinking about the various use cases for this feature.  

  • I needed to determine how the feature would bring value to Spotify users.  

  • I drafted a research plan and went out to find my answers.  

  • I discovered that users were most inclined to use this type of feature to:

    • Share music with friends 

    • See what type of music people are listening to around the world

    • To enhance their productivity

User Research: Survey & Interviews

 
 
 

Part 2: Define

  • Gaining insights from my research I developed 2 personas and a use case for the feature.

  • My particular case revolved around two remote friends who wanted to share their music as they work through the night on a project.

 

Empathy Map

 

Feature Matrix

 
 
 

Part 3: ideate + Prototype

  • I mocked up a few designs playings

  • I had to keep the internal branding in mind, and needed to figure where exactly to insert this feature within the app.

Wireframes

 

 

App Map

 

 

 

Userflow

 

First Version

 
 
 

Part 5: Test + Iterations

  • I tested the initial version and found areas for improvement

    • Click photo below to see usability results

Usability Tests

 
 
 
 
 

 

Prototype and Key Features

 
 

Next Steps

  • Incorporate the necessary changes to the design based on the user testing insights.

  • Design and integrate an on boarding process for new users to introduce them to this feature.