Blue TV Smart TV

Design System

Context

Blue TV is a multi-platform entertainment ecosystem available on set-top boxes, web, iOS/Android, Apple TV, and Smart TVs. The Smart TV platform initially shared its design system with the set-top box. However, the two platforms differ significantly in their technical environments and interaction patterns:

  • The set-top box used a dedicated remote controller with custom buttons.

  • Smart TVs rely on diverse remotes depending on the brand, each with different layouts and navigation patterns.

Role

Role

UI & Interaction Desiger

Trainee

Tool

Tool

Figma

Timeline

Timeline

3 months

Team

Team

Worked with the Lead Product Designer and developers(OTT).

Industry Context

Industry Context

Consumer SaaS platform for streaming (TV & on-demand content, sports)

Challenge

The existing design system was not fully optimized for Smart TVs. It was based on a 10/5 grid system, which often led to impractical values such as half-pixel paddings (e.g., 12.5px). This caused inconsistencies and handover issues with developers.

At the same time, the shared components — icons, buttons, typography, and more complex modules like playbars and navigation — required rebuilding for a Smart TV context, ensuring usability with a wide variety of remotes and screen sizes.

Progress bar versions

Adapted buttons and new ui items

Approach

a. Rebuilding the Design System

  • Transitioned from an inconsistent 10/5 grid to a unified 8pt grid system.

  • Rebuilt core UI elements from the ground up: icons, buttons, typography, dropdowns, flyouts.

  • Created guidelines for spacing, alignment, and sizing to simplify developer handoff.

b. Optimizing Complex Components

  • Redesigned advanced UI modules, including the playback bar, sports navigation, and progress bars.

  • Ensured usability for Smart TV remotes with directional input, focusing on scroll behavior, navigation logic, and micro-interactions.

  • Adjusted and refined modules like the information line to fit the Smart TV context.

c. Collaboration & Handoff

  • Paired closely with developers to test spacing, behavior, and grid logic.

  • Validated designs with stakeholders to ensure consistency across platforms while respecting Smart TV-specific constraints.

Scrolling behavior of the main screen

Outcome & Impact

  • Established a scalable design system tailored for Smart TV, built on a solid 8pt grid.

  • Improved developer handoff by eliminating inconsistent spacing values.

  • Delivered consistent, optimized UI components that ensured usability across diverse Smart TV remotes.

  • Enhanced key user experiences, from sports highlights navigation to playback interactions, creating a smoother entertainment experience.

Lessons Learned

  • Even small structural decisions (like the grid system) have a huge impact on scalability and developer collaboration.

  • Designing for Smart TV requires balancing consistency with other platforms and usability with diverse remote controls.

  • Micro-interactions and navigation behaviors are critical to perceived usability in TV environments.