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.
UI & Interaction Desiger
Trainee
Figma
3 months
Worked with the Lead Product Designer and developers(OTT).
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.