Research Report: Portfolio (Process) Online Player & Device App concept for Internet Archive Moving Image section

Clickable Prototypes: https://richah3ofd.proto.io/projects/

Mobile Prototype: https://richah3ofd.proto.io/player/?id=5a8d19ec-7929-4623-975b-d07f9e9390ee

Desktop Prototype: https://richah3ofd.proto.io/player/?id=4b33bde6-ec18-47fd-8999-4f9632267966

1. Introduction

The Internet Archive site (www.archive.org) is a non-profit digital library offering copyright free collections containing books, movies, software and music. It has 297 billion archived web pages. It exists to preserve cultural artefacts from society and allows free access to them.

The Internet Archive Moving Image section is a library of digital movies uploaded by users ranging from full length films to daily news clips. These are available for free to download or listen to. They are arranged in a variety of categories such as media types, subjects and languages. As of writing the page currently has 3,414,962 results or entries.

The project set is to update the Moving Image Archive section of Archive.org.

The project is to design and document the production of an interactive Smart TV player interface and a corresponding Mobile concept App (Application) for the Moving Image Archive section of archive.org. This document to be written in the form of a professional blog on Medium.com which will look at outlining the design process for updating the archive.org movie section, giving it a modern feel and producing clickable prototypes for an Interactive Smart TV Online Player interface and a Mobile Device App.

2. Research and Analysis

Site Audit of the current archive.org movie section

Design and Layout

The content of the Moving Image Archive section is good with a few areas for improvement. However, the layout and design are outdated, lacking clear structure with no strong identity to make it stand out from its competitors. It needs to incorporate some modern design trends.

The current Moving Image Archive is too text heavy with no ghost buttons, heroes images or images with text overlayed to give a modern feel. These are all modern trends seen on successful sites like Netflix and Hulu.

Home Page

The first page of the Moving Image section is the “About” page. This page is all text with no images which is very uninviting. The first page should list the video categories in rectangular blocks or tabs with images in the background with writing overlayed. This would be a more modern and visually attractive way to list content.

Figure 1 Moving Image “About” page

To a western audience the eye is led from top left to bottom right on any landing page. The navigation bar is too thin with the important icons too vague as to what they are (Figure 2) The icons need to be bigger and more visually descriptive.

Figure 2 Navigation bar

Video Category Page: Design and Layout

Currently the Video categories page is in no order. The grey containers for each category (Figure 3) are of inconsistent size. The grey backgrounds are dull. There is repetition and confusion in the category titles for example Movies and Feature Films (Figure 3) are listed as two separate sections when they are the same thing.

The circular video images are not centred but position to the left which again looks muddled.

Figure 3 Grey containers for each category

A sample Movie category is Sci-fI / Horror (Figure 4) The page is divided fairly neatly into a grid. Sci-Fi and Horror are two separate genres and would be better if they had individual sections.

The page has an overall dull grey look. The font size for the heading is very plain and unimaginative. The image chosen in the heading is again grey and a better quality image should be used to promote the page.

Figure 4 Sci-Fi / Horror Page

There is unnecessary clutter on this page. For example the thumbnail for Horror Express (Figure 5) is fine but none of the text is needed except the film title. The Year and running time would be useful but the number of comments and how many users have seen the video is not needed at this stage.

Figure 5 Video thumbnail

Video download page

The download page for each video contains a list of formats (Figure 6) to choose such as MPEG4. These should be buttons to click making it clearer where and how to download videos. There needs to be more buttons, images and less text on this page.

The download options are limited. There should be other formats listed eg. mp3, AVI and WMV.

Figure 6 Download Options

The forum page is good for gaining feedback discussing improvements and improving user loyalty.

Intuitive Iconography

The Video Icon when clicked turns red (Figure 7) and when the mouse hovers over a caption titled Video appears with a pulldown menu to improve usability.

Figure 7 Video Icon

General Features and Functions

Design For Mobile

20–30% of Moving Image Archive users are on mobile devices and the site needs to be made fully responsive.

The site needs to be more intuitive with drop down menus, Sliders and Ghost buttons.

Links

To correct broken links use Screaming Frog (an SEO tool) to show if there’s a link that points to a page that does not exist so you can then either remove or edit it.

The sitemap needs to make sure that it is well-formed and complete currently there are some dead links and duplicate pages and links.

Site speed and page load times are slow. Check the page load times using a tool such as Pingdom.

Grid Layout

The site useds a grid layout sytem. Horizontal strips are used for the navigation bar. Vertical columns are used for the main page content with a column to the far left for features such as Media Type and language. This far left side menu occupies roughly 1/6 of the entire page with the other 5/6 being the main content. A slide out menu would be more intuitive for the side menu.

Too big a list of options (Figure 8) appear as a pop up menu when clicking on the “more” arrow for Topics & Subjects.

Figure 8 Topics & Subjects pop up menu

Duplicate content

There is some repetition on the collection page a present icon (Figure 9) taking you to the donate page but the same link is included in the navigation bar labelled Donate.

Figure 9 Navigation Bar Donate icon

Search

The Advanced search function needs to be improved. There are more than 14,000 entries in the collections section. Stricter criteria and organisation is needed. In the collections list the search bar needs auto-complete to avoid scrolling through a list to get to something beginning with the letter S for example.

Figure 10 Hamburger Menu dropdown menu

Intuative icons include a search bar to the far right with a magnifying glass. Also included are sign in, upload and donate icons.

Feedback

Feedback can be improved when logging out or checking a user account by adding a drop down list to give feedback on the service. Commenting on videos could be made more interactive if linked to facebook accounts.

Colour

According to Gill (2014) a website’s colour scheme should match and accentuate the company’s logo. There is an overall grey look to the movie section. There need to be strong contrasting colours to make features standout such as clickable buttons.

Typography

There is a hierarchical sytem of typography with largest font size for most important and eye catching features reducing in size in order of importance. The style of font is unremarkable and should be more visually interesting.

Logo

The logo (Figure 11) while reflective of the sites mandate to preserve artifacts is a little dull with its black and white colour scheme and unexciting visual of The Acropolis of Athens which itself is an item of cultural significance and preservation.

Figure 11 Moving Image Archive Logo

Images and Videos

There needs to be a repeat icon allowing the viewer to repeat the same video which is a common feature on most streaming sites.

The video navigation bar (Figure 12) shows the running time of the film which is a good interactive feature.

Figure 12 Video navigation bar

Indexing

The external url link https://archive.org/details/movies&tab=collection is a bit cumbersome and not meta enough. The link would be preferable as https://archive.org/movingimagearchive for Search Engine Optimisation (SEO)

Navigation

Content-Based Navigation needs to be improved. Tinder is a good example as you can swipe through pictures between screens or toggle between states by clicking on the screen. Sliders can be used for this.

Popovers can be used to get information without losing your current place in the user interface with the original content in the app visible in the background.

Competitor sites: Improvements to Moving Image Archive

Netflix

Netflix is one of the most successful streaming video sites. It has strong contrasting colours. The red buttons and logo (Figure 13) pop out from the black backgrounds of each page.

Figure 13 Netflix Home Page

The Moving Image site can be improved by increasing the colour contrast. Netflix uses a light colour (white) on a dark background (black) which emphasises a feature. If the button has a red background it will stand out even more (figure 14).

Figure14 Netflix buttons

Moving Image Archive has an unexciting white background. Compare it to Netflix by using their black background with light typography with ghost buttons to stand out.

The Archive Logo is a black and white image which is visually dull. Some colour needs to be introduced to make the logo stand out. For example a bright colour on a dark background like Netflix (Figure 15).

Figure 15 Netflix Logo contrast

Buttons

The buttons need to be ghost buttons and larger on the actual videos for play and resume in the style of the Netflix buttons (Figure 16).

Figure 16 Netflix Ghost Buttons

Netflix mobile app

This grid system is easy to navigate made up of three columns and three rows listing the films. The red and black colour scheme provides strong contrast and uniformity. There is good use of intuitive design with the hamburger menu and search icons.

Figure 17 Mobile app

Hulu

Strong contrasting colours are used on the landing page (Figure 18). The green button stands out over the large dark hero image.

Large text placed dead centre with the font size and position on the page denoting importance creates a powerful first impression.

The logo is top left and the sign in option is top right, this is a common website feature and a good use of intuitive design.

This is a good example of clean, logical and attractive design.

Figure 18 Hulu Home Page

Dribble

Dribble uses soft pastels for a strong background with contrasting yellow and purple for buttons. There is a smooth transition between screens (Figure 19) with the first screen having minimal text information but on clicking an icon we flow smoothly to another screen for extra information.

Figure 19 Dribble Mobile Interface

A commonality among mobile app interfaces is the presentation of information in vertical columns with visual hierarchy for importance.

Youtube

Moving Image Archive could be improved using Walkthroughs & Coach Marks. Cao (2017) states walkthroughs and coach marks are excellent to simplify UX. Youtube uses coach marks to highlight important parts of the user interface making the flow of the content as fluid as possible.

Figure 20 Youtube — Walkthroughs & Coach Marks

Medium

Bank (2014) notes a great example of intuitive design is Mediums sidebar (Figure 21) which contains a lot of extra information without intruding on the original screen or losing your place.

Figure 21 Sidebar example from Medium.com

Hamburger Menus

A useful alternative to the traditional hamburger menu is a vertical navigation system (Figure 22). Rocheleau (2016) notes this can be created from the same icon link, but instead have the navigation drop down from directly above the page. This method is best when there aren’t too many links in the menu such as on The Minute of Silence website.

Figure 22 Vertical Navigation (Rocheleau, 2016)

Current Design Approaches

Android

Wong (2017) reports Key guidelines for Android would be touchscreens which work like most phone touchscreens.

Video Media Players

Rocheleau (2015) notes each type of interface must have a hierarchy of value. A good example of hierarchy is The YouTube player which is organized and structured, in its design.

The Amazon Prime instant streaming video player (Figure 23) is a good example. Everything on Amazon’s player is of great value to the user experience. It implements a very large play button next to an nearby scrubber bar for usability.

Figure 23 Amazon Prime instant streaming video player

Rapid Prototyping Techniques

Smashing Magazine (2010) states the importance for successful rapid prototyping being able to change something quickly based on feedback and using the suitable prototyping approach.

Smart TV player user interfaces

The most successful widely used smart TV interfaces at the current time would be those for Netflix, Amazon, Vudu and possibly Hulu. They all use large buttons and image heavy pages with slideout navigation menus.

Research & Analysis Conclusions

1 Fluid screen to screen user journey

2 Intuitive Navigation and Icons, for example Hamburger Menus and Ghost buttons

3 Large buttons with large high quality background images

4 Vertical blocks containing images with minimal informative explanatory text

5. Minimalist design aesthetic

3. Methods

Approach to working on the project including time management at 148 hours.

Kodukula (2013) reports Agile methodology (Figure 24) is a system often used in software development. Waters (2007) reports with this methodology the deadlines of a project are fixed but the requirements of a project can be allowed to develop. This was necessary for this report as there was a set deadline.

Figure 24 Agile Methodology

24 hours in total to be spent researching and analysing the current movie section of Archive.org and researching competitor sites. This involves analysing and comparing smart television, console and mobile app interfaces.

Research to be completed chronologically in stages according to the Waterfall methodology.

Figure 25 Waterfall Methodology (Learn Access VBA, nd.)

Approximately 148 hours to be spent on the whole project.

4. Specification

Specification list for a Mobile App and corresponding Interactive Smart TV interface concept for the Archive.org Moving Image Archive.

1. Create two interactive clickable prototypes on Proto.io for a re-designed and modernized Moving Image Archive section of Archive.org for Mobile App and corresponding Interactive Smart TV interface.

2. The Smart TV app with a 16:9 ratio 1080p and a mobile device App to a standard target operating system, screen size/density and portrait orientation.

3.. Produce a document written as a professional blog on medium.com outlining the design process and the production of clickable prototypes

4.The movies will be categorized in a way so that users can see them in an organised and logical style.

5. Across desktop and mobile there must be a clearly defined element of consistency between screen widths and typography, colour and content.

6. Responsive Web Design (RWD) to make the site suitable to view on mobile and desktop

7. Homepage with App icon on it to include links to all important areas of the website. These to include a Archive Movie Section (with all categories), a contact page, a movie category such as Sci-Fi/Horror, and a Movie download/view screen.

8.To include an advanced search option where eg. Search a title or genre by a specific year

9. Navigation to be intuitive and functioning correctly on both mobile and desktop.

10. Produce a combined promotional advert for the Smart TV Player and Mobile application for an Apple App Store or Google Play Store page mock-up.

11. Style guide with font sizes and RGB colours

12. Social Media — Buttons For Social Media such as Facebook, Twitter and Linkedln to interact with the sites users to generate awareness and feedback

13. Evidence of feedback through use of a questionnaire

14. Feedback to influence the design and production. A sign up page is a useful way of collecting email addresses before the re-vamped site launches

15. Notional client invoice for a design project based on 148 notional billable hours

Notional client invoice

For a design project based on 148 notional billable hours

· daily freelance design rate £212 p.d (for an 8-hour day)

· hourly freelance design rate £28 p.h (for an 8-hour day)

£148 x £28

Total = £4,144

Charge client £4,144 for this design project based on 148 notional billable hours

User Feedback

Questionaire

1. What functions or features would you like to see improved about the site?

2. Overall usability of the site?

o Excellent

o Average

o Poor

3. What functions or features need to be added to the site?

4. Do you find the search and advanced search functions give you enough results?

o Yes

o No

5. How could the design of the site be improved?

6. Further suggestions or complaints?

Click Submit to complete form — thank you!

Feedback Methods

Kissmetrics (2015) reports Try to keep your surveys to 5 questions, and definitely don’t go over 10.

The Contact page on the website has phone numbers and emails for feedback regarding problems and also things people like about the site.

Online surveys are a useful method for example Customer Feedback Made Easy‎ from www.getfeedback.com

At the bottom of every page a form has been added for suggestions (Figure 26) and also comments boxes next to videos are useful. Another method is to monitor what people are saying online using Google Alerts.

Figure 26 Form for suggestions

5. Design, Planning and Implementation

App Logo Design

Completed in Photoshop using the pen tool and Arial black font lettering.

Figure 27 App Logo Design

Layers

Figure 28 Layers and Pen Tool

MI Moving Image — using the image of a human eye to represent the letter I and also to connect to the fact these are movies and images to be watched.

Figure 29 Final App Logo

Production

Marvel and Invision prototyping tools were examined. Marvel and Invision are great for showcasing the flow and UX of the app experience in a low fidelity manner in a short span of time.

Salowitz (2016) explains Proto.io is one of the better tools for a High Fidelity Experienceon both Mobile or Desktop. It was for this reason that Proto.io was decided as the most suitable tool for the content required. A level of depth and detail was needed in order to show the experience which as Salowitz (2016) notes is a positive in using Proto.io.

Mapping was applied by putting the navigation bar at the top of the page with a search box in the centre for input. This enhanced the flow from page to page with continuity using intuitive navigation. Norman’s Principles of Design (1988) state a design is simple to use if it can be clearly seen and understood.

Good affordance was used on the Sign In page with the Username and Password boxes in grey but the important Sign In button in orange.

Figure 30 Home Page

When you click on the orange button to sign in the button changes colour to grey from orange indicating an action has taken place.

Figure 31 Buttons

When clicking resume on a video there is an audio click as a cue and the button temporarily changes to orange to improve feedback between user and interface.

Visibility enhanced the UX by designing a clearly labelled Sign in and Sign Out button for desktop and a Sign in and Sign Out figure logo for mobile as this is more identifiable at a quick glance for a mobile and no text again because of the reduced size of the mobile screen to read text.

Figure 32 Sign in and Sign Out Desktop button

Figure 33 Sign in and Sign Out figure logo for mobile

Uniform and consistent placement of the logo improved symmetry. Laja (2017) reports when users arrive on a site their journey starts from the upper left corner.

For every page of the Desktop prototype the logo was placed top left of the page for symmetry and maximum visibility. Text was placed symmetrically in blocks of vertical columns for hierarchical status.

Figure 34 Logo Placement and Eye Path (Laja, 2017)

Important buttons were made orange and continuity using consistent colours, fonts and sizes.

Items such as film titles for practical and logical reasons were designed to be listed alphabetically for ease of use.

Colour Scheme

The use of blue, orange and white (Figure 35) imply a visual relationship or continuity between groups of elements on the pages.

Visibility was enhanced and improved the design on all desktop pages by having text on orange buttons to stand out against the white, grey and dark blue backgrounds.

Figure 35 Colour Scheme for Buttons

The design of the Netflix movie pages was a big influence on the design for the re-designed Moving Image Archive prototypes (Figure 36)

Figure 36 Moving Image Archive Desktop prototype

Low-Fi / Medium-Fi Sketches

Medium Fidelity Wireframes

Desktop Wireframes

Mobile Wireframes

UI Style Guide

Typography

Ariel Bold

A ​‌B​‌ C D ​‌​‌E​‌ F ​‌G ​‌H ​‌I​‌ J​‌ K​‌ L ​‌M ​‌N​‌ O P Q R S T U ​​‌V ​‌W​‌ X​‌ Y ​‌Z

1 ​‌2​‌ 3 ​‌4 ​‌5​‌ 6 ​‌7​‌ 8​‌ 9​‌ 0

‌!​‌‌ @​‌ £ ​‌# ​%​ ^ & ​* ( ) <​‌ > ​‌[ ​] { } ” ’ ` \ . ,​‌ ‘-​‌ =​‌ /

Ariel Regular

A ​‌B​‌ C D ​‌​‌E​‌ F ​‌G ​‌H ​‌I​‌ J​‌ K​‌ L ​‌M ​‌N​‌ O P Q R S T U ​​‌V ​‌W​‌ X​‌ Y ​‌Z

1 ​‌2​‌ 3 ​‌4 ​‌5​‌ 6 ​‌7​‌ 8​‌ 9​‌ 0

‌!​‌‌ @​‌ £ ​‌# ​%​ ^ & ​* ( ) <​‌ > ​‌[ ​] { } ” ’ ` \ . ,​‌ ‘-​‌ =​‌ /

Open Sans (Google font)

A ​‌B​‌ C D ​‌​‌E​‌ F ​‌G ​‌H ​‌I​‌ J​‌ K​‌ L ​‌M ​‌N​‌ O ​​‌P​‌ Q​‌ R​‌ S​‌ ​‌T​‌ U V ​‌W​‌ X​‌ Y ​‌Z

1 ​‌2​‌ 3 ​‌4 ​‌5​‌ 6 ​‌7​‌ 8​‌ 9​‌ 0

‌!​‌‌ @​‌ £ ​‌# ​%​ ^ & ​* ( ) <​‌ > ​‌[ ​] { } ” ’ ` \ . ,​‌ ‘-​‌ =​‌ /

​‌

Helvetica Neue

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

1 2 3 4 5 6 7 8 9 0

! @ £ # % ^ & * ( ) < > = [ ] { } “ ‘ ` \ . , — = /

Helvetica

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

1 2 3 4 5 6 7 8 9 0

! @ £ # % ^ & * ( ) < > [ ] { } “ ‘ ` \ . , — = /

Lucida Grande

A B C D E F G H I J K L M N O P Q R S T U CV W CX Y Z

1 2 3 4 5 6 7 8 9 0

! @ £ # % ^ & * ( ) < > [ ​] {} ” ’ ‘ \ . , ‘ — = /

Iconography

Button styles

Promotional adverts for Google Play Store

Mobile application promotional advert

Smart TV Player promotional advert

Conclusion

The research and analysis conclusions showed Moving Image Archive was text heavy and needed large buttons instead of detailed content lists. As a measure of the success of this project the updated finished clickable prototype designs recommend a greater emphasis on images over text in accordance with current design trends while maintaining the essential original content of the site.

Making the site mobile friendly was also of prime importance. Rossi (2014) reports 20–30% of users visit the site using mobile devices so the site was redesigned for mobile using Responsive Web Design features such as hamburger menus using a grid layout.

According to Gill (2014) a website’s colour scheme should match the company’s logo. The blue, orange and white logo uses the same colours consistently throughout the redesign.

The updated and simplified navigation bar, uniform page layouts and colour scheme give the finished prototypes greater usability and an easier to navigate experience.

The proto.io tool provided flexible methods to design prototypes with an easy to use interactive tool to make objects clickable.

The result of the feedback questionnaire (Figure 37) recommends the importance of intuitive design features. This influenced the design process by adding features such as drop down menus and large buttons to improve usability.

Figure 37 feedback questionnaire

According to Blagonic (2010) consistency is hard to keep and functionality across devices with the platform landscape changing.

The design process started with low-fidelty sketches which were refined to medium fidelity. Macpherson (2012) states to get layouts started it is better to begin with paper layouts.

The Waterfall Methodology was beneficial to establish milestones to have jobs completed within a set timeframe of 148 hours.

Creation of a Smart TV and corresponding device app have been produced with a UI style guide to the set brief. The prototypes were supported with a User Interface Style Guide in order to devise a formal strategy which incorporates interactive design assets such as buttons, menus and colour scheme to help implement consistent design work.

Fully functional designs have been made giving users access to the same content as previously available on the Moving Image Archive but with increased UIX with greater flow between screens.

The designs have a consistency across platforms to give a realistic professional feel and establish a corporate identity across desktop and mobile interfaces.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.