10 Foot Interface and Controller

Overview

Fellow students and I were tasked with creating a new Studiospecific proprietary streaming device and application (something lightweight and connectable to your TV ala a Chromecast or FireTV stick). Our role was to help plan out the interface and how the user would navigate it through inputs.

Using the concepts of responsive design, we had to plan a user-friendly 10-foot interface that a user would interact with from approximately 10 feet away (so, a couch and television).

Goals

  • Consider all aspects of interaction and employ them towards a common goal.
  • Consider how layout, interface and input all contribute to product development.
  • Becomr more comfortable and resourceful by practicing with lo-fi and streamlined prototyping.
  • Plan a user-friendly 10-foot interface that a user would interact with from approximately 10 feet away

10 Foot Interface Design

The 10-foot interface screen for the streaming service needed to include a grid and a list view. Annotations are below each screen to give a fuller understanding of the functionality of elements within each interface.

10 Foot Interface – Grid View
  1. Search input with type-ahead functionality after first three characters are typed.
  2. Three icons that let users see messages, notifications, and navigate to account options.
  3. Navigation sidebar with icon and text links. Clicking the + icon next to “movies”, “television”, and “kids” expands links below these selections, revealing sub-categories that can be clicked by the user.
  4. Breadcrumbs to help users understand what categories they are viewing. Can also be used for navigation.
  5. Users can alternate between grid view and single-column view.
  6. Categories are ordered by popularity. This wireframe shows 4 categories but more become available as the user scrolls down the interface.
  7. Users can click the “SEE ALL” text to visit a page that exclusively features all series in the category denoted in annotation #6.
  8. In grid view each series panel consists of an image, title, rating, number of seasons, a small text description snippet, and a play now button. There is a heart icon at the top-right of the image that lets users add the item to their watch later list.
  9. Users can click the arrow to view more selections, totaling 15 options. On televisions, clicking the right arrow control also allows users to scroll through the series selections. On tablet and mobile devices, users can also swipe to the left to perform the same action.
10 Foot Interface – List View
  1. The single-column layout has the same search bar with type-ahead functionality that the grid layout has.
  2. Three icons that let users see messages, notifications, and navigate to account options.
  3. Navigation sidebar with icon and text links. Clicking the + icon next to “movies”, “television”, and “kids” expands links below these selections, revealing sub-categories that can be clicked by the user.
  4. The single-column layout uses the same breadcrumb feature as the grid layout.
  5. The single-column layout also has the option to switch between grid and single-column layouts.
  6. In the single-column layout, the category title can be clicked, which functions as a dropdown for users to change the category.
  7. The card in the single-column layout has an image as the background with text on top of the image.
  8. Users have 3 options that can be clicked to activate a pop-up content area. ‘Details’ reveals more show description and cast information. ‘Seasons’ shows all of the seasons and episodes available for the series. ‘Related’ shows similar shows to the one featured in the main card.
  9. The “Related’ content that is revealed when clicking the ‘Related’ text shows the first 3 related series and then the user can click and arrow to see up to 15 more related series. They can more related content by click the ‘See More’ text. Users can also swipe left to perform this action on tablet and mobile devices.

Controllers

Digital Version

  1. Back, power, and home buttons. The power button turns on the device that the controller is connected to.
  2. User can slide volume control or touch icons at either end of volume bar to adjust the volume.
  3. Up, down, right, left, and select buttons.
  4. Rewind, play/pause, and fast forward buttons.
  5. Voice input, settings, and listening device selection buttons. The listening device option is to connect to bluetooth headphones, earbuds, airpods, etc.
  6. Search input that triggers an overlay with a keyboard and also supports voice search.

Digital Version (cont.)

  1. keyboard overlay when user clicks inside the search field. Swiping upward returns the interface to its default state.

Physical Version

  1. The physical version of the remote only has buttons for volume control instead of the slider that is featured on the digital version.

Lessons Learned

  • Considering how users interact with an interface in digital and physical manner is challenging and requires additional creative thinking.
  • This was the first time I designed anything where the user wasn’t within arm’s length of what they would be interacting with. I found that designing the digital and physical controllers was quite different from designing a website or an application. It forced me to think even more about how the user would interact with the interface, which was a good thing.
  • Because nearly all of my designs have been websites or apps, I had no concept or idea that I might want to be involved in desiging other types of interface or products. This project really helped to open my mind to all the possibilities of what a UX designer can potentially work on. I find that exciting and it inspires me to take on different types of creative challenges in order to become a more well-rounded designer.