Interactive Design Portfolio: A Clickable Prototype For A Movie Player App

Introduction

The redesign of the “Archive.org” movies section in to a clickable prototype is a large task, but the current state of the website movies section is outdated and not easily accessible. Therefore, this project will be looking at both the redesign and creation of the section within a Smart TV and Mobile App Interface and clickable Prototype, making it more accessible, by giving it a modern and contemporary feel through interface, design and user experience.

The redesign of a website and then the implementation of an app has a huge impact on both company and user (Crandfeild, 2012), but mainly on the user and there understanding and journey, (Smith, 2015), with this comes implication and issues but also great results, (Goward, 2015). The redesign of something like this is big and many things can although something will need to stay the same for example, the current brand still needs to be reflected, (FatGuyMedia, 2013) as its not changing and the content overall may be the same just broken down better and the current state needs to be reflected in the new version so that users can tell it’s the same site, (Sandu, 2016). Although keeping it recognisable and give it a contemporary look are completely different things it can be done a new fresh interface will draw in new users and a better User Experience will help this is a major factor when creating a redesign, (Shaoolian, 2016), this may bring easier navigation, better functionality, better features, and a better user interface more suitable for a range of users, (Petersen, 2016).

The current challenge is the redesign of the current site in to a clickable prototype that has a contemporary feel and yet is a fully functional prototype, showcasing the current resources and movies, the site has to offer, done by creating a detailed specification from a vast amount of research, into both old and new and current competition, (Hill, 2014).

Aims

The aim is to produce and created a resigned contemporary movies section of the archive.org, as a mobile app and smart TV interface concept and clickable prototype, that explores; best practices towards clickable prototyping, user experience, and the creation of a portfolio design. Two outputs will be created these are: A Smart-TV Design, and Mobile Tablet Design, each with 4 screens and a promotional example.

Objectives

1. Conduct extensive research on the current movies section on the archive.org site as well as TV player apps, best practices, UX, Smart TV’s, Apps, and guidelines. Using the internet and library to cover all bases, all sources should be saved within RefWorks.com, at least 20 hours should be spent researching and will be completed by 13th February 2017.

2. A method and specification will be created from the research which will be used when planning and designing both the interface and clickable prototype, this will take a maximum of 5 hours and should be completed by the 17th February 2017, and documented.

3. Planning and rough ideas, then drawing out wireframes and flow charts to then be converted in to digital design, with the use of a style sheet based on the research specification and method, with typography, colour scheme and UI components, this should take about 20 hours and should be documented throughout and created in Sketch 3 and adobe, and should be completed by 6th March 2017.

4. The final design outputs should be created in a mixture of sketch3 and Adobe Photoshop, these will follow the pre-drawn wireframes and specification, and then transported in to Invision App to create a clickable prototype, this will take 15hours and will be completed by 27th April, and will be documented and added to the portfolio report.

To write up the final project as a portfolio documentation and publish it on medium.com as a blog/ website post for others to view as well as publishing it on Behance.co.uk and this should be saved regularly to prevent loss of work as well as being completed by the deadline 12th May 2017 and should take no more than 20 hours.

Research And Analysis

Achive.org Movie Section — Site Audit

Archive.Org Moving Image Archive Page & Categories Page

The archive.org is well known for many thing especially for the way back machine but not many people know about the movie image archive or movies section, (Thorn, 2007). With not many people knowing about it and other choosing different sites because of the unorganized really and bad navigation, (pierre, 2014), the archive.org site needs a good over hall, to bring order, new features and a better interface design, although the current website is fully functional is can only be used on the computer and then each moving image/movie must be downloaded and either watch on that device or transferred to a DVD, this doesn’t entice users to use this site in their free time to generate site traffic, this can be improved by creating a player App for the Movie Section, for both smart TV and Mobile device for instant streaming, and downloading, while increasing site traffic.

It is currently not easy to navigate to a certain movie category, and then find movies with in this because the post it layout that is currently used is messy and hard viewing on user’s eyes, although there are good features to this this site, such as the number of free movies and features that are available, and the number of categories available.

Currently the moving image/ movie section needs improving not just in the terms of the user interface, but the user experience, this can be improved by better navigation, which will create better usability, and content flow, better information architecture and layout structure and organisation.

Users of the site are varying in all age ranges of both genders, but will be of mainly people who have access to the internet, and have more knowledge of using hard to navigate sites, will more patience, than others but also being slightly older due to no current films being on the archive.org as it only contains movies that are out of copy right restrictions, the goal of the uses is to be able to find a movie easily and quickly, to download, stream and watch. The frustration now with the current site is that navigating and finding what the user want to watch and browse is hard due to bad navigation and too many download options without explanations of what each is.

