Moving Image Archive Project

https://medium.com/@2huntj04/moving-image-archive-project-7decaa0a3ed0

Abstract

This project looks at improving Archive.org’s user experience and creating a Smart TV, Mobile and Tablet Application. Archive.org is a site where you can download and or watch free movies. The site contains content that is uploaded by its users . (Jay,J.) . The task has been set to create a brand new concept design for a TV, Mobile and Tablet Application. To do this research will be completed into popular sites and applications that serve the same purpose as Archive.org. Then take the gathered research and implement it into the designs to ensure that Archive.org has a new user friendly and modern site/ application that users can visit regularly.

Introduction

During this report I will have to adapt to the role of a user interface and user experience designer. I have been asked to create a interactive Smart TV player interface and a corresponding Mobile/Tablet concept app for Moving Image Archive that will enhance their users experience. I understand that the interface needs to be more simple and easy to navigate and will also need to be usable with a TV remote control.

Aims and Objectives

The aims and objectives for this Report are as follows: -

1. Research into Moving Image Archive and see what they aim to achieve as a site so that I can base my designs around it.

1. Find out what makes a successful App.

2. Figure out how the user experience of Archive.org can be improved.

3. Find out what the User profiles, Goals, Frustrations and solutions are.

4. Gain feedback through the design and production process.

Methods

Overall there should be “148” hours spent on analyzing Archive.org and similar sites.

Research MIA to see what they aim to achieve by looking into their about page and determining what their main goals are.

After the research is completed I will be able to determine what the best and worst features are out of all the researched sites.

Next I will complete research into what makes a successful app. To do this I Will visit both popular and unpopular Apps on both the Apple App Store and the GooglePlay Store to determine what goes into making a successful App.

Next I will be trying to improve the user experience of Archive.org. To do this I’ll be visiting sites that have a good understanding of user experience and taking notes as to how they create such a friendly user experience.

After my research is complete I will begin the design and production process. During the Design and production Process I will need to gather constant feedback to ensure that the apps that I am creating are to the highest standard.

List of Acronyms

MIA: — Moving Image Archive

APV: — Amazon Prime Video

UI: — User Interface

Research & analysis

Analysis of Moving Image Archive

What Moving image Archive aims to achieve

MIA aims to supply its users with community uploaded digital movies which range from classic full length films to alternative daily news shows. (Jay,J.)

Review of Moving Image Archive Homepage

At first appearance the site is very confusing and not sectioned well enough. When you first approach the site you are met with a cluster of different categories links that will send you further into the site. As seen below all the categories links are different shapes and sizes which makes the layout sloppy.

(Figure 1: — Screenshot of the MIA Homepage)

However they do have a Search bar at the top to allow users to navigate and search for movies by name but they also have an advanced search section on the side of the page which allows you to select Media Type, Topics & Subjects, Collection, Creator and Language. This makes it a lot easier to navigate the site and find the content you are looking for . I will make sure to include this feature in my designs and prototypes.

Review of Moving Image Archive Category page

Next we review the MIA Category page. Although not the best this page is a lot less sloppy than the homepage. All the video thumbnail links are the same size and shape which makes the layout of the page a lot more organised. The page still has an advanced search section which allows users to further redefine their searches.

(Figure 2: — Screenshot of MIA (Speed Runs) categories page)

Each thumbnail displays the title of the video, what type of media it is, how many views the video has, how many people have favourites that video and how many comments the video has. This is a great aspect because it allows users to determine if the video is worth watching or not.

Review of Moving Image Archive Select Video Page

The Video page is probably the best designed page. It includes the video at the top and then a detailed description of the video(s) below. This is a page that I believe won’t need a lot of revision because it is very neatly laid out and has all the information available displayed.

(Figure 3:- Screenshot of MIA select video page)

The page also includes the date the video was uploaded to the site, what Category the video is placed under and download option that the user can choose from. These are all details that I will ensure to include in my own designs.

Analysis of application similar to Moving Image Archive

Review of Netflix Homepage

The homepage of popular App Netflix is a lot simpler than MIA’s homepage. There are a lot less things displayed on the homepage so it’s a lot less overpowering than the MIA homepage. They have chosen to use drop down menus that allows the app to hide advanced search options away until the user decides he wants to use them. This is great because it clears up a lot of space but at the same time doesn’t take away the ability to have advanced searched.

(Figure 4: — Netflix Homepage)

Something that Netflix does that a lot of users appreciate is that it recommends content to its users that it thinks they will enjoy. This is a feature that I will make sure to use because it keeps user watching content because as they finish watching a movie or show they are recommended something that they will more than likely want to watch.

Review of Netflix Category page

Although the layout of Netflix’s category page is very neat and isn’t sloppy like MIA’s category page it does leave out some key featuers. Although the thumb nail to each movie does include the movies title it doesn’t include a movie rating, times watched or comments. There are all aspects that I thought were a great idea in MIA’s category page.

(Figure 5: — Netflix (Drama) Category page)

