Enhancing Spotify and
Netflix's User Experience

Netflix and Spotify exceed a global audience of 240 million users, providing daily entertainment in exclusive TV shows and personalized music. Despite their widespread popularity, certain features pose challenges to locate within the platform, prompting some users to seek alternative options for a more user-friendly interface. How can we elevate the user experience to ensure effortless and intuitive daily use?

Skills
Rapid Prototyping
User Research
Visual Design
Interaction

Tools
Figma
Photoshop

Timeline
3 weeks

The Challenge

Redesign Netflix and Spotify's homepage screens with one additional page of choice (4 total) in a 3 week timeframe. How do we enhance the digital experience with their existing platform?

Solution

A simplistic approach that would make users easily navigate their favorite movies and music, while keeping the same brand identity that makes the interface easily recognizable.

Skip to

User Research

Personas

Wireframes

Visual Identity

Final Design

Explore the Full Story —

Observations

Original Websites

Spotify: The app generally opens to the home screen, displaying personalized playlists, recommended music based on listening habits, and recently played tracks. What I like about their website is that their playlist is stayed on the bottom of the page, giving it more room for other features appear on the page.

Netflix: Users are greeted with a homepage showcasing a personalized recommendation row based on their viewing history and preferences. 

Exploration

Competitive Analysis

During my discovery phase, I focused on Netflix and Spotify’s websites, competitors, and alternative branding. What I find intriguing is that Netflix seems to have the typical rectangular shape style for shows and movies. For Spotify, their competitor with Apple Music sticks with their branding by having a white background. To view more, click the figjam file here 

Quantitative Data

Google Form Survey

I created a survey on Google Forms to current Spotify and Netflix users. I first asked their age, pronouns, and occupation. Once that is filled, I ask questions related to the number of usage on the site, their opinions on the design and layout of the platform, and whether they should keep their current design or need improvements on.

Qualitative Data

Remote Usability Testing

After reviewing results from the survey, I was able to come up with more questions to ask two of my users for usability testing. They provide more detailed; accurate results for me to understand what problems I need to focus on. The rule that follows, I explained the purpose of usability testing and give them a prompt of what they should do in the website. The goal is to try and understand how current users find what they need and if it’s a good user experience.

Personas

Spotify

I've combined interview results that give similar answers to describe one character. Spotify's goals and challenges allows the me to identify refinements to its algorithms and curate playlists, suggesting music that aligns with the distinct tastes and moods of each individual.

Personas

Netflix

The Netflix website produces a wide range of original content, and my job is to identify the types of content that resonate most with specific user segments.

Wireframes

Low Fidelity: Multiple Iterations of the Product

I've explored different layout options of the websites by sketching them out to visualize the usability for the users.

Visual Identity

Components and Assets

To start prototying my final design, I organized my assets into sections to understand where things are in my figma file. 

Final Design

Original VS Redesigned Version

I've simplified the user interface, incorporated a scroll-down feature that smoothly navigates to the bottom of the page, and introduced unique features, such as the addition of a lyrics button alongside the playlist. Upon entering the Netflix homepage, the volume feature is automatically muted, show covers are displayed horizontally, and clicking on a cover allows users to navigate through the movie description instead of triggering auto-play.

Spotify

Netflix

Takeaways

Design Iterations, the ideal way

I was able to complete the final prototypes in three weeks, but if I were to have more time I would have done different iterations of the layout and done A/B testing of my own product.

While it is important to have many ideas, there needs considerations on how long each idea is going to take. There is no one right solution, but open to many possibilities and no fear of making mistakes.

Leading remote usability testing is more than being organized

As I was giving them instructions to perform each task, it was challenging for me to not state my opinon since I am just the observer. I may have my own opinions in figuring out improvements, but the goal is to understand my users needs and not just my own. 

It was more interesting to know that they both pointed out some issues that I never thought of myself.