Movie Download Screen Achive.org

To be able to bring the archive.org site traffic up and to join what are the sites main competitors, a redesign of a modern and contemporary feel is needed as well as the creation of a TV player app for both Smart TV and Mobile/Tablet devices is needed, the main competitors are, Netflix and BBC IPlayer.

Comparisons — BBC IPlayer

BBC IPlayer Catagories and Homepage & Download/streaming Page

The analysis and comparisons of other TV Player apps is an important task and aspect of the redesigning process. It is essential to see what other competitors are doing and how they are doing it. BBC IPlayer has a simple yet effective interface and due to not long ago having a complete redesign and update, (TrustedReviews, 2016), BBC IPlayer has apps available for smart TV, and both Apple and Android Mobile devices, which allows the user to stream and download content to either watch live, or now and to save for later. The site is well laid out and has a good structure offering you categories to find specific genres, a search bar to do a specific search and the option to looking at reviews for the select Movie or TV Programme.

Comparisons — Netflix

Netflix

Netflix will also be another large competitor on the scale due to the company over that last few years dominating the playing field, and gives anyone something large to live up to. Netflix is available on many platforms including Smart TV, Apple, Android, and Laptop or computer. Netflix produces a very modern feel, that is presented well with good navigation, and is easy to use, although the content type is similar it is structure very differently in aspect to that of the BBC IPlayer. Although Netflix dominates the field there are certain down falls for example you can only really stream, the content of movie and TV programmes as currently not everything is downloadable to watch later, (Hibberd, 2017) and as well as the slight makeover that Netflix has been give the gradients and colours don’t work quite as well for the users viewing.

Smart TV’s

Apple TV Screen

When designing for a TV screen there are many things that need to be taken into account of to make sure that it is user friendly and usable, (SamsungDevelopers, 2016), some of these things are ambience, the light changes throughout the day so the colours type and fonts must be check in all type of light to make sure everything is viewable, (Pacheco, 2017), another thing that must be taken in to account is the display with each and every brand there are different limitations guides spacing and safe area this is very important and must be looked in to the guidelines for the chosen Model/ Brand, (Lafferty, 2016).

Apps

App Guestures

When looking in to creating an App, Gestures and touch are one of the most important things to look at this is because this is how the app will be used, (Babick, 2016). All of these gestures mean thinking a little harder because it isn’t just a click it’s a movement that is controlled and responded to, (Cousins, 2015). These are all things that we now take for granted but they all make todays apps easy to navigate and use, creating a great user experience, (Mehra, 2014). Things also contribute to the screen orientation that the user chooses this means that the screen orientation must be able to change, and switch between both landscape and portrait.

Best Practises And Design Approach

There are many practices when it comes to designing a TV player App these differ for both smart TV and an app but some are the same, for example, Ambience, contrast, fonts, safe areas are just some of these that apply to both, (Hughes, 2016) but there are other that apply just to One Or Other of these devices.

Smart Tv’s are effected in best practices for designing for the 10 foot rule this means the user must be able to use the app at least 10 feet away so that they don’t have to be right up close to the TV, (Smyk, 2015), another thing is to take in to account with the 10 foot rule is that this must be controlled by a remote as it is not touch screen, (Lafferty, 2016).

Apps; some of the best practice for app development are rather more simple ones for example learn from the competitors and invest in user experience, (Katz, 2015).

User Experience And Usability

UX

User experience and usability are important things is design because if the design only looks pretty but has bad functionally site traffic and use will be low and will not create a good product, (Lee, 2017). Therefore, usability and user experience needs to be taken in to account, usability is the degree in which something can be used, (Nielson, 2012) and usability here is important because a TV player app crosses over from platform to platform. User experience is what the user experiences and their user journey, (Giles, 2014), user experience revolves around the users goals and needs and these are interpreted in to the design through the use of personas and research, (Rocket, 2103).

Prototyping

Invision App

Prototyping in a large part of this project and there are many different type of prototyping tools for example there are 2 tools that the university subscribes to and therefore you get more features these were, Marvell App and Invision App, Marvell App was better if you are prototyping on the go and have less time, and Marvel App is better for people who want to create cross platform prototypes, as well as having many plugins and features that can be used within Sketch3 which is used by lots of businesses in the professional world, (Invision, 2015).

Marvell App

Other prototyping software tools are also available but are only free for short periods of time before you have to pay a member ship fee and many of these you cannot share or export the created prototype unless you join, some of these were, JustInMind, Mockqups, Adobe XD, Mockingbot and there are many more as well. Adobe XD is still new and therefore doesn’t quite have all the glitches and issues sorted out but the others were for paid subscriptions.

