Interactive Design Online Player & Device App

Introduction

Hundreds of devices have access to the internet nowadays including mobiles, tablets and TVs which has led to many video streaming companies such as Netflix, BBC iPlayer and YouTube produce a number of applications for their users to access.

This project will consist of two halves, the first being to carry out a full audit of the current archive website assessing the structure, content and features. The second to design, create and implement a clickable prototype for both a TV application and Mobile application. To ensure that this will be done successfully research will be carried out looking into current design trends and inspiration will be drawn from pre-existing catch up services such as Netflix and BBC iPlayer.

Aims and Objectives

The aim of this project is to carry out an audit of the current archive website and then create two clickable prototypes one for TV and the other for either mobile or tablet device. In order to complete this project, it has been recommended to spend at least 148 hours to ensure its success. The following objectives will need to be met to ensure that the aim of this project will be met.

● To carry out an audit of the current website evaluating the structure, content and features

● To complete independent research looking into current trends of Smart TVs, online catch up services and applications for mobile and tablet devices.

● To design a new interface that has a modern and contemporary feel.

● Construct two interactive prototypes for a Smart TV and Tablet or Mobile device.

Methods

The total number of hours that have been recommended to spend on this project is 148 this will need to be evenly split between the research phase and building phase of this project. By breaking down the tasks into smaller milestones is it possible to plan and set up mini deadlines for certain tasks.

Gantt Chart showing the break down of activities

When completing a project as large as this there are a number of methodologies that someone could follow to ensure the success, in this particular case, the prototyping methodology has been chosen.

Prototyping Methodology (Shopeemart, n.d)

The prototyping method allows the prototype to be build, tested and modified until an acceptable version is developed. Using this methodology, the developer is able to spot errors earlier on during the project and also receive user feedback sooner which can then lead to solutions quicker.

Research and Analysis

Online Streaming Services

Defined by (Rouse, 2013) a video streaming service is an ‘online entertainment source for TV shows, movies and other form of media’. Streaming services can be both free and paid for, for example BBC iPlayer does not require you to have any kind of membership with their service however Netflix does require you pay a monthly cost to access their content. Online streaming services have become greatly popular and are easily accessible on numerous devices including desktop, mobile, tablet, smart TVs and consoles. Not only that but streaming services are available at any time of the day. Having said that users are not always able to access the same titles due to location and general upkeep of the site, ensuring there is new content regularly somethings do not stay online for long periods of time.

Archive

The Internet Archive is an online non-profitable library that allows their users unlimited access to free images, movies, music, software and websites currently they do not have a mobile application nor a TV application. From first glance, Archive’s website has a good structure with their navigation running along the top of the page the body and content then runs across the whole width of the page below.

Archive Homepage

When looking for a particular genre it is difficult as there is no organisation to the page with genre tiles in no particular order and they are mixed in with media that users have uploaded. However when it comes to feedback the user is able to easily see what they are selecting as the mouse changes to cursor, the title’s background change colour and the text gains an underline.

Archive Feedback

Once the user has clicked into a genre they are presented with a list of films but they are automatically organised by viewings, so the most popular appears first, whereas most streaming services are organised alphabetically. Having said that users are easily able to refine and search for a particular film using their refinery section on the left-hand side of the site.

Netflix

Netflix is a monthly subscription service where users pay a particular amount per month to have access to unlimited streaming and downloads, available on all devices it is an incredibly popular online streaming service. Netflix has a very simple structure where the user is required to login from there they then have access to all media. Netflix follows a grid layout which is easy for the user to navigate allowing the user to only scroll up and down or left and right.

Netflix Homepage

When it comes to Netflix’s TV application, there is a clear search button right at the top of the page so the user can find their desired program quickly and efficiently. Netflix also uses overlays to show a change in screen rather than loading a second or third page, making the user journey seem shorter.

BBC iPlayer

iPlayer is a free catch up service to all TV licence fee payers to people in the United Kingdom. BBC allows users to watch and download programs that they have missed within the past thirty days or users can watch live TV over the internet, however downloaded programs only give users thirty days to watch before the file is automatically deleted.

BBC iPlayer Homepage

Like Netflix, BBC also has a search function within the header, followed by a second navigation bar, allowing the user to browse for their desired show and find similar programs. Within the body of their site BBC displays a range of programs including most popular and new series. BBC also follows a grid method similar to Netflix, only allowing the user to navigate the website either up or down, however their grid is slightly more complex due to the differing sizes of tiles. This does not make the site challenging to navigate as it also has a feedback function changing the styling of the tile, adding an overlay that gives a description of the program which tells the user what they have highlighted.

