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 vis
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, Ap
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 th
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 duri
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.
prev / next