Scope and Focus

There’s a special connection between humans and music. It connects with our emotions and everything that we do. The way that music makes us interact with each other is obvious wherever you look.

Spotify is the group leader in streaming music services, and they want to stay that way. For this reason, they want to improve engagement and retention in their app. In order to do so, they want to expand their social capabilities and develop a feature where users can share snippets of a song.

Not only does this help make the connection from human emotion to music stronger, but it also will help to drive new users into Spotify’s platform.

Timeframe

5 weeks, part time

Users & Audience

The target users of the Share Snippet feature will be primarily Spotify users as it will be part of the Spotify app. However, this feature is to be designed where even non-Spotify users are able to understand and engage.

Team & Role

As for my 2nd capstone project in Designlab’s UX Boot Camp, I took on this project on my own as the end-to-end UX/UI designer with feedback and guidance from my mentor, Courtney Leonard, and Noah Pan.

Research

Competitive Analysis

As Spotify has many competitors in the streaming music space, it was necessary to get an understanding of what each competitor does differently and has to offer. To get an idea of where to begin this project, a research ramp-up consisting of market trends, direct competitor’s strengths/ weaknesses, and provisional personas were created to define a benchmark.

Interviews

A research plan was then created to help me organize my thoughts and set a clear plan of action going forward on this project.

To understanding user decisions and their opinions on how they use streaming music services, interviews were conducted. Although surveys would help me gather a large amount of data, I opted to interview people to have the opportunity to dive deeper and gain insight on their habits, how they go about sharing music and uncover the pains and gains of it. An interview script was used to help keep me focused during the sessions and to keep it moving along.

Due to project time constraints, I was able to interview 5 people. From my notes, a research debrief was created to summarize my findings, which helped me to understand what people do and want.

Below are the summarized findings from the interviews:

Findings
● Most people would send a link to the song when sharing
● Most people use the recommend Spotify created playlists to discover new music
● If sharing a section or a snippet, they would usually tell people to fast forward to a certain timestamp or tell them to listen to the chorus, etc.
● Several people would exit out of Spotify and search for the song on youtube and then share it that way since it’s free
● Instagram has a feature to share section of songs on stories but has limited songs
● Some people mentioned that they would share a screenshot of a song with friends
● People don’t use streaming music services for social media purposes
● When sharing a snippet, would be nice to be able to see the lyrics on the screen when selecting the beginning and endpoint
● Not everybody has the paid version of Spotify so if a song is shared, they can only listen to a preview.
● Artist will post on Instagram or Twitter to tease an upcoming new song
● Instagram and YouTube integration would make sharing faster and easier since they currently will need to exit the music app and open a new app, find the song again to share it
● Have ways to make custom ringtones from sections of a song
● When sharing songs or podcasts, can they share an all-accessible link with a time limit? That way people without a subscription can listen easily and the link will expire after a certain number of plays or a time limit?

Persona

Kiersten Huff, was created for a reliable and realistic representation of the key audience segments for reference.

Empathy Map

An empathy map was created based on the persona to help gain a deeper understanding of who she is and how she is influenced.

Storyboard

So, why would Kiersten use this sharing snippet feature? To understand and answer this question, the persona and empathy map was used to help in creating a scenario for a storyboard. This storyboard helps to explore these scenarios visually, creating an experience for the entire team, and a way to illustrate expectations.

User Flow

Before starting to design the wireframes, a user flow was created to understand the different paths they may take to get to this feature. Taking time through this process and creating a flow helps to visualize what needs to be created, and helps to uncover things that may have been missed.

Design

Sketches

Now, I was ready to begin the design process! I started by getting the ideas that I have in my head onto paper. After some sketching around, I laid down 3 screens that I used as a starting point.

1st screen: Addition of the “share snippet” button
2nd screen: What the feature would look like
3rd screen: Spotify’s default share screen

Wireframes

A Product Requirements Document was created to help define what was needed to be designed. Beginning with the Low-Fi wireframes to quickly get the layout down and to easily make changes to it. This was an easy way to share with the team and bounce ideas back and forth without dedicating too much time to the details. This was iterated several times before starting on the Hi-Fi wireframes.

HiFi Design

As the deadline for this project was getting close, I decided to continue iterating while working on the hi-fi wireframes.

To keep the user experience consistent throughout the Spotify app, the Share Snippet screen was created by using similar design elements as the other Spotify screens. Since I knew I wanted to show a visualization of the audio, I took the original Spotify QR code for the songs and used the same style for the audio waveform.

On my second iteration of the hi-fi wireframes, I focused on grouping the elements and wanted to show the users a way to understand the different options there were to interact with this feature. The idea was upon the first startup, users will be presented with a tooltip overlay that provides them with a quick tutorial.

This was also the first time I designed entirely on Figma. I particularly enjoyed using their prototype feature. I understand that in order to get good feedback in user tests on the next step, I needed to think about how I can make interactions seamless and responsive within the prototype. I spent a little more time here to get the prototype to a testable state.

Test

Prototype

As there was a prototyping feature built into Figma, the transition from wireframes to prototyping was painless. Now, I am able to perform usability testing and gain feedback and insights on:

1. Users ease in navigating, selecting part of the song, and how they share it.

2. Identifying the usability of the snippet selection feature

3. Determining the areas of confusion, frustration, or difficulties.

Usability Testing

Going into the usability testing, I knew that there were some limitations on the prototype side. At the time, there wasn’t a way to play audio from Figma, and also when conducting the tests, we had to perform them remotely due to social distancing.

The best way to do this was to conduct the testing on a computer over a Zoom meeting, where the users can share their screen, and where I can also record their interactions. Ideally, this would have been performed in-person and on a mobile device, as the interactions on a computer slightly differ from mobile.

5 participants were recruited for this test. They were presented with 2 different scenarios and were alternated between which of the 2 scenarios were presented first. This way, I can evaluate if there were any differences in the user’s understanding of the app feature for the first time.

After the usability tests, the findings were summed up below:

1. Tooltip instructions were a bit confusing. Particularly the text is hard to understand. Would like to have a bit more detail.  

2. 80% of the users wanted a way to manually drag the left portion of the selection box to set the start point and the right portion to set the endpoint. 

3. When sharing a song with lyrics. Most tend to search for the lyric and then tap on it to select the starting point/lyric. The option to manually highlight a portion of the lyric and have the green selection box reflect what is highlighted indicates that the users want to be able to control exactly what they want to share. 

4. 80% of the users mentioned an “info” icon to bring up the tooltips again while they get stuck or want to learn more. 

5. Tooltips should only be shown once, and some people don’t want to read them in general and tend to click outside the tooltip to close them. 

6. All users were able to understand the correlation between highlighted text and the highlighted snippet.

7. All users were able to use the next/previous 5-second buttons to manipulate the selected waveform.

Priority Revisions

I took these findings as priority revisions and made changes to the wireframes. Below is a snapshot of what was done to improve the design, and the overall revisions are under that.

Next Steps

At this point, I had made all the priority revisions to the prototype. Since I was working on this project with a time constraint and limited resources, given more time, here are some next steps I would take:

1. Work on further improving the prototype, enabling more buttons to have an action to reduce the user frustration in testing.

2. Identify new participants for testing the revised prototype.

3. Reiterate based on feedback and present to stakeholders.