Design Trends

With time progressing through the year many design trends for 2017 have become apparent along with those from last year there have been some new additions to the fold these being, Bright Bold Colours, Rapid Prototyping tools, animated sections controlling banners, scrolling and navigation these are talked about more below.

Colour

Bright and bold colours are something that for a long time have been out for web and digital design due to user experience but now colour have taken a new look into how things work, due to have new technology so screen on devices can take a better vision on bright bolder colours and are more apt at reproducing richer colours, (Leeson, 2016), with this comes new colour combinations and programmes to create a great colour pallet but with this it must be taken into account who you are designing for a what sometimes load colours just don’t work, (wpmudev, 2017).

Rapid Prototyping tools

Rapid prototyping tool are also are large part of the trends for 2017 with new tools being used everywhere, these are a great addition to every digital designers portfolio, and bank of knowledge, this has created a better flow and design creation between designers and developers because with new tools there are better experiences and challenges, (Williams, 2016).

Animated Sections (Banners, Scrolling, And Navigation)

Many websites, apps and designs are adopting touches of animation and gifts throughout to one help control user experience, scroll, navigation and banners, they can provide great guides for uses, and come in helpful but the trick is not to over uses them, (UserSnap, 2016).

Gifs and animations are becoming more seen due to the advance in the technology that is used to make them they are no longer bad looking and a pain to create, with SVG, and CSS you can create something that is useful and looks great, (Leigh, 2016).

Menu’s and none scrolling are often used in the creating with animation because they are easy to use create and work great on mobile devices something that is also seen more now is a loading screen animation if the page is large or needs extra time to load because they are eye catching and look like they are there just to look at rather than a purpose, (Cao, 2015).

Research Conclusions

Overall the research has produced some interesting things to experiment with, and has also give good points for the speciation, the design trends and research shows just what the movies section of the archive.org needs to be able to catch up to its competitors, and what needs to be taken in to account when designing and creating the specification.

Methodology

The chosen methodology for this project is the waterfall method, the works by completing section by section in a specific order chosen to the design process, each of these sections must be completed before moving on to the next, so that everything flows together nicely. Here is an example of the methodology.

Waterfall Methodology: http://www.castellansystems.com/Waterfall.cshtml

From here the methodology is taken and adapted to fit the project, here you can see how it has been adapted:

This project requires a total of 148 hours and this is shown in the project break down below as a Gantt chart. Within this time frame all the aims and objectives should be completed creating a good format for this portfolio, the 148 hours will cover the research, design, creation, prototype and write up.

Gantt Chart — Showing Time Management Breakdown

Time management is important in this project and a large component of this methodology, it helps ensure that milestones and deadline are met, to keep on target. By using a Gantt chart, it allows for effective time management and reduces the risks of over running and failing.

Research is a largely important component because the findings drawn from this create a specification and the basis of the designs and prototype; this includes extensive research and specification decisions.

A mind map was created to break down specific areas of the project to identify what will be looked at during the project and research, as well other elements of the project.

The first sections of this report include aims and objectives and extensive research; of the current site section, TV player apps, and many other important components, to gather resources, information and ideas. This evolved using a variation of sources such as books, websites, apps, guideline documents and more. By doing this a greater understanding of the work and issues of creating the final design and prototype was accomplished, a total of 30–40 hours would have been spent on these, this shows the first few stages how the method works and will continue to do so.

Specification

Resulting completion in the form of research a specification has been created in the form of a bullet pointed list for redesign and creation of a TV player app, from the Archive.org, site Movies section, features from the will be used and added in the specification.

Both Smart TV and Mobile Device:

1) The prototype needs to be fully functional and will include being a functional prototype for both Smart TV and Tablet device.

2) The films need to be categorized so that user can find what they are looking for easily and quickly.

3) Clear instructions for downloads will be given and what type of format it should be downloaded in.

4) Clear icons will be used for downloads, streaming and watching will be used so that the app will be easy to use and functional.

5) There needs to be clear elements of consistency across all designs and both Smart TV and player App.

6) Design trends should be taken in to account when designing the player app as well as guidelines, so that a modern and contemporary feel is created with good user experience, navigation and structure.

7) Fonts, Colour scheeme, logo, design style, and features and functions need to be consistent accross all designs.

Smart TV Only:

1) Prototype will take in to account the use of a remote for the Smart TV prototype

2) The 10-foot rule will be taken in to account when designing for this feature

Mobile Device Only:

1) Touch gestures need to be considered when creating the prototype.

2) Element spacing for touch must meet guidelines

3) Guidelines must be taken in to account for mobile App

These specifications will enable a successful redesign and TV player app creation of the movies Section of the archive.org, by creating something new and contemporary but still retaining links to the current Archive.org site. This specification will be used when creating the design outputs and prototypes.

Planning

After the research and analysis, the next stage is to start planning and using the specification created to start drawing low fidelity wireframes and sketches to adapt in to medium fidelity wireframes and plans which will be computerized, before finally digitalizing the final design, these will be created in Sketch3 before transferred in to the desire prototyping tools.

Wireframes: Low Fidelity

Smart TV

Smart TV Wireframes

Tablet TV Player

Tablet TV Player Wireframes

Wireframes: Medium Fidelity

Smart TV

Smart TV Wireframes

Tablet TV Player

Tablet TV Player Wireframes

Archive.Org UI Style Guide

Here below is the UI style guide created for the production of the final designs, including, typography, colour scheme, buttons, features, icons, and logo.

Movies Archive.Org Logo And App Icon

Movies Achrive Logo And App Icon

Here you can see the Movie’s Archive.Org Logo and app icon that has been created for this project, this has been created with the original logo in mind but has been adapted so that it reflects the moving image / movie achieve section as well. This will stand out well on both homepages; Smart TV and TV Player App.

Design: High Fidelity Wireframes and Redesign

The Production Of The Final Designs:

Sketch3 offers many features for UI design, such as pre-made UI Kits, resources, plugins, add-on’s and much more that allow for easy, detailed creation of user interfaces and features. These features were helpful when creating the redesigns for the Movies section of the archive.org site. These features are durable, easy and quick to use, to create something simple and effective. All designs were created in sketch3 before being transferred into each of the prototyping tools chosen.

Smart TV:

Tablet TV Player:

Implementation

Prototyping options: There are many different tools for prototyping but after looking in to and researching many of these the decision to use invission app for both Prototypes due to being able to use more features to show how things might look with the use of a TV remote and for the mobile tablet Player App InvisionApp was also chosen because this held better features for what will look like touch gestures, there we more features in invision due to having a membership and account through the university.

Final Concepts Prototype:

Here you can View both Prototypes that have been created, these have been done within InvisionApp.

Smart TV Prototype:

https://invis.io/D9BOQYTCV

Tablet TV Player App Prototype:

Advert And Promotion Screen

Here promotional and advert screen have been created for both prototypes showing how they would be advertised or used.

Smart TV Prototype:

Tablet TV Player App Prototype:

Testing And Feedback

Testing a feedback for the redesign and prototypes was taken if the form of a questionnaire this is the questionnaire that was completed bellow.

Questionnaire:

question for testing

Completed Testing and Answers:

completed testing

This is just one of the sheets back from testing and feedback the prototypes have also been published on medium and will hopefully obtain more feedback here as well.

Conclusions

Throughout this project, the creation and prototyping of the redesigned and digital TV player App for both smart TV and TV Player, have created a better understanding on both the use for prototypes within a project and redesign and why they are used. For this project, a critical part was to analysis and criticize the current design for the movie image archive, or the archive.org site, this helped highlight what was wrong and what was okay, for the redesign and creation, the content, navigation in simple terms, was good by there were many improvements mainly being the layout of the system, and the amount of download options.

It is stated by Huff, (2014), the research is the main key any redesign or digital app creation, with this design trend were also important because they needed to be considered so that even though the redesign was complete it didn’t still look out dated. Along with this the guidelines for smart TV and Apps had to be taken into account so that they fitted in to the specification and design well in the real world, and to create a consistent feel between brands, (Apple, 2017).

Throughout the project the use of the waterfall methodology has been used to keep the project on track as well as the use of a Gantt chart for time management this meant that the project has flowed well and each section has been done in order keeping the project well structured.

After the initial research, aims objectives and specification had been created the first stages of the designs started this was when the project started to get more interesting.

Initial designs, followed with planning, wireframes, design concepts and guidelines were used to create the final redesign of the Smart TV and TV app before this was taken into the prototyping stage, after the creation of the prototyping it was then time to refer back to the waterfall mythology to look at documenting what has been researched and created for this project.

By using this method and the Gantt chart it has meant that keep on track and reaching each milestone and deadline has been met.

Overall the prototype and designs that have been created have a modern and contemporary feel and each of the objects and aims have been met.

With this there are things that could have been done differently like taking into account what could have been a small section of time to make changes based on the feedback give on the prototypes.

One clap, two clap, three clap, forty?

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