Spotify Homepage
This case study was a collaborative effort between a team of designers as part of one of our User Research modules. Our project focused on addressing the limitations of the Spotify homepage by enhancing user experience through customization and personalization options.​
​
To achieve this, we proposed a new feature that empowers users to control their homepage by editing and customizing the order of queue sections, dismissing unwanted sections, and adding new sections based on their interests. Additionally, we introduced a smart sorting button for various arrangement options, leveraging intelligent technology to prioritize relevant content and provide a curated music streaming experience tailored to individual user preferences.
Note: Spotify app version v8.7.62.409 (iOS), v8.7.62.398 (Android) was used.
Roles
Researcher
High-fidelity designer
Tools
Figma
Google Forms
Problem
Users often found the homepage sections of the app to be irrelevant to their tastes and preferences, with content that changed unpredictably each time they opened the application. The lack of control over the homepage experience, driven solely by a smart algorithm, resulted in recommendations that failed to meet users’ needs. As a result, many users engaged infrequently with the homepage, leading to a poorer user experience and lower engagement.
Discovery
We began by listing the aspects of the Spotify app that we liked and disliked. This helped us identify key strengths to build upon and areas that needed improvement, guiding the direction for our design process.
User Research
We conducted surveys using Google Forms, collecting around 70 responses from both frequent and infrequent Spotify users, as well as users with free and premium plans, through Instagram and our friends. This provided valuable insights into how users interact with the Spotify homepage, helping us better understand their needs and pain points.
Based on the responses we collected, we identified key positive aspects and pain points, categorizing them into two distinct groups. This analysis will help guide our next steps and inform the direction of our design process.
Define
User Persona
We mapped out the frustrations experienced by users and categorized them based on their relationships to one another.
This approach provided a deeper understanding of the underlying issues and allowed us to prioritize solutions more effectively.
User Journey Map
We mapped out each stage of Le Xuan journey, from opening the app to the final action of finding a playlist that suits her mood. By tracking her emotions and interactions at each touchpoint, we identified moments of delight as well as pain points that caused frustration or confusion. This helped us understand the user’s needs, preferences, and challenges, providing valuable insights
Prototype
Low Fidelity Prototype
Based on the feedbacks given, We created a low fidelity prototype using a pen and paper for easy iterations and changes.
​
​Since we weren't redesigning the entire Spotify app, we kept the existing interface intact and focused on adding new features. This approach ensured that users wouldn’t need to relearn how to use the app, making the transition smoother and enhancing the overall user experience without disrupting their familiarity with the app.
User Testing 1
The purpose of testing the low-fidelity paper prototype was to gather insights into how users would complete tasks such as
-
organizing/sorting the homepage
-
removing a section
-
adding a section.
​
We conducted the test with 6 participants - 3 frequent Spotify users and 3 infrequent users—to capture a range of user experiences. Additionally, we performed A/B testing to compare different design approaches and determine which option best met user needs and expectations.
Positives
Most playtesters preferred Prototype A over B during A/B testing, finding it more intuitive and effective than Spotify's original homepage. They felt the changes improved the overall user experience.
Pain Points
-
Some participants missed the icon that triggers the "Organize Sections" page, suggesting a need for clearer visual cues. A few users also recommended adopting UI patterns from apps like YouTube to make editing and dismissing items easier in long lists.
​
-
Additionally, the tick icon on the "Add Section" page confused users, with some mistakenly tapping it again after a section was added.
Mid Fidelity Prototype
The mid-fidelity prototype was developed based on the feedback from User Testing 1, addressing the pain points identified by participants. We refined the design to improve usability, making key elements like iconography and text clearer, and ensuring the user flow was more intuitive and consistent.
User Testing 2
The goal of testing the mid-fidelity paper prototype was to evaluate whether users could intuitively understand the iconography and text for the buttons, and successfully complete tasks such as
-
rearranging sections
-
removing a section
-
adding a section from a list.
All 6 participants had previously tested the low-fidelity prototype, so they were familiar with the concept and had expectations for the second version.
Positives
The changes made were positively received and most playtesters found the homepage more interactive and responsive.
Pain Points
-
Some users found the new buttons rather small and hard to spot.
​
-
Some users thought that the extra confirmation screen for the “Add Section” page was repetitive and unnecessary.
Mid Fidelity Prototype (Digital)
Our mid-fidelity prototype was based on the paper prototype. The main goal was to get a feel for how the layout and experience feels in a digital format.
User Testing 3
For this testing session, our primary goal was to gather deeper insights into users' experiences and emotional responses while navigating the mid-fidelity prototype. We focused on identifying specific areas for improvement by asking open-ended questions about the usability of the design. We also addressed concerns about the consistency and clarity of icons, as well as font sizing, by including targeted questions on these aspects.
Additionally, we asked participants to share any other issues they encountered during testing to ensure we captured all potential areas for refinement.
Positives
-
The majority of users approved of the updated screen layouts in our prototype
​
-
The users found the proposed changes more intuitive when presented in a digital prototype
​
-
Users were receptive to the idea of being able to customise their homepage
Pain Points
-
Some users complained about the screen transitions, claiming that they felt uncanny or unnatural
​
-
Some of the text was too small for certain users​
High Fidelity Prototype
After analyzing user feedback, we made minor adjustments to elements like font size and screen transitions. We then enhanced the mid-fidelity prototype by adding color, text, and images to bring the final design to life.
Key changes made
Edit Homepage Button – Personalized User Control
Change: Added a new "Edit Homepage" button, allowing users to customize their homepage experience.
​
Reason: Previously, users had little to no control over how their homepage was structured
​
Impact: Gives users control over their homepage, creating a more tailored experience
Organize Sections –
Customizable Layout
Change: Added an "Organize Sections" page where users can reorder homepage sections to match their preferences.
​
Reason: The fixed homepage layout made navigation inefficient, as users couldn’t prioritize the sections they engage with most.
​
Impact: Enhances usability by giving users control over content organization, improving navigation and accessibility.
Add Sections –
Expanded Personalization
Change: Introduced an "Add Sections" feature, allowing users to include new content categories based on their interests.
​
Reason: Users wanted more flexibility to discover and access content that aligns with their preferences rather than relying solely on pre-set sections.
​
Impact: Increases content discoverability and engagement by enabling users to curate their homepage to reflect their listening habits.
Conclusion
In conclusion, it revealed that our proposed solution was well-received by the majority of users.
The feedback indicated that the redesigned homepage would make Spotify feel more personalized, catering to individual user preferences. Users appreciated the improvements, noting that the changes would likely encourage more frequent engagement with the app, as users would feel more motivated to explore new music tailored to their tastes.
Things to improve
To further enhance the user experience, future testing should involve a broader and more diverse audience, including older users and those with disabilities. This would provide a more comprehensive understanding of potential pain points across different user groups. Additionally, as personalization features are integrated, it's essential to optimize the app’s performance to prevent slow load times, particularly when users are customizing their homepage.