Spotify
Adding a new social feature to Spotify’s mobile app.
Project Overview
Background
Spotify’s mission is clear: “to help people listen to whatever music they want, whenever they want, wherever they want - in a completely legal and accessible way.“ As a streaming music service, Spotify is the group lead and it wants to stay that way.
Challenge
Integrating a new social feature into the existing design seamlessly.
Solutions
Design a new social feature for the Spotify iOS mobile app to increase user engagement and help create a tailored listening experience.
Role
UX/UI Designer UX Researcher
Tool
Figma Sketching tools (iPad, iPencil)
Duration
80 hours / 2 weeks
Research
Process: Market research, Competitive Analysis, Provisional persona, User Interview, Empathy Map, User Persona
Research Goals
Before conducting the research, I outlined some goals to guide my research. The key goals were to
Define the target audience.
Identify the trends in the music listening industry.
Identify the direct and indirect competitors of Spotify.
Identify users’ experience on music streaming services, especially Spotify.
Define common user goals, needs, pain points, and motivations for music streaming services.
Market Research
I focused my research on the music streaming industry and Spotify to identify demographic, discover trends, and common user behaviors. This gave me valuable insights to target the right consumer segment and understand their needs to brainstorm for a new social feature that will improve user engagement and retention on the app.
Competitive Analysis
In order to understand who Spotify is competing with, I identified both direct and indirect competitors and analyszed their strengths we can emulate and weaknesses we should avoid. Some of the strengths were compatibility with other smart devices, multiple options of membership and free trial period and some of the weaknesses were inconsistent music quality, weak personalization and lack of shareability.
Provisional Persona
I developed three provisional personas based on my market research to help me recruit the right interview participants. Their goals and pains will be validated or invalidated during the user interview.
User Interviews
Before jumping into the interview, I created a interview guide. Then I recruited participants using Slack and conducted remote user interviews to gain qualitative insights of user needs, wants, and pain points. I asked them open-ended questions about music streaming experience as well as specific questions regarding their experience on Spotify’s platform.
Participants: 5 Spotify users (all females)
Ages: 23-34
Average interview duration: 24 minute
Empathy Map
To synthesize my findings from my interviews, I recorded and wrote down all interview notes and began synthesizing the findings with an empathy map. I discovered nine common patterns which lead to some insights and user needs I can use to start brainstorming.
Insights discovered
Music affects users’ mood.
Users listen to different types of music based on time, place, and occasions.
Music sharing is a personal experience.
Users want highly personalized listening experience.
Needs defined
Users need to find different playlists based on their moods.
Users need to find playlists that are appropriate for different occasions.
Users need private social features.
Users need features that reflect their personal music taste.
Meet our persona, Amber!
Based on the researches and the insights from the empathy map, I created a persona that best represents our main consumer segment. Amber is a millennial female who cannot live without music. She likes to discover new music that fit her musical taste without putting too much time or effort into it. She often creates playlists and shares it with her close friends. Her goals and needs will be recognized and responded throughout the design process.
Define
Process: POV + HMW, Brainstorming, Business + User Goals, Feature Roadmap, Application map, Task Flow
POV + HMW
After identifying my persona, I created POV statements and HMW questions to frame the problems from Amber’s point of view. I then translated these POV statements into HMW questions to begin brainstorming for actionable ideas and solutions.
Brainstorming
Answering to the HMW questions, I brainstormed ideas using a mind map. This helped me to think of many ways to approach each problem by connecting and expanding ideas. I focused on generating as many solutions as possible in a limited time frame.
Group Brainstorming
In order to gain more insights in a collaborative environment, I led a group brainstorming session with 6 Spotify users. I welcomed the participants to share as many ideas as possible and encouraged them to expand upon other’s comments or insights.
Valuable insights
Users can create and save mood profile
Allow users to edit pre-made playlists
Create a “group playlists“ feature
Help users to discover new music through radio station with multiple artists
Allow users to edit playlists’ privacy level
Make it easier for users to invite friends to private playlists
Business + User Goals
Acknowledging that a successful design product will benefit both the business and users, I defined the business and user goals by outlining them in a Venn Diagram to identify mutual goals. These goals guided my design decisions in the following process.
Feature Roadmap
After setting the project goals, I created a feature roadmap to define key features that will help users to have personalized music experience within their comfort level. I ranked the elements by priority based on the research, persona, and the project goals.
Application Map
Referring to the feature roadmap, I created a application map to show where and how the new features will be added to the existing design. I used Spotify’s mobile app to create the foundation and added the new features in highlighted green colors.
Task Flow
In order to demonstrate how Amber would interact with the app, I simulated her navigation, using task flow chart. Task flow helped me to be in Amber’ shoes to ensure her interaction with the new features was smooth and straightforward.
User Flow
After walking through the linear paths of how user might navigate with the app, I created user flow to simulate more realistic and comprehensive user interactions on the Spotify’s app.
Ideate
Process: Low-Fidelity Wireframe Sketches
Low-Fidelity Wireframe Sketches
Referring to user goals, roadmap, and flow chart, I sketched out low-fidelity wireframes for the expanded radio and privacy editing feature. These low-fidelity wireframe sketches allowed me to quickly lay down my ideas and to assess whether the elements are easy to navigate.
Prototype
Process: High-Fidelity Wireframes + Prototype
High-Fidelity Wireframes + Prototype
Then, I digitized the low-fidelity wireframes to add all the visual and UI elements. I used the Spotify’s design guideline to integrate the features into the existing product seamlessly.
Test
Process: Usability Testing, Affinity Map, Priority Revisions
Usability Testing
Before conducting the usability testings, I created a usability testing plan to outline the scope of the test. The goal of the usability test was to uncover any pain points or usability issues with the design. Then I recruited test participants for the moderated remote testing. Each participant was given three scenarios and tasks to complete, and the process was recorded for observation.
Participants
Participants: 6 (2 male + 4 females)
Average Interview Duration: 21 minutes
Age: 25-29
All participants use Spotify on a regular basis
Tasks
Make a playlist only visible by selected friends.
Merge similar playlists and create a comprehensive playlist.
Create a radio stations with all your favorite artists.
Affinity Map
After the testing, I gathered and synthesized all test findings, using an affinity map. Then, I synthesized the insights in order to find the the most prominent patterns in user comments, actions, and pain points that led to recommendations for improvements.
Patterns
5/6 users were misled by the wording in “edit privacy“ feature. Some users had difficulties understanding what the feature was supposed to do.
5/6 users mentioned that “Friends except…” has a negative connotation. It created a sense that the user was excluding friends from an activity instead of engaging with them.
4/6 users clicked on the menu under each playlist to merge playlists. The design flow was confusing and needed clarity.
3/6 users noted there is no visual indications that show the current status of the playlist or whether users’ tasks were completed successfully.
Recommendations
Change wordings to clearly communicate what each feature does.
Use icons or text to communicate the status of each playlist.
Include confirmation message and feature such as “play now“ to increase engagement.
Redesign the UI for “friends except…“ feature to help users associate positive impression when engaging with the feature.
Priority Revisions
Based on the insights from the affinity map, I revised the high-fidelity wireframe and prototype to minimize user confusion and improve engagements.
Design
Process: UI Kit, High-Fidelity Prototype
UI Kit
As we’re adding a feature to an existing product, I searched for Spotify’s design system and guideline. And I created a UI kit based on the design system to integrate new features seamlessly into the existing ones.
High-Fidelity Prototype
After the priority revisions, I updated my previous wireframes and create a final version of high-fidelity prototype.
Closing Remarks
Trying too hard
As a novice designer, I have a tendency to hastily resort to “creating“ a new feature that will somehow drastically change users’ interaction with a digital product. However, I realized that user’s experience can be significantly improved by the smallest details such as carefully selected wording or subtle visual aids. This insight led me to be more careful and thorough with my own design decisions and has help me to view other digital products with more appreciation.
Second round of testing
If I was given more time and resources, I would conduct a second round of usability testing with revised prototype to see if the revision helped to solve some of the pain points. The test participants shared a few pain points that could be easily improved. However, I want to prevent assuming the problems are resolved and make sure that the insights led to the right recommendations and changes.
If I could do this again…
I want to explore different challenges and frustrations that desktop version poses. Due to the fast pace of the project and limited time, I focused on designing for the mobile app. However, during my user research and usability testings, many participants had mentioned that they have quite different user experience when using Spotify on their computer. I want to explore the two platforms more and discover how the screen sizes and the type of available interactions alter users’ experience.