🇯🇵 Creating the TV Experience on TVer! 5 Roadblocks and UI Design Strategies
🇯🇵 Japanese ver : here
I’m Wakako, a UI/UX designer at TVer from Japan.
Since April 2025, I’ve been in charge of cross-device UI design spanning smartphones, tablets, PCs, and CTV (Connected TV) for TVer’s product development, alongside graphic design for internal assets, event tools, and more.
What’s TVer?
TVer is Japan’s leading video-on-demand streaming service, jointly operated by the country’s major commercial television networks. It allows users to stream popular television dramas, variety shows, and anime for free immediately after their broadcast, serving tens of millions of monthly active users.
To learn more about the platform’s background and scale, check out the TVer or TVer Wikipedia page.
📺 Introduction
In recent years, video streaming consumption styles have shifted significantly.
Beyond the steady growth of smartphone viewing,
there has been a massive surge in “CTV (Connected TV)” usage,
where users enjoy video content on a large TV screen.
On TVer, CTV accounts for approximately 39% of total video views.
However, smartphone app UI design and TV UI design are completely different beasts.
In this post, I will share the “TV experience-specific roadblocks and strategies to overcome them” that I discovered through 4 years of CTV UI design and operations, alongside our initiatives to integrate this knowledge into the team.
I hope this serves as a helpful guide for designers venturing into CTV or anyone curious about what happens behind the scenes of UI design!
💭 What’s CTV?
First, let’s establish a baseline definition.
CTV is a collective term for television devices connected to the internet.
CTV includes the following categories:
📺 Smart TVs
TV sets equipped with built-in internet connectivity capabilities.
📺 Streaming Devices
Dongles/boxes like Fire TV Stick or Chromecast that add internet capabilities to regular TVs via an HDMI port.
📺 Gaming Consoles
Systems like PlayStation that connect to both the TV and the internet.
All of these devices fall under the scope of TVer’s CTV design efforts.
💡 “5 Roadblocks” Unique to CTV and Design Strategies
If you are accustomed to designing for smartphones or PCs,
you will run into numerous “roadblocks” during CTV development.
Here, I’ll introduce 5 critical roadblocks and the design solutions we implement to bypass them.
■ Roadblock 1
The Tedium of Remote Control Operations
On a smartphone, you can reach your destination instantly with a finger tap or swipe.
On a TV, however, you have to repeatedly click the remote’s D-pad to move the focus state box by box.
Imagine if a user had to press a remote button 20 or 30 times just to navigate from a landing screen to their desired show page.
They would likely give up halfway through…
To solve this roadblock, we deploy three main strategies:
1. Efficiency
To minimize remote control fatigue, we structure layouts so users can reach their destination with the fewest possible button presses.
Ensuring Browseability
We adjust thumbnail display densities to maximize the number of visible titles without requiring extensive scrolling.
Smart Initial Focus
When a page opens, instead of default-focusing on the top-left corner,
we place the initial focus on the item the user most likely wants to see.
For instance, on TVer’s series pages, the initial focus skips the top-left “Add to Favorites” button and lands directly on the “Latest Episode.”
Feature-Driven Solutions
We continuously improve features like autoplay previews, enhanced recommendations, and continuous playback.
These allow users to fulfill their goals smoothly without having to manually transition, scroll, or click the enter button.
2. Predictability
We ensure that users can anticipate exactly what will happen before they click a button or thumbnail.
Because navigating with a remote is tedious and CTV app performance can often feel sluggish, users are hesitant to “click around just to see what happens.”
To help them differentiate between “Direct Playback” and “Page Navigation,”
we use the following indicators
When clicking a thumbnail launches the player immediately
A “Play Icon” appears over the thumbnail when focused,
signaling that the video will start instantly.
When clicking a thumbnail navigates to a program page
The play icon is omitted, indicating that clicking will take them to a detailed program page.
3. Clarity
We intuitively convey where the focus is currently located and which directions are available for navigation.
Emphasizing Focus States
We create high contrast between normal and focused states.
In TVer, when a thumbnail is focused, it scales up by 1.
1x and receives a distinct blue border to enhance visibility.
Grid Alignments
Layouts are strictly structurally grounded in a “grid” format,
aligning items in clean horizontal rows or vertical columns.
Non-standard, erratic layouts make it unclear where the focus box will jump next when pressing “Right,” causing user confusion.
Keeping layouts predictable allows for relaxed, natural remote operations.
■ Roadblock 2: Extreme Color Discrepancies Between TV Models
This is perhaps our biggest headache.
The color reproduction and contrast levels vary drastically between high-end, expensive televisions and low-cost models (budget TVs).
On budget TVs, we frequently encounter issues like “pixelated white artifact borders around elements” or “dark blues turning completely purple.”
Design Strategy: Consistent Testing & Optimization Across High-End, Standard, and Budget TVs
Admittedly, it’s still a process of manual trial and error!
We repeatedly verify designs on physical,
real-world hardware to find a balanced sweet spot that looks acceptable across all TV tiers.
Adjusting Text and Background Contrast
For example, take the background gray color.
If we darken it because it looks washed out and too bright on a budget TV,
it can become so dark on a high-end OLED TV that the background element completely disappears.
We must carefully isolate the razor-thin line where critical information remains legible in both environments.
Get Wakako Manabe’s stories in your inbox
Join Medium for free to get updates from this writer.
Preserving Brand Image (Case Study: Paris Olympics Special Page)
Replicating brand colors is an uphill battle.
When applying the primary gold color for the Paris Olympics page,
we performed meticulous micro-adjustments while comparing high-end and budget displays side-by-side.
Instead of using the raw hex code directly,
we hunted for a specific shade that preserved the “impression of that specific gold” as accurately as possible on any screen.
■ Roadblock 3: Use from a Distance
While smartphones are operated right in front of one’s face,
a TV is viewed from an average distance of 3 meters (approx. 10 feet).
Even if typography looks perfect on a desktop monitor during production,
it’s incredibly common for text to be completely unreadable on an actual television screen.
🚩Design Strategy
Conveying Intent Without Relying on Text
Instead of forcing users to read fine print,
we design for immediate, intuitive comprehension by fine-tuning thumbnails, text sizes, and information density.
Leveraging Video Previews
We actively implement video preview autoplays so the content and tone of a program are communicated through audio and moving imagery alone, removing the need to read descriptions.
Designing Viewports (Information Detail Areas)
We place a large “Viewport” zone at the top of the screen to showcase details about the currently focused show.
While this area displays enlarged thumbnails and metadata,
real estate is finite. We spend significant energy curating exactly what text elements deserve to be displayed here.
■ Roadblock 4: The Need to Map Remote Control Button Behavior
Remotes come equipped with hardware buttons like “Back,” “Play/Pause,”
and “Home,” but their actual behaviors must be explicitly defined within the application codebase.
What happens when a user clicks “Back”?
What about the “Microphone” button?
We must establish strict, unified rules across the app to prevent user confusion.
🚩Design Strategy
Unifying Mapped Behaviors App-Wide
Prioritizing ease of operation, we assign clear roles to physical remote buttons to reduce physical effort.
(Though, to be honest, completely standardizing this across every single OS platform remains an ongoing challenge…)
The Four Dual Roles of the “Back” Button
Despite being a single button,
we map it to distinct context-driven functions depending on the screen state:
1. Return to Previous Screen: Standard browser-back behavior.
2. Dismiss Pop-up:Closes active modals or overlays.
3. Reveal Side Menu: Serves as a trigger to pull out the global navigation menu under specific conditions.
4. Jump to Top of Page: Acts as a shortcut to snap back to the top of long, vertically scrolling feeds.
Playback & Seeking Buttons
We map physical keys so that users can execute scrubbing operations — like playing, pausing, or skipping forward/backward by 10 seconds — instantly via physical remote keys without needing to navigate on-screen UI buttons.
The Home Button
We deliberately map this to exit back to the hardware device’s native home operating system screen, rather than TVer’s internal app home screen.
■ Roadblock 5: Accounting for Co-viewing
A smartphone is an individual’s private device,
but a TV is a shared family hub.
Data shows that 35.4% of TVer’s CTV usage involves two or more viewers simultaneously, with an average user count of 1.7 people.
We must design with this collective “co-viewing” environment in mind.
The primary hurdle here is privacy.
When a family sits together in a living room,
audio is heard by everyone since headphones aren’t used,
and search histories or “Continue Watching” queues on the screen are visible to all eyes.
🚩Design Strategy
Providing Privacy-Conscious Features
We use functional design elements to ensure users can enjoy the app comfortably, even in shared spaces.
Profile Switching
Users can create personal profiles to keep their viewing history and favorites separate from family members.
This also stops individual watch histories from getting buried under other people’s habits.
Clear Viewing History Functionality
We allow users to remove individual shows from the “Continue Watching” row directly from the episode page. This makes it easy to clean up accidental clicks or keep certain content choices private from the rest of the household.
📚 Summary
Let’s recap the core takeaways. CTV design presents 5 major roadblocks that require highly specialized design adjustments:
1. Tedium of Remote Controls
Build efficient, predictable, and clear layouts.
2. Extreme Color Discrepancies
Check and test relentlessly across high-end, standard, and budget TVs.
3. Use from a Distance
Optimize for visual understanding without text reliance. Fine-tune thumbnails, sizes, and information density.
4. Remote Button Mapping
Keep button behaviors uniform across the application and focus on operational comfort.
5. Co-viewing Realities
Deliver privacy-conscious features to protect personal user data.
While design frameworks in this space are still largely uncharted territory, we will keep researching to break through these barriers!
✈️ Expanding Knowledge into a “Cross-Device” Team
Because CTV insights are highly specific, the knowledge easily becomes siloed within a few individuals. To combat this,
I organized “CTV Design Lectures” tailored for our designers and PdMs to distribute foundational concepts and design instincts.
We gathered in front of multiple television screens to test them together live! It was an absolute blast.
Moving through focus layouts with physical remotes sparked excellent discussions regarding the stark differences between TV and mobile interfaces.
We also engaged in close design mentorship, structured review pipelines, and built out our CTV design system.
As a direct result, we successfully dissolved our dedicated “CTV-only” team structure!
Today, all 5 of our designers (4 full-time employees and 1 freelance partner) handle cross-device design across CTV, smartphones, tablets, and PCs simultaneously.
TVer users naturally and fluidly navigate between multiple screens throughout their daily lives.
By empowering our creators to transcend device silos as well,
I am confident we can deliver a far more seamless, unified user experience.
🏃♀️ In Conclusion
Designing for Connected TV is filled with endless constraints!
However, overcoming those technical limitations to see video content fill a massive screen with cinematic scale offers a dynamic reward unique to CTV.
Furthermore, the CTV landscape is rapidly expanding beyond traditional living room TVs to include in-car displays, projectors, and gaming ecosystems.
As devices transform, the expected user experiences and interface definitions shift with them.
Having the opportunity to architect the “ideal experience” completely from scratch for each scenario makes this field incredibly exciting.
To be perfectly transparent, CTV at TVer is still an evolving domain.
Dealing with massive behavior discrepancies between device operating systems means things rarely go smoothly.
But that is exactly why our team will continue to unite, push boundaries, and continuously polish the ultimate “television experience”!
Thank you so much for reading until the end!
