Lean Back

UX Design
Visual Design
Motion Design

When the same content is delivered everywhere, compete on experience.

While at L4, one of our clients was a well-known live TV streaming product. They had positioned themselves well in the cord-cutting space; their product had a large library of content, a wide range of live tv channels, a decent selection of movies, and DVR functions on the way. It ran on all the popular platforms, and I was tasked with designing the interfaces to bring it to Xbox, LG smart TVs, and Windows desktop & tablet devices.

Seeing a Higher Potential

Since the product was well defined on many other platforms, my work was focused around adapting existing designs to the conventions of the new platforms. The designs I was working with were… lacking. Each browsing screen was a top nav and rows of ribbons with thumbnails and titles, all the same size. Detail views were a half-width side panel with an image, text, and a row for suggested content. There was so much gray that the ‘fifty shades of gray’ joke had made it all the way up to the executives.

I took the initiative to suggest a redesign and got clearance to do some explorations of what their product could be with a modern, captivating experience. The reasoning was simple: there are more and more cord-cutting products being released with extremely similar features, content, and prices. When all that is the same, you must compete on the experience.

These screens are all for a ten foot platform: apple tv, roku, any smart tv, etc. The user first lands on the “On Now” screen, with ribbons for featured content, favorite channels, continue watching, and saved programs.

Navigation is done via a side tray, triggered by a long press on the directional pad’s left arrow, or if the device has a menu or back button on the remote. This conserves vertical space for the most content while browsing, and the nav tray has lots of vertical space for many menu items.

The live TV guide view was thoughtfully constructed to have the right amount of information presented without being overloaded. Text color signifies programs that are live now or available on demand.

Program detail views take up an initial two-thirds of the screen. The user can then pan into more panels within for cast and recommended content. Instead of placing all of this content into one view, the user is presented with essential actions on the first panel and can dive deeper if they want more.

Here’s a few more screens showing those states, and a video illustrating all these interactions:

Color usage to enliven the experience

Color was very necessary to add some life to this very gray product. Turquoise brand colors are carried into the navigation and focus indicators. None of the backgrounds are true black or gray, but pumped with some blue.

Backgrounds of detail views are dynamic based on the image. I found some algorithms that can process an image and determine the dominant colors, and in my imagination there’d be a second operation that chooses the color from that set with the right level of saturation (to avoid muddy browns and grays that many images would result in.) This adds a great amount of delight when browsing content.

Extending to Smaller Screens

For consistency and identity across the brand, the new experience needed to work on the plethora of platforms it’s available on, down to tablet and mobile devices. The side navigation easily converts over, as well as the details view becoming a full screen that a user can swipe left and right through.

Now What?