Moving Image Archive

TV App

https://preview.uxpin.com/2ced34b0899959d16d3c8499fbf200a21441a273

Tablet App

https://preview.uxpin.com/be16ccd8dedbf6a0bf24b52a40b2ba1d862f0cf0

Introduction

In this assignment, the task was to redesign the site page Moving Image Archive (MIA) enabling it to be turned into a tablet and T.V. app.

The Moving Image Archive site offers the user the ability to stream videos that have been uploaded by users. It exists to preserve society’s cultural artefacts and to provide access to them. This site is similar to YouTube, showcasing videos and some films. MIA enables users to download files, and to use them in any way they see fit.

Since its popularity is not as great as other media streaming sites there are not as many videos available.

Presently, the website works on desktop and tablet browsers. It is now necessary to boost public awareness and make the site available as an App, to enable use ‘on the go’. By making the site more attractive and easier to navigate it is hoped MIA will stand out from its rivals.

Methods / design process

To be able to design an online movie player that will be user friendly it will be necessary to undertake research of other sites such as Amazon prime video, YouTube, and Netflix etc. Decisions can then be made as to which layouts work best for the different platforms. This will need to be allocated browsing and assessment time.

UXPin has been selected as the User Interface tool that will be used as it has already been purchased and has been used for other projects. This UX design tool will enable adaptation of the design movie player site for both smart TV and tablet. UXPin is an online UX tool that allows the building of prototype website/Apps to showcase designs to clients — giving them a visual tour. An online UX design platform has been selected to create the designs for both the TV app and the tablet design. The prototype does not require all the design functionality, but a sample pathway will have been set up with four screens- homepage, language selection page, film selection page and selected film page with download button.

When researching other sites, it is important that they are not mirrored too closely.

Following appraisal of other sites, and a full appraisal of the existing web site, a user feedback questionnaire will be taken, and then a specification of what is required in the new TV and tablet iPod apps will be drawn up. Following this low, medium and high fidelity drawings and wireframes will be created, together with a flow diagram of the first four pages of the app. This will then be tested for both TV and tablet, and another user questionnaire used to make any changes deemed necessary.

Appraisal of rival sites

The main rival sites will now be examined and assessed. The first of these is Netflix.

Netflix Tablet App

https://www.netflix.com/gb/

It is immediately apparent how to navigate the Netflix Tablet App. Despite the lack of labels the navigation system works well and takes full advantage of the screen. Because the only navigation on the screen is that for the search function and the hamburger menu icon, the majority of the screen remains available for the contents.

All the options are hidden away in the hamburger menu and once open it gives the user the option to search via categories.

Both the design for TV App and Tablet App have been kept similar and this allows the user to easily switch from one to the other.

The contents have been split up into categories and this makes selection easier as does the App’s ability to remember favourites and to predict likely alternatives.

Both the apps have used a dark background, ensuring that the images stand out. The contents have also been laid out in line, horizontally across the screen, enabling the user to scroll left or right and make their selection with ease.

When the selected film is clicked the image of the film then fills up the space in the popup. This reassures the user that their choice has been correctly selected. If the selected programme is one of a series the user can select the correct episode. Other films of the same genre are also suggested for future or alternative viewing.

Netflix

https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjPydzYv-rTAhVH1RoKHcTjCn0QjRwIBw&url=https%3A%2F%2Fthenextweb.com%2Fapps%2F2017%2F03%2F31%2Fnetflix-wants-to-pay-you-to-translate-subtitles%2F&psig=AFQjCNFJuH09mr9VgLzyKK6oVDHvF6SNog&ust=1494683371964366

Above is the image of the Netflix TV App. Similar to the Tablet App it is slightly more difficult to navigate, because of the added complication of using the remote control. It is confusing to find the navigation bar, however once located it is easy to use.

Amazon Tablet App

screen from my ipad

Very similar in design to the Netflix App, therefore it is immediately apparent how to use it. However, it lacks brand distinction.

