Archive.org Movies Section

Introduction

One of the most important aspects regarding website and application design is represented by the combination between a well-designed interface and the user experience which provides a high developed interface with a smooth navigation and increased usability based on user feedback.

This report is looking to reinterpret the player section of Archive.org Movies website and to produce 2 interactive prototypes for TV and mobile, based on best practices, latest design trends and a thorough analysis of market competitors.

The movies section of archive.org represents a collection of around 3.3 million movies, films and videos uploaded by Archive users. Within the library, there is a large range of files, going from complete films, broadcasts, concerts, cartoons and many more with the option of downloading most of the content for free. Besides the searching and download option, the section provides an opportunity for users to upload personal videos and specify the usage criteria.

The main aim of the movies section is to provide digital copies of varied movies for free access from a worldwide collection, providing opportunities for all users regardless of their background.

Throughout time, the platform stood up by providing free access to a spread content and accommodating varied needs. However, the current situation of the website could benefit from a retrofit, as the platform is presented in an old fashioned style, with an outdated interface and reduced user experience. Furthermore, the library could benefit from a mobile version that incorporates all the relevant information in a compact way, making it easy for users to access it.

Aim and Objectives

Aim

The aim of this report is to create an improved interactive Smart Tv player interface with an additional mobile correspondent version for the Moving Image Archive existing website.

The output will be designed in order to offer an enhanced user experience presented through a more visual user-focused interface and will be presented as clickable prototypes summing up all the best practices gathered from the research stage.

Objectives

  1. Analyse the current layout of Archive.org and other similar platforms to create an overview of their specific design approaches and needs. 15 hours will be used to complete this task with and end date of 14th of February 2017.
  2. Research the trending techniques and best practices in terms of Smart Tv player interface design along with fundamental requirements for creating such a successful application using existing specialised resources together with best techniques in terms of prototyping. For this task a number of 40 hours will be allocated and it will be done by 4th of March 2017.
  3. Plan and develop an improved design for Archive.org implementing all the key features of a successful Tv app based on the conducted research with an additional Mobile version, both based on the platform guideline. An amount of 70 hours will be assigned to this stage with a deadline of 15th of April 2017.
  4. Take the developed interface to user testing in order to find any potential issues related to the design and get feedback on the usability and user experience from a varied audience using an online questionnaire. The testing process will take up 8 hours with a deadline of 25th of April 2017.
  5. Write up a report summing up the entire process with focus on the fundamental steps to be undertaken to achieve the desired outcome, the analysis of the Archive website (movie section) together with similar platforms and finishing with the design and implementation stage, and wrapping up with the feedback gathered from the user testing. 15 hours will be assigned for the write up with an end date of 6th of May 2017.

Methods

With the aim of creating a successful design for the Moving Image section of Archive.org, an amount of 148 hours will be split between progressive tasks, starting from analysing the current layout of the platform and gathering the main issues preventing it from being user friendly, researching best practices and techniques related to Smart Tv player interfaces and user experience, designing and implementing a new improved version of the player incorporating all the features required for a successful app and finally testing the outcome and getting user feedback.

Throughout the process, two fundamental aspects are represented by the component stages of time management and finding a suitable method for representing project objectives.

Waterfall Methodology

Image Source: https://d2myx53yhj7u4b.cloudfront.net/sites/default/files/waterfall%402x.png

Andrew Powell-Morse (2016) points out the Waterfall methodology as being suitable in app or website development because of its adaptability, structured organisation and allowance for progressive changes. In terms of adaptability, the Waterfall methodology creates a detailed content and structure which is fundamental in the design process. Another reason why the Waterfall methodology is a good choice for a design project is the structured organization it creates and the order it establishes during the development process. The allowance for progressive change represents maybe one of the most important aspects about this methodology, as design is an iterative process that needs constant changing or updating which cannot be reviewed after completion.

Starting from the requirements phase, where the targeted website was analysed and compared with similar competitors, a plan of action consisting in rough sketched ideas, wireframes and design followed the initial thoughts. For the implementation stage, the prototypes were built and prepared for the upcoming stage, verification. Summing up the feedback obtained through online questionnaires, a conclusion has been drawn which resulted into the final step of the process, maintenance.

Time management

Analysis

Archive.org Movies Website

From a first glimpse on the website, a rather big problem is related to the visual aspect of the platform, as it is not aesthetically pleasing, looking rather old and clustered. The Moving Image Archive page does not have a clean layout with a hardly understandable navigation and the overall design being confusing for the users.

From an user point of view, the page looks rather messy, with categories not being easily recognizable due to the small images attributed to each of them. The page also presents information that is perceived as irrelevant and the design is unpleasing compared to other similar platforms.

The user experience

The existing user experience on the website does not represent an efficient navigation aspect, the user journey being possible to improve such that the users can easily navigate, search through listings on different categories.

Moving Image Archive’s user experience could be highly improved by removing extra steps needed in order to achieve some of the main functionalities represented by search, find and play.

The audience - Personas

The audience targeted in the Movie Image Archive website is general, as it is free to access and use, reason why there are several personas profiles that can be extracted from it.

The main goals for the personas are represented by finding the desired movie or video and being able to download or play it through the platform.

In terms of frustrations, the slow navigation on the website and the clustered layout create a confusing experience for the users and a rather unpleasant experience.

The solutions to these problems involve creating a more user friendly interface which is easy to navigate and understand and does not involve any complicated steps to be taken to achieve the initial goals.

Netflix.com Player

The main competitor in terms of tv apps is represented by Netflix, one of the most popular platforms worldwide. Netflix presents up to date movies, tv series, tv shows in HD format, with available subtitles and with options available depending on the country of use.

Furthermore, Netflix presents its own shows and movies in HD format, has a very good user interface which is embedded through interaction animations on actions such as hover, click and many more. The design of the platform is user centered, the user experience is enhanced, the navigation is intuitive and the main functionalities represented by search, find, play are naturally placed.

Research

What make a successful App?

There are certain criterions that make a successful app, fact proven by popular names such as Netflix, Facebook and so on. The first key aspect is the uniqueness of the app. It is extremely important to have a bespoke idea and not copy other similar platforms in order to become relevant in the field. Another important criteria is the simplicity of the app. The most popular brands worldwide use a simple, clean layout in order not to mislead the visitors and make the user journey smooth and pleasant. Rahul Varshneya (2013)

An additional means of making an app successful is optimising and updating it regularly in order to keep up with the trends and changes in the line. Keeping an app updated and refreshing its look regularly provides an incentive for the user to keep coming back and recommend it to others. One other way of creating a successful app is understanding the user behaviour on the platform and developing it accordingly, which will further improve the user experience and its popularity. Jim Nichols (2015)

This being said, a further analysis of the most important aspects in app development process such as the audience, the different types of navigation and style guides will be conducted in order produce the best output.

How important is the audience in design

The audience represents maybe the most important aspect in the design process, as the users are the main beneficiaries of the product. As pointed out by Nicole Venglovicova (2016), the audience can be targeted by different means such as the age, gender, education, interests and computer skills. An important fact that has to be understood is that designing for everybody is highly unlikely to happen, meaning that the designer has the task to choose who to design for and what requirements to meet.

Personas

Image taken from: http://www.ux-lady.com/diy-user-personas/
A persona represents a cluster of users who exhibit similar behavioral patterns in their purchasing decisions, use of technology or products,customer service preferences, lifestyle choices, and the like. Behaviors, attitudes, and motivations are common to a “type” regardless of age, gender, education, and other typical demographics. In fact, personas vastly span demographics. Kevin O’Connor

As explained by Marcin Treder (2014), personas are a vital part of the design process, as they form a clear path to be developed for and enhance empathy through highlighting the emotional side of a project and the impact it has on the audience. This being said, the personas should be carefully constructed through sufficient data gathered by interviewing a wide range of people in order to create a number of different profiles.

Types of navigation

Miller (2017) enumerates the types of navigation that can be found in website design starting with horizontal and vertical text as being the most commonly used types of navigation. In some cases, based on the content structure drop-down menus or sub-menus can be implemented, however the most important aspects he is highlighting are the descriptions which will help the user find the desired page and icons which can make the design intuitive by the clearer link destination.

Team and Team (2017) points out the most important part of navigation process being the way it is organized and designed rather then the coding part. Rated by importance, the website functionalities should be divided between navigations creating for the user a primary navigation which will include the most attractive links and a secondary navigation including links with a minor importance.

The importance of a Grid System

Shillcock (2013) defines a grid systems as being a system formed by multiple horizontal and vertical intersected lines which will organize the content in order to be easy readable and understood by users and easy manageable by designers.

Image taken from: https://webdesign.tutsplus.com/articles/build-a-freshly-squeezed-responsive-grid-system--webdesign-14888

Simon (2016) finds the use of a grid system as a major benefit in projects workflow, the use of grid will enhance visual hierarchy, adding space and order between elements also increasing the creativity of the page and making the design workflow quicker.

Navigation hierarchies

Gube (2009) acknowledges about the benefits of using breadcrumbs, which are a secondary navigation scheme used in order to help users locate their position in the website hierarchy and navigate increasing the usability.

Anthony (2016) find the breadcrumbs suitable for website with 3 levels or more of navigation hierarchy being an option tool which should always start with home link and the direction given using arrows rather than slashes.

Device orientation importance in design

Pagán (2012) indicates the main factor for the design orientation decision being the audience and more specifically their online behavior. The author also highlights a few important aspects which may influence the final design decision: some users might find it harder to hold the device with one hand and they will use both hands changing the device orientation from portrait to landscape, the interface layout composition which can vary in order to get the best adjustment and distribution of content in a easy and intuitive way to scroll and navigate through.

Itzkovitch and Itzkovitch (2012) points out a good example of device position orientation found on Youtube which shows how the interface is affected, on portrait version along with the video extra specifications and information about the user while the landscape version will transform the video in full-screen mode showing only the controls and few buttons on the sides not to lose its functionality.

Youtube Portrait and Landscape Orientation (Image taken from https://www.smashingmagazine.com/2012/08/designing-device-orientation-portrait-landscape/)

Style guide

French (2016) informs about style guides in online as having multiple connotations and uses such as: brand guide which focus on the specific logo brand, design language mostly for the colour palette, style guide covering visual aspects and components and toolkit, the improved style guide which includes coded components.

White (2016) points out the consistence of a web style guide starting with design principles; typography providing font family, size and weight for different sections; grid and spacing in order to keep the overall design constancy and proximity over the pages; colours as a colour scheme (main colours, background, foreground, font, links, buttons etc.) and components like sliders, hero image section.

Story Boarding

Babich (2017) points out story boarding in UX design will show the efficiency of the user experience product and highlights the users flow through website pages giving a visual overview about the entire interaction process.

Spotless (2017) defines three main fundamental steps in story boarding process starting with the scene by giving a context for the users followed by paper drawings to sketch the idea and finishing with sequential layout.

Sequantial Layout (Taken from https://www.spotless.co.uk/insights/three-tips-for-storyboards/)

The platform style guide - Apple or Android

O’Sullivan (2015) recommends understanding the UI patterns of the available platforms before starting designing and getting familiar with their guidelines in order to follow the style guide, using the general style, buttons and global elements, navigation or typography.

Letourneau (2015) acknowledges that the Apple Tv applications should strictly follow the official guideline. The author also enumerates the main gestures used on tvOS as being swipe, click and tap, each one being linked to different actions such as select or navigate.

Differences between iOs and Android UI

Müller (2016) points out the main differences between iOs and Android user interfaces starting with the app icons style which is a flat style in both cases with a minor difference, Android allowing transparent background on icons, the tab bars and their order is different, the grid which also is different Android having a specific grid.

Icons

The App Icon

According to Michael Flarup (2017) the app icon design should be easy to identify and remember and also remarkable by the users.

The icon should not contain any text and should follow a few mandatory aspects in order to be successful for the first seen in the App Store: to be scalable, recognizable, consistent with design from inside of app and unique.

LeBlanc (2013) adds about app icon design more aspects that are considered as best practices such as unique shapes highlighted by using a good colour palette which will be able to be recognized on different wallpapers an user can use and to avoid implementing images or too much text.

Icons in design

Mertz (2012) justifies the importance of icons in design interfaces by the increased readability and perception making the overall platform easier to understand and navigate through by keeping the constancy of icon design, size and margins.

Yalanska (2017) finds the icons vital for websites or applications for their ability to have a meaning becoming a visual symbol for a functionality or an action. The author sorts the icons into three main categories by their purpose: interactive, clarifying and decorating.

Gestures

Babich (2016) finds the gestures as natural actions which can extend the platform functionality but are graphically hidden as existence from the user and suggests to incorporate tutorials illustrating how to use them in order to use or navigate.

Image taken from: https://thenextweb.com/dd/2015/11/09/how-to-implement-gestures-into-your-mobile-design/#.tnw_ndQCRGbO

Cousins (2015) recommends gestures to be used along with animations on mobile devices such as animated notifications, collapsing forms or scrolling.

Principles of User Interface

Martin (n.d) points out the main three principles of user interface design as being: organisation which is related to the look and feel of the platform structure based on constancy and navigability, economisation covered by intuitiveness along with clarity and communication which focus on readability, symbolism and colour. All these principles solve many user frequent navigation problems.

User experience

Image taken from: http://www.oswebdesign.co.uk/blog/how-important-is-the-user-experience-in-web-design

User experience represents at origin the interaction between the human and the computer and it contains anything interaction related, from digital devices to vitally important processes within companies.

The user experience in website design can be associated with the designer’s responsibility. To achieve a smooth experience, broad research and analysis around the human computer synergy has to be made. Soegaard and Dam (n.d.)

Usability

According to Nielsen (2012), usability represents the quality measure of an interface, as it assesses how smooth the navigation is done. It mainly comprises of five fundamental components, namely: learnability focused on the ease of accomplishing simple tasks on first time basis, efficiency measured by the speed of completion of a specific task, memorability described by the efficiency of navigation on distant occasions, errors defined as the amount of problems the users find when navigating along with their severity and the leisure of solving them and last but not least, the satisfaction characterized as the level of comfort achieved while using the produced design.

Best prototype online tool

Gabrielle Gosha (2015) acknowledges about three very popular tools for prototyping InvisionApp, Marvel and JustInMind that can bring ideas to concrete, each one of them presenting a complex platform which provides a full set of features in order to create and test a product.

InvisionApp

Jeremy Wells (2014) finds InVision App an easy tool to create interactive mockups due to overview control of design which is giving a real context to the website or app, the history version available through the platform, the hover effects and live share. Another aspect that highlights InVision is the swiftness of the workflow.

Marvel

Alex Kukharenko (2017) recommends Marvel for small projects or single designers for its simplicity and efficiency, the collaboration support present on the platform along with explore mode which is a library of prototypes made with inspirational purpose.

JustInMind

Grace Jia (2016) justifies the choice of JustInMind for its flexibility and for the prebuilt functionalities which offers interactivity based on animations and effects.

The best prototyping tool for the project according with the aim and objectives of the project is the inVision App for the mobile version because provides a fast way to build a clickable prototype and to illustrate the flow by joining the screens together, and MarvelApp for efficiency and the TV version support offered.

Conclusions

  1. The most important factor in any decisions related to design is the audience and the understanding of their need, goals and frustrations, as they are the main beneficiary of the platform while also being the biggest critics. The degree of understanding and adaptability of the design based on their needs is a fundamental part in the process of building a successful app.
  2. The importance of using a grid system, a hierarchy navigation and anticipate how users will use it based on their wants and needs is another important aspect that has to be carefully considered. The possibility of using the app both from a computer and a phone is critical in order to satisfy a larger audience and bridge the gaps under the user experience.
  3. Successful designs have in common certain habits such as in advance planning, creation of scenarios and projection of a storyboard which will help understand the user journey and enhance the usability of the entire platform.
  4. One of the unwritten rules that leads to a good app design is represented by the following of platform guidelines (iOs) in order to express consistency in design and create an easy interactive platform that enhances satisfaction among users.

Based on the analysis carried out and the research of all the key aspects linked to successful app design, best practices were introduced and applied in order to create the two clickable prototypes. Behind the products, the Waterfall method was used to strategically apply a series of processes with the purpose of getting the best output to achieve the aim along with the objectives of the project.

Specification

The direct output of the project are two clickable prototypes one for TV and one correspondent for mobile, each one of them consisting of multiples screens in order to cover the main functionalities: search, find and play.

The TV prototype consists in 11 screens and the mobile version in 10 screens, both are highlighting the researched best practices and mandatory functionalities.

Features and functions

The app provides a well structured Information Architecture highlighted by the design layout, contrast, margins and proximity. Along with them a list of features and functions to the user are implemented:

  • search
  • list
  • play
  • rate
  • download

Planning - Production

Application Icon

Design and Implementation

Rough idea sketches

TV Version
Mobile version

Medium fidelity wireframes

Mobile Wireframe design

High fidelity design

Mobile design

Style Guide

User journey

Storyboard

Prototypes

TV Prototype: https://marvelapp.com/460i7fd

Mobile Prototype: https://invis.io/CNBMQXFAT#/232830691_home

User testing

Online Questionnaire

Online questionnaires are a very powerful tool for gathering information related to a specific subject from a broad audience. Although easy to implement, an online questionnaire is a complex aspect that has to be regarded with high precision, as the entire feedback is based on the posed questions. Ux for the Masses (2011)

The content of the presented questionnaire is presented below:

  1. What was your first impression when you visited the app?
  2. How would you describe the user experience in one or more words?
  3. Overall, how easy to use do you find the app?
  4. What do you like best about the app?
  5. What do you like least about the app?
  6. If you were to review app what score would you give it out of 10?
  7. How can I improve the app?

The overall feedback provided from the user testing showed a consistent feel about the layout of the app and the overall usability. The audience involved in the questionnaires had a very good first impression of the website, enjoyed the user experience side of the app and found it easy to access all the features of the platform. When asked about what they like best about the app, the users most appreciated the accessibility it offered and the neat organisation of content along with the colour palette.

In terms of what they dislike about the app, the vast majority of users responded that they would not change anything, as they were really satisfied with the current design, with one specified issue being related to the typography more specifically font sizes in the information architecture. Regarding the app grading, 6 out of 8 users rated the app 10 out of 10, being extremely satisfied with the result.

Behance Link

https://www.behance.net/gallery/52599865/Archiveorg-Movie-Section?

Apple Store App Page