Spotify - Integrating Social Features
Project Overview
Client: Spotify
Role: Product Designer
Duration: 80 hours in 4 weeks
Challenge
Spotify, the music leader in streaming services, is looking to improve engagement and retention by expanding their social capabilities in the application.
*This is a speculative project and I am not affiliated with Spotify.
Objectives
Design social features for Spotify’s mobile application
Seamlessly integrate features into the existing application
Team
Robyn Fiorda (Myself)
Alan Hurt Jr. (Product Manager)
Other UXA Designers (Group Crits)
Tools
Figma, Procreate, Photoshop
My Process
1. Empathize
Secondary Research
Market Research
I started this project by listing out my research goals and assumptions to identify what I needed to validate through my research. Learning more about the industry meant understanding current music streaming trends, the user demographic, current and past Spotify features.
Currently, Spotify is a successful application with limited social capabilities. It’s the largest subscription music streaming service with 96 million subscribers and 170 million users overall. As a whole, streaming revenues now account for over 56 percent of total global recorded music revenue. Spotify’s current social features allow for social listening, collaborative playlists, sharing to social media, friend activity (only on desktop), and they once had a direct messaging tool (no longer in the app).
Competitive Analysis
Conducting a competitive analysis really gave me a better understanding of how Spotify differentiates itself from its competitors. While other direct and indirect competitors have a similar paid premium model for unlimited access and high quality audio, Spotify shines in areas like personalization, as they are known for deep fan engagement. Other services are known for similar purposes - Pandora for music discovery, Soundcloud in particular holds a lot of content for up and coming artists, and Tidal offers exceptional sound quality but is more costly for Spotify’s millennial demographic.
Provisional Personas
With the demographic information, I created profiles of potential Spotify users. I used secondary research including age, gender, common frustrations users had expressed in app reviews, and usage habits. Identifying potential goals and frustrations brought me a step closer to understanding the users and were used as a tool to identify who to recruit for user interviews.
Heuristic Evaluation
Since I would need to seamlessly integrate my social features into the existing application, I needed to get familiar with the interface. To assess the current usability, I conducted a heuristic evaluation based off Jakob Nielsen’s 10 Heuristics for user interface design. I looked at everything from consistency, matches between the system and real world, error prevention, among others.
Primary Research
User Interviews
I was exploring the relationship between human connection and music sharing, so I needed qualitative information to unearth opinions, thoughts and feelings. I conducted user interviews with 6 daily Spotify premium users. They were asked open-ended questions about their positive and negative experiences with the application.
Empathy Map
The information I received from user interviews helped me to identify what insights and needs I needed to design for. I transcribed the user interviews and recorded each observation on a sticky note. After grouping similar sticky notes together, They formed clusters, which revealed patterns in the data.
From my empathy map clusterings, these 1-1 insights and needs were uncovered:
Insights
Users want a personalized listening experience
Users listen to music while doing a wide range of different activities.
Sharing music is an intimate experience between people.
Needs
Users need to know they will recieve recommendations that align with their tastes.
Users need to know they will have listening experiences appropiate for a variety of occasions.
Users need to be able to customize who they share music with.
User Persona
I now knew what motivated, frustrated and delighted Spotify users. I used this to create “Andy.” Andy is a persona who represents the majority of Spotify premium users. He is a millennial, has frustrations that were expressed by the majority of users during user interviews, and has the goals and needs uncovered from synthesizing the empathy map. Humanizing the data and compiling it into one persona was helpful to remind me who I was designing for.
HMW Statements & POV Questions
To define the problem and create possible solutions for Andy, I created HMW Statements & POV Questions from my insights and needs. Framing the insights and needs in this way helped me to understand the problem further. I could empathize with Andy, and with each HMW question, begin to answer them by brainstorming solutions.
Individual & Group Brainstorm
I wanted to get my own ideas out first, without any bias from others, so I sat down and had an individual brainstorming session. Though I felt like I had generated some valid ideas, I knew initial brainstorming is about quantity. To generate as many ideas as possible, I moderated a group brainstorming session with 4 participants. Using the 6-3-5 brainwriting technique (modified for 4 participants), I was able to generate many more possible solutions for Andy. Participants were encouraged to build upon each other’s ideas, vote, and discuss the most feasible ideas.
2.Define
Project Goals
At this point I had possible solutions for Andy, but needed to make sure they aligned with the project goals. In order to design features that were in the interest of both the user and the business, I defined the user goals based on the goals from my persona Andy, business goals from the project brief, and took into account technical considerations. I could then focus my project on the goals that overlapped with all parties.
Product Roadmap
I decided on a feature that seemed to align with all of the mutual project goals and answer Andy’s HMW Statements - my primary feature was to create an interactive feed within Spotify. To prioritize the feed and complementary features, I wrote the goal(s) that aligned with each feature on my product roadmap. I also took into consideration effort level and confidence level, since I was working within time constraints and wanted to avoid feature creep.
View the product roadmap here.
Site Map
I created this site map by thinking about Spotify’s existing information architecture, and based off that, determined the most logical sense for where Andy would find the new social features. The new Spotify feed would live in the “My Library” section, where main content like music and podcasts are also kept. I also wanted to make it as accessible as possible by putting a preview of the section on the home screen. If Andy was browsing by category, he could find the “Feed” category on the “Search” screen.
3. Ideate
Task Flows
I created task flows to identify the path Andy would take to complete tasks while on the application. I gave him common tasks from different starting points. Creating the site map allowed me to think through the functionality of the feed and the steps Andy would take to complete tasks.
User Flow
I expanded on my task flows with the user flow, which helped me to plan out the different paths Andy could take while completing tasks from different decision points. This further made sure I did not have any gaps in the flow.
Sketches
I began sketching the new screens I would have to integrate into the application to get a visual understanding of the layout. The new screens needed to be consistent with Spotify’s existing design, and needed to have all the functionality to perform each user task I had previously outlined for Andy.
Visual Design
Style Tile
To ensure I kept consistent with Spotify’s current visual design, I reviewed Spotify’s brand guidelines before creating a style tile that includes Spotify’s logo, typography and imagery.
UI Kit
The UI Kit was updated throughout the project as UI elements and components were created and used in the design. Elements like icons, buttons and cards were created using Figma.
High Fidelity Wireframes
Referring back to Spotify’s existing mobile UI design to keep elements as consistent as possible, I created high fidelity wireframes of application with the integrated social features. I created these wireframes and the prototype using Figma so I could test the design with users.
4. Prototype
Prototype
I tested the high-fidelity prototype with 5 participants so I could identify areas for improvement. I observed how easily participants could complete the tasks, how efficiently they could find what they were looking for, and any areas of confusion or hesitation. I gave them 5 tasks:
Task 1: Stream feed.
Task 2: Download a friend’s playlist from the feed.
Task 3: Add the Weeknd’s song to your existing playlist called “Faves.”
Task 4: Upload the playlist “Faves” to the feed.
Task 5: Add Katie to your close friend’s list.
5. Test
Usability Test Findings
After interviewing, I created an affinity map to synthesize my research and find patterns in how users interacted with the prototype.
Successes:
Stream feed - 5/5 could find the shuffle play button to stream the feed.
Add a song - 5/5 could add a song from the feed to an existing playlist.
Adding to close friends - 5/5 could navigate to a user’s profile and add a friend to their close friends list
Insights:
Share option - 3/5 debated different options before finding the “share option” due to the wording
Uploading to feed - 3/5 felt like there were a lot of steps when uploading a post to the feed from my library.
Home screen to feed - 5/5 expected to be able to access the feed from the home screen
Caption - 4/5 expected to be able to post a song or playlist without writing a caption.
Recommendations:
Share option - Change wording from “share” and “with friends” to “feed.” (High-priority).
Uploading to feed - change current flow from an option under “share” to an option under ellipsis to reduce number of steps (high-priority).
Home screen - link from “My Feed” section to feed instead of showing songs posted by friends (high priority).
No caption option - allow users to post without writing a caption (low-priority).
Revised Wireframes & Prototype
After prioritizing revisions from the affinity map, I made the necessary revisions to the app. I took into account the number of users that had problems, time and effort level to prioritize which elements needed to be revised. Based on this, I decided I needed to decrease the number of steps required when posting to the feed and I needed to create a clearer “post” option.
Final Wireframes & Prototype
I was able to iterate on the initial feed feature to create the most usable and intuitive design possible. This left me with the final wireframes and prototype.
Reflection
Being a Spotify and social media user myself, I was excited to take on a project that explored the social possibilities of an app that is already so established in its industry. With new business goals comes new possibilities to explore design solutions.
Integrating a feature into an existing mobile application involved a lot of the same processes I’m used to, but with the added challenge of working with the existing design system to make sure the design stays as consistent as possible. Testing once again proved to be a valuable part of the process to discover insights for iteration. This allowed me to create a feature that is usable and intuitive to Spotify users.
Next Steps
By following an iterative design process, I was able to integrate a social feature and complementary social features into the Spotify application
If I had more time for this project, I would love to create a desktop version of the feed and expand upon the existing “friends activity” feature that is currently only available on desktop.