Design viewport dedup for Netflix home page
Overview
This question evaluates system-design and algorithmic competencies related to personalized content selection, deduplication, constraint enforcement (editorial pins, maturity/region), data modeling, latency budgeting, caching, progressive loading, conflict resolution/backfill, and experiment-driven measurement for an initial streaming-service viewport. It is commonly asked to assess an engineer's ability to balance architectural trade-offs between server- and client-side rendering while maximizing relevance under multiple constraints; the domain is System Design and the level of abstraction spans both high-level conceptual reasoning and practical application-level design details.
Design the Above-the-Fold Deduplicated Home Page Rendering
Context
You are designing the initial viewport ("above the fold") of a streaming service home page (e.g., Netflix). The first screen should show several horizontal rows of cells. Each cell displays a unique title. No duplicates are allowed within a row or across rows in the first screen.
Requirements
- Deduplicate titles across all cells in the first screen and within each row.
- Respect row themes, editorial pins, maturity/region constraints, and personalization.
- Maximize user relevance/engagement for the first screen.
- Provide an algorithm for selection/placement with conflict resolution and backfill.
- Define a latency budget and discuss client-side vs server-side rendering.
- Describe data modeling for rows and candidate items, personalization inputs, and constraints.
- Explain handling of partial data, caching, progressive loading (as the user scrolls), and impact measurement.
Assumptions (for concreteness)
- Initial viewport shows R rows, each with K_r visible cells (e.g., 3 rows × 6 cells on desktop; 2 × 3 on mobile).
- You have per-user, per-row candidate lists with relevance scores available at request time.
- Editorial pins can lock specific items into fixed positions.
Deliverables
- Data model for rows and candidate items, including personalization inputs and constraints.
- Algorithm to select and place items that maximizes relevance subject to deduplication and constraints, with conflict resolution and backfill.
- Latency budget and deployment approach (client vs server).
- Handling of partial data, caching strategy, and incremental loading as the user scrolls.
- Experimentation plan and success metrics.
Solution
Login required