Working from sofa: what I learned designing Smart TV apps
You might spend about as much time using Connected TV (CTV) apps as you do apps on your phone, but very few designers get the chance to work on them. I've been lucky enough to design two separate CTV apps for two of the UK's leading media companies, so I'm going to give you a look behind the scenes, and share some of the unique challenges of designing for CTV.
1 - There's not much of a manual
The big players in CTV (Apple, Google, Roku, Amazon, LG, Samsung) each have their own design guidelines for how your app should look and feel on their platform, but they're a mixed bag of how useful they actually are.
When designing a mobile app, there's a handful of ways to get help with tackling specific design challenges. I'll often look on Stack Overflow for discussions, ask ChatGPT for recommendations (which it pulls from a wealth of articles from designers who have taken on the same challenges before), or maybe I'll look on Nielsen Norman or Mobbin for inspiration.
With CTV apps, I found none of that.
To solve this problem for myself, I built out my own personal repository of screen recordings of a whole range of features from a whole range of apps on a whole range of TV platforms, to reference whenever I needed inspiration. I should probably share this - it might be useful for the other 8 people working on CTV apps.
Some things just haven't been done before though, and then you're on your own, using your best guess. It does feel like an exciting benefit of designing for Connected TV though: it's a bit of a wild frontier, and there are still trails to blaze.
2 - Screen design is weird
As designers we're used to designing long vertical pages. The user scrolls up and down freely and looks at whichever section of it happens to be in their viewport.
CTV doesn't work like that. Because your only input is a button press on a remote, and your position down the page is dictated by what item on screen is in focus, your page ends up getting split up into lots of little vertical chunks. You want these chunks to be laid out consistently as you move through the page, so you end up designing components for your different rail or hero types, and then building out your page templates by stacking a bunch of those on top of each other.
So rather than your Figma file being a nice neat frame per page, you actually have a stack of lots of frames for one page, often in a grid of up/down and left/right movements.
The benefit of this however is that it helps with the weird prototyping that you'll need to do. Figma is actually surprisingly well set up to prototype for CTV. You just need to take your grid of up/down and left/right frames, and spaghetti connect one to the other, using keystrokes to jump between them. It's straight forward, but very tedious.
Maybe I'll write a bit more about CTV prototyping next time.
3 - Testing and screen sharing is awkward
The obvious thing about designing for a screen 10 feet away is that things have to be big.
To make sure you've made stuff big enough, and that your journeys work nicely with a TV remote, you need to be testing on a big screen. I set up a second monitor in my office a few feet away which I used constantly to check my work.
To test more thoroughly, I would regularly cast from my laptop to my TV screen, and sit on the sofa trying it out. To use a remote for added realism, I bought a Flirc, a USB dongle which connects infrared remotes to your laptop. You can program it to simulate keyboard key presses which Figma then uses to navigate your prototype.
To record my previously mentioned screen captures of other CTV apps for reference, or to share examples with my team, I had to cobble together a setup using a stick like a Google TV, an HDMI to USB dongle, and OBS software on my laptop. This was a faff but invaluable, and avoided the dreaded pointing a phone at a TV screen.
I've got a lot more to talk about when it comes to CTV design, so let me know if there's anything in particular you'd like to hear. If you're one of the other CTV designers out there, wow, hi! Let me know if any of this has been useful, or if there's anything major I've missed.