To design your own video platform, UX and UI are essential to ensure the durability of your interface. In this article you will find a case study that compares the UX and UI strategies of Netflix and Amazon prime video.
But also, clarified explanations of the two terms, their differences and complementarities. In short, the machinery of UX and UI applied to a VOD service.
UX and UI design
UX Design refers to the term user experience, and UI Design refers to the user interface. Both elements are essential to the creation of a product and work closely together; but their roles are distinct, referring to different elements of the design process and discipline. UX Design is a more analytical and technical field, UI Design is closer to what we call graphic design, although the responsibilities are a little more complex.
UX / UI: how does it work in practice?
UX is involved upstream of the UI and the development of the application itself. Here is a diagram explaining their roles by different jobs:
@credit : Esokia
The UX designer therefore starts working well before the rest of the team. 5 steps must be followed:
Definition of a strategy: this is where the analysis of users begins, what they are looking for, why they go to your site or application.
List of needs: and especially the definition of what can and cannot be done.
Definition of the structure: we prepare the plans and try to put ourselves in the user's shoes.
Creation of the first schemas: this is where the wireframe drawing comes into play.
Creation of the visual: it is at this moment that the UI designer starts his work to harmonize the decisions taken by the UX designer with a more technological side than his partner.
Although sometimes confused, the division of tasks between UX designer and UI designer is relatively clear. However, the UI must take into account certain aspects of UX in its work:
UX and UI are therefore interconnected concepts that must be included in the creation process of web agencies in particular.
Case study: Netflix vs Amazon Prime video
Pre Play
- Landing pages
The landing pages of Netflix and Amazon Prime video are similar, you see the video catalogue in the background and the two giants offer a 30-day free trial.
- Forfaits
After the trial period Netflix offers 3 different monthly forfaits, while its competitor Amazon rewards video after the 30-day trial period, automatically validate the subscription, at a rate of 49.00 EUR per year.
- Purchasing process
The purpose of this section is to make a comparison between the buying experience on Netflix and Amazon separately.
Netflix
When you are not a registered user on Netflix, you will find the page above. This page is quite pure, there is nothing else but information about the 30-day free trial period. Indeed, the page explains that there is a 30-day free period during which the subscriber will have access to all Netflix content. There is also a timeline representing the schedule of future payments if the user decides to stay on the platform, insisting on the reminder of the end of the trial period 3 days before it is completed.
Apart from that, Netflix has opted for a black background and a set of colours and fonts that focus the attention on the essential.
To start the trial period, Netflix has configured a red button that will direct the interested party to the different steps of the purchasing process.
Step 1: Choice of plan
Once you have clicked on the "Try 30 days free" button, you are redirected to step 1 of the purchase process. The choice of the forfait. It takes place over two pages: the first page aims to reassure the lead about the trial period which is totally free and also about the fact that the lead can decide to unsubscribe at any time during this period. Always very pure, it only displays important information. There is also a large red "See the plans" button that leads us to the second page of the first step.
The second page presents the different forfaits and options available to you.
Netflix offers 3 of them: Basic, Standard and Premium, which are offers that give access to different functionalities.
All forfaits give access to basic features; namely: accessibility on all devices, unlimited movies and series, cancellation of the subscription at any time, first-month free access.
However, depending on the selected offer, the user will have restrictions. For the Basic plan, the subscriber has only the right to one screen simultaneously, two for the Standard, and 4 for the Premium. For HD and Ultra HD viewing, these are options available only through the Standard (which includes HD only) and Premium (including HD and Ultra HD) plans.
Once you have chosen the package, you can click on "Continue" in red to go to the next step.
Step 2: Create an account
After choosing the plan that suits him/her, the user is then redirected to the account creation page: this is the second step. This step is also done on two pages, the first one explaining the reasons for creating your Netflix account (personalization and permanent accessibility to your account), the second one being more concrete and aimed at providing the information that will allow the user to create his account (E-mail, password, authorization to send notifications).
Step 3: Payment
Once the user account has been created, the final step is to define the payment method. Netflix offers two types of payment like most web players; namely by credit card or Paypal. In addition, the user can also benefit from a gift code from a relative who can give him access to all the contents of the platform, a code that he can enter as a payment method for the platform.
Regarding the purchase process on Netflix, the site has bet on a UX/UI strategy based on these different points: efficiency and effectiveness, simplicity, Credibility
These three points are very important in the purchasing process because they allow the user to be reassured about his purchase, to get to the point quickly without any complication or ambiguity.
Amazon Prime
The payment process is practically the same. One of the main differences is the design of the homepage UI, which highlights the content of the streaming platform in the background. The other difference is in the UX . Prime video, instead of Netflix's monthly packages, offers an annual payment of 49 euros that gives access not only to Prime films but also to other benefits over Amazon in general.
Step 1: Home page
When going to Prime, the user comes to the home page and has two options: he can log in if he already has an account or start the free trial. These two choices are emphasized by two large blue buttons. The user can also see the films and series that the platform offers in order to arouse curiosity and call for action.
Step 2: Create an account
Unlike Netflix, the account creation process is longer at Amazon: first, we have two additional fields to fill in (name and password confirmation) for the first page of this step. Then, when the information is filled in, Amazon will ask to verify it by sending a code to the user's email address, which will validate the creation of the Prime account.
Step 3: Payment
As soon as the user validates his e-mail address, the final step is to define his payment method. Unlike Netflix, Amazon offers only one type of payment, by credit card for its annual fee of 49 euros. It is therefore not possible to use your Paypal account.
- Identification process
The process of identifying the new user is very similar at both sites. Both players ask for the same information to identify (email or phone number, password) and offer the user the possibility to save their information so that they do not have to enter it each time they want to connect.
- Home pages
The home pages are quite similar in their construction with the categories at the top left, the search section at the top right allows you to search for products in the catalogue, but also a large slider to announce new products and the video catalogue scrolling down by section.
The only big difference is the size of the slider, larger at Netflix but with only one content proposal, while the one of its competitor Amazon Prime video is smaller but therefore scrolling a plurality of new content proposals.
- Categories
The two SVOD giants have opted for the same strategy for their categories. The catalogue is mainly divided into series and films. Netflix also offers in its header a gender classification as below.
In addition to these classic categories, Netflix and Amazon Prime video have third party categories of favorite types and/or user recommendations respectively.
- Presentation of the video descriptions
With regard to the presentation of video files, both Netflix and Prime video have a brief description of the film or series, the genre, the play and resume button and also a button that allows you to add the content to your favorites list. The metadata are arranged in almost the same way (title at the top left of the image, then the description and the rest on the left).
However, there are some differences at this level. For example, when you click on the content that interests you on Amazon prime video, you come across a page that is totally dedicated to this content. Also, in the presentation of the video, Amazon adds the list of main actors, audio languages and subtitles; which is not the case for Netflix.
On the Netflix side, the first difference that appears when you click on the video is that it expands and you have access to the presentation sheet surrounded by the other videos on the home page. In this presentation there is a trailer that immediately starts once the video is enlarged and also the name of the filmmaker. There is also a button to access the titles similar to the one of the video you clicked on.
The playing
On the Netflix streaming platform, the video starts as soon as the user clicks. However, its competitor Amazon Prime Video often uses this opportunity to promote original titles by displaying clips or trailers before the platform starts playing the desired title.
While some users appreciate the fact that Prime Video helps users discover its content, some users do not like to be forced to watch a trailer first, they want to be immersed in their movie right away and not in promotional or commercial trailers.
Netflix had recently started testing promotional videos between episodes of a season and received very negative feedback from users. Overall, users did not appreciate this experience:
Sources : The New York Time
- The layout of the user interface controls
Prime Video presented the user interface controls at the corners and center of the screen: playback / pause and forward / backward by 10 seconds are in the center and the other controls use all the four corners of the screen.
On the contrary, Netflix displays all the commands of the user interface (except for the return button at the top left) at the bottom of the screen.
According to Medium magazine, a majority of users appreciate more the Prime Video layout, mainly because it gives priority to the most used controls at the center, which is also much larger in size. The Netflix layout introduces a certain load level of the engine when using the controls.
- Additional user interface controls
Most of the controls on the playback interface are the same for both services, except for a few (play and pause, skip or rewind 10 seconds, volume control, full screen, next episode, subtitles and audio).
Prime Video has developed a feature called X-rays in the top left corner of the screen that digitalizes videos and provides information about the broadcast and music played and allows you to move directly to a specific scene. This feature is very popular with users because it is sometimes useful when you want to know the name of the interesting character.
Netflix, on the other hand, allows you to switch between seasons and episodes of the title in the playback interface. This feature is not available on Prime Video: you must exit the playback user interface and browse the title page to switch between seasons or episodes....
Netflix also allows the user to make comments in case of problems with the video, making it easier to explore and improve the service. Such comments cannot be made on Prime Video.
- Binging on Netflix
Netflix has some additional features in the read user interface that appeal to users.
The ability to skip the introduction and credits at the beginning of each video saves considerable time (and bandwidth for Netflix) and further strengthens the virtuous circle of the engagement loop. The next episode starts playing automatically after 15 seconds.
- Translation and audio in several languages
Prime Video to compete with Netflix, must develop its UX. Most content has only English subtitles and the audio is only in the original language, while Netflix offers both subtitles and audio in multiple languages for the majority of their content library.
Post Play
When the user watches a movie or the last episode of the last season on Prime Video, a video recommendation appears at the bottom right. It is difficult to know what the title is about and why this video was recommended in the first place.
In comparison, on Netflix credits only take a small part of the screen with controls to like or dislike the video. The rest of the screen is used to suggest the next title to look at with a description and a few words on why the user would like this content.
The experience seems more interesting post-play on Netflix than on Prime Video, because it gives priority to the most important information for the user and facilitates engagement.
In conclusion, overall, users prefer the Netflix user experience (UX) and Amazon Prime Video user interface (UI).
- Devices
The interface changes according to the devices (web, TV and mobile applications), in fact it is e adapted because of its difference in use. For example, the use will be different on the computer with a mouse, from the one on the TV with a remote control or on a mobile phone with touch navigation. The user interface is therefore adapted to each type of user.
- Method of payment
Payment on this type of platform is usually made by credit or debit card.
Card numbers and bank details are retained at the time of registration.
- The personal user space
Regarding the user space, there are several differences between the two platforms.
The first is that Netflix allows you to create different user profiles on the same account. These different profiles can be configured differently and Netflix can adapt the content it will offer according to the settings and preferences of each profiles. For example, the language of the site can be determined and the content adapted to the age of the person to whom the profile belongs; this is how Netflix will be able to offer youth content to children and of any age for those who have not set an age limit. At Amazon, the personal space is more basic, a unique account that you can enjoy alone, while children's content is a tab that the site offers.
Netfilx UX emphasizes sharing and has therefore set up its site to make this possible.
When you enter the accounts and parameters, you can see that the display of the main tabs is not the same for the two VOD leaders. At Netflix, you have to scroll down to access the tabs while at Prime the tabs are all aligned; this makes it easier to navigate the Amazon streaming platform. While Netflix organizes the user space into 4 different parts, the Prime user space is based on 8 different tabs. Nevertheless, the same elements are found on both sides.
Netflix
Subscription and invoicing: here the subscriber can find all the information related to his login and subscription while having the possibility to modify them if he wishes. He can also manage his payment information and modify it if it is no longer up to date and access his invoices online at any time too.
Package details: in this tab, the subscriber has access to information related to his package. He can also modify it to switch to a higher or lower offer according to his desires.
Settings: In this tab Netflix allows users to set up several things. They can enable parental control to prevent inappropriate content from being viewed.
Subscribers can also choose whether or not to participate in tests of new options or features that the platform wants to implement. In doing so, subscribers feel more involved in the development of the platform they use.
In addition, users can manage devices connected to their Netflix account by remotely activating or deactivating them if they notice misuse of their account. They can also track all streaming activity on the account, and therefore know in which city a device has connected, for instance.
My profile: Here, subscribers can manage their communication settings. They can choose both the channel through which they want Netflix to communicate certain information (e-mail, text, pop-up) about offers and new features to them, just as they can manage the use of their data by specifying whether or not they want it to be used for commercial purposes.
They can also retrieve viewing histories and titles that all the profiles of the same account have seen since the account was opened. It is also possible to set the subtitle display by changing the font, color, etc.
Netflix actually allows account self-management, promoting user autonomy and control.
Amazon Prime video
At Amazon we find the same tabs as at Netflix. One major difference at Amazon Prime Video is the "Channels" tab which groups together a few TV channels in streaming. The user can therefore find channel content on the platform, which is not the case with Netflix.
To conclude on this case study, each of the two giants of OTT have good points and points to improve in order to better satisfy users and facilitate navigation on their platforms. At Netflix we understand that the improvement is to be made in its design UI such as the layout of the user interface controls or even more content in the slider. At Prime Video on the other hand, the improvement would be more at the level of UX design such as a better post play presentation, the possibility of leaving feedbacks or the removal of advertising at the beginning of viewing.
If you want to create a video platform that reflects your image and meets UX and UI design standards, contact Kinow!