Project Overview
This Spotify redesign focuses on simplifying navigation, enhancing discovery, and increasing personalization. Through user research, I identified pain points in the current interface and created a solution that reduces clicks while maintaining the familiar Spotify experience.
Timeline
3 weeks
My Role
UX Research, UI Design, Prototyping
Tools Used
Figma, Google Forms
The Challenge that was found
Spotify's homepage lacks personal relevance and social discovery, making it harder for users to connect with their music.
The Process
1. Research
I conducted user interviews with 12 active Spotify users, ranging from casual to more frequent users. I asked questions about their most frequent use cases and pain points.
2. Information Architecture
I restructured the navigation and content hierarchy to prioritize frequently used features and reduce the cognitive load.
3. Wireframing & Design
I explored multiple navigation patterns before settling on a streamlined approach that maintained Spotify's iconic look while improving usability. The high-fidelity designs preserved the dark theme but enhanced readability and touch targets.
4. Testing & Iteration
Prototype testing with 4 users revealed significantly higher satisfaction scores. I made final refinements based on user feedback before delivering the final design.
Desktop Comparison
Original Desktop Interface
The original Spotify interface had several usability issues that needed addressing.
Issue Breakdown:
Lack of Personalization
The "Playing" footer has no personality, the only dynamic change is the album cover photo on the left side. The left section only shows your library, which is wasted space since users only repeat 3-5 playlists anyway.
Missing frequent use cases
Theres no option to have a lyric overlay, there are no options to browse by the user's top artists, and the social networking features are nonexistent
Visual Hierarchy and Spacing
Poor contrast and visual hierarchy made it difficult to scan the interface quickly and locate important elements
Redesigned Desktop Interface
My redesigned interface addresses these issues while maintaining Spotify's visual identity.
Improvements Breakdown:
Personalized to the user
The additions of top artists, custom play bar, and trending with friends section makes the home page much more personal (and thus more useful) to the user
Wider array of use cases
The lyrics overlay, top artists, and trending with friends section adds purpose to the home page. User don't have to dig to find popular features
Improved Readability
Enhanced contrast and spacing for better content scanning, with clearer visual hierarchy to guide users through the interface.
Mobile Comparison
Original Mobile Interface
The mobile interface suffered from similar navigation issues as the desktop version. As well as the UI being unoptimized for the most popularuse cases.
Issue Breakdown:
Inefficient Search
Searching required multiple taps and was difficult to access quickly. Doesn't make sense for the most popular use case.
Use Cases and Personality
Sections like concerts are not a priority for the user, the space is much better used for more popular features. The play bar is also not personalized to the user via the current song.
Redesigned Mobile Interface
The redesigned mobile interface provides a more intuitive, useful, and personalized experience.
Improvements Breakdown:
One-Tap Search
Prominent search bar accessible from the homepage with recent searches displayed immediately.
UI Gives Identity
The UI gives the user a sense of identity, when using the app. The background is lighter, and the play bar changes with the song being played.
Results & Impact
The redesigned Spotify interface delivered significant improvements:
Millions
Of clicks/taps saved a day
100%
Imrpovement in satisfaction rate
3
New and popular use cases accessible from the home page
Key Learnings
This project reinforced several key UX principles:
- Small UI improvements can lead to significant usability gains
- Maintaining brand identity while giving the user a sense of personality requires a balance
- Choosing the top use cases to include in limited space is crucial