The contents are laid out in lines horizontally, making it easy to make a selection. The navigation bars are located at both the top and bottom of the screen, enabling quick and easy movement around the site. The categories are shown as the user scrolls down and this also aids selection. Unlike Netflix, which bundles TV and Movies together on the home page, Amazon separates these categories, and this is an improvement.

When the user clicks on their selected film or TV programme, a similar popup of the selected item appears, together with the download button. It is possible to add the item to the wish list, or to play the trailer. There is a customer rating and reviews, the whole TV series appears, and films likely to appeal to the user available. IMDB has been integrated into the App. This is not available on Netflix.

A dark background has been selected, and overall the design lacks colour, apart from the film icons.

Amazon TV App

https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjgouKVwerTAhWDlxoKHQh3DU0QjRwIBw&url=http%3A%2F%2Fwww.techhive.com%2Farticle%2F2141724%2Fstreaming-hardware%2Ffire-tv-review-amazons-set-top-box-is-cooking-with-gas.html&psig=AFQjCNFmWKLPzi3V6HU_UmSimDyeqM53ww&ust=1494683716180256

Difficult for the user to locate the settings button, but the various options are set out clearly. The App has a user memory, enabling it to offer previously watched series, and to recommend shows likely to interest the user. It incorporates a star system, and a watch list, and reviews. The App features a black background, relying purely on the Icons for colour.

Youtube

screen shot from my ipad

YouTube is similar in its remit to the MIA site, therefore it is has a more complicated design than that of Amazon and Netflix as it has the facility of uploading amateur videos.

The contents are laid out clearly — categorized and labelled. Key words can be utilized in the search. YouTube overcomes the use of smaller buttons by siting a navigation bar at both the top and bottom of the page.

Other Sites were also examined and are included below

https://cdn.dribbble.com/users/33073/screenshots/2403683/attachments/464545/attachment.png

https://dribbble.com/shots/2888243-Movies-Site/attachments/597224
https://dribbble.com/shots/3179092-Online-Music-Streaming-Service-Top-Charts/attachments/676373
https://dribbble.com/shots/3179092-Online-Music-Streaming-Service-Top-Charts/attachments/676373

Design Aspects of Apps for TV and Tablet needing consideration.

Font (sizing and colour) –on the TV app should not be too small — it needs to be legible at 10 feet. It also needs to be 24pts or above for TV. High contrast between the font and the background. Ideally it should be in bold.

Background colour: Colour creates emotional response and contributes to a branding identity. Colours can be united with others to create complimentary or contrasting schemes that create harmony and clarity. There are special considerations in Apps. Needs to be enough distinction between the colour of the background and any icon or information — especially text. Background colours in any App need to be dark as large areas of white create dazzle.

Navigation: The buttons need to be big enough to be easily pressed without the need for zoom. There needs to be inactive space around any links. Navigation needs to be easily located. TV Apps — used with a remote control.

Icon sizes (smart TV and tablet): Minimum of 152 x 152 pixels for iPad.

Image sizes: Need to be easily identifiable.

Apps need to be adapted for variously sized TV Screens, and also for the Tablet.

The app for a tablet will be designed first and then the design will be adapted for a TV app.

Research & analysis

First the site as it exists will be analysed to decide what elements will be retained and which changed:

Analysis and Criticisms of existing MIA site :

The homepage of the site appears confused, busy and disordered. It is hard to distinguish what the aims of the site are, despite the title at the head of the page.

The lack of images and colours does not help — the site does not give the impression of being a site for watching films and videos, as the articles or journals seem to predominate. It appears as if it is purely a forum for obscure groups and political activists.

Although the navigation bar at the top of the page is attractive, this together with the left- hand side navigation is too much information for T.V. and a tablet app. Site needs simplifying.

There is no clear order of category or lining up of size of the boxes. There are individual video links interspersed with broad genres. These are even different colours and sizes. This confusion of style and genre requires the use of the search bar — there are two search bars, one general to the whole website, and another specific to the video section — this is not marked.

The large white content is allowable on a desktop, but on both a television or tablet app this will cause glare. It needs to have more colour, be more sophisticated, and more modern.

However, the way the site allows the grey box change blue that appears when the user hovers over a link is a nice feature.

Once the user has moved on to the selected link there is inconsistency in the size of the video compared to the rest of the page. Although some of the videos are smaller on the page, allowing the user to see other information easily, such as reviews, descriptions, other videos previously uploaded by user etc… , some videos take a disproportionate amount of the screen, pushing the other information down, and requiring the user to scroll down. Once again there is lack of unity across the site.

The inclusion of a related video section is good, but its position at the foot of the page means it can easily be overlooked. Also, the extra information about the video included in the grey boxes beneath and to the right is disproportionately large and could be condensed.

Overall the site is very confusing to use.

Once a category is clicked upon e.g. community videos, animation, the site them moves to a collection within that particular genre — this is good but the design is cluttered and confusing.

User feedback

Using a questionnaire users were asked for feedback on the current site, and their comments can be summarized as follows

Users liked; Arts and Music Icon, that the Icons changed colour when clicked, that there was a good choice of historical archive footage, the use of two tone grey on the Icons.

Users did not find it easy to use, it was confusing.

Users found frustrating: its cluttered and uncoordinated design

Users gave a value of between 2 and 4 out of 10.

Users felt that the one thing they would change would be: Layout, Logo, the clutter, the grey colour scheme.

Users felt they could live without: the ‘weird’ categories, the huge number of languages

Users liked least,: the difficulty of navigation, the difficulty of searching, its inability to be used on TV, the anti-socital nature of its community content/home video (concern for security, child safety etc)

Users universally voted they would NOT recommend it to a friend

Users did not feel it compared well to its competitors (See illustration below)

User Questionnaire

What makes an easy to navigate and interactive TV player/mobile app?

These are the 12 key ways to achieve this:

1. Target user

2. Concise

3. Easy navigation

4. Reliable

5. Compatible

6. Distinctive

7. Incorporate viral mechanism

8. Free

9. Personalize to user (not possible in prototype)

10. Easy to upload new material (not possible in prototype)

11. Attractive

12. Memorable

Approaching the creation of clickable prototypes — current best practice

There are three ways to achieve this:

1. Building it from code

2. Using online tools e.g. UXPin, Mockflow, Naview,

3. Using PowerPoint or other presentation software

Specification

1.Audience

There is not a specific age range or demographic. Due to its nature it is very eclectic.

2.Aims

The aim of this app is to allow the user to be able to watch the video/films from the website (Moving Image Archive) while on their tablet or TV, this will give the site a greater viewer audience.

The aim is also to create an app that showcases all the media that is on the site, but to do so in a less complicated, easier to navigate and more attractive way.

3.Function

The main reason for this app is that it can be viewed ‘on the go’. At present, it is only possible to view this site when on a desktop/laptop. It is possible to view the site on a tablet, but only on the browser.

The app itself needs to allow the user to search for videos and stream them, and even download the contents in the same way as they can on the main site.

It is important to have as few links as possible to keep the user engaged, and to ensure the user can quickly alter settings as required.

Simplicity and Clarity of design are crucial.

4.Platforms

As this App is being designed both for tablets and TV it needs to be built in three different ways — IOS devices, Android Device and TV. Due to the fast-changing nature of the software for these devices a decision needed to be made as for which version to build. It important that as many people can use the app as possible. A big issue in developing for Android is that there are a vast number of devices that run the software, and that most Android users do not update their phones. However, iPads are more unified and therefore much easier for which to build. Another consideration is the differing size of TV screens and resolutions.

This prototype has been designed for TV and Ipad Tablet.

Time line

There are 148 hours allocated to bring this project to prototype stage. Time allocated has been split up into sections to allow completion within time frame. Tasks have been prioritized according to importance.

i) Client specification — 10 hours

ii) Research — 30 hours

iii) Design prototype of tablet/TV app 70 hours

iv) High fidelity drawing 10 hours

v) Low fidelity drawing 10 hours

vi) Icon design drawing 5 hours

vii) Icon final design (created in illustrator) 10 hours

viii) Costing — 3 hours

Risk Assessment.

Allowance must be made for unexpected hold ups, such as computer problems, design complications, unexpected interruptions, designer’s block, loss of work…. All these problems need to be allowed for so that the deadline can be successfully reached.

Design, Planning and Implementation

a. Features/ Functionality

The key features of the app are the following:

1. Some elements are maintained so that it remains recognizable to existing users.

2. Able to stream videos

3. Able to upload/download videos

4. Search function

5. Video quality selection

6. Ease of navigation

b. Graphic design.

All the images that will be used to create the website will be taken from the original website. There is little need for extensive images as the videos add them to the site.

The logo has been designed from scratch and no copyright has been infringed.

Both apps will have similar design and this will enable the user to recognize them easily.

The layout will be in the block format, this will allow the information on the screen to be read easily by user when sitting away from the screen, ensuring that the information is displayed allowing the buttons to be enlarged while remaining compatible with the overall design. This will be achieved by designing the buttons in either a rectangular or square form.

The background colour will be dark, in order not to distract from the multitudinous images from the videos, enabling them to stand out. The tablet and TV apps will both share this background colour to unify design. The TV apps needs to restrict white areas to minimize glare. Research into other apps has shown that the majority feature dark background screens. As most films are watched in the evening, or in lowlight, glare needs to be avoided, for user comfort.

The present site is confusing and cluttered. The aim is to condense, simplify and remove information and some options.

As many current videos on the site do not match their name, this needs to be addressed. Future users need to be guided to choose relevant names, and the present content needs to be reorganized and categorized.

It is easier to design pages for commercial videos, but unification of design and ease of selection for the amateur video uploads, with their variable nature and coded naming is extremely challenging. At present, all the icons of this type of video are displayed together. They need complete reorganization. The unrestricted and un-vetted nature of these downloads also brings its own social concerns. However, the actual implementation of these changes, beyond the prototype, would involve a great deal of work, as all existing videos would need to be recategorized and the client would have to decide if the implementation of the plan is affordable or feasible.

One of the key features is the simplification of the language selection feature. At present the languages are listed in order of popularity, not even alphabetically.

Part of this assignment is to design a logo to be used on the new tablet app and TV app.

Design of the Logo

Research for logo.

Here are some illustrations loaded onto a Pinterest account to begin design ideas.

screenshots
screenshots

Below are some of the initial designs that were later rejected:

It was initially felt that the name needed to be changed to Archive Media Player so the first designs were for this. This was done because MIA stands for missing in action as well. The first colours chosen were red white and blue. However, it was decided to retain the original name as it is familiar to existing users. The lower-case MIA version was selected and then it was worked up.

Initial Logo Designs

Second stage of logo design

Here the Mia logo is worked up further. It was important to make the icon sizes fit the official icon sizes for different tablets — Ipad, Android, and TV app. This means the icon has to be 76 x 76 pixels. The final design, with the kick on the ‘a’ was selected. Below are the colours selected for the logo. The initial colour 1B1A37 was later changed to the slightly different 08162E as it was ‘zing-ier’.

08162E
E20613

Final logo design

How the app will look on an IPad.

How the app will look like on a smart TV.

Rough Ideas and Low Fidelity Planning and refinement of chosen design idea for Apps

Low Fidelity

Medium Fidelity

Flow Chart of final design

Screen Shots of Final Design Pages

User Interface Style Guide

08162E
E20613

Font : Oxygen — Font size 16px for the tablet and 36px and 48px for the TV app. All in bold.

Colour of font some red (E20613) some white.

The background is in 08162E. Large areas of inactive space around buttons and icons.

Navigation minimized. Large buttons and icons. Usable with remote control for TV.

User feedback on new Apps

Using the same questionnaire user feedback for the TV and iPad apps was given by the same group. A summary of the findings was as follows:

For the Tablet iPad