The three streaming services look completely different but their functions and features are very similar. Archive is out of date and needs a new interface that is modern like Netflix’s’ and BBC iPlayer’s’. Looking at the three examples navigation has proved to be simple only allowing their users to travel in four directions up, down, left and right. It is also important that the user can search for their desired program in order to shorten and make their user journey as efficient as possible. Another noticeable feature of two out of the three sites is the use of colour, the backgrounds tend to be dark with the foreground and important features in a lighter colour allowing the user to differentiate between clickable features and functions. Lastly ensuring that the user knows what they have currently select by providing them feedback, through the use of styling has proved to be essential when designing, whether it be changing the background colour of tiles, adding a highlight or increasing the size of the tile.

Smart TV & Consoles

Smart TV

A smart TV is any television that has built in internet connectivity, smart TVs allow user to access various online services. Already there are many companies who already produce and sell smart TVs including LG, Samsung, Sony and more. Most TV supporting popular applications like Netflix, Hulu, Amazon Instant Video and BBC iPlayer. Like Google and Apple many TVs now come with their own app stores allowing users to download extra applications to their TVs including other media streaming apps, games, social media sites and instant messaging.

Apple TV

Apple TV is not TV but a media streamer, it is a device which plugs into the back of a TV and allows a user to watch films, TV shows, view home videos, photo and other media from computers or devices connected to the same internet connection. Apple TV is a small, clean interface that according to (OccupyTheory, 2015) ‘many people find easy to use’ Apple TV does not allow users to download applications like Amazon Prime Video unlike the iPhone where a user can have full access to this app, this could deter a number of customers due to the lack of availability.

Amazon Fire stick

Like Apple TV the Amazon Fire Stick is another streaming media that plugs into the back of a TV to allow the user stream lots of channels including HBO, Hulu, YouTube and obviously Amazon Instant Video. Like Apple TV and the Smart TV the Amazon Fire Stick allows the user to access more content via an internet connection and various applications that are downloaded to the USB stick.

Consoles

Consoles such as PlayStation and Xbox also allow users to stream online media through the use of applications such as Netflix, BBC iPlayer and Youtube. Consoles are restricted as what applications a user can download as not all appear within the store as some channels may not have developed an application that is yet suitable for console use, for example PlayStation 3 a user cannot download ITV to their console but there is a mobile and tablet application.

Playstation Streaming Applications (Finder, n.d)

Designing for TV

The amount of content being produced for TV now days is more than ever and with an increase in production there is now more and more choice in how a user can watch their favourite shows. Users can choose between a number of devices such as mobile phones, tablets, desktop and now smart TVs to catch up and stream content at anytime and anyplace. Users no longer have to rely on a wired device to access extra titles nor do they have to stick to using traditional TV remotes. Compared to desktop and mobile phone their designs and layout are still a relatively new concept as there are many more features a designer will have to consider when creating and implementing new applications.

Display

When designing for a TV display there are two things that a developer would need to bare in mind and they are overscan and safe areas. Old TVs would have issues broadcasting the edges of programs producing inconsistent images across all channels. The solution to this was to have a monitor show less of the full image, so that the edges where outside the viewing image, this is called overscan. The section of broadcasted picture that is guaranteed to be visible on all TV sets is called a safe area or safe zone.

Navigation

Due to its size designers are able to take advantage when choosing the layout of and design however they will always have to consider how a user is going to navigate and easily find their way around the system. On TV the wide canvas allow designers to create rows going both horizontally and vertically full of content, maximising the number of programs they could have on one page.

Netflix grid layout (Anon, 2017)

Making designs like this, allows the user to travel in four directions up, down, left and right. On a TV users would be navigating using their remote controls using the directional pad (D-pad) which only allows users to travel in those four directions.

Navigation in four directions (Heilmann, 2016)

Some TVs now days allow users to their remote as a pointer by moving it around physically where the number of directions they could travel is increased. However, the principle is still the same in that they can only go up, down left or right as content is always designed on a gird to allow organisation and structure.

Typography

When watching TV most users sit a minimum of 10-ft away, so when it comes to reading any kind of text it is important that it is visible enough for the user to see and be able to read through. (Lafferty, 2016) says that ‘typography can become especially tricky in 10-ft experiences, when in doubt, go larger’. She recommends that any designer should bump up both the size and weight of any text, to ensure users are able to clearly read off of the screen.

