Spotify Mobile App | UX Redesign
What’s in queue?
Spotify is a music, podcast, and audio book streaming service available on mobile, tablet, and desktop. As the current industry leader, Spotify prides itself on its ability to constantly expand its feature set through focusing its efforts on innovation and personalization. But what if there was a way to make the Spotify experience better for users?
Background
This project was assigned to me in my Marketing class during my final undergraduate semester at Georgia Tech. Although there were several components of this project, this page will focus solely on the Mobile UX Redesign element.
My role: UX Designer
Time frame: 5 months
Tools: Figma, LunaPic, Canva, Qualtrics
Problem and Task
Spotify is constantly innovating their platform through adding new features. However, adding new features can cause the design to take a hit since every feature needs its own space. Through user research, there was a trend of survey respondents noting that although they enjoyed the personalization elements and the new features that Spotify added, the mobile app feels a bit crowded. So, how can Spotify’s mobile app be redesigned for a less clustered feel while keeping all of the new features?
The task at hand was to create a mobile app design that makes the Spotify mobile experience easier to navigate, create a cleaner overall feel, maintain personalization, and keep all of Spotify’s new features.
Customer/User
All Spotify users
Users of other audio streaming platforms that Spotify could attract to their platform
Potential customers that do not currently subscribe to an audio streaming service
Addressing the Need
The need is for the mobile layout of Spotify to look cleaner and feel more organized. This design addresses the need through creating a layout that is more spaced out with larger elements for simple navigation. Additionally, this reduces the risk of misclicking and also adds an extra layer of personalization through allowing users to pin whatever they want on their home screen.
Validating Assumptions
To validate any assumptions, I began by conducting research. Using Qualtrics surveying, I surveyed ~200 people of various ages, but mainly within the target demographic: Gen Z. According to Gitnux Market Data Report 2024, 55% of Spotify users are Gen Z. Additional research revealed that ages 16 through 34 were the primary users of music streaming services (not limited to only Spotify).
Receiving feedback from users of competitor streaming services was helpful to get an idea of the likes and dislikes of the other platforms. I was able to take this feedback into consideration when designing my designs.
The Qualtrics survey results indicated a need for a cleaner mobile design. Once I created mock-up designs, I continuously consulted with members of the target demographic to receive feedback on the redesign.
Current Spotify Landing Page—Seems to have a lot going on visually, easy to mis-click
Design Process
Understand
Current Positioning and Interview Insights
Spotify is currently the industry leader for audio streaming services, having the largest market share worldwide (including market share by subscribers). The first pie chart is from the survey research conducted through Qualtrics, while the second pie chart and bullet points have the sources listed beneath them. Regarding the mobile redesign- the most important takeaway from the presented data is that users stream primarily on their mobile devices, making it exceedingly important for the mobile experience to be as user friendly as possible.
Key metrics
56% of Spotify users are Female
35% of users use Spotify during workouts
55% of Spotify users are Gen z and Millennials
The Spotify user base is located primarily in the United States (114 million)
Direct quotes from Qualtrics Survey when asked:
“What can Spotify improve on?”
“a simpler mobile design would look a bit cleaner i think”
— Spotify User 2
“Ux interface on mobile”
— Spotify User 1
“mobile interface is cramped”
— Spotify User 3
“i actually used to have spotify but switched to apple music because i preferred the simplicity of it”
— Apple Music User 1
“when i open the app there is a lot on the homepage”
— Spotify User 4
“I feel like the user interface could definitely be improved/simplified”
— Spotify User 5
“i prefer apple music because of the price and organization. i’ve used spotify in the past and did not love the layout”
— Apple Music User 2
“there is too much going on with the app on mobile”
— Spotify User 6
POV
User Persona
Before jumping into the redesign, it’s important to understand who the customer is, along with their desires, frustrations, and other components of their mindset. On the right I’ve created a User Persona of someone within the target audience that uses Spotify based on my data and research. From the insights collected, a “common” user uses Spotify to stream primarily podcasts and music, while working out, and while on the go. I tried to reflect all of these elements when designing this User Persona.
Ideation
Task Flows
Using Nadine’s User Persona, I designed a task flow diagram based on her potential interactions with the app. This gave me an idea of the steps a user might take to complete a task and which screens I would need to design for effective task completion.
Goal: Easily access the content you want as quickly as possible
User Story: As someone that is always on-the-go, I want to be able to easily access my favorite playlists and podcasts regularly. Sometimes my preferences change, but I typically stick to my usuals.
Core Features:
New feature that allows a user to customize their Home Screen
Pin feature makes it easier to find what users are looking for
Decreases time spent searching for what you want
Fewer elements on screen can prevent mis-clicks
Mock-Ups
Bringing the Design to Life
In this section you will see a screenshot of the current Home Screen alongside a demo video of the Home Screen Redesign that I created on Figma. If you click on the redesign, a short video will play walking you through the customizable home screen feature that I implemented.
The “pin” icon represents the pin feature. When you click on it, you will notice that all of the icons begin to shake (which symbolizes the ability to move or delete an element on mobile).
Highlights of Redesign:
More personalization through having the ability to pin what you want to your Home Screen
Less cluttered layout allows users to find what they need easily and avoid mis-clicks
New layout feels more organized and gives interface a cleaner overall feel
Home Screen Redesign & Demo
User Testing
User Feedback & Test Results
My mock-up design was one of the project elements presented to my class. Additionally, a Focus Group was conducted to receive direct feedback on the mobile redesign. For the Class Feedback document, I highlighted the UX-specific feedback since some of the feedback in the document pertains to other components of the project.
Document 1: Class Feedback
Document 2: Focus Group Notes
Thanks for tuning into this project!
Want to see more of my work? Click the button below!