15Case study / Product
My Netflix
Netflix’s “My List”, redesigned as one “My Netflix” hub across mobile and desktop, with quicker access to what you last watched and a flexible filter system.
Introduction
Netflix’s “My List”, redesigned as one “My Netflix” across mobile and desktop.
The aim: a unified, cohesive experience. Netflix’s “My List” had disparities between mobile and desktop, and the focus on resolving them led to the concept of “My Netflix”, across all platforms.
“My Netflix” was a concept, built up into another project that can’t be named.
My Role
I took “My Netflix” from the idea to the final design:
- Conception“My Netflix”: one centralised hub, across all platforms.
- ResearchInsights from user studies, heuristic evaluations, and secondary research.
- UX designA user flow in Miro, to find the pain points and choose the MVP.
- UI designWireframes in Figma, then the high-fidelity design.
Where It Started
The mobile app and the desktop “My List” didn’t match. Resolving the disparities between them was the focus.
The mobile app, at the time
The desktop “My List”, at the time
Design Process: Agile and Iterative
Ten stages, worked in a loop and guided by insights from user studies, heuristic evaluations, and comprehensive secondary research:
- 01
Discovery phase
The focus: disparities between mobile and desktop.
- 02
Secondary research
Industry trends, Netflix updates, and user behaviour studies.
- 03
User insights
Last-viewed content, customisation, and navigation.
- 04
Problem definition
A unified design, and quick filtering.
- 05
Solution
“My Netflix”: one centralised hub.
- 06
Information architecture
Content organisation and navigation, for lists that keep growing.
- 07
Responsive integration
Flexibility and fluid grids, across screen sizes.
- 08
Wireframes
Low fidelity, in Figma.
- 09
High-fidelity design
In Netflix’s brand language.
- 10
Prototype
The final design, made interactive.
Research
In-depth exploration of industry trends, Netflix updates, and user behaviour studies showed the need for a more user-centric approach.
It laid the groundwork for a design that transcends borders, for diverse user needs around the world. Understanding users’ preferences and challenges was pivotal:
Last viewed
A common desire: quicker access to their last-viewed content.
“My List”
Users valued its convenience, but longed for enhanced customisation.
Navigation
As content lists expanded, navigating them grew more complex.
User Profile
Samantha
Content preferences: a daily user, with diverse tastes, seeking a seamless streaming experience.
Lost in content: she wants an efficient way to quickly find and watch what she last viewed, without getting lost in an expanding list.
The Problem
- Unified design
- Users sought one design across mobile and desktop, prioritising recognition over recall, for a more intuitive experience.
- Filter quickly
- Users wanted swift access to their media: content filtering needed robust customisation.
The Solution
The redesign set out to address these challenges with responsive design principles, better navigation, system status visibility, and content organisation, for a user-friendly, efficient streaming journey.
The conceptual shift: “My Netflix”, introduced to unify the user experience. It turns the feature into a centralised hub, to elevate its place in users’ viewing experiences.
The name
Before“My List”After“My Netflix”
The platforms
BeforeTwo designsAfterOne unified design
The feature
BeforeA listAfterA centralised hub
How Might We Statements
01Organisation
How might we
enhance content organisation within “My List”, to cater to diverse user preferences?
02Navigation
How might we
streamline navigation as users’ content lists expand over time?
03Last viewed
How might we
facilitate swift access to a user’s last-viewed content, minimising search efforts?
User Flow
A detailed user flow, made in Miro, found the pain points in Samantha’s journey within “My Netflix”, and the opportunities to improve it. It also guided the choice and design of a minimum viable product (MVP).
01Filter or search “My List”
- My List entry
- My List
- Select filters/search items
- My List filtered media
- Finish
02Media about to expire
- My List entry
- My List
- Notification on expiring media
- Interact with notificationExit or Ignore also lead to Finish
- Finish
Wireframes
Low-fidelity wireframes in Figma kept the design adaptable across devices, in line with responsive design principles. Iterative loops with user insights refined it for each interface.
Responsive design, simplified:
Flexibility
A consistent user experience, across screen sizes.
Fluid grids
Grids that adjust to each screen size, keeping layouts pixel-perfect.
Wireframe: Greyscale mobile wireframe of My Netflix: a Last Viewed banner, the four tabs, genre filter chips, and a two-item carousel of placeholders. Design: High-fidelity My Netflix mobile screen: a Castlevania Last Viewed banner, tabs, genre filters, and a carousel of Dorohedoro, marked New Season, and One Piece, marked Leaving Netflix Soon!.
The Final Design
The final design kept to Netflix’s brand language, with responsive carousels and a flexible filter system. A fluid grid keeps the layout consistent and responsive.
Read the design
- “My Netflix”“My List”, now “My Netflix”, in the main navigation.
- Last viewedYour last-viewed title leads the page, with Resume: the quicker access users wanted.
- Content, organisedTabs for Continue Watching, You Might Like, Watched Trailers, and Recently Watched.
- Filter by genreA flexible filter system, for swift access to your media.
- Status at a glanceBadges flag what’s recently added, and what’s leaving Netflix soon.
- Responsive carouselsFour titles across on desktop, two on mobile.
Wrap Up
“My Netflix” shows a commitment to user-centric design. The original “My List” lacked a unified experience, and its limited filtering options held back customisation. The redesign addresses both, focused on better navigation and content organisation.