Case Study: Redesign of Netflix website platform
This is a case study on user interface design (UI) for the Netflix web streaming platform. The new design would decrease the information overload the website throws at the subscriber and gives fewer productions as option divided into genres tabs. That would allow easier and faster decision-making of the user what to watch. An icon for the customer service section would be created and the section itself would be relocated from the foot bar to the top bar near the search bar icon. Lastly, an online form and email address would be added as options for customer service.
INTRODUCTION
Netflix is well-known as the top video streaming service with hundreds of film and tv series titles around the globe. The company started as a mail-to-door rental service of DVDs and as one its UX/UI was the one of any e-commerce platform. The whole process consisted of adding DVDs to the customer’s cart to hire them. Netflix had no separate web app or mobile app. All they had was a website as a source of both information and transaction. People used to return the DVDs without leaving feedback and that did not give information about their preferences which left hidden the ways the service could be improved. Around 2007, the UX/UI design started to change developing to the look it has today. Two of the biggest improvements were the ability of the website and the mobile application that run on all devices along with tracking user data and experience. The last gives insight about the service’s success as well as data on what to produce and play.
USER RESEARCH
After the acquaintance with its user interface, two frustrations could be noticed. Netflix put all the work to make the UI easy and intuitive to work, by that joining the membership and finding productions fast and even based on personal preferences. But still, showing dozens of shows and movies through thumbnails on the landing page and playing an auto-preview when hovered on them feels overwhelming to the user. Although the intention was to make the customer experience fluid and support the customer in finding the right show or movie, what it does is it encourages them to “browse forever”. There are lots of complaints on the web about how many recommendations are being given and how full the page is with productions. That hardens the user experience and contributes to excessive thinking known as cognitive overload. It should be noted that images and videos are even more informational loaded than text since they bring objects needing time to be consumed. That should be done just to consider if the production would be watched or not. And there are dozens of previews. What is more important, Netflix is an entertainment provider and its complete goal must be relaxing and not bringing more thinking into time for rest.
Some subscribers, as even the current designer, spend around 20 minutes scrolling through to the grid in search of the desired show after a long day.
“The Paradox of Choice” is what is being played out in this scenario. The more choices that are presented to a consumer, the less likely they will choose a satisfactory outcome.
The second frustration is with contacting the customer service. There is a customer service section at the top of the landing page named “Contact Us”. For the user to reach it, they must go through all the content. Additionally, the company only offers a contact through the mobile app, a telephone number, a service code and a live chat to ask questions or report a service problem. Another section named “Help Center” provides a few pages with most asked questions but there is no online form for free writing or an email address. So that the communication between subscribers and provider become more accessible and complete, a handset icon would be built and the “Contact Us” section would be relocated at the top near the search bar. An online form and an email address would be added to the section whereas the “Help Center” section would be relocated too.
Pain Points:
· Information overload
· A long time looking for the desired show
· Inability to choose the desired show
· Watch it again section is useless
· Long scrolling needed in order to contact the customer service
· No online form and email address which could allow free expression of an opinion
· Struggling to find media of a certain run time
Defined Goals:
· Simplify the content on the landing page
· Break the categories of productions in three thumbnails in carousels and add arrows
· Add a runtime
· Relocate the rating
· Grid is 10 point
· Customer Service section is joined with the Help Center section and relocated to the top right bar accessible through a handset icon
Design Process
For the solution to be created, user research was undertaken, issues have been found and brainstorming was performed. Having all in mind, the designer finally arrived in the user flow and came up with the suggestions. Sketching helped clear all that up and brought more clarity to how the new goals would be achieved. Design Thinking played a fundamental role here.
Sketching / Low Fidelity Wireframe
Sketching is the first step of the process of building a prototype. It is easy and fast to draw a few sketches and view how the layout stands overall, what are the features and their consistency and hierarchy. Their biggest advantage is being able to correct. After a few sketches, those are the ones that the designer decided would perform the interactions best. Sketching could be used as Low fidelity wireframing which maps out the shell of the interface, its screens and basic information architecture. Teams use them to brainstorm ideas, concepts and make correction until deciding on the best one that would speak the message best.
Mid fidelity wireframe
Medium to high fidelity wireframes or prototypes is more complete representations of the end product than low fidelity wireframes. The wireframe gives details and eliminates ideas until only one is left. As it is visible grammar was changed, as well as the confirmation page of contacting the customer service. The customer is encouraged to view productions by recommending three of them. The screens were designed with JustInMind Tool.
Design Process
After the brainstorming and sketching, began the building of the interface architecture using the Atomic design method.
According to that approach, a complete page consists of “atoms” which are every small and seemingly insignificant feature.
Netflix as a video provider is both very simplistic and complex — the simplicity is the biggest goal — offering experience through videos and complex because video brings a lot of information to comprehend and more than one senses are stimulated. Consequently, Atomic Design is very appropriate for the discovered pain points. Additionally to the Atomic Design, a research of the brand design was conducted and was found only the colour palette they use, the logo, the name and the font. The font was unavailable to the designer because it was paid.
Everything else needed to be guessed and the designer put enormous efforts into finding the most similar characteristics as the ones of the company by which also differentiate them from the old layout. It is estimated that people enjoy new things but some degree of them should be familiar. Probably it has something to do with the enthusiasm and retaining the attention of the person.
With a website where the purpose is finding the perfect film of leisure, the UI must be clear, consistent and intuitively so that the user achieve the goal when open the link.
First of all, the home page divided into 4 rows with different categories and if the user wants to explore any of them, they just click on it, when the category is being opened in a carousel with only three productions and if the like any of the three given or open with the arrows, it can be open and seen as a film. Three new features are introduced — the runtime, how long the user wants the production to be and rating with safety measures. The most significant change is instead of dozens of thumbnails of other films and series as a background, there should be only background, the good well-know dark colour of Netflix.
That change supports the customer to be engaged only with the given content which is less than before but enough, both taking off their responsibility to search long while having the freedom to search as much as they need. Unnoticed is the creation of the handset icon which replaces the “Contact Us” section and is relocated right side of the top bar near the search icon. The “Help Center” section is included in the previous one and could be only accessed by the same icon. Last changes are adding an online form and an email address for liberty in communication.
User interface style guide
The Style Guide consists of the already known colours of Netflix, their logo and the one the designer found similar. A resemblance was found between Varta and the font Netflix uses in the UI, that is why Vartan is the implemented font.
Bebas Neue Bold is used for the creation of the name and logo. The icons are taken from Icon8. Grid View is the default one — 10pt. Figma is the software where the design is created.
Before demonstrating the prototype, would first go through the journey the user takes and what was the creative process of the designer after which will introduce the original website(with the issues), would share user testing when will end with steps the platform can take to improve further. A conclusion would be the finishing line of the project.
The USER FLOW looks like:
1. Open the website
2. Choose a category through horizontally scrolling
3. Search for production in a single category ( carousel) and set runtime and ratings through vertically browsing
4. View a film from a particular category
5. Click the handset icon at the top right
6. Contact the customer service through the online form
7. Receive confirmation for sending the message added by 3 recommendation for shows
Design Approach
First, the website was well looked for the interface it presents today. Second, opinion was searched about the user experience and was concluded that some people spend a long time browsing in the search of the perfect leisure film. The designer herself often has that problem. Tried to approach the task objectively and not only looking through the eyes of the company and herself but through the eyes of the users. Few sketches were drawn and few ideas visualized until one or two become clearer.
The Design Thinking and wireframing contributed to the developing of the selected ideas and to the elimination of possibilities that would not have worked well. Progress in the wireframing is to be noticed when the basic layout is only hand-drawn, giving the opportunity of exploring issues and probable solutions. Mid Fidelity Wireframing brings details and clears out the clutter by which leaving less possible ideas. High Fidelity or Prototype is one of the final steps of the process when the whole architecture is built and interactions could be made. User testing could be undergone in order to see if the interface speaks effectively if it is easy to use and achieve the consumer’s need.
This gives feedback on how the prototype is doing, how much is doing, how could be improved and should be another option considered.
Passing to the prototype:
A prototype is “a simulation or sample version of a final product, used for testing and by that resolving usability issues before launch.
The original Netflix website:
The overload, the slow user experience and way of reaching the customer support through all the content are obvious.
This is the new layout:
The Home Page
A film in play is kept, while the categories are reduced to 4 presented by one film each only. The categories are chosen by highest importance starting with My List, Continue Watching, New Releases and Top Picks. Vertical scrolling allows for the rest categories to be seen.
Top 10 in each country is kept as well because of the highest significance. Netflix tracks which shows are most watched anyway and that way inform subscribers which they are, encouraging the creation of trends and increasing the time spent watching. After these, more categories follow starting with Netflix Originals and Award-winning TV Programmes and finishing with less and less important categories presented by the personal preferences of the subscriber.
View a Category
The subscriber chooses Feel Good Films and three examples of it are given. A slider for runtime is presented, allowing choosing how long a film would like it to be. Ratings are also added with a viewers security in mind.
The subscriber chooses a show with length from 60 to 200 minutes and appropriate for children (U icon). After the slider is moved, the page transfers to the next one with films meeting those requirements. A back to the home arrow is introduced so that it makes getting back easier.
Choose a film
More film titles are given in the form of a carousel. Carousel is the UI element that was used for the categories on the home page as well. Those elements allow multiple pieces of content to occupy a single, coveted space. Since the content of Netflix is videos, carousal is the most useful tool for user experience.
Vertical scrolling left make visible the next film titles. The subscriber chooses “Howl’s moving castle” and is sent to the next page.
Preview a film
The chosen film is being open in a large image and a preview is played so that the user decide if they want to watch it or not. More films like these are given as options underneath. Both interactions are just the same as they are on Netflix currently. The user journey for picking a film is done here. The user has the opportunity to go back to the home page or click on the handset icon at the top bar and contact the customer service.
Clicking the handset icon sends the user to:
Customer Service Center
Creating the handset icon and relocating the customer service section makes faster and lighter contacting the contact team. An online form and an email are introduced as options whereas there was only contact through the app, mobile or live chat. The purpose here is not only the user would have more ways to get in touch with the stream provider but by writing in the online form or to the email address, they could freely express their mind without the limitations of assumed questions. The user here writes a message and click s submit which transfers to the last page of the prototype.
Confirmation for the sent message
Every way of coming in contact with a business on the web is followed by a confirmation, so Netflix is not exceptional at that matter. They can allow themselves to offer picked shows by the algorithm which is unusual for other businessеs to do. This not only puts a nice and engaging end of the confirmation page but also is a chance for them to retain the user on the platform and increase their watching.
User testing
The prototype was given to a few people to test it. Some of them find it liberating because of the runtime and ratings, apprecating they could choose the length and rating on the film they look for. The ratings imported on the page give fast information about the content and makes it secure for different ages. Other liked the resemblances with the original website and the relocating of the customer service. They embraced the idea of contacting Netflix more easily. Nothing was heard about the categories but most loved the general design. There were notes about the categories on the home page — a user preferred the old because “usually a few images are presented to the users and the one now are not enough informative”. The second note was made about the colours of the play and more info button, the colours were too light to be put on a moving image and the use of gradient was recommended. The third note was about the stroke on Top 10 films, it caused eye strain so it could be deleted in future work. The fourth note was again connected with the few titles on the category page “Why were they only 4? It is not engaging.” Some of the last notes were about the buttons on the customer service page in regard the buttons had different borders and that makes the user lose focus, they think the live chat is useless at all, because of the inability to create a chat bot communicating about the large library Netflix has. And the last note about the font and size of the confirmation text on the final page, they found it inappropriate.
Future directions
Looking at all the positive and negative feedback, satisfying the needs of all users is a hard task but something could be done. The categories could be kept as a number but instead of clicking on the category to be looked at, the user would just need to scroll on the category. That interaction could be achieved through a mask. The red arrow “Back to home” on the Category page could be deleted because there is a “Home tab” at the top bar returning the user to the home page. The buttons on the customer service could be edited and the font on the confirmation page looked at better. The negative feedback and the new suggestions open a lot of new work to be done and there also must be something new that would appear to be updated.
