Spotify: Design a new social feature

Role: UI/UX Design (Research, Interaction, Visual Design)
Challenge: Design a new social feature that embeds within the current Spotify platform in IOS device.
Client: Spotify - music streaming app
Timeline: 80 hours over 2 weeks.

Project Background

Spotify wants to make a move into helping that connection further. It already has some core capabilities, like following artists or friends, and a basic feed of activity. However, there’s much more that can be done.
Design a new social feature that embeds within the current Spotify platform in IOS device.

My Design Process

Emphathize

My initial research was Secondary Research to analyze the Spotify target audience, how users listen to music on Spotify, music streaming trends in the industry, the connection between music streaming and social media.

Research questions I would like to explore:

What are music streaming trends currently in the market?
How users interact with Spotify or other music platforms?
What current features does Spotify have that allows users for any social interaction?
How are social and streaming services connected in the market?
Why did Spotify get rid of the message feature?
Are there any points of frustration that users have regarding their experience listening to the music and sharing songs with friends on Spotify?

Industry Review

55% of all music listeners use social media to follow and or stay informed about musicians they like.
44% love creating their own playlist when using streaming music.
48 % prefer curating their own playlists to listening to playlists created by others.

Next, I conducted competitive research with six popular music streaming apps in the market to identify the weaknesses, strengths and to figure out a niche feature for Spotify.

Competitive Analysis

Initial things to keep in mind from Competitive Analysis

Most music streaming apps allow users to share songs via other third party platforms.
Most music streaming apps do not create social connections between users and musicians.

App Audit

I carried out App Audit to help me get a clear grasp of Spotify architecture, hierarchy, content, and UI pattern. Through this, I established a fundamental understandings of how to take on a seamless integration within Spotify design.

Key takeaways from app audit

• Spotify allows users to share songs, albums or artists via other third party platforms.

• Spotify is integrated with Facebook accounts, and helps users find friends on Spotify through a Facebook friend list. It does not allow users to send messages or share songs directly from Spotify even though users connect with their friends on Spotify.

• Spotify code is a new feature to help users find songs by using a code from a friend phone. However, this feature is placed next to the search box as a camera icon without any explanation on how to use it.

• Spotify allows users to follow their friends, but it is difficult for users to find friend lists again. This feature is hidden in the user account, and users have to take many steps to figure out where friend lists are.

• Spotify allows users to follow their artists/playlists and lets them know how many people follow the artist/playlist but it does not allow users to see who is following the artist.

Primary Research: One-on-One Interview

Before diving into a one-on-one interview, I brought up 4 assumptions I needed to validate from my secondary research:

Users would like to share their favorite songs to their friends or families.
Users access Spotify via mobile phone only.
Users want to build social connections with their favorite artists.
Users want to interact with friends while listening to the music through Spotify app.

To prepare my 1 on 1 interview, I drafted a user interview plan to recruit the right users. Due to the time constraints, my focus was to recruit millennials who are the most active users on Spotify. I conducted in-person interviews with the users who love listening to music and use music streaming app.

Empathy Map

An empathy map is where I gather information and put them on post it notes which I, then, organize. In particular, I placed them in 4 quadrants: Doing, Thinking & Feeling, Seeing & Hearing, Saying. This helps me find user insights which I then extrapolate to find user needs.

User Persona

In order to develop a typical Persona that depicts the average audience member, I looked back over the Insights, the Needs and the Pain Points from my Empathy Maps. This Persona also highlights the major needs of the most important user groups so that they can be addressed.

Define

POV Statement & HMW

The define mode is critical to the design process because it explicitly expresses the problem I am striving to address through my earlier research. In order to be truly generative, I reframed the challenge based on new insights I have gained through the Empathize Process. Lastly, I am ready for ideation.

Brainstorming

I facilitated a brainstorming session with three people. We discussed and brainstormed as many solutions as possible on each HMW question. This opportunity helped me generate many new ideas and concept through other people's perspectives. After spending 2 hour brainstorming, I looked back at my notes, organized, sorted and refined all of our solutions that we had come up with.

Define Business & User Goals

Before jumping right to design challenge of Spotify, I would like to confirm where the business goals and user goals overlap. I read over project goals and user data that I had synthesized from primary and secondary research. Ultimately, I combined them with technical consideration to articulate the business goals in the diagram.

Product Roadmap

I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Product Roadmap shows not only these goals, but also features that I came up with during the brainstorming process. Also, I added metrics to gauge the impact and effectiveness of such attributes on the site.

Site Map

I organized the features and the content architecture based on the priorities of the product roadmap. Then I mapped out the revised site map to show how new features integrate within the existing structure in Spotify.

User Flow

I created the user flow to identify the different paths that target users would take through their product to complete each task. According to the research synthesis and product roadmap, I came up with four main scenarios for Ryan going through Spotify. I sketched user flow in paper and pencil, I then digitized flow charts in Sketch.

Task Flow

Low Fidelity Wireframes

I used the easiest way to generate my design idea - pencil and paper, I sketched key pages based on the user flows. These sketches helped me think through how the new feature integrates with existing layout of Spotify before moving into digital renderings.

High Fidelity Wireframes

I worked on high fidelity wireframes based on my sketches. I included annotations for these wireframes to help create thorough documentation on how the new feature could integrate within the existing interface. Then I recruited 5 participants in person to test my prototype, 2 female and 3 male.

Prototype

I used Marvel app to create the hi-fi prototype by importing my design and using the hotspot to link all pages. This clickable prototype helps me test my initial design assumption to explore the frustrations of users when they interact with new features of Spotify.

CLICK WITHIN THE PROTOTYPE BELOW TO EXPLORE AND INTERACT WITH IT.

Usability Testing

Usability Testing Plan & Conduct Usability Testing

I created a test plan based on Erika Hall’s method to help me test the usability, the functionality, and the problems of new features integrated in Spotify.

I facilitated the usability testing to encourage the participants to interact with the app and tell me what they are thinking. Through this, I could see through someone else's eyes and understand why some things that are obvious to me are confusing or frustrating to users.

Task 1: Explore a new album release from Taylor Swift.

Task 2: Add your friends nearby.

Task 3: Send a song which you are listening to your friends.

Task 4: See the friend list that you have sent the song before.

Task 5: Find a song which your friends send to you.

Overall findings showed that there were many errors due to the placement of find-friends feature, unawareness of small profile icon at the bottom of full screen track player.

Affinity Map

Creating Affinity Map is to help me improve my design by defining the problems and suggesting the solutions. I generated sticky notes to write down my observations; each on one sticky note. Afterwards, I organized the notes in groups to find the patterns which leads to the insights. Eventually, I prioritized each note to determine the recommendations in the next steps.

The Affinity Map revealed the following insights:

Most users knew how to tag friends to a song very quickly.
Most users were vague about the meaning of tag friends.
Most users used Friend Tag Icon on full screen track player as a tool to view the friend tag list.
Most users expected to connect friends on Search Page.

The insights led to several recommendations to solve the user problems going through given tasks:

Create a coach mark to explain the meaning of friend tag icon.
Remove profile pictures at the bottom of full screen track player.
Create a find-friend feature on Search Page; or Find Friend Button on the Homepage so that user can connect friends promptly.

Iteration & Updated Prototype

Problem 1: Most users were vague about the meaning of tag friends.

Solution 1: I created a coach mark on full screen track player for users who have not checked out this feature yet. They can understand how it works. Also I got rid of three icons on the bottom of this page and added Tab Accordion to filter who are tagged and untagged.

Problem 2: Most users struggled to connect Friends and expected to find this feature on the Search Page.

Solution 2: I created Find-Friends feature on Search Page.

Moreover, in order to improve seamless integration of the new features into Spotify, I changed some elements on the Homepage and the Artist Page. The following wireframes are annotated to describe my iteration.

I used Marvel app to upload all revised wireframes and used hotspot to create the clickable wireframes that offers another opportunity for user testing before going further with the design and implementation.