Hey everyone who is reading the article! I am Kristina Misko, product design team lead and product designer at streaming service. I’ve been working at it for the last three years, and it’s time tp share my experience and cases my team and I went through designing for TV platform. Hey everyone who is reading the article! I am Kristina Misko, product design team lead and product designer at streaming service. I’ve been working at it for the last three years, and it’s time tp share my experience and cases my team and I went through designing for TV platform. I have decided to start from a very common, yet necessary basis which product designers will need at their practice when they just start working with TV platform. In this article I will share all the guidelines I personally studied when I just became a product designer for a streaming service. Why TV Design Matters There are a lot of dribble designs for web&mobile and a majority of courses for these platforms, yet there is the other platform which users are also very sticky to and to which we have less materials and design cases in the community. As a streaming service product designer, I personally adore TV platform for its peculiarities, technical issues and UX patterns which we build every day. The article reveals peculiarities and facts about designing for TV which we experience while creating design for the platform, but let’s start with numbers. According to the studies of Nielsen, streaming is more popular than either cable or broadcast, demanding 38.1% of total TV usage, and I’m sure the numbers will raise year by year. So, let’s observe, what’s it like to create the product for TV. the studies of Nielsen the studies of Nielsen The main difference between TV and other platforms which influences all other aspects of product design for the platform is context. The context of when and why people turn on TV, whether they are alone, had a stressful day or there is a company of friends. The context creates special conditions which we must pay attention to. For example, we shouldn’t ask our user to go through a long flow of authorization on TV because a person had a long day full of work, stress, so let’s navigate them to the mobile app where the process will be faster, yet the result will be successful — a complete authorization on TV + a retention to the mobile app. context Another difference is remote control as a way to navigate through the device. It implies its own rules which I will cover later in the article. But taking theses two issues into consideration, you can already say that TV Design has its own hacks. Start with the Official Guidelines… and Then Go Beyond Your first stop should be the platform guidelines. Apple, Google and TV manufacturers all publish recommended interface patterns and technical constraints. Here are a few I keep bookmarked: Apple tvOS Human Interface Guidelines — Apple emphasises motion, depth and focus for a cohesive TV experience.
Android TV Design Guidelines — Google offers advice on scaling mobile patterns to TV and warns against effects (like blur) that low‑end devices can’t handle.
Smart TV Guides (webOS) — LG and Samsung explain how to leverage features such as parallax, gradients and rounded corners on their platforms. Apple tvOS Human Interface Guidelines — Apple emphasises motion, depth and focus for a cohesive TV experience. Apple tvOS Human Interface Guidelines Apple tvOS Human Interface Guidelines Android TV Design Guidelines — Google offers advice on scaling mobile patterns to TV and warns against effects (like blur) that low‑end devices can’t handle. Android TV Design Guidelines Android TV Design Guidelines Smart TV Guides (webOS) — LG and Samsung explain how to leverage features such as parallax, gradients and rounded corners on their platforms. Smart TV Guides LG Samsung These documents will tell you what’s possible on each platform. They won’t, however, tell you how to make your app delightful across many different devices. That’s where hard‑won experience comes in. Lessons Learned Designing for TV Hardware Diversity Is Real Not all TVs are created equal. Some stuffed with the Voice Assistant, navigated by Air Mouse and powerful enough to maintain animations and gradients, and there is a plenty of devices whose capabilities are less fascinating . The last ones are not technically capable of other corner radius than 0, animations, gradients and parallax. The decision we stick at our streaming service is design for the lowest common TV set and add enhancements only when you can detect that the hardware can handle them. How to do that? Test the devices, be in a close chain with TV developing stream and always ask for the feedback from them. design for the lowest common TV set “The Ten‑Foot Rule” Everything on TV needs to be legible from about three metres away. I learned to bump up font sizes (20-24 px and above), increase contrast and limit dense blocks of text. Onboarding screens, tutorials and payment flows deserve extra attention because they often contain instructions or sensitive data. A perfect example of such rule is a communicative screen, a screen where we sold a user a subscription or give offers. It usually has not many text, but it should be readable from the distance because if not, we’ll lose users’ attention. Focus Is the New Tap On mobile, users tap to indicate intent. On TV, they navigate using arrows and rely on a focus state to see where they are. I experimented with several focus indicators — colour changes, borders, scaling and shadows. In the end, a combination of subtle scaling and colour change felt the most consistent across devices. Shadows look great on a flagship OLED, but many budget TVs simply drop them. Remote‑Control Navigation Forces Simplicity Navigation is limited to up/down/left/right and an OK button. So, the basic rule here is to simplify information architecture and develop it for the TVs with a good Voice assistant or Magic Remote. For example, I added such option in one of my recent designs for Search — you may search for the content AND for the Purchases, Continue watching list, etc. as well. OK Less Is More Most viewers turn on the TV after work, so cognitive load is low. My team deliberately reduced the number of steps needed to find something to watch. We prioritised personal recommendations and a prominent Continue Watching section. Complex tasks like account creation or entering payment details were handed off to mobile or web flows via QR codes. Continue Watching One Design, Many Operating Systems TVs run a handful of operating systems: Apple’s tvOS, Android TV/Google TV, LG webOS, Samsung’s Tizen and even gaming consoles. Capabilities vary widely. To avoid maintaining multiple codebases, we built a design system that could degrade gracefully. Here are some tips about each platform: TVOS (Apple). There are no design limitations that I personally know. Since it is the same code base for Apple TV and iOS, restrictions for mobile and tv platforms will be the same.
ATV (Android TV). Android TV is represented with Smart aTV like Xiaomi and Sony, and common aTVs. Designing for aTV, remember that there are TVs that do not maintain blur (for example, Xiaomi Stick). However, corner cases aside, if the design works perfectly for the mobile platform, it would probably work for the aTV as well.Here are some links that may help you understand aTV more:

Design for Android TV;
More guidelines about designing for Android TV.


SmartTV (WebOS). SmartTVs with webOS are manifactured by such companies as LG and Samsung. I’d say this platform is on the top among others because of its design capabilities — blur, gradients, radius corners and even shadows may be implemented there. Also, you may include slight animations from screen to screen. However, from my personal experience, SmartTV has more limitations than ATV because of the load the app takes to maintain all the design, so I usually stick to simplifying design for SmartTV and let the app not to crush. TVOS (Apple). There are no design limitations that I personally know. Since it is the same code base for Apple TV and iOS, restrictions for mobile and tv platforms will be the same. TVOS (Apple). ATV (Android TV). Android TV is represented with Smart aTV like Xiaomi and Sony, and common aTVs. Designing for aTV, remember that there are TVs that do not maintain blur (for example, Xiaomi Stick). However, corner cases aside, if the design works perfectly for the mobile platform, it would probably work for the aTV as well.Here are some links that may help you understand aTV more:

Design for Android TV;
More guidelines about designing for Android TV. ATV (Android TV). (for example, Xiaomi Stick) Design for Android TV;
More guidelines about designing for Android TV. Design for Android TV; Design for Android TV; Design for Android TV; More guidelines about designing for Android TV. More guidelines about designing for Android TV More guidelines about designing for Android TV SmartTV (WebOS). SmartTVs with webOS are manifactured by such companies as LG and Samsung. I’d say this platform is on the top among others because of its design capabilities — blur, gradients, radius corners and even shadows may be implemented there. Also, you may include slight animations from screen to screen. However, from my personal experience, SmartTV has more limitations than ATV because of the load the app takes to maintain all the design, so I usually stick to simplifying design for SmartTV and let the app not to crush. SmartTV (WebOS). Putting It All Together Designing for TV is like designing a living‑room appliance. It requires empathy for the viewer’s context and respect for the hardware’s limits. My process looks something like this: Research — Review platform guidelines, watch people use existing TV apps and identify pain points.
Design for the worst case — Start with a basic layout and visual style that works on the weakest hardware.
Layer on polish — Add motion, blur, depth and other enhancements for devices that can support them.
Test on real TVs — Emulators are helpful but cannot replicate remote lag or subtle rendering differences.
Iterate based on feedback — Collect data from real users and the developers. A small change in navigation can drastically affect engagement, and less Lottie may significantly affect the app’s lifetime per session. Research — Review platform guidelines, watch people use existing TV apps and identify pain points. Research Design for the worst case — Start with a basic layout and visual style that works on the weakest hardware. Design for the worst case Layer on polish — Add motion, blur, depth and other enhancements for devices that can support them. Layer on polish Test on real TVs — Emulators are helpful but cannot replicate remote lag or subtle rendering differences. Test on real TVs Iterate based on feedback — Collect data from real users and the developers. A small change in navigation can drastically affect engagement, and less Lottie may significantly affect the app’s lifetime per session. Iterate based on feedback Welllllll, thank you for reading till the end, hope the article was useful for you. If you find it interesting, don’t hesitate and share it with your colleagues. In case you want to know more about TV platforms or designing tips for TV platform — let me know, I’ll cover the cases where I got stumbled on.

Lessons in TV Platform Design from a Streaming Industry Insider

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Types of User Feedback You Need to Build a Better Product

10 Things To Do Right Away Before Starting Your Product Journey

9 Product Design Themes That Will Improve Your Product’s User Adoption, Your Team’s Design Process…

#Busted: 10 Laughable Myths About Product Designers

10 Insights From My At Home Health Experiment

The Noonification: Update Report: Trialing Basecamps Shape Up Methodology (1/29/2024)

10 Types of User Feedback You Need to Build a Better Product

10 Things To Do Right Away Before Starting Your Product Journey

9 Product Design Themes That Will Improve Your Product’s User Adoption, Your Team’s Design Process…

#Busted: 10 Laughable Myths About Product Designers

10 Insights From My At Home Health Experiment

The Noonification: Update Report: Trialing Basecamps Shape Up Methodology (1/29/2024)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps