Role
UX Designer (Home Page)
TEAM
1 Design Lead, 4 UX Designers
Timeline
3 months (Sep - Dec 2023)
overview
Laying Down the Tracklist
What is Spotify?
Spotify is a leading digital music streaming service that houses millions of songs and podcasts from artists around the globe. With its vast library of content, Spotify allows its users to listen to anything anywhere.
The Problem
The Spotify mobile app falls short in delivering personalized recommendations. It also fails to integrate existing social features and maintain consistency across the mobile and desktop versions, diminishing the overall user experience.
Our Solution
An app redesign that exhibits feature parity across platforms, collects additional input from users to deliver more personalized recommendations, and builds upon existing social aspects to foster a sense of community for music lovers.
Understand
Now Playing: User Research
Most streaming platforms offer little to no social features.
This makes Spotify unique in that it's partially a social media platform. Users can follow artists, see what friends are listening to, and create collaborative playlists. However, some social aspects available on desktop are missing on mobile.
Spotify is lacking in its music discovery.
Other platforms allow users to express their preferences, such as Pandora's "tired of this track" option and thumbs-up and down reactions. While Spotify does have a short onboarding process, users can't directly curate recommendations afterward.
Interviewing Spotify Users
We conducted 12 interviews to gain an understanding of Spotify's user base. Questions were structured around identifying likes and dislikes, listening preferences, and pain points while using the app. To organize our findings, we used affinity mapping and clustered answers into several themes:
How do Spotify users listen to music?
In our interviews, it was a common theme that users were dissatisfied with the mobile version in comparison to the desktop version. To further investigate this, we conducted secondary research on which devices people frequently use to listen to music. Here's what we found:
In a 2017 survey, 43.5% of users in the United States listened to music through their smartphone, while 36.6% listened through their laptop. In a 2019 worldwide study, 29% listen to music through a radio, while 27% listened through a phone.
We found this interesting - despite more people using their smartphone to listen to music over their laptop, users expressed more frustration with it! This highlighted the need for an app redesign.
Synthesize
Highlighting the Greatest Hits
Key Insights
Now that we had a clear understanding of users' habits and frustrations, we narrowed our findings down to three key insights that we planned to address in our redesign:
Personalized Recommendations
People find Spotify’s music recommendations to be inconsistent, resulting in them gravitating toward their own playlists rather than Spotify’s recommended playlists.
Social Aspects
While the social aspect of Spotify may not rank as the highest priority for users, social features are still valued and appreciated.
Consistency Across Platforms
People seek a uniform and consistent experience between the Spotify mobile app and desktop version, primarily in the form of feature parity.
Meet Nancy & Beatrice
Using the insights derived from our interviews and competitive analysis, we created user personas that reflected real Spotify listeners' needs and pain points. We also outlined journey maps that these users would follow, leading to “how might we" questions that arose at different stages of their experiences.
Our persona “Niche Nancy" reflects users who have issues with Spotify's recommendations and how the app is organized.
Meanwhile, “Busy Beatrice" reflects users who are dissatisfied with the mobile app and wish to see more social features.
Ideate
Freestyling Features
Low-Fidelity Sketches
We started with rough sketches to communicate our initial ideas for the redesign. Each of us took two of Spotify's four main areas—home, search, library, and profile—and combined our ideas to determine which new features we should carry into mid-fis.
Information Architecture
At this stage, it was time to make a big decision: a separate profile tab on the navigation bar. Based on input that users value social features and the profile is hidden from direct view, we believed this would be a beneficial change. We also made small additions like a calendar, the friend activity page missing on mobile, and visible privacy toggles.
Mid-Fidelity Wireframes
We each focused on a different part of Spotify's mobile experience, covering onboarding and the four navigation tabs. I was tasked with redesigning the home page, and our group periodically met to discuss the changes we made and ask for feedback. By the end of this process, we executed our own and our team members' ideas for improvement.
Test
The Live Audience Reaction
A Round of User Testing
Before we moved on to hi-fis, we wanted to get feedback on what was working and what wasn't so that we could make an improved final product. So, we prototyped a few key interactions and conducted 8 user tests. Here's what we found:
Users appreciated many of the new features we added.
People expressed that they liked the addition of friend activity and notifications, better organization in the library, heart icons used for favorited categories, and other features.
Some users had concerns about excess information on the profile.
It was a common sentiment that Spotify Wrapped being yearly is what makes it special and builds anticipation. People didn't want to see too much information from their Wrapped, though they appreciated seeing other statistics.
Some users had trouble with small text and touch targets.
We took note of where users struggled and planned to remediate this in our final design.
Prototype
From Rough Cut to Final Mix
High-Fidelity Prototypes
Without further ado, here's our final Spotify redesign with high-fidelity prototypes!
ONBOARDING
Genre Selections
In addition to choosing favorite artists, selecting favorite genres of music and podcasts will allow for more accurate recommendations.
When Do You Listen to Music?
Collecting information about when users listen to music will allow Spotify to recommend helpful playlists for sleeping, studying, etc.
Progress Bar
Users can see their progress during onboarding. Once they've chosen music, they can choose podcasts or click "done". Opting to select podcasts will slightly push them back in the progress bar to reflect this.
Skip Button
If users feel that onboarding is slow or unnecessary, they can skip any part. If they aren't interested in podcasts, the podcasts section can be skipped altogether.
Home
Picked For You
Spotify will recommend three songs that can be refreshed. This is placed after recent playlists since we found that users gravitate toward them.
Revamped Podcast View
Instead of one podcast's most recent episode filling the entire screen, users can see multiple podcasts with a description of the overall podcast. The ability to play the most recent episode is maintained.
Following & Friend Activity
We added a following tab where users can see notifications such as new followers, likes on their playlists, and collaborative playlist invitations. A friend activity tab was also created for users to see what their friends are listening to, formatted consistently with the desktop version.
Reorganized Listening History
To reduce vertical scrolling, listening history is condensed to three songs per day and a "see all" option. We also implemented a calendar for users to easily jump to a specific date instead of spending time searching.
Search
Category Toggles
Instead of displaying all genres with no organization, genres are categorized and can be expanded and minimized. This lets users hide categories they're uninterested in and spend less time scrolling.
Favorites Category
A pinned favorites category was implemented for users to easily access their favorite genres. This allows users to personalize the search page.
You Might Like
Below the recent searches section, Spotify will recommend searches based on users' search and listening history.
Albums/Songs You Liked
Once a genre is clicked, users can see albums and songs they've liked in that genre. Since we found that users typically go to their own music over recommendations, we placed them above recommendations.
Library
Improved Organization
Instead of cluttering all content types together and having to filter them, the library is sorted by default. The top four playlists/albums/artists are shown with a "see all" option, allowing ease in navigating a large library.
Compact View
To maintain consistency with the desktop version, we added a compact view where only the titles are shown with no accompanying visuals.
Reordering Content
We added an edit menu to reorder content in the library, yet another feature missing on the Spotify mobile version. Users can easily personalize their library and push favorites to the top.
New Folder Covers
Based on input that users would like to customize the default manila folder covers, users can select images to be folder covers. They have an added layer effect to visually differentiate them from playlist covers.
Profile
Top Songs & Artists
Similar to the desktop version, users can display top songs and artists on their profiles. This gives users easy access to their current favorites.
Wrapped Playlists
Since Spotify Wrapped is a widely appreciated feature, users can display Wrapped playlists from previous years on their profiles. However, other statistics aren't shown to maintain novelty and excitement.
Privacy Toggles
If users wish to hide their top songs/artists or their Wrapped playlists, they may easily switch them off directly from the profile. Compared to going to the settings page, this has higher visibility and fewer steps.
New Following Features
We added a search option to the followers & following tabs to minimize time searching large lists. In addition, when users go to their friends' profiles, they may see what they're listening to if the feature is enabled.
Reflection
Outro Track: Takeaways
Reflecting on a Wonderful Experience
This was my first time working on a team UX project, and I greatly enjoyed it! I got to work with some talented designers, and the feedback from my team members helped me grow as a designer and create a collaborative, cohesive product. I also gained experience presenting my work and using research to explain my design decisions to the supportive community of Design Innovation Illinois. Though it was intimidating, the kind comments my team received made me proud of the work we accomplished.
I'm also an avid user of Spotify, and completing this project made me think about the app—faults and all—from an entirely new perspective. I learned what it meant to design with the overall user base's needs in mind and not simply base my decisions on what I want to see in the app. When I was stuck, consulting my team always provided me with new ideas and approaches to improving Spotify's user experience.
Next Steps
As this project had a limited time scope, we didn't get a chance to conduct a second round of user testing. If we had more time, our next step would be to get further feedback on our hi-fis and evaluate which decisions were useful and which ones need to be improved. Then, we would iterate once again to make a refined final product.