Ken Tanaka

Early Home Screen concept. We started with TiVo Experience 4, but at the last minute, we received a request from Product to create an entirely new UI.

Early Home Screen concept.

Navigation menu concept. Menu at top. Finding a place for navigation controls is always a challenge with a d-pad driven TV UI. When the menu is at the top, it is difficult to get to if you have scrolled down the screen.

Navigation menu concept. Menu on left side of screen. This is a little more accessible than having the menu at the top. The user can easily reset the highlight to the leftmost item in a strip by scrolling up or down to a neighboring strip.

Navigation menu concept. This shows top level navigation in the first section (“Menu”), and screen specific filtering options in the second section (“What to Watch Options”).

Navigation menu concept. Screen specific options are in a submenu at the bottom.

Navigation menu concept.

My Shows. This is the library of the user’s shows. I knew from my experience with TiVo Experience 4 My Shows that a list is often preferable to a gallery of thumbnails for this type of content. These are shows that the user has saved themselves and are familiar with.

Series screen, overview. In this case, program artwork can be useful to help the user make a decision about what shows to watch. The “May Also Like” section at the bottom is recommendations, and may be shows that the user has never seen before.

Series screen, episode list. I opted for a list here again, as individual episode artwork may not always be available, and may not be very informative.

Browse screen. As with recommendations, posters are preferable to a list, as the user is not familiar with these shows.

Info overlay showing additional options and more detailed metadata about the show.

Browse screen, showing movies.

Info overlay for a movie.

Movie details screen.

Final Home Screen design.

We had two competing requirements for this design: 1. from Product, a visually rich, image heavy UI, and 2. from our existing users, an efficient text driven UI.

Product, UX, and Engineering worked closely in a collaborative, iterative process.

One of the earlier explorations where all content strips were open simultaneously. This is a common layout that is used by many streaming video services.

An alternate design using a left column navigation menu, with a gallery on the right. This allowed the user to quickly navigate across multiple categories. It also has detailed metadata for the highlighted show, but it limits the number of shows visible simultaneously.

A variation of the gallery view that removes the program details at the top of the screen.

Movie version of the previous screen.

The details view of the previous screen. The user would invoke this overlay by pressing the “Info” button on the TiVo remote. Pressing OK / Select would go directly to playback. At the time, we weren’t thinking about streamer remotes (Android TV, Apple TV, etc) with fewer buttons, but on those platforms, you could display this overlay on OK / Select. It would require an additional button press for playback, but it’d give you access to the same functionality.

We settled on this design, which reveals the contents of each strip on highlight. The thinking at the time was that it reduces screen clutter by only showing what the user is actively looking at.

My Shows, with highlight on the filter. This proved problematic as the user had to navigate to the top of the list every time they wanted to change the filter. People also had a hard time understanding that what they selected in this view changed the contents of the list below.

Testing and internal feedback started to reveal some usability issues with this design. There was a lot of momentum behind it, however, so we continued tweaking it to try to make it work. This version cleaned up the layout and desaturated the colors.

We were never happy with this style of highlight for movies. We couldn't keep the sandwich style highlight for the taller, 2:3 movie images without making the images much smaller.

We removed the top part of the highlight to clean up the look a bit.

The images collapse, and the screen turns into a simple list when the user scrolls. This allows them to see more titles at once.

We decided to move to 4:3 images, which allowed us to make them bigger, while maintaining the same width. We also stopped changing the size of the images in and out of highlight.

Keeping all the images the same size resulted in a cleaner layout. We started using the large background image (“atmospheric image”) around this time. For a while, this was the design of record.

What movies look like in the new design.

At this point, we realized that the large atmospheric image addressed the cable operators’ requirement to have a visually rich UI. We didn’t need to have individual episode and movie posters.

A previous mockup showed how the strips would close during scrolling. We decided to keep the strips closed at all times. By making the episodes visible on this screen (like in the last three mockups), we were trying to reduce the number of clicks and screen transitions. We found from user testing and feedback, however, that the episode images were not an effective way to select the episode you wanted. People seemed to prefer having the two tasks–selecting a series, and selecting an episode–separated into two screens, even if it meant additional screen transitions.

This is the final design–we moved the filters to the left side. This design has been well-received by both cable operators and retail customers. Our user research has shown increased satisfaction after we moved to this design.

An early version of the One-Line Guide using the old style tile & strip with 16:9 images. We weren’t very happy with the odd shapes created by the series image, white highlight underneath, and the black metadata area to the right.

An exploration, based on cable operator request, to emphasize channels over shows.

This version only shows channel logos – shows are not displayed. We didn’t feel this was particularly useful as it doesn’t show what is actually airing.

A horizontal version of the channel-only variation. It has a bit more functionality than the vertical layout, as it allows filtering. It is still not very usable since it does not display airing information.

This design combines some of the previous ideas. It’s cluttered and takes up too much space, and we never seriously considered it. It’s just here for reference.

This variation adds the channel list while keeping the shows visible. We felt it covered too much of the screen.