The one thing I do like about this category page though is it’s excellent art work. Each thumbnail is a piece of eye catching artwork that will grasp users attention. The artworks normally include the main character or a key scene from the film. Also each thumbnail clearly states the title of the film which is a necessity.

Review of Netflix select video page

The Netflix select video page is very simplistic and I like it a lot. As you can see below it includes all the essential information without cluttering the page. It includes the title, the year the movie was produced, how long the movie is, what age rating the movie is, a small description, main cast, director and Genre. This is a lot of information to add into such a small space but Netflix have somehow found a way to do it without cluttering the page. I will be making sure to incorporate parts of Netflix’s layout when creating my own designs.

(Figure 6: — Netflix select movie page)

Another thing that Netflix have done that I like is that they added a like and dislike feature so that users can rate movies after they’re done watching. This is a great feature because it allows users to check other users rating before spending their time watching the movie. Also they have a image carousel that shows scenes from the film. I think this is a great idea for getting users interested in the film.

Review of Now TV Homepage

Now TV takes a more neat and professional look and feel to its homepage. With a sleek black and white color scheme and well placed thumbnails it’s one of the better homepages. But the sleek look with minimal thumbnails means that they can’t display as many movies as Netflix can, resulting in users having to search for movies manually rather than coming across them on the homepage.

Figure 7: — Now TV Homepage)

Review of Now TV Category page

From what is seen below Now TV has gone with a very simplistic Design. The category page only offers the movies poster and nothing else. No description or rating. This category page is by far the worst because of its extreme blandness and lack of information.

Figure 8: — Now TV (New in) Category page)

The one thing that Now TV has done well is its thumbnails. Just like Netflix they have utilised them well. Each thumbnail captures the movie well and gives the user an idea of what the movie will entail.

Review of Now TV select video page

The Select video page is a lot better. it includes the Movies poster, a star rating, length, age rating, director, cast and description. This will give the user a very good idea of what they are about to watch.

(Figure 9: — Now TV select movie page)

Another part of the page that is useful is that it has on option to show you movies that are similar to the one that you’re on. This will help get users exposed to similar films that they may enjoy. This is a feature that will be used when creating my designs.

Review of Amazon Prime Video Homepage

The APV’s homepage is practically the same as the Netflix homepage. The homepage displays a large image carousel that advertises the most recent popular movies. One thing that really stand out about this Homepage is color. When users first approach the page they will be met with colorful thumbnails neatly laid out in subsections. It definitely makes the site more attractive than Now TV that used a plain black and white color scheme with minimal thumbnails.

Figure 10: — APV Homepage)

APV advertises content that is exclusive to only their site on the homepage. This is smart placement because many users will be visiting the site to view the exclusive content. Having it placed directly on the homepage means that it can be easily found by new users. This is something that will be taken into account when creating the designs.

Review of Amazon Prime Video Category page

Again much like Netflix’s category page APV’s category page is very neat and displays a lot of content. Although the thumbnails that are used are very generic and aren’t as artistic as the one’s that Netflix use. This is definitely something that can be improved upon. One feature that I do like however is at the top of the page there is a easy to use slider that allows you to choose between movies and TV shows. This is something that might be able to be implemented into the designs.

(Figure 11: — APV’s (Popular TV shows & Your video Library) Category page)

Again much like Netflix and Now TV APV have no included any details in their thumbnails. They’ve not included movie rating, times watched or cast. This is something that MIA did that no other site implemented.

Review of Amazon Prime Video select video page

The APV select video page is where it gets a lot better. It includes all the details necessary to know before watching the move. It includes the title, the year the movie was produced, run time, age rating, a small description and main cast. However what it does not include is director and genre. This is information that will not be left out when creating the designs.

Figure 12: — APV’s select movie page)

A feature that would be well utilized in all three sites that hasn’t been included is user comments. The ability for users to leave reviews about each movie could help people decide what they want to watch. Sometime a star rating is not descriptive enough to help a user decide what movie they want to watch.

The importance of design

What is a design and why is it important ?

A design is a initial plan or drawing produced to show the look and functions of a product before it is made. Creating designs are important because it creates the initial building blocks that are required to create a product to a high standard. Essentially when creating an initial design you’re establishing how the product will look and how it will work.

Specification

Before beginning the design process the initial needs and objectives must first be established. Below is a list of needs and objectives that will be used as a guide to the design process.

1. Design and create prototypes for a television and mobile application. The application will be for the “Moving Image Archive section of the Archive.org website”. There will need to be a minimum of 4 screens to be designed and tested.

2. Create a UI style guide which will include the chosen Colour Schemes, Font Styles and Font Sizes.

3. Initially create hand drawn designs that will be used to gather feedback to later be improved

4. Once feedback has been gathered for the hand drawn designs, create medium fidelity wire-frames and gather feedback once done.

5. Once the Medium fidelity wireframes are completed and the feedback has been gathered create high quality designs in applications such as Photoshop and Illustrator.

Designs

Hand Drawn Designs

The Initial step of the design process was to complete hand drawn designs to gather feedback.

(Figure 13: — Application mockup design)

The above hand drawn design is establishing what the application will look like on a working device.