Not only do TVs have safe zones for the broadcasting picture but they also feature called the title safe, where it is safe to put text within and it will not blur into unreadable text. (Earls, 2004) says that ‘a designer should never use a font smaller than 18pt and to keep above 21pt as much as possible’. Another rule to consider are to ensure that both the font colour and background colour are two contrasting colours so that any text stands out on screen. It is also advised not to any finely seriffed fonts as the serifs will break down on the screen meaning some letter may not as obvious to the user.

Feedback

One of Donald Norman’s design principles, feedback states that completing any kind of action should give back information about what action has been accomplished. When navigating using a TV is it essential that the user receives some kind indication as to where they are currently on screen and know where they are going when scrolling. In order to do this many TV’s provide feedback in the form of an obvious shadow or by simply increasing the size of the application tile.

Feedback, increasing the size of selected Application (Sakl, 2015)

Stated by (Samsung, nd.) a design must be ‘clear and visible to help the user to quickly recognise their current on-screen location’. In doing so can help aid the user journey greatly ensuring the user can easily navigate to the application they wish to use without having to struggle and have to use guess work as to which application they are about to enter.

Prototyping Tools

A prototype is fundamental working model of a product or information system, usually build for demonstration purposes. Many businesses and companies produce and refine a number of prototypes in order to create the best possible products for their customers, by doing this they are able to ensure that they’re product really is what they want and will spend time on and more importantly money on. Prototypes help ensure that there are no issues with the product and that users are able to navigate and interactive with them effectively.

There are two methods in which a prototype could be implemented through paper, this involves producing a paper version of the design in order to get feedback early on in the design process, saying that users are less likely to get a realistic interaction with a paper version to the lack of interactivity. However, the second method of prototyping, rapid prototyping where a low-cost representation of the new system is produced tend to be computerised allowing a far greater level of detail and interactivity. Rapid prototyping also saves time knowing exactly how the new system will run and interconnect with itself and other sites. There are many online tools which allow users to quickly design and produce high quality prototypes.

Invision

Invision is an online prototyping tool that allows user to create, design and implement prototypes on a number of small and large devices. Assuming the user knows how to use this tool it is possible to make a simple prototype within a few minutes and gain free, unlimited feedback from real users. Invision has a number of animation and transitions which a designer can use to make their prototype to imitate a real system. Having said that Invision does not allow users to use a hover over effect which would be needed for the TV application as a method of feedback.

Marvel

Marvel is another online prototyping tool that also allows users to create interactive designs. Marvels technical ability is practically the same to Invision however it allows the a designer to use overlays to give a hover effect on a design to give the impression that a user is navigating through the list of applications or programs. However if a designer wanted to download and save their designs to their own computer, they are required to pay for a monthly subscription which they may not being paid for.

Justinmind

The most technical of all three methods, Justinmind allows designers to make incredibly realistic prototypes. Like Invision Justinmind allows designers to collaborate and complete designs together in real time, allowing projects to be completed quicker. Justinmind features in pre-built UI libraries allowing prototypes to be completed in even less time. It includes many mobile gestures, transitions, animations and effects. However, assuming a designer has all the necessary skills to use this application they could create a replica of the new system.

Looking at these three methods the purposed tools to use will be Invision for the mobile application, due to its wide variety of animations and transitions. When it comes to producing the TV application Marvel shall be used in order to use their hover effects to give the impression of feedback within the system. Both prototyping tools are simple to use and will not take as long as Justinmind which would require more time learning how to use that software.

Specification

In order to complete this project, the following specifications will need to be met to ensure the success of this task.

Smart TV Homepage:

· The design must be visible from 10 feet away

· The user must be able to use a remote to navigate the design

· A number of other applications must be available for different users

· Visible feedback must be seen so the user knows which application they are selecting

· The design must be based upon a pre-existing smart tv

Smart TV Archive Application:

· There must be feedback given to indicate which program the user is selecting

· The design must follow a grid system

Mobile Design:

· The navigation needs to have a modern design and be hide-able when it is not needed

· The navigation needs to be within the header of the page

Mobile Prototype:

· There must be a promotional advert for the application within the app store

· Users must be able to view the chosen media in landscape

General Specifications:

· Must use a limited number of screens too many and the process will be too time consuming

· There must be a search function on both TV and Mobile application

· The user must be able to see and select a genre

