Prime Video reUX

Jul.25.2019 | 7m Read | ^UX

Jul.25.2019 redesign of Amazon Prime Video.

PART 1: usability issues.

PART 2: UI updates.

This redesign (or reUX) is based on the existing web site, but not specific to any platform other than horizontal ratio'd screens. Pointer hovers are omitted and larger components are preferred when possible to give a good starting point for TV (Fire), mobile, Kindle, iPad, etc. Vertical ratios (mobile) can be fairly easily adapted by inverting the content ratio and flow layout (ie, horizontal content becomes vertical and vertical content becomes horizontal).

Many of the same issues on Amazon Fire are also present or similar to the more complex web interface, making it ideal to try to tackle the overlap of both at once.

PART 1, Usability:

Amazon Prime Video index page issues. Overly complex header that is forgettable not fixed or a or a dynamic headroom component.

One of the keys aspects to eliminate as much as possible is excessive scrolling. Why? Because the more scrolling -- especially vertical -- triggers the psychological response that 'there is nothing to see'. This is a well-trained trigger from both social media sites like Instagram, as well as older cable TV interfaces.

Once the user has entered this state they are likely to exit the app with a feeling of dissatisfaction.

To combat this we want to get as much content and data within the same area as possible and to work towards progressively rewarding the user -- giving them not only a feeling of fine-tuning and control, but a voice on the platform.

Content Issues:

Despite having the largest selection, Prime Video has a lot of duplicate media content adjacent to one another. This is further compounded by the words Prime repeated over and over.

Often in engineering there is talk of simplicity, KISS, Zen, but hard data shows dating websites have found if the user spends too much time looking at choices they become bored, frustrated, confused -- and overall disenchanted with the experience. The current Prime Video site reflects this similar to a 2000's dating site. Boxes and boxes of labels and choices, but many are very similar and repetitive.

Ironically, despite this cognitive overload we are getting a lot of cloned content. We also get our 2nd strike for vertical scrolling here with what appears to be endless sliders -- sliders that then require even more horizontal scrolling in an attempt to find something interesting.

Details Issues:

Amazon Prime Video media with random stills & confusing buttons surrounded by forest of data.

So we finally find a worthy film to look into, but the info is unfocused and the buttons are mutable. Also, what's with the off-putting sales talk? It even carries over to sentences in small fonts on the buttons that you have to carefully read -- and remember -- these buttons are always changing per media page selected.

Lower Details Issues:

Amazon Prime Video Media details of selected media with reviews.

DVD and Blu-Ray are physical media in the process of being phased-out, but the buying experience should still put the customer first. How about placing them on the bottom of a modal with all the purchase options?

After some more vertical scrolling (and wasted horizontal space) we arrive at the reviews. Yes, the star rating links down here -- but because non of the navigation or content is fixed -- much of the time you will scroll passed this link to look further and then continue to scroll down. Also not a fan of the light theme used here -- it's like the site can't decide what style it wants to present. Eyes adjust to both the light and contrast level of a theme and shall rebel, seeing the new theme with less clarity and more strain until they readapt.

Missing Details:

Amazon Prime Video Media missing details.

Skimming through the branches of popular films there were several with missing details.

Once Upon a Deadpool is missing the year.

Conan the Destroyer is missing the year and the director. There should be an easy way to cross-reference and/or import existing data with IMDB to avoid manual entry. There's scraping, a public API, but Amazon actually owns IMDB so perhaps a more direct method of data sharing is possible.

PART 2, Redesign:

Amazon Prime Video UX sketch.

Panel-based Sketch.

Taking note of all these panels we can begin to rough-out a clean and clear layout. The idea of course is to reduce complexity while enhancing usability. Larger buttons and more of a touch screen orientation is a plus, yet still we respect a user's need for details and depth in reviews, ratings, and multiple media options.

Amazon Prime Video spaciously redesigned.

Less Scroll, More Play.

Introducing Prime Times: the customer empowering media experience. Create, complete, and rate them to earn badges. Capitalizing on Amazon's lead in media diversity and selection, users develop a social stake in both the content and the platform itself. With Prime Times there's always something ready and something new.

Forward thinking with an eye on future content -- stream video, then stream the game. Amazon is now alive with challenges and exploration, a core product now able to transform Prime Video into actual social media.

Anatomy: Prime Times have 4 media slots of 5-12 hours of content. More than enough for a date night, sick day, and most movie marathons. Plus it placates the picky viewer who prefers to fine-tune or skip through media choices.

