Role: UX & UI Designer. Platforms: Smart TV.
MGM Movies was a really interesting project, being that it was my first Smart TV application (and one of the first for our company). It offered many new challenges, from a much bigger, lower resolution screen size, to being navigated by a 4 way controller. It allowed users to subscribe to the service and stream a number of MGM licensed movies directly from their TV.
Being a TV application meant that most users would need to navigate the interface using their standard 4 way controller, up, down, left and right. This offered a different challenge compared to mobile applications and websites, where users can click or tap wherever they like, jumping or skipping over other elements. In this case, users would need to scroll through every element on the page to get to the item they wanted. Therefore, we needed to design with this is mind, and make the interface as intuitive as possible.
Different needs = different views
Playing around with many other TV applications, we prototyped a carousel based system, where users could move left and right to see more content from that category, or go up and down to see different categories. Our test participants liked this structure, as it felt engaging (epecially when we enlarged the focused item), and allowed them to see a decent amount of content, as well as the next category name below. However, they explained a need for a simpler view where they didn’t need to scroll through every item to see what was on offer. Therefore, we came up with a grid view as well, and offered both layout choices to customers in our design.
Something else we discovered in user testing was that when a user looked at a specific movie or TV show in more detail, if often removed all other items from the previous view, and they lost their place. We prototyped this UI, where users can see the detail of an item, but still scroll up and down to keep navigating through the same items they would have seen in the previous carousel or grid view.
Typing on a TV
The sign in journey was a particular issue for us. Typing on your TV remote is one of the most frustrating experiences. We decided not to use the default TV keyboard UI and instead make our own, trying to make it as intuitive as possible. We kept characters and numbers in the same view, included special characters here too, instead of having to go to a alternative view, and also added options to skip to the next text field without having to leave the keyboard.
Using the TV remote
Something we were able to exploit was the additional buttons on the TV remote. In this example, you can see how we allowed users to press the rewind or fastforward keys on the remote to skip whole pages of content in the grid view.