SPOTIFY

Designing a new social feature
Project Type | Mock
Role | UX/UI Designer
Tools | Sketch | InVision | LucidChart | Illustrator

Case Study

COMPANY INFO AND OBJECTIVES

Spotify is a music, video, and podcast streaming service that aims “to help people listen to whatever music they want – in a completely legal and accessible way”.

As a streaming music service, Spotify is the group leader, and it wants to stay that way. For this reason, they want to improve engagement and retention in the app. In order to do that, they want to expand their social capabilities. The features will be decided upon research, which should be moving Spotify in the established direction and following current guidelines.

SUMMARY

I have designed two new features for the app which should be moving Spotify in the established direction, following current guidelines. Both features have been decided after doing in-depth primary and secondary research.

  • Research revealed that most users find it difficult to share music with others due to the lack of in-app sharing capabilities within the Spotify platform.
  • While most users have their preferred social media platforms to communicate, they like to connect with others through the means of music. I have designed a DJ room feature that allows users connect with like-minded people and listen to music together.

RESEARCH

I began my research phase by familiarizing myself with Spotify’s Android app and getting a deeper understanding of their current social features. I have also done further secondary research to help me analyze market trends and discover some preliminary information about its users and competitors which I then used to create my provisional personas.

Provisional Persona – Sarah

Provisional Persona – Mary

User Interviews

Upon completing my first round of research, I have conducted several user interviews to validate my assumptions and gather firsthand information from Spotify users and uncover their motivations, goals, needs, and frustrations. I have then synthesized my findings into an empathy map and a user persona which was used as a reference point throughout the project to keep me focused on the users I am designing for.

Key Insights:

  • Participants like to share songs and listen to music with like-minded people/friends.
  • Participants feel that sharing music via Spotify is too complicated, that’s why they use Youtube and other social network platforms to share music among each other.
  • Participants feel that Spotify’s music recommendations do not have much in common with the songs they’re listening too.
  • Participants seemed unaware of the messaging system that was removed from Spotify a couple of months ago.
  • Participants feel it is unnecessary to have a messaging system on Spotify since most users have their preferred social media platforms to communicate with their friends and family.

User Persona

DEFINE

Armed with valuable insights, I developed “Point of View Statements” and “How Might We…” questions, which helped me turn the insights into opportunities for design.

INFORMATION ARCHITECTURE

Upon brainstorming some design ideas, aligning the business and user goals, performing an app audit, and developing a product roadmap, I’ve composed an application map and a user flow which helped me identify the structure of the app.

Application Map
To understand the information architecture of the mobile app, I created an application map with all the essential links to connected screens. Because I was adding new features to an existing platform, I first had to understand the current structure of the app, and only then was I able to add new ones. It was important to me that the added features integrate seamlessly within the rest of application and provide users with a familiar interface.

User Flow
From the application map, I developed a user flow which illustrates how Tom will navigate the app. The flow is specifically designed to show how Tom shares a playlist with two friends.

Application Map

User Flow

INTERACTION DESIGN

Before diving into digital designs, I have sketched out some wireframes to play with various design ideas in a quick and efficient way. I focused my main attention on designing the screens needed for my user story such as screens for checking received songs, sharing a playlist with two friends, accepting a DJ room invitation, creating a new DJ room, inviting two friends, and adding a song to the playlist queue. Once I was comfortable with my sketches, I redesigned them using Sketch.

Low-Fidelity Sketches

Mid-Fidelity Wireframes

PROTOTYPE & TESTING

Using my mid-fidelity prototype (InVision), I have conducted in-person and remote usability testing with five participants of which 4 were males and one female. Each participant was briefed on the project, and were provided with a detailed scenario to help them understand and relate to our user persona, Tom. * Prototype represents the newest version with final iterations. View prototype

Task:

  1. Play one of the songs people shared with you.
  2. Share the playlist with two friends via Spotify (in-app sharing).
  3. Accept one of the DJ room invitations you received.
  4. Create a new DJ room and invite two friends.
  5. Add a new song to the DJ room playlist queue.

Results
After gathering important observations and feedback from all the participants, I have synthesized my findings into an affinity map which helped me identify patterns and opportunities for improvements.

  • All participants were able to complete given tasks without assistance and major issue.
  • Most participants expected the “Shared with me” music to be under “My Music” instead of “Browse”.
  • While Participants knew where to click to send a song to friends they felt the button looked confusing because of the play-button-like arrow.
  • Participants were somewhat unsure about the “add songs” button which showed only an arrow.

Based on my testing results, I have designed my high fidelity wireframes and made final iterations. These modifications included changing the location of the “Shared with me” music, replace the old send button with a different arrow, and add a new button to DJ room which allows users to add songs to the playlist queue. I also spent some extra time on the visuals making sure elements are properly aligned while keeping the prototype’s looks as close as possible to the actual Spotify application.

USER INTERFACE DESIGN

A style tile and a UI Kit was created to communicate the essence of Spotify’s visual language and brand. The style tile was specifically focused on the logo and the color scheme – which I have taken from Spotify’s logo and color guidelines. On the other hand, the UI kit is based more on some of the newly-added elements to the application.

Style Tile

UI Kit

HIGH-FIDELITY WIREFRAMES

This is a set of high-fidelity wireframes, illustrating six main screens that were used during usability testing.

High-Fidelity Wireframes

REFLECTION

When I started this project, I thought that people might be interested in having a full-fledged social feature that allows users to communicate with others, and share their thoughts and feelings about music. Research has proven me wrong; while users like to bond with others through the means of music sharing, they would still like to keep the interaction as unintrusive as possible. Initially, the idea was to give users the opportunity to share music within the application itself; which has been a barrier for many. Secondly, I wanted to provide them with the opportunity to connect with friends via the Spotify platform.

To ensure the newly-made iterations smoothly integrate with Spotify’s application, and that user experience excels the prior designs, further usability testing would be necessary.

__ CONTACT ME

Liked what you’ve seen? Contact me if you’re interested in networking or have any questions.

1 + 14 =