Figure 14: — Application Homepage hand drawn design)

The above hand drawn design is a sketch of what the homepage for each device will look like. As you can see from the hand drawn design the homepage will give the user the option to choose between movies and videos. This page and every other page from this point will contain thumbnails that when clicked will take you to your desired video. Also a search bar has been included to help users refine their search.

Figure 15: — Movies/ Videos homepage hand drawn design)

The above hand drawn design is of the movies/videos homepage. From here you will be shown the most recent uploads, most popular uploads and an option to be taken to a categories section.

Figure 16: — Hand drawn design of Categories page)

The above hand drawn design is of the movies/videos categories page. From here you will be able to navigate through to all the different genres of film and video that the site has to offer.

Figure 17: — Hand drawn design of a category page.

The above hand drawn design is of the Movie/video category page. This is an example of the “Comedies” category. Here you will be shown recommended and popular content. Also you will be given an option to Explore new content that the site has to offer in the “Explore” subsection.

Figure 18: — Hand drawn design of the select Movie/Video Page)

The above hand drawn design is of the users selected Movie/Video page. Here they will be able to watch their desired content. This page also includes a small amount of information about what they are about to watch such as a star rating, title and run time.

Hand drawn Feedback

Feedback about the hand drawn designs included comments about the selected Movie/Video page. Reviews thought that the information under the video was to close together resulting in a lot of white space. Also reviews didn’t like the circular thumbnails that had been used. They thought that having circular thumbnails could sometimes cut away parts from movie posters and images that might be important. Finally most reviews though that the categories page for the mobile app was to clustered and that it needed some serious renovation to increase it’s usability and appeal.

Storyboard

(Figure 18: — Storyboard)

The above storyboard clearly shows instructions on how to go from your device home screen to watching media on the app.

Medium fidelity Wireframes

(Figure 19: — Medium Fidelity Wireframes of Television Application)

Above are the Medium Fidelity Wireframes of the TV application. They’re an improvement on the hand drawn designs.

(Figure 20: — Medium Fidelity Wireframes of Mobile Application)

Above are the Medium Fidelity Wireframes of the Mobile application. They’re an improvement on the hand drawn designs.

High Fidelity Designs

(Figure 21: — High Fidelity Designs of Television application)

Here are the final designs for the television application. After first creating the hand drawn designs and then gathering feedback to improve. Then creating Medium Fidelity Designs and gathering feedback to improve. This is the final outcome.

(FIgure 22: — High Fidelity Designs of Mobile application)

Here are the final designs for the Mobile application. After first creating the hand drawn designs and then gathering feedback to improve. Then creating Medium Fidelity Designs and gathering feedback to improve. This is the final outcome.

Color scheme and typography

Figure 23: — Color Scheme and Typography

Above is the complete colour scheme along with every font and icon that was used within the project.

Prototyping

Above are the working prototypes of the high fidelity designs. Using Invision it was possible to make a working prototype.

There were multiple sites to choose from when creating the prototype but after my research and thinking it was chosen that Invision would be the tool that would help create the prototype.

Feedback

(Figure 24: — Television application Feedback)

From the feedback that was received the Television application was a huge success. Everyone who took the survey said that they would support the prototype going forward, that they’d recommend us to a friend and that the prototype was easy to use. Although some users pointed out that our dark colour scheme was depressing and that using more vibrant colours would brighten things up a lot more.

Figure 25: — Mobile Application Feedback)

The Mobile application was not such a success. Not one person who provided feedback enjoyed the colour scheme and only one person enjoyed the typography. The choice to go with extremely bright colors certainly didn’t pay off. Some people complained at the overly simple design but then other said that because of it they were able to use it with ease. Next time interviewing more people will be a better option to gather a wider perspective.

Conclusion

This report focused on creating a new contemporary design for a website called Archive.org. To create the contemporary design first research into similar websites and applications had to be made to understand what goes into making a successful site/application. The research that was carried out was accurate and appropriate to the report. Research was gathered from a variety of sources ensuring that the widest range of knowledge was gathered.

First research went into finding out what makes a successful App. To do this research was carried out on three of the most popular application on the market. Netflix, APV and Now TV. Studying these three applications was fantastic for gathering information on user experience. Because they are the three most used application it was easy to find forums that listed praise and disappointment. Easy to study what people liked and disliked about the application and then put that knowledge into the designs.

Archive.org have users from all walks of life. There is no set range of people that use the site. This is why when making the designs and prototypes it was essential that the layout and colour scheme would be something that would apply to people from all walks of life. The Layout was carefully designed so that someone with no technology skills would still be able to navigate through the applications and the colour scheme was dark with a mixture of light so that it would remain neutral to everyone from all walks of life.

The feedback that was gathered has shown that everyone thinks differently but one thing that can be taken away from the feedback is that people pay attention to the little things and that if they like something they’re more than willing to tell a friend about it.

If this project was to be done again, more time would definitely be put aside to complete the designs. To create high quality design and prototypes you must be able to spend a lot of time creating them, not to rush the creation process.

Like what you read? Give Jordan Hunt a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.