X-Ray for Fire TV

X-Ray is a flagship feature of Amazon Video, and a primary differentiator between the service and its competitors. X-Ray gives customers a way to quickly answer the question of “where do I know that actor from?”, while also letting them dig deeper into the films and TV shows they love. They can read actor bios, learn behind the scenes facts, and dive deeper into the soundtrack.

However in 2015 X-Ray wasn’t available on our living room apps, it was mobile and web only. In the middle of that year I was asked to design the X-Ray experience for Fire TV, which would become the reference experience for all other living room applications. It was an opportunity to take a product loved by our customers, and bring it to a completely different type of watching experience.

Early Concept - Overlay Cards

In the initial exploration phase myself and the other core stakeholders were set a challenge by the VP of Amazon Video. Could we create a version of X-Ray that would be always active, showing relevant information as an overlay to the movie or episode without user interaction? The answer was… sort of.

This full screen X-Ray experience was taken all the way through to high fidelity, including a motion demo I created we could show to users for feedback. Unfortunately the question most people asked as soon as we showed it to them was “how can this be turned off?". This concept was a useful driver to making a more compact and lightweight X-ray experience as a whole, but ultimately it felt too intrusive to watching the TV show or movie.

Early Concept - Vertical X-Ray

The full screen experience was the other key piece of X-Ray. Where a user could dig deeper into information about the cast or the content. This section went through a number of iterations, and for the majority of the project the layout was vertical, matching more closely to the Fire TV cast section found on detail pages. Ultimately however I moved on from these designs to a horizontal layout as I continued to revise the In-Player experience. I wanted to have consistency of layout across the two experiences.

Work Process

Taking the core card layouts and visuals from the overlay concept I moved the UI into the player, matching the experience on web and mobile. The biggest problem I had to solve was how to keep the screen impact of X-Ray small. For mobile and web a user could quickly dismiss the player controls by tapping the screen, whereas on TV the majority of customers just waited for the UI to fade out.

I tried a number of designs for the actor and music cards, stacking them horizontally and vertically, in numerous places on the screen. X-Ray had traditionally been vertical for the mobile versions, but we settled on a horizontal layout for the info cards on TV; rectangular images with text to the right. This kept the majority of the UI to the lower third of the screen, reducing overlap of the video area that usually has the most important elements of a scene, such as an actor's face.

In Player X-Ray

The final design had a lot of visual similarities to the early overlay cards. The cards would appear on the left side of the screen and push the older cards over to the right.

We debated for a long time if these cards should be selectable or not, but doing so would have required a larger redesign of the player than originally intended. The secondary reason for not doing this was an increase in discovery of the full screen experience during user testing. Pressing up was the obvious move to view X-Ray, which would then take the user full screen. While slightly jarring users quickly understood they were looking at the same content, and with no loading time to enter the full screen experience we were comfortable in this decision.

Full Screen X-Ray

The move from a vertical to a horizon to a vertical layout came with positives and negatives. While less specific details could be shown with the new layout more items could be shown at a time, and secondary actions could also be added. Tapping up would highlight a sub navigation to jump between the different sections of X-Ray. Pressing the Play/Pause button on the remote from anywhere in the experience would hide the UI and resume playback, making it simple to jump in, check something, then get back to your video.

Actors & Characters

As well as information on the actor users would also be able to switch over to the characters. Both areas used similar layouts, and there was a link on the detail page to switch between the two sections.

Music

X-Ray would also become a new entry point into the Amazon Music application. Users were able to add songs to their music library directly from X-Ray, then jump into the Music app to play, all without changing device. I took on this project after completing designs for Music on Fire TV, which meant I already was familiar with the treatment for displaying songs on Fire TV and was able to quickly create a consistent visual identity between the two apps.

Scenes

Fast forward and rewind have always been a pain point on TV. Click and dragging on web and mobile were always a far easier way of quickly navigating a video. This meant the integration of scenes through X-Ray was even more beneficial on the TV. Customers would now have something akin to chapters on a DVD, and the ability to quickly jump to a specific part of the video.