Moving Image Archive Project
DES500 Project
Medium: https://medium.com/@przemyslawwb/moving-image-archive-project-cde427d9833
Introduction
It’s important for designers to design best TV Applications they can because as (Anderle 2016) states using internet for videos/movies is increasing and is saying that analysts predict that by 2019 about 90% of all internet traffic will be video contents because of how rapid streaming is growing.
Moving Image Archive is a section for the archive.org which consists of digital movies which are uploaded by Archive users ranging from anything such as short videos from something broadcast on news to full length films. Growth of the use of smart TV’s and TV Apps as well as mobile apps for films has led to not many users willing to go on a computer/laptop device to look for the films they are looking for which leads to Archive not maximising the user experience they can give to the users.
Purpose of this project is to design and develop a Smart TV Player interface as well as a mobile app which will enhance user experience with archive.org. In order to fulfil this project appropriate and in depth research has to be carried out which can then have massive impact on the development of designs and prototypes for the TV and Mobile app.
Aims and Objectives
As the project states that the main aim is to create a TV Clickable app has to be designed and prototype’d as well as a mobile app there are objectives that need to be tackled in order to be sure that the aim is being completed. Objectives to tackle the aim are:
1. Develop an Audit for the current design of the Moving Image Archive page. This objective should take about 5 hours to show a good understanding of the current design, this objective should be completed by 18th February 2017.
2. Carry out research and analysis of different TV/Movie player apps identifying all of the designs have in common and what is different in them. Also analyse and evaluate current rapid prototyping techniques. This task will be one of the longest tasks and should take about 60 hours and should be done by 14/3/2017.
3. Hand drawn designs, User Interface Style Guide, wire-framing and high fidelity final concepts need to be created for the TV App as well as the Mobile App. Overall the task should take about 60 hours and completed by 2/5/2017 for User Feedback and Testing.
4. Testing of the finished prototype has to be done with user feedback in order to find out if the prototype fulfils the purpose it’s created for which is improving the user experience with Moving Image Archive. Good Testing should take about 10 hours and is estimated to be completed by 10/5/2017.
5. As well as the designs and prototypes a 4000 word write-up of the project to be written and posted using Medium. This task should take 13 hours should be spent on the write up and is to be completed before 10pm on 12/5/2017.
Research and Analysis
Archive.org design for the Moving Image Archive is currently a pretty boring looking design which shows all of the categories just piled one on top of the other, it doesn’t have any symmetry in the categories tabs which is clearly visible to the user and may be enough to put them off using the service. Navigation itself that the page offers is not too bad however it’s the links names that are the problem as they don’t look to professional as they don’t follow the same look and feel. Certain Images on top of the categories aren’t scaled properly and therefore are cut out of the image. The design however does follow minimalism which allows for users to see mainly what they are focused on which is good starting point for the user experience. Colour scheme is basic contrasting colours which aren’t too bad for the eye of users and is quite effective with the minimalist design, this can be used in creation of the TV and mobile app. User goals identified for the archive movie section are to be able to access what they are looking for with ease without having to deal with problems such as being unable to find something because the category it’s labelled in is not displaying correctly.
To gain more of an opinion from other users of TV applications a simple questionnaire has been created asking the users about the overall look of the application as well as the experience. Some of the user feedback was that the page could have all of the categories sorted either in alphabetical order or in order of popularity and that the icons need to be sorted out for categories. Another key thing highlighted by the user feedback is that the videos don’t have a cover for them and are just showing the screen captures of the actual video. All of the feedback received will be taken into account when designing the TV and mobile apps.
Before jumping into designing a TV app it’s important to understand what makes a successful TV app. Adler 2013 talks about how TV app market at the moment contains between half-dozen or so immature platforms or worse than that. This means that although there are good successful apps there are also apps that are really bad and hard to develop more. What makes a successful TV app is that it allows the users to navigate to what they want with ease and as little input they have to put in as possible. This is because they will use a remote for the TV to navigate around the app from the sofa in the living room. Another thing is that the app has to have is chunky images and text writing because the users will be using it on the TV which will be 10 feet away from the user. Simple design is key for successful TV apps because if the user doesn’t know what is going on the screen then they would most probably discontinue using the app and look for a different one, however having too little detail in design will make the app look boring and not draw the user in so the level of detail has to be carefully picked out. As for the mobile app that would correspond with the TV app, the mobile app can have little more details included because of the fact that the user will be using their hands to interact with the mobile app but it is important to remember that both TV and mobile apps need to have the same look and feel to them.
Researching different TV Applications that are currently available for streaming TV, films as well as on demand TV will allow to gain a higher understanding of what the design should roughly look like as looking at what people think about each of the applications will really start to build an image what people want to have and what they don’t want to have in the app for Moving Image Archive.
Netflix
Netflix is one of the most popular TV app for streaming and video-on-demand online as well as DVD by mail. Netflix is a member’s only streaming app which costs between £5.99 and £8.99 depending on the package that is chosen, Netflix however offers 1 month free to any new users so that they can try out the app before deciding whether they want to cancel or continue with paid membership. Netflix TV app consists of having big pictures of movies with a big block title on them for the users to be able to identify what the movie they scroll through is called, when the movie is scrolled on then a short description as well as rating is shown which gives user higher understanding what they are looking at and what others think of it. Netflix offers minimalist input from users because when the users watch something and stop, when they get back to the app they can carry on watching where they left off. Users are also able to add what they want to watch into the “My List” which again saves up time looking for it later. Since the Netflix has TV app and Mobile app users can add movies into their list on the mobile and it will automatically appear on the list when TV app is launched so it saves time looking for it using a remote. Netflix is commonly recognised for the use of red as part of their colour scheme, this is because red is really contrasting colour to work with plain grey or white background so the content such as logo always stands out.
BBC iPlayer
Another commonly used TV app is the BBC iPlayer. BBC iPlayer offers on demand watching of the programmes that have been broadcast on the TV at any time of the day as well as the actual TV channels online. BBC requires users to be signed in in order to use the service. BBC is free however users are required to have a TV Licence in order to watch from the iPlayer legally. The iPlayer design is very similar to Netflix where they use big chunky images with titles underneath them. BBC iPlayer offers a very simple navigation in order to make it as TV-Friendly as possible. This allows users to browse through the app smoothly using their remote.
First page that loads up when the app is opened is the homepage which shows the newest or most popular series. This can lead to users being attracted to any of the new or popular series. The colours used by the iPlayer are simple and the use of pink is eye-catching which straight away shows what the main centre of attention is. The way the iPlayer is designed is that it follows the minimalist design style so it looks very simple for audience to use and guarantees good user experience. iPlayer went through a lot of redesigning with the current one being the most TV-friendly of them all, the design also suits consoles as well where remotes are similar in use. It’s best described by showing how TV remote and games consoles remotes work which (Murrison 2012) showed in a slide show.
Search on BBC iPlayer offers a way to tackle that problem and the way it does it’s a keyboard appears on the screen and using arrows and enter the user types in what they want to see. Typing in using a remote is the hardest task that the user will encounter with the iPlayer which makes the iPlayer as user friendly as it can get.
Now TV
Now TV is another player that allows users to watch TV without having to sign a contract. For example, some users want to watch Sky Sports but they don’t want to get a full contract with Sky then they can get Now TV sports package for £6.99 a month and enjoy watching sports until they cancel their subscription. It’s a really good option for users which don’t watch much TV unless it’s sports. There are other entertainment packages available on Now TV. Now TV can come with a box it also has an app which is used on smart TV’s as well as consoles. It also has mobile/tablet device friendly app.
Now TV design for the app again follows a minimalist design which offers big images of the channels it includes with a picture to what is currently being broadcast with the channel name and title of the broadcast. The colours Now TV app uses are contrasting with dark background. On movie pages the Now TV app has an big image of the movie with short description as to what the movie is about to draw the user into it and explain quickly what the movie is going to be about. Navigation that the app offers is also very simple and it just requires the user to use the arrow keys and enter key on the remote.
In conclusion Netflix, BBC iPlayer and Now TV offer a very similar approach to design of their TV applications since they all offer minimalist design which aids user experience as the user doesn’t see a lot of things happening on the screen and is put off because it looks off-putting. All of the designs also have contrasting colours to the dark background, this is so that users can easily read the texts and the use of dark background allows the users not to get slightly blinded after the video they are watching finishes, talking about the contrast all of the named applications follow the WCAG contrast minimum for the visual of text and images of text, the rule is that
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.
and can be found on w3.org website. The use of images for movies on all of the applications is appropriate size with headings describing the movies to inform the users exactly what they are looking at. All of the applications had simple to use navigation bars which offer searching by most categories or even searching by name which then opens up a keyboard on a screen which is simple to use using a remote.
Prototyping tools and best approach to creating clickable prototypes
A Prototype can be anything from a simple sketch to a completed clickable HTML5 file, designers commonly use interactive clickable prototypes to show the navigation around the design and functionality. There are certain steps that designers need to follow when designing clickable prototypes. On Smashing Magazine (Denkov 2014) explains that it is important that designers sketch out the idea first which then allows to have paper templates and then uploading them onto prototyping tools and converting them into interactive designs that then can be reviewed by others in order to gain feedback. Prototyping online is simple as it’s really low cost efficient to generate quick prototypes out of hand drawn designs. (Cao n.d.) talks about the importance of story-boarding because it shows the movement between the screens which graphically show what each button or swipe etc. is going to do. He says:
storyboards give developers a snapshot of the entire experience.
In order to be able to design a good prototype some research has to be carried out to what prototyping tools there are and which one of them would suit the project best. InVision app is one of great prototyping tools as it allows users to prototype quickly and effectively by options they offer such as converting static screens into interactive prototypes, it allows to add animation onto the designs and feedback option they offer which allows other users to give some feedback on the design that has been developed. InVision offers a paid membership which offers access to all of it’s features, free users are limited down with what they can do. Another prototyping tool looked at is the mockingbot as it allows for fast drag and drop prototyping, difference between mockingbot and invision app is that mocking bot gives that feeling that it has more limits when it comes to actual design aspects because it’s a simple prototyping tool to test out user experience rather than the full design itself, although a free user can use mockingbot to generate their prototypes in order to download it as a single PDF or HTML5 format they need to have a subscription, mockingbot offers free 1 month membership to new users to allow to test the tools it offers. Marvel app is another tool that can be used to generate fast prototypes from static designs. Marvel app offers its users the option to work with sketch via a plugin they offer, as well as that marvel offers amazing features like embedding video or sounds from Soundcloud, YouTube etc. adding interactive layers on top of the designs and even viewing the designs on screens like iPhone, Apple Watch and Apple TV. It’s easily visible that Marvel is a software preferred by Apple users.
Method/Design Process
Waterfall methodology will be used in the project as it will allow to monitor carefully that the previous tasks are done before moving forward. This ensures that every step is done to a good level before next steps are considered. Waterfall methodology allows for feedback to be given at any stage of the project which means the feedback can be straight implemented as the project moves forward.
Overall the project is to take 148 hours to complete, this means that the tasks need to be spread out and allocated how much time should be spent on completing each task. To help visualise spreading the tasks a timeline has been developed showing the start dates for each of the tasks with key milestones separated out in different colours.
Specification
Project needs are to be identified before jumping into the design as well as the features and functions it needs to have. A specification list has been developed which will later be used as a guide to design process and will be refereed back to when testing the final product.
- Design TV Application design hand drawn designs with corresponding mobile design templates. Minimum 4 screens to be designed, homepage with app logo on it, archive movie section with all categories listed, selected movie category and movie with download/watch option on it.
- Produce User Interface Style Guideline which will contain the chosen font styles, colour scheme, rules for design chosen and font sizes
- Design medium fidelity wire-frames for hand drawn designs based on the feedback that has been received for the hand drawn designs.
- Develop a storyboard telling the journey that the screens will follow when users interact with them.
- Using appropriate prototyping tool develop ideas produced as medium fidelity as clickable full detail prototype for Smart TV app 16:9 ratio 1080p. Also develop mobile application for iPhone 6.
Design, Planning and Implementation
First hand drawn designs have been developed to start the designing off.
Feedback received for the first designs was that the main page for the Smart TV app has too much categories on the screen. This means that users will have a lot of small content on the screen which they probably won’t be able to see very clearly. Another piece of feedback was that the mobile app didn’t include the download button on the film page so users wouldn’t be able to download their movie if they wanted to. Based on the hand drawn designs a storyboard has been developed to help understand the journey that the users will take while using the application.
Storyboard clearly explains what the links are going to be for each of the screens for both mobile and the smart TV application. next step was to create a User Interface Style Guide and Medium Fidelity Designs with the feedback included in them. User Interface Style guide explains what the typography and colour scheme will look like throughout all of the designs
Having developed medium fidelity designs everything started to gain shape and it was clear to see what the intended look the applications were going to have, as it’s clear the previous feedback received has been incorporated within the app. It is visible from the designs that there has been a logo developed for the app. This is because the logo that Archive uses is for the main website and modifying it a little makes the app straight away seem that it is a media player.
Implementation
Low Fidelity and High Fidelity designs allowed to develop a good understanding of what the final design is going to look like. Having the logo for the app already created all there was needed to do was just the final designs which then would be incorporated into a prototype. First up was the Homepage which included Smart TV with all apps and opening the Moving Image Archive application, on mobile the app was surrounded by other iPhone apps to give the app a real look and feel. This also allowed to test whether the app stands out from other apps included on the screens. Next screen developed shows the application opened. The screen shows 8 different categories however it can be clearly seen that the screen slides to the side and other categories can be found there as well. The design eliminated all of the single files that were not in categories so that the application doesn’t make the user think that it’s incomplete or not designer to a good standard. Both mobile and TV application designs offer a search screen so that users can look for a movie or video by name if they know exactly what they are looking for. Screens have been designed to have a big chunky look to them so that users using a remote can see them well, another feature to make the design more user friendly was highlighting on top of the page which section the user is currently in, the whole library or the search section. Actual Film page on the Smart TV design has been designed to have a big picture from the film included that would be fading in. The fading effect has been created using simple gradient tool in Adobe Photoshop. Smart TV film page does not contain any of actual written reviews however it does offer the average star rating that users have left on the movie. Mobile app on the other hand offers the users the ability to read the reviews that people have left them simply because mobile users have more freedom of control by using their fingers to type with and with TV app most users are using remote controls which would mean that if they were to leave a review on the Film it would take forever for them to type it. The film pages created for both mobile and TV apps includes a simple summary to what the film is on about as well as other points users would want to know such as the date it was published in. Completed High Fidelity designs can be seen below. The mobile application has been designed to be used on an iPhone 6 and TV application to be used on TV’s with 16:9 ratio resolutions, for designs 1920 x 1080 has been used.
Both mobile and TV applications have been prototype’d using the InVision app.
Both prototypes demonstrate how the user would be moving around the application. They have been done using a simple drag and drop method and having pictures linked one to another.
Conclusion
User testing has been completed for both Mobile and Smart TV applications and the Feedback received was overall positive.
This is because specification points have used to test the project and they have all been met. During research section it has been identified that most popular applications now a days use minimalist approach, this is what has been done in this project in order to follow up with the current trends that are being set by the companies out in the world. Having initially gained feedback regarding the Moving Image Archive website and being told what the user frustrations about that design are I was able to develop a prototype for TV Application that has countered issues such as contents not being placed in the right categories, the categories design looking like they are all over the place. Images used for the categories was the main point in initial feedback because have not received that feedback I could’ve missed out on that specific point and made similar mistake. Methodology that was chosen for this task turned out to be a successful one because it allowed me to keep on top of all the tasks and not rush one task before other is completed. This allowed for the project overall to flow smoothly and tackle problems as they came without having to go back and doing them then.
If this project was to be done again then more applications could be researched to have even wider pool of designs to compare which would definitely improve the designs ideas further on in the project. Another thing that would be done differently is using different Methodology to challenge myself knowing now that waterfall methodology works really well.
