Streaming Service Interaction Design

PROJECT OVERVIEW

We were challenged to create a visual layout for a video streaming service to be viewed from around 10 feet away (i.e. from a sofa.) Specifications included a grid view, displaying multiple video options, and highlighting corresponding information on a single screen. Second, we were asked to create a full screen view of single video’s details and additional films a user might like.

In addition to the video screens, we were challenged to design a remote control for a user to interact with the streaming service. We designed visuals and a physical prototype to test our concepts with users.

SCREEN DESIGN

Grid View

For the grid view of the platform, we decided to add a few custom navigation items at the top. These include a Home icon, to quickly take the user to the main page of the platform, a Watchlist icon, to take a user to items on their watchlist or things they were previously watching, a Search icon, allowing the user to search for their favorite videos, and an Account icon, to allow a user to sign in/out of their account or switch users. We also added a secondary navigation to allow users to quickly jump between popular topics or categories. Below the secondary nav, we’ve envisioned featured category items. These images would include the top videos for each category. The video’s title would be stylistically included in the imagery. Secondary categories would be listed below, again displaying title within the image. The orange highlight would jump between imagery to show which video is currently selected, and allow the user to choose a video.

The scrolled down view of the grid view removes the header and previously seen featured videos from view. Users are able to scroll continuously in all directions, and when they reach the end of a horizontal list, the list begins again, but a vertical line signifies that they have reached the end of the listing. If a user reaches the bottom of potential scrolling vertically, they must then scroll back up, or select the Menu button on the remote (more on remotes later.)

Expanded View

Within the expanded view, additional information such as the video description, cast and crew, and the full rating can now be seen. Users are given three options; playing the movie, watching the trailer, or adding to the user’s watchlist. The selected option is consistently signified by the orange highlight. On the right-hand side of the screen,  a larger screenshot or video preview can now be seen atop a list of similar videos. Users can swipe through the options, and the similar videos list by swiping on the remote. Playing the movie or watching the trailer would open a full screen video in play mode.

REMOTE DESIGN

For the remote exploration, we decided to pull from currently developed products, and combine multiple features into a singular device, allowing for simplification and space savings. Our concept comes from a combination of features included on the Amazon Echo Spot, the Nest Thermostat and other digitally interactive universal remotes. This new hand-held remote could incorporate voice assistant technology, audio playback, touchscreen interactivity and additional smart-home features within a single device. The digital touch screen would adapt between various modes and options, depending on the current use case, and provide haptic feedback for touch inputs. The remote is a bit wider than a normal television remote, but this helps keep it from getting lost between the couch cushions and the mesh material surrounding the speaker body, could be customized, allowing it to easily fit into any user’s current home decor.

Main Screen

The core functionality of the screen would allow a user to swipe up, down, left or right, by swiping across the screen in the desired direction. The Enter button serves as a visual indicator that the user can tap to select a specific element that is highlighted on screen. The main screen only includes two secondary “buttons” or touch-targets; Home – which quickly takes a user back in their navigation progress, and Search – allowing a user to quickly search for a video using a keyboard input (see next screen.) A user should also be able to invoke the Voice Assistant at any point using a simple command. There are additional options to manually invoke the voice assistant in the appropriate screens (shown below.) Note: As battery life is a general concern, this remote would need indication of low battery life, allowing the user to charge the device (not shown.)

Keyboard Screen

The keyboard screen adapts to display a QWERTY keyboard for text input. Users can switch between alphanumeric characters, while hoping to find the video of their choice. The TV should display options within the search screen, as a user types into the search field. The secondary buttons have now changed to display the previously discussed Home, a Close option, and a Voice Assistant option (which will pull up the Voice display – shown later.)

Video Screen

The video screen would display whenever a user is watching a film or TV show. This screen displays a screenshot of the film or episode being watched, metadata about the film/video, common playback options, as well as the ability to scrub through the video timeline or adjust volume. Again, the secondary buttons display Home, Close, and Voice Assistant options.

Voice Screen

The Voice Search screen would display any time a user manually or audiologically selects to invoke to voice assistant. A visual indicator that the remote is receiving audio should reflect the volume of audio that the remote is receiving. A text display of the audio input should be shown, to build trust that the remote is accurately hearing what the user is saying, and allow them to restart or close, if necessary. The secondary buttons now display a Keyboard button, instead of the Voice Assistant button, in case the user would like to input manually instead.

Audio Screen

In addition to playing video, a potential product expansion could include smart device options like audio playback. In such instances, the screen should adapt to show the corresponding album cover, metadata, song length, common audio controls and volume adjustment options. Users should again be able to scrub through the audio timeline and the volume adjustment. Secondary buttons would again be Home, Close and Voice Assistant.

PROTOTYPING

Remote Prototype Build

We wanted this remote to be true-to-size and be an accurate representation of the final product.

1.  First cut similar circles from an old cardboard Target box.
2. We wanted to easily be able to swap out screens for a user to test out, so we cut the top out of a coffee lid to be placed on the stack of circles.
3. We then glued the stack of circles together, and spray painted all elements black.

At this point, we still needed to print each of the screen images true-to-size, so they can easily be swapped out for user testing by removing the lid.

We then developed the final physical remote prototype to be used for testing in conjunction with the digital screens. The plan is to allow users to tap, swipe and artificially summon the voice assistant, while a moderator digitally echoes and manipulates what the viewer is seeing on the screen (Wizard of Oz style.)

SCREEN PROTOTYPES

Digital prototypes of the various screen views have been built using InVision Studio, allowing for higher-fidelity, digitally-manipulatable, and animated versions of the screens. Each screen had to be individually accounted for, and the permutations of each interactive possibility needed to be input.

These prototypes will allow a moderator to view a user (testing the remote prototype), and manipulate the digital screen to react to the user “inputs.” This should closely simulate actual use in a real environment, by allowing the prototype to be seen on a screen and the remote to be used by a >10 ft. distance.