Designing a new social feature
Project Type | Mock
Role | UX/UI Designer
Tools | Sketch | InVision | LucidChart | Illustrator
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.
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.
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.
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.
- 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.
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.
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.
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.
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.
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.
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
- Play one of the songs people shared with you.
- Share the playlist with two friends via Spotify (in-app sharing).
- Accept one of the DJ room invitations you received.
- Create a new DJ room and invite two friends.
- Add a new song to the DJ room playlist queue.
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.
This is a set of high-fidelity wireframes, illustrating six main screens that were used during usability testing.
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.
VIEW OTHER CASE STUDIES