Users liked best: The Logo, the layout, the colours and ease of navigation.

Users found frustrating: Nothing, that it is only a prototype, can’t set favourites, not enough films there yet.

Users scored it as: 8 or 9 out of 10

If users could change one thing: font size, they would want to see how the community section would be resolved, have a star rating for film, nothing needs changing

Users could live without: Everything has a purpose on this site, could live without having a community section.

What users like least; No section for children’s films, like it all, the back button design

Would user recommend to friend: Yes universally

How it compares to rivals: Very good, Logo looks good, hard to tell till it is fully functional

For the TV

What users liked best: Colours chosen, showing the year the film was made, nice and clear, colourful, looks good on screen.

How easy users found it to use: Really easy, child’s play, very easy

Users found frustrating: Nothing, not completed, could set language for good, cannot find film you like yet wanted more information about the film.

Score out of 10: 8 and 9 out of 10

Users could change one thing it would be: A child lock, complete it, get rid of community section, could have a login and membership, film star rating, nothing

Feature user could live without: None, the different languages, the community videos

Users liked least: No rom-com button, no section for children, the font

Users would recommend to a friend: Universal Yes

Compared to competitors: Easier to use than Netflix, good logo, hard to tell till it is finished, Seems great so far.

Tablet Testing

TV Testing

Testing carried out on apps

Every aspect of the Tablet App was tested to ensure that it all worked correctly and could be seen easily by the user. This was done by uploading the app onto the iPad. There were a few errors with the back button but these were then corrected. All the images were a little low in the frame, and these were lifted. The WCAG test was also carried out. The test picked up everything on the screen, and this meant that the tool bar of the computer also registered. The only errors were with this and not with the actual app.

Then the TV App was tested on a large screen. A few minor changes were made following this — the images on the screen were raised slightly. Apart from this everything worked well.

Below are images of the testing.

Reflection

Overall the user feedback for both TV and tablet apps has vastly improved the score given to the original web site, from an average of 3 to 4 to 8 to 9 out of 10. Clarity, ease of navigation, and general attractiveness to the user have been improved. The logo and colour scheme have proved popular, and the users feel they compare well to rivals. Areas for improvement include, the inclusion of film sub sections for children and rom-coms, the ability to set favourites, which cannot be included in the prototype, and the ability to log in and set language etc… which again cannot be included in the prototype. The star rating has been included after it was flagged up. There seems to be a generally negative response to the community section of the original site that raised concerns on how this would be later addressed in the new apps. Extremist broadcasting, and sexually explicit content caused concerns, and the ability to set child-locks was raised.

In the feedback one user flagged up the wish to have an icon for children/family films and RomCom. These had not been added because of the overall simplicity required by the design. However, this demand could be considered at a further stage.

Beyond the ability of the prototype — in the final Apps the ability to log in, and to create an account, which would lead to user recognition — would be included. Also the Apps would be extended to include the whole remit of MIA.

The assessment of the original site, and the examination of rival sites helped identify the main changes needing to be made, and the key components necessary to a successful site. The tool UXPin worked well for the project. The guidelines for creating Apps for TV and Tablet, outlining pixels, colours, contrasts etc… were useful in ensuring the Apps worked well. The questionnaire for users helped identify the problems of the original site and assess how well the new Apps worked and met targets. The testing of the products ensured any small problems could be ironed out.

Conclusion

The aim of this project was to design a new logo and an App for TV and iPod Tablet for the MIA moving image archive. The previous site was cluttered, disorganized and difficult to navigate. After analysing the site, and comparing it to its rivals the main issues were identified. By simplifying and decluttering the design the collection has been made more attractive and accessible to a wider audience, and this in turn will allow the material stored within in to be preserved, shared and enjoyed. Although the prototype created would need further development to make it fully utilizable, and some issues would need to be addressed, especially those to do with the community section and how it is to be ratified and regulated, the App designs have proved significantly more acceptable to the users who gave feedback. This would indicate that the overall design is basically successful.

One clap, two clap, three clap, forty?

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