Amazon Prime Video

The Redesigned Amazon Prime Video

Project title: Redesigning Amazon Prime Video

Type of work: Improvement of mobile app design

When: 2019 - 2 weeks

Concept: Improve the branding and navigation of the existing app to simplify the customer journey.

Starting Point & Moving Forward

Problems:

  • Apps seem to continuously make the same mistake of having multiple, personal items in the tab bar. In this case Amazon has placed 4 (out of the total 5) different, personalized functions on the tab bar: your saved Watchlist, your Library of titles, your Downloads, and even your app/account Settings. These can easily condense into an Account page, simplifying navigation overall and allowing an easily understood process across platforms.
  • As it is with music, filtering by Genre can be incredibly important and there's no option to do that in the way that there is with competitors like Netflix and Hulu.

Moving forward: One thing that gives Amazon's Prime Video a leg-up on the competition is an extensive library of titles available for purchase, an asset which the app should lean into. Having original content streamable for free is optimal in today's streaming economy, but having titles for sale would massively expand the available content. As detailed extensively in the case study from Simon Pan, one of the lead designers on the app for Amazon's Music app, there are multiple ways to go about this, such as the use of enticing blue buttons for different kinds of actions. Lastly, I'm sure I'm one of the few to think so but crossing the Android and iOS best practices by using a hamburger menu in addition to the tab bar would massively improve navigation options for users who want quick access to sections without moving through tab/menu layers.

First image: the app on iPhone 6 at the start of this project; Second image: the app on iPhone X upon a later update.

A New Information Architecture

Sketch of a new information architecture
Sketch 2 of a new information architecture

The Hamburger Menu

The differences between the UI and best practices on Android and iOS devices are well known, with the view from Apple being that the Hamburger menu, while a simple way to house navigation, clashes with the preference for simple navigation options that highlight the current page while showing further navigation. For example, the hamburger menu being on iOS gets in the way of navigation options like a Back button, an issue not present on Android interfaces as the Android's bottom navigation comes standard with a Back button already. Regardless, Google and Android apps are beginning to steer towards the use of tab bars and lower navigation options as screens get larger, but for now the differences remain.

My inclusion of a hamburger menu for these prototypes is a direct result of looking at the overarching economy of Amazon apps, including their primary shopping app and the accompanying Amazon Music app. (The Music app has since been updated, such that the new UI does not reflect a similar usability pattern as the parent Amazon app.) In order to add/retain an overarching pattern of usability for Amazon customers as they move between apps and platforms, I made a choice to include a hamburger menu in the upper left corner. As the related apps are updated and more user research is conducted, that hamburger menu and the overall UI can and should be revised by way of moving such options to the tab bar.

For now, the hamburger menu remains, as seen in my high fidelity prototypes.


High Fidelity Prototyping


Self Reflection

Prior to this project branding consistency had been something in the back of my mind and was mostly achieved through habit. However, over the course of my prototyping phase I made a concerted effort to create and maintain a set of styling guidelines. This practice helped to develop a familiarity with such guidelines in future projects and to understand the importance of having and utilizing such guidelines. However, there are some mishaps in my usability patterns. For instance, you can see on the Content Page ("The Grand Tour") that the Exit/Cancel icon is in the left corner but on the Search Page (the next slide to the right) the same Exit/Cancel icon is in the right corner. Because these designs are specific to iOS, that left-hand icon should actually be replaced with "Back" or moved to the right corner for usability consistency.

Alas, my hamburger menu dilemma. This was a choice I'd made to keep the app within the Amazon umbrella of usability patterns, but is that really necessary? The family of apps are, by their nature, different and separate. Even though Amazon's iOS shopping app maintains a hamburger menu, it feels like a choice to keep the vast selection accessible in a way that's similar to the website experience. Conversely, shouldn't the streaming app focus on the streaming experience? These are the questions that keep me up at night. In a later update I think the difference in experiences and the iOS design standards would necessitate a move away from the hamburger menu and a further redesign of the information architecture. With all of this in mind: these errors could easily be fixed or updated now that the project is over and I'm reflecting on and reviewing my documentation but I think it's important to find, point out, and learn from your mistakes.


View the complete presentation/slides right here.