Product
Video Tiles
A comprehensive modernization of Hulu’s core browsing interface, establishing scalable set styles, cohesive color systems, and responsive layout mechanics across Web, TV, and Mobile
Project Details
Role
Lead Web Product Designer
Platform
Web, Living Room TV, iOS & Android Mobile, Tablet
Timeframe
Multi-Month Initiative
Key Partners
Design Systems, Product Management, Front-End Web Engineering, Client Mobile/TV Leads
Problem
Static Info
Hulu’s legacy interface suffered from inconsistent set styles, outdated color hierarchies, and rigid visual layouts that struggled to scale across devices. Visual fatigue was high, and static content displays made it difficult for subscribers to quickly scan, evaluate, and engage with titles across different screen sizes.
Solution
I led the web design strategy and co-supported Living Room, Mobile, and Tablet platforms to completely overhaul Hulu’s visual and architectural foundations.
We redesigned the fundamental set styles (tile sets), standardized typography and color palettes, and established a responsive layout engine that brought modern visual clarity and seamless navigation to millions of subscribers.
Impact
Browse-to-Stream Conversion
Redesigned set styles and metadata hierarchy reduced decision time and drove higher-intent streams.
Deeper Row Exploration
Streamlined visual hierarchy encouraged subscribers to scroll deeper into secondary curated sets.
Unified Component System
Replaced legacy ad-hoc layouts with a single, tokenized component library adopted across Web, Living Room, and Mobile.
01 / CROSS-FUNCTIONAL ENGINEERING ALIGNMENT
Production-Ready Specs: Documented precise spacing rules, focus behavior algorithms, and tokenized styling guidelines to ensure seamless handoff with front-end engineering leads.
02 / TILE HIERARCHY & EMPHASIS LEVELS
Specs for Hulu Redesign
Standard Emphasis Tiles: Designed for core grid browsing, prioritizing quick title scanning and high-density content rows.
Medium & High Emphasis Tiles: Expanded horizontal canvases used for spotlighting marquee originals, featured hubs, and live events.
Fluid Grid Scaling: Mapped tile dimensions, aspect ratios, and padding rules across 1440px (Desktop), 1024px (Tablet Landscape), 768px (Tablet Portrait), and 480px (Mobile).
Focus & Hover States: Defined clear visual feedback loops—incorporating elevation shifts, border highlights, and subtle scale-ups optimized for cursor, touch, and remote navigation.