· The user must be able to see a list of episodes along with an episode description

· The colour scheme and typography must be consistent throughout both applications

· Where possible test must be avoided

· Programs only from Archive must be displayed within the designs and on the prototype

· A stylesheet must be produced listing all fonts, colours and icons used

Planning, Design and Implementation

When it comes to any project whether it be small or large ensuring that time has been put aside to carry out planning is vital. In doing this, designers are able to ensure that the deadline will be met as tasks will be completed in a chronological order ensuring the most important tasks are done first followed by the subordinate ones.

The largest phase of this project, like any project is the implantation phase, this is where designs are drawn up, in varying levels of quality, allowing both the developer and client to get an idea as to what the final product could look like. As this project requires a clickable prototype to be made this will be the closest any design could get to being like the real thing. They allow designers to gain more realistic feedback upon their designs allowing them to spot any critical errors or issues within the designs before being produced for the general public.

Low-fidelity wireframes

Defined by (Busche, 2014) low-fidelity wireframes are ‘rough representations of concepts early on in the design process’. Normally hand drawn low-fidelity designs are the first concepts a designer will implement to get an idea of layout and structure of a new product. They consist of very little information with pictures, text, buttons and forms all represented as boxes.

Creating low-quality designs means that a designer is able to change or erase part of a design quickly and easily without having to worry so much about the effect that change will have on the rest of the plans. Doing this also allows any client to give feedback that is relevant to the starting point of the project point rather than get half way through and have them change their mind about the positioning of a certain feature.

Low-Fidelity Mobile Application Designs
Low-Fidelity TV Application Designs

Medium-fidelity wireframes

Medium-fidelity wireframes are the next stage of planning taking the low-fidelity wireframes and giving them more detail. Images are placed with placeholder images, sections that have text is fill with sample text and buttons are labelled. Medium-fidelity are a step up from low-fidelity designs enough to give the client an idea of where features are located and their sizing. These designs are produced on a computer using a digital design software such as Sketch or Adobe Photoshop. Again, by producing these designs a client is able to get a better idea as to how their new system will look and also function.

Medium-Fidelity Mobile Application Designs
Medium-Fidelity TV Application Designs

High-fidelity wireframes

High-fidelity wireframes are the last designs to be completed, they are highly detailed and look as close to the final product as possible. High-fidelity wireframes are incredibly useful for clients as it gives an exact idea of what their product could look like, they also allow the designer to communicate clearly with the client what they’re receiving. However if the designer comes across a problem with the system this late in the project this causes a great deal of hassle for them, having to go back to alter and change the design ultimately taking up more time of the planning phase and it could waste money having to pay the designer more for putting in more hours.

High-Fidelity Mobile Application Designs
High-Fidelity Mobile Application Designs

Mobile Application

Implementing the final designs into a clickable application it was decided that invision would be used this is because this application did not require any complicated transitions or animations, such as overlays to make the prototype more realistic. The prototype itself works smoothly and the user is able to navigate to all pages successfully and with ease. However more back buttons could have been added to allow extra ease and less confusion within the app itself.

TV Application

Due to the more complex design of the TV application, to begin with it was decided that it would be created using Just in Mind to allow the application to be as realistic as possible. However, with the deadline closer than anticipated this idea was scrapped and Marvel was used instead as it allowed for more complex transitions it also allows the designer to use overlays to mimic a TV as if it were giving feedback to the user when they’re navigating the system.

The prototype successfully mimicked a Smart TV through the use of feedback telling the user where exactly they were on the page, by increasing the app’s sizing. Not only that but when a program was selected there would be added glow indicating to the user which program they have selected.

Conclusions and Recommendations

Ensuring that the best prototype could be made relied a lot upon carrying out enough research and then also ensuring the project would be running on time. To ensure that the deadline would be met and also allowing time for any last-minute changes or corrections to be carried out.

When it came to the prototyping tools, the correct tools were picked for this particular project as they were quick and easy to use allowing a professional looking model to be produced. That is also fully functioning and mimics a real application. However, with more time a better tool would have been chosen which would make the prototype far more responsive and interactive.

The designs could have been improved upon as the colour scheme is rather bland and could incorporate more colour just to make the system look more inviting and appealing to users.

When user testing was carried out on this prototype users were successfully able to navigate through the mobile system to find the desired program successfully.

Link to Mobile Prototype: https://invis.io/WYBP4A78Q

Link to TV Prototype: https://marvelapp.com/5eg9fj4