The new ad section is so spacious you can actually have animated content such as games, apps, chat, and video. You can also store the archived or suggested Prime Times here. No space is wasted as you will see in further screen below.

This design sports a strong unidirectional data flow with top-to-bottom and left-to-right navigation. Yet even with grand film posters there is still 7-10 media choices with 2-3 drop-downs for narrowing. This is about the same as perviously, but much more clean and organized with a primary focus and buttressed by focusing elements.

Prime Times:

Amazon Prime Video Prime Times drop-down & search.

Note the colors: all clickable text is some combination of blue and yellow. This pattern not only creates more clarity and style, but allows for important data (like titles) to have smaller fonts if needed.

These drop-downs are for selecting Prime Times. They have their own separate clickable ratings and reviews. Maybe the format for 5 Stars should be different for Prime Times, ie 0-100% so that the ratings can be placed next to media clearly if needed? Also, naming convention wise, maybe we should have the circular user icon of the Prime Time's creator here as a badge of honor of sorts.

This also allows celebrities, influencers, or even companies to create and share their own Prime Times and possibly connect it with the large ad space below. Want to watch Star Wars in the order George Lucas intended? Now not only can you, but you can also rant in the review section about how you prefer HanShotFirster's Prime Time instead. Of course you still can't resist sharing how you still swap a couple of the episodes.

Mod & Exchange:

Amazon Prime Video media selection redesign with exchanges.

Not only can you easily view your selected media without leaving the page, but you can also rapidly exchange and modify your Prime Times. Advanced features include filtering and genre selecting by both year and rating. Simplified buttons are strikingly clear and organized. The combination of button transparency and space allows for the poster background to still be readable.

Search & Swap:

Amazon Prime Video media drop-down & search.

In the media drop-down we successfully kill another redundancy: Bonus Content VS Standard. In the sliders I've seen both versions not only near one another, but actually neighboring each other on the same slider. Instead of having multiple editions you can simply list the most popular and then have alternates here.

We also have media with the same title listed by popularity. But what if you're still dissatisfied? Just type your search and allow the auto-complete -- or Alexa -- to generate new selectable media.


Amazon Prime Video Prime Time mini-sliders.

Alright, so we hit the 'x' to close out the interface and then select the 'Spider-Man: Homecoming (Plus Bonus Content)' @ Slot 2. It expands a focused mini-slider for additional choices with little cognitive load. We also take over the main poster of Slot 0 for data display, but can still see from above that media slot is 'Venom'.

Note how the search menu truncates a long title. Long titles have been an issue for film with no easy answers. Search components are complex, but thanks to the popularity of Google, most users have a pretty solid understanding. For power users there are boolean capabilities, but both users can gain a benefit of using autocomplete and Alexa to fine-tune these searches.

The default slot format for Prime Times here is:

  • ☑⁡⁡ Slot 0: main media selected above.
  • ☑⁡⁡ Slot 1: an older film (ie 10+ years) of related content (or 10+ years newer if the main title is old).
  • ☑⁡⁡ Slot 2: another popular film related to the main title to sandwich the older/newer title.
  • ☑⁡⁡ Slot 3: something a bit different to take off the edge or open up exploration, ie a comedy in the case of Slot 1's action/adventure, and vice versa if this was a comedy Prime Time.

Expando Drop-downs:

Amazon Prime Video Prime Time expanded drop-downs fit long titles.

We already saw the search expand for Venom with long titles, but this is a particularly long title. Adjustable font size by REM or EM can help, but the great thing about search components is that the shortening and scrolling of long text has long been present.

Also note here for some reason it is '(Plus Bonus Content)' while Venom is '[With Bonus Content]'. It would be nice to establish a style standard. Parens are preferred '()' because it's distinct from the year in brackets '[]' (ie, when multiple titles have the same title as with 'Venom'). Maybe there could be some additional shortening to the likes of '(+Bonus)' -- or even a single character icon that is a '+B'.


Amazon Prime Video Prime Time scrollable reviews.

Selecting the star rating, we get Amazon media reviews seamlessly integrated into the ad space -- with a new dark theme. The stars were changed to blue so they won't distract or confuse with yellow stars else where. Fans of the 'Pro VS Con' review format will now find that option under the 'Top Reviews' drop-down.

A custom vertical scrollbar is used for framed or customized panel content. The ability to load Prime Time reviews here by selecting from the search drop-down above will also work. Another possible review inclusion is IMDB, which will bring in more media-centric fans -- especially if they can interact with both sites via auto cross-posting.

Like this post? Read more from the ^UX topic.

       : NEWS