Unity 2.0 Set top box UI Visual Comps

Arris Group

Unity 2.0 Mobile - Rethinking and Redesigning for today's cable and streaming video users.

I was contracted as a Senior User Experience Designer on a small team UXD team at Arris Group. In the time I spent with Arris, the bulk of it was working on the design and implementation of Arris’ Mobile and set top box UI over multiple build cycles.

What if you could re-think the cable industry and design for how people really consume content?

What we used to call “TV” is morphing into something else

We are no longer limited to a single TV in each home. Today – users are accessing media content everywhere. At Arris we have been asking our customers many questions about their needs, where they feel their current cable operator or existing UI is missing the mark. What we have come up with have been interesting challenges and exciting solutions

Unity Video OnDemand - Home Page

Home is where a user would land upon clicking OnDemand on their remote control.

Customers complain, we listen!

"I don't know about you but one thing that really irks me about traditional VOD streaming services is how long it takes to get back to the main menu when you have scrolled many categories deep on the page." To address this Unity introduces the concept of a sticky menu that pops up top in the UI no matter where you are on a single "Menu" button keypress.

Sticky Menus

Access content without having to scroll back up to the top by clicking menu anywhere in the UI. A user will navigate to the main menu by clicking the menu button on their remote. This can be done anywhere in the UI. In this example the user is watching live TV but wants to navigate to a OnDemand to watch something else.

Unity VOD - Home Page

Shown here without sticky menu keypress for easy navigation through categories. My rentals is featured here by default. Categories are customizable by a configuration file for the cable operator. Interaction takes place by navigation via up, down, right, and left arrows on the users remote control.

VOD Category Mosaic pages

This page is shown in the UI when the user selects view all from a category such as TV shows from the VOD home page. A user would navigate to this page by clicking view all from the tray pages after a preset number of assets. Unity comes default with 9 tiles per tray row before the user could navigate to view all and on a mosaic page.

Search

Assets are shown in search after at least 3 keys are entered on the remote. Assets will refresh as you type more characters.

Note: this is a feature that can be disabled. Some customers like assets to populate as they search, others hate it and want it disabled.

Problem Space
The keyboard was an interesting problem we had in this search design when we accounted for grouped assets and multiple asset sizes, which can happen for a few of our cable operators. Legacy artwork is portrait orientation, newer catalogs are starting to offer multiple sizes such as landscape and portrait. We found that when combining asset sizes in row and auto setting height with grouped assets called out with a stacked graphic the UI was pushing our keyboard below the view safe content area.

We had to re-design and re-configure this page a multitude of times offering different keyboard layouts and asset sizes to accommodate for a few edge cases, in this case our edge case was our largest customer base.

On Demand - TV Shows

This is an example of a Multiple asset info page which breaks down a TV series by season and episode. Items needing a subscription to watch are called out in the user interface.

Single Asset Info Page

This is an example of an info page that would be shown in the UI for a Single asset such as an episode of a TV show.

TV Guide
Bringing guide filters to TV. See what's on, narrow down your search, set a recording or a reminder or just see what's on. It's all available from the guide. Sticky menu behavior is enabled here for guide filters.