The channel list is shortened to allow more of the video to show through. This struck the right balance between the channels and shows, and is close to the final design.

Our research told us that the show description is one of the most important pieces of information people use to make a decision, so we weren't comfortable with leaving it out. We added it back at the bottom.

Our research team also told us that users start to feel uncomfortable when you cover more than 50% of the video. We were trying to use the same size images throughout the UI, but we went with a smaller size here, in order to fit the entire widget below the 50% line.

This is the final design.

This is what movies look like in the final design.

The original design. We felt that the information wasn't grouped well, which results in the banner looking like a big wall of text.

Variation 1: Using just color changes to group the information better.

Variation 2

Variation 3: Using both color and layout changes.

Variation 4

Variation 5

The original Home screen with large Video Window in the top right, showing the currently playing video.

The Video Window is a standard feature on cable systems and has been a requirement in the TiVo product for many years. It can be awkward to fit into a layout.

Home screen with larger 4:3 images. There is no Video Window, and the background displays artwork for the highlighted show. This was an exploration to see if we could remove the Video Window, and maybe just play the audio in the background. One use for the Video Window is to see when a commercial pod is finished, while watching live TV. We thought audio by itself might be sufficient.

We did an animation study to see if we could have full screen video behind the UI. We liked this, and went with the full screen video, instead of the Video Window. In the final product, the video is dimmed a little more than is shown here.

This is the final layout with a horizontal menu strip. Since we were no longer had the Video Window constraining the layout, it felt more natural to have two strips that scrolled horizontally, than having a horizontal strip and a vertical menu on the same screen.

An early version of the Grid Guide with saturated colors.

We moved to more subdued colors here.

At this time, we were starting to put full screen images in the background throughout the UI.

The final design. We've reduced the number of rows from 10 to 8, while keeping the text size, in order to improve legibility.

This example shows how the Guide remains readable over a very light background image.

Original version using the same “biaxial” template that we used in My Shows. Users were often coming to this screen from My Shows, which turned out to be confusing. They were in My Shows, then there’d be a screen transition to a screen that looked very similar.

Actions (buttons) are also presented in a horizontal strip.

This was an incremental visual design change, moving away from saturated colors.

An action strip in with the newer visual design.

We moved to a completely neutral color scheme as we felt it gave the UI a more contemporary look.

Around this time, we started to use full screen atmospheric images behind the UI. This addressed the cable operators’ requirements for a visually rich product, while allowing us to keep a text-driven UI where necessary.

The atmospheric here is displayed at much higher opacity than in the final product.

We kept the original biaxial layout while we worked on alternatives. This version with the large atmospheric was live for awhile.

An episode strip in the newer biaxial screen.

Cast information.

We still wanted to address the confusion that arose from the transition from My Shows to content screens. There was no sense of place because the screens looked very similar.

This was one of a series of explorations. It has a navigation menu on the left.

This is another exploration with two horizontal strips. It is essentially a tabbed UI. The selection in the upper strip changes what is displayed below.

Another alternate design that reduced functionality in order to provide more visual impact. With this design, there would be two versions of the series screen–the one shown here which you would find in Search, and another more feature rich, text heavy version that would be accessed from My Shows.

We decided to go with a more functional screen, rather than the image heavy alternatives. The design shown here is a modification to an existing screen. This was considered as an interim solution.

This is the current design of the series screen. We decided against the interim solution (previous mockup) as it would be throwaway work. This screen ended up looking similar to My Shows, but it is different enough that the transition from My Shows to this screen does not seem to confuse people the way the old design did. (My Shows does not have the metadata area at the top.)

After a few seconds, a tip appears underneath the highlighted episode indicating the behavior that is triggered when the user presses OK on the remote. Since we aggregate from multiple sources (Netflix, Prime Video, Hulu, recording on disk, etc) we thought it useful to show the source of playback before the user commits.

If the user wants to select from a different playback source, they can select the ellipsis icon to the right, which navigates to an episode detail screen that has all available sources.

Some categories display galleries on the right side. The thinking here is that for episodes of this show (The X-Files), a text list is easier to navigate because it is content you are familiar with. In the case of May Also Like (recommendations), these are shows you may not have seen before, so the series posters may be helpful in informing your selection.

Menu scrolling variation with synched motion.

Menu scrolling variation with offset motion and overshoot.

Gallery variation with synched motion.

Gallery variation with offset motion and overshoot.

This is a study to show the transition from a horizontal strip view to a gallery. The content is the same—it is just presented in a different layout.

Capture view showing product info for a CD.

Capture view showing product info for a video game.

Capture view showing product info for cereal.

Capture view showing multiple overlays, one for a URL and one for a phone number.

Capture view showing a search overlay pre-filled with OCRed text. When products cannot be identified visually, text can be used as a fallback.

List view showing the history of recognized products, phone numbers, and URLs.

Product details view.

Capture view showing product info for a CD.

Capture view showing product info for a video game.

Capture view showing product info for cereal.

Capture view showing multiple overlays, one for a URL and one for a phone number.

Capture view showing a search overlay pre-filled with OCRed text. When products cannot be identified visually, text can be used as a fallback.

List view showing the history of recognized products, phone numbers, and URLs.

Product details view.

When I started at OnLive, the company had already decided on a space theme, with a big "sun" made up of videos. This is one of a series of explorations within the space theme, with a video game type feel.

This is one of a series of explorations within the space theme, with a video game type feel.

This is one of a series of explorations within the space theme, with a video game type feel. This replaces the sun with a tunnel of videos.

This was an attempt to be a little less literal with the space theme, while still keeping the "sun."

This is a close-up of the sun's surface.

Trying out a different rendering style of the sun surface.

An experiment to get away from the sun, as it adds a lot of visual noise to the UI.

An experiment to get away from the sun, as it adds a lot of visual noise to the UI.

Another experiment to get away from the sun, as it adds a lot of visual noise to the UI.

Since the company was really set on the idea of the sun, I tried using it as the actual UI, instead of as a background element. This image ended up being the basis for the final design. (The production work for this image was done by another designer under my direction.)

This is also where we started to move away from making the UI look like a video game.

A variation on the sun-grid UI.

The game details screen for the sun-grid UI.

This is a wireframe for a list of videos. Each list entry has some metadata as well as a preview of the video clip. The interaction is designed primarily for a game controller. For example, there are no scrollbars. The user scrolls the list by moving the focus off the top and bottom edges of the screen.

This is a wireframe of the game details screen. This screen shows more information than the list view.

This is the user’s profile screen. It displays information about the user and has a list of the video clips the user has created. On the left are links to sub-screens.

This is one of the sub-screens of the profile screen.

This series of wireframes shows the spacial navigation. Each menu occupies a specific location on the sun’s surface.

The red frame indicates what the user sees.

This series of wireframes shows the spacial navigation. Each menu occupies a specific location on the sun’s surface.

The red frame indicates what the user sees.

This series of wireframes shows the spacial navigation. Each menu occupies a specific location on the sun’s surface.

The red frame indicates what the user sees.

This series of wireframes shows the spacial navigation. Each menu occupies a specific location on the sun’s surface.

The red frame indicates what the user sees.

This is the starting point of the UI, a 3x3 grid on the surface of a sphere made up of tiles. The focused menu item is highlighted in orange.

This is the standard list view for video game titles. Each entry has a preview video of the game and shows some metadata.

This is an alternate list view for video clips. This UI was created as a response to an executive request to have large numbers of videos on the screen at once.

I created this mockup to show the developers what the ribbon view should look like during fast scrolling. The camera turns toward the direction of the scroll and the far end of the list assembles itself out of tiles that peel up off the surface.

This is the video playback UI. The overlay at the top shows metadata. The playback and user rating controls are at the bottom. The UI fades away after a few seconds of inactivity.

This is the game details screen where the user can purchase or—if they already own it—play a game.

This is the UI that handles system level functions, like network settings, sound settings, and user profile. It can be displayed at any time, including during a game.

This is the settings screen on the overlay UI.

An early mockup. The dark blue rectangles represent key frames. The light blue range indicate how long a pose is held.

The scrollbar in the previous example felt clunky, so I replaced it with a condensed view of the entire animation. The black frame represents the frames that are currently visible in the dope sheet.

There is also an annotatable dialogue waveform at the top.

This version adds a collapsible hierarchy and user defined colors. Solid rectangles represent frames that are keyed for all controls and circles represent frames that are partially keyed. The vertical hashes represent blends.

This view replaces the spreadsheet with a full collapsible hierarchical dope sheet. You lose the ability to edit key frame values, but have a much better view of the timing information.

This shows the dope sheet alongside the curve editor, another UI for editing key frame information.

This is a version of the dope sheet optimized for editing parenting data. Since the majority of parenting key frames are either on (value = 1) or off (value = 0), we can simplify the display by not showing keys of value zero. Occasionally, there is a key whose value is between 0 and 1. Those are represented by circles.

Early pen and paper sketch.

Quick sketch of the connection editor, which the animator would use to create connections between nodes.

We settled on a basically rectangular shape for the nodes, and did a series of variations on the design.

This mockup shows how the nodes lose detail as the user zooms out the view of the graph.

The view is zoomed out farther than the previous image. The node types are still identifiable by their color.

This design puts the inputs and outputs of the nodes side by side. This reduces the height of the nodes in their expanded state, but makes them awkwardly wide in their collapsed state. I considered making the nodes collapse horizontally as well, like with the node in the lower right. That causes the layout to change when you expand and collapse nodes, however.

This design puts the inputs on the top and the outputs on the bottom of each node. People liked this better.

Another iteration of the vertically expanding nodes.

This is what we decided on for the first iteration of the UI. At this point in the development, the nodes were not expandable. Each node type had preferred inputs and outputs which were represented by the light gray bars on top and bottom. The user could make connections to these attributes by clicking and dragging. The dark gray bar on the right is a catchall for all other inputs and outputs.