top of page

Seamless Streaming Across
All TV Platforms

Designing a TV interface for a multinational news platform across multiple platforms—Apple TV, Roku TV, and Android TV
Project type: tvOS UX/UI for AppleTV, Roku TV, Android TV
Role : UX/UI Team Lead
Domain : Media and Entertainment
Client : Channel News Asia
CN-BANNER.webp
banner image

This Project was a complex challenge requiring adherence to platform-specific design guidelines. The goal was to ensure a seamless, accessible, and user-friendly experience optimized for sofa-distance viewing.

As the UI/UX Team Lead, I managed the design strategy, usability research, and interface development, ensuring a cohesive visual identity and intuitive navigation across 100+ screens, all while optimizing for diverse screen sizes, interactions, and platform constraints.

tv mock.png
Challenges:

  1.  Designing for Multiple TV Platforms – Each platform (Apple TV, Roku TV, Android TV) has unique guidelines for UI layout, interactions, padding, and navigation.

  2. Optimizing for Sofa-Distance Viewing – Ensuring readability and accessibility from a typical TV viewing distance with clear typography, colors, and navigation elements.

  3. Creating a Consistent Yet Adaptive UI – Maintaining brand identity across platforms while adhering to platform-specific constraints.

  4. Designing 100+ Screens for Various Scenarios – Covering diverse user journeys, including live news, video-on-demand, settings, search, and more.

  5. Simplifying Navigation for Remote Control Interaction – Designing intuitive D-pad navigation, focus states, and clear visual hierarchy to reduce cognitive load.

CNA-Design Mock.png
CNA- DS.png
Objectives:
✦ Create a platform-agnostic yet adaptable design system to  maintain UI consistency across Apple TV, Roku TV, and Android TV.

✦ Ensure a seamless and accessible experience for users interacting from a sofa-distance using a remote control.

✦ Optimize navigation flows to make browsing intuitive with smooth D-pad navigation, focus states, and clear visual hierarchy.

✦ Develop reusable design components for a scalable, flexible UI architecture that supports future expansion.
design-img-3.png
desing-img-1.png
Research & Strategy
✦ Studied Apple TV, Roku TV, and Android TV guidelines to understand their navigation patterns, UI layouts, safe zones, and interaction models.
✦ Identified common UX patterns across all platforms to ensure a cohesive experience without compromising platform-specific optimizations.
✦ Conducted competitive analysis of leading TV-based news platforms to identify industry best practices.
Design System & Component Library
To ensure efficiency and consistency, I developed a well-defined, scalable design system with:
✦ Reusable UI components – Buttons, cards, grids, focus states, and overlays optimized for TV screen sizes.
✦ Typography & Color System – Ensured high contrast and large fonts for better readability from a distance.
✦ Focus & Selection Indicators – Created a standardized focus management system with clear hover state and active states.
✦ Modular Layouts – Designed flexible grid structures( different Ratios like 1:1, 16:9 etc) to accommodate different content types while maintaining usability.
desing-img-3.png
design-img-4.png
This component-based approach significantly streamlined the design-to-development handoff, ensuring fast iterations and scalability.
cna1 1.png
design-img-2.png
UI Design

  • Designed a clean, structured UI with a clear content hierarchy for quick access to live news, trending headlines, and personalized recommendations.

  • Implemented subtle micro-interactions to enhance engagement while maintaining performance efficiency.

  • Used color-coded sections to differentiate content categories for an intuitive browsing experience.

  • Designed a dynamic content layout to support varying video formats, breaking news, and live streams.

  • A Scalable, Multi-Platform TV Experience – Successfully designed an interface that adapts seamlessly across Apple TV, Roku TV, and Android TV.

  • Sofa-Distance Optimized UX – Achieved optimal readability, contrast, and easy navigation from a typical TV viewing distance.

  • Defined & Reusable Design System – Created a comprehensive design system with reusable components, reducing design and development efforts for future iterations.

  • 100+ Screens Designed & Implemented – Covered all user scenarios, from live news streaming to personalized content discovery.

bottom of page