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:
