Interactive Design DES500(AE1)
This project requires me to adopt to the role of a user interface and user experience designer by designing and developing an interactive Smart TV player interface as well as a mobile/tablet concept application for archive.org film streaming platform. With online viewing soaring a lot of people including (Wohlsen 2014) believes that the ‘Internet TV will soon be the only TV’ with figures rising by 388 % in the year 2014 showing how quickly this change is taking place and with a large number of all TV channels and cable networks now are able to be accessed and viewed all online. The aim of this project is to demonstrate all the learning outcomes we have achieved throughout this project such as undertaking design research, professionally documenting my individual design process, apply current design methods and workflows to my work and to produce both low and high fidelity clickable prototypes to enhance the user experience for archive.org users.
Methodology & Design Process
The waterfall model is what I have chosen to approach this project. The model ensures the success of the project in a waterfall manner so the whole process of the project development is split up into separate milestones, so to move on to the next phase the previous one needs to be completed this ensures that all work is complete and up to standard and it all flows very smoothly so phases are completed correctly. Below is a diagram showing how waterfall model works.
This model is simple and very easy to use and this is most suitable model to use as it is works well for smaller projects where requirements are very well understood.
The design process is key in all projects as it breaks down a large project down into manageable sections. The main steps of the design process are research so you are required to collect information, sketches and existing products to help get a better understanding of what you want to develop. Brainstorming ideas and then producing low fidelity designs. Once that is achieved you move on to implementing more design features so you’re further developing your product, then finally developing a prototype of your design and manufacturing a final product. The image below shows the process required for any design project.
Research & Analysis
Audit of Current Design
The Movie archive section of archive.org has a lot of flaws in it’s design structure and navigation system. These areas can all be improved significantly to help develop a more aesthetically pleasing user interface which will also work as a mobile application and TV app. The whole structure of movie archive is quite poor with elements not being aligned and instead scattered throughout. it seems cluttered in terms of all the information that is presented on the pages. The colour scheme is very dull with very little colour at all predominantly being white. The websites functionality is very good offering numerous different features where the user can search for a specific movie based on topics and subjects or languages however I feel that some of these functionalities are unnecessary and just take up space on the website. Personally I feel that an online movie/TV streaming service should have a very simplistic but effective design.
The movie player page however is laid out well with the player taking up the majority of the screen as its displayed however below the video player is a lot of information which I feel is unnecessary for a movie streaming website. It gives a brief description of the film and some basic information such as release date and running time which is acceptable however further below that is the cast of the film followed by reviews of users and personally I feel like this is not needed and this information is best on a movie database website such as IMDB.
To gain further evaluation of the movie archive section of archive.org I carried out a basic survey with some fellow work colleagues to get their opinions on what they thought of the design, structure, functionality etc.
Research/Analysis of TV/Movie Player Apps
Internet television is the digital distribution of television content, examples of content providers are Netflix, Amazon Video, BBC iPlayer, Now TV and many more. With Internet TV figures rising by 388% in the year 2014 it is soon to be that Internet TV will surpass cable television, this leaves the market open for new businesses to start within the internet television industry. An article written by Google states all the Android TV design guidelines and this information will be very beneficial when it comes to designing and developing my own concept for archive.org. Developing User Interfaces for TV’s is relatively new compared to mobile devices and computers however designing for TV requires specific set of considerations which a lot of people wouldn’t really assume, these include ‘screen size, and distance, technical constraints, and context of use’ (Lafferty 2016).
To ensure that a suitable app is created I carried out some research on what makes a successful app for both a mobile device and TV. A successful TV application should involve easy setup, use limited screens and share social context and not be text-heavy. The reasons of ensuring a TV application not being text-heavy is because of the distance a user is from a TV so usually are not able to process as much information as when on a table device therefore TV applications usually only show the most important and necessary information and don’t overload on the visual content. Navigation is another key factor as TV applications are operated from a remote device for the TV so therefore a simpler navigation is required in comparison to a mobile device as the user is not directly in contact with the interface so may find it more difficult to navigate around the application. (Flaherty 2015) believes that ‘UX design for television UIs should focus on minimising user effort and providing quick and smooth access to content’. Modern remote controls have a lot of button in comparison to what they use to previously be manufactured like and ‘moving through a TV interface and making selections with the remote can be an intensive process’ (Flaherty 2015). Also stated in his article was something very useful that a lot of websites especially within the media market do and that is the ‘TV interface is not the “star of the show. The TV program itself is what’s important to users’. So in this case of online streaming websites less is more by being text-heavy and over cluttering of elements on the screen is unnecessary as ‘accessing content is key’ and with a cleaner simple design this can be achieved by the user a lot quicker and more efficiently.
Researching existing products and competition is proved to be very beneficial it allows companies to get a better understanding of key features and best selling features of a product so it allows for better products to be developed and created based off of existing products this can all be done by simply carrying out extensive research of what other competition offers. Carrying out this research also gives companies better understanding of their market and target audience.
‘Netflix is the leading model for the future of TV’ (McAlone 2016). Netflix is an American entertainment company which specialises in streaming media and video on demand online, expanding into film and television production in 2013 and is now by far the largest online movie and TV streaming service with almost 100 million users worldwide. Netflix began as a rental company for movies before introducing streaming in the year of 2008 and its user interface is shown below.
The following year in 2009 Netflix decided to expand on its target audience and ‘introduced the “happy family” image that would continue to dominate its home page’ (McAlone 2016). By 2011 streaming had become the predominant feature of Netflix’s service and then introduced a Facebook integration allowing users to share favourable content with friends.
Over the next two years Netflix had removed all of the graphic walk through of the service and instead created a much more sleeker page which can be seen below.
Now the interface Netflix ‘features a variety of different potential Netflix users’ (McAlone 2016) with images cycling through each different images being aimed at a different target audience. The pages are not text-heavy and mainly consist of clear and useful images related to the service and to it’s users.
When analysing the user interface of Netflix in more detail it is clear to see its intentions of not being too text-heavy mainly focusing on the most important and required information that users needs. It consists of the film cover and the title of the film no text is shown and then if a user requires further information on a selected movie they can simply hover over the image and a brief description of the film will appear. Here they are also limiting the amount of pages which is one of the specified requirements for a successful TV application. Structure and Navigation are a huge factor when developing UI for TV’s, due to the controls of a TV being limited to a D-pad with the basic up, down, left and right options in comparison the the keyboard and mouse option and touch screen on mobile devices, the structure of a TV application has to be really well thought about and means the whole structure and navigation system implemented need to be basic. Netflix has a very good structure it consists of mainly organised rows and this works well across all platforms on computers it is easy to see and find results and on a TV it is easy to navigate around using the remotes d-pads.
The image above is of the Netflix mobile application as you can see it maintains the same design as both the desktop and TV app version. The changes that are made to be best suited to a mobile device is the navigation toolbar which is pressed into a hamburger menu so the navigation then drops down at the users request. The content is also been made smaller and more efficient so despite the device being smaller the user is still able to see almost the same amount of films available without having to scroll much. New features and functions are always being added the most recent allowing users to download certain content so they are able to watch offline and (Duffy 2016) believes that the ‘Netflix iPhone app continues to be a must have’.
Another competitor of the online movie streaming industry is Amazon Prime Video is an Internet video on demand service that is developed and owned by Amazon.
As like Netflix Amazon Prime Video is structured within rows and is not text-heavy mainly consisting of images and very limited text.
Amazon Prime Video differs from Netflix as instead of taking the user straight to the video player it appears with a page which if a TV show has the list of episodes followed by a brief description of the movie/TV show and the whole layout of this page is very well its structure makes it easy for users to locate specific information and it also provides access to extra functionalities such as the cast, subtitles and customers also watched. The elements featured on Amazon Prime Video are limited as on Netflix and it’s minimalist design allows users to simply browse the applications content without any constraints.
To conclude from the research gathered on both Netflix and Amazon Prime Video it is clear to see that video player applications all take a similar approach in terms of design and functionality. It seems that minimalist design and not text-heavy pages are the key in designing a successful movie streaming application for the TV as well as on a mobile device. Both platforms also feature dark backgrounds and this is because ‘white screens emit too much light and therefore are hard on the eyes’ (Steve 2012). In addition to that in relation to mobile devices using black as a background uses less energy, which extends the time a mobile device can run for and this is because ‘black is the absence of light’ (Steve 2012).
Creating Clickable Prototypes
(Tandemseven 2017) states that ‘creating a prototype that demonstrates functionality of an application in development can positively impact final design as well as the overall project’. Bringing a design and user interface to life is hugely significant to most projects allowing users to gain a much greater understanding of of ‘the nature of key interactions’ and this can only really be fully understood through a clickable prototype. The main purpose of creating a clickable prototype is to get more valuable feedback from users as they are able to give a lot more detailed feedback where as if they were just providing feedback off of a design. There are numerous different options available online for those looking to develop prototypes with a lot of the prototype developing sites being free and offering great features and service. Marvel and MockingBot are prime examples of prototype apps/tools. Both allowing users to turn sketches, mock ups and designs into web, iPhone, iOS and Android prototypes. Marvel includes certain features which allows it to stand out to all it’s competitors of prototype apps, and that is the cross platform feature so users can integrate into Sketch which is a vector design tool entirely focused on user interface design. Other beneficial features of Marvel is that users are able to add images directly from Photoshop and even sync designs from their cloud storage.
From carrying out this extensive research the specification points that have been set for developing a mobile/TV app for movie archive are:
- Design and develop a prototype for a mobile and TV application of the movie archive section of archive.org
- There needs to be four pages designed and developed these include homepage, archive movie section (including all categories), movie category (chosen), and Movie download/ view screen
- Design and develop the website based of current trends so the applications will fit well into current markets for TV streaming applications
- Maintain the a consistent design throughout both the mobile and TV application
Design Planning & Implementation
Hand Drawn Designs
The images below are the low fidelity layouts of each page required for this project on both a TV and mobile device.
Hand Drawn design for the homepage for TV
Hand drawn design for homepage on a mobile phone application
Hand drawn design on a TV for catgeories page
Hand drawn design for mobile app of categories page
Hand drawn design for TV for chosen categories page displaying the users results
Hand drawn design of the results of the selected category by user
Hand drawn design of the video player page on TV
Hand drawn design of video player page on mobile app
Low Fidelity Designs are sketches of your ideas, the goal is to generate various ideas that ‘ultimately sets the groundwork for the next phase, which is creating wire frames’ (Pacheco 2014). In most cases a lot of people over look the importance of low fidelity designing and rather skip to actual prototyping however low fidelity designs prove to have a lot of importance as they are the first and main process in which client feedback is received, and (Doleatto 2014) believes that ‘low fidelity is the way to go’ and that she ‘can get better feedback that is more relevant’ from sketches.
Medium Fidelity Wire frames
Categories Page (TV)
Film Results Page (TV)
Player Page (TV)
Developing medium fidelity designs ‘gives us the ability to create pixel-based layouts that resembles the product structure, but with limited functionality and little to no styling’ (Pacheco 2014). These medium fidelity designs helped determine with elements of each page were necessary and which were causing constraints that could possibly effect a users experience.
High Fidelity Designs
High fidelity designs ‘cover not only the user interface (UI) of the product in terms of visuals and aesthetics, but also the user experience (UX)’ (Mobgen 2016). The main purpose of developing interactive prototypes/high fidelity designs is that they are important to the usability testing of the product, they also provide a clearer understanding of project management as the developers are able to get estimates of how much time is roughly needed to develop the product. The high fidelity designs of the moving image archive website can be seen above and the application used to design these was Marvel app
The links below will direct you to the clickable prototype developed for the moving image archive section of archive.org
Mobile Application : https://marvelapp.com/5efj4ge
TV application: https://marvelapp.com/5efj4ge
Evidence of experimentation of clickable prototyping tools
The screenshot above shows the inserting image feature of Marvel in which the logo application is inserted and the resized and located to the correct spot for the TV application.
The two screenshots above show experimentation with specific tools in this case inserting a play icon for the video player as well as a clickable button which allows the user to possibly play or download the chosen film.
The screenshot above is evidence that it works on a mobile application, the screenshot shows my work being displayed in the marvel app and if the play button is selected you can begin using the clickable prototype.
The aim of this project was too carry out extensive research on the design and functionality of online TV player apps then using the knowledge gained from the research analyse the moving image archive section of archive.org and appraise the structure, content and functionality of navigation system. The whole process of this assignment needed to flow smoothly and ensure that everything is complete to help produce a professional product at the end. To achieve this the waterfall method was applied to ensure everything was complete and up to standard. The waterfall method allowed me to finish each section and then gain feedback on the work I produced and this was for all of the research, design and developing the prototype.
The research section was a huge factor in the final outcome as I was able to enhance my knowledge of online media players and this allowed me to identify the flaws in the design and functionality of the moving image archive pages. This project was very beneficial as new skills were learnt on new pieces of software this included Marvel App which turns sketches, mock ups and design into web, iPhone, and Android app prototypes.
If the opportunity was to arise to do this project again more time would be put into adding extra features into the final prototype to make it look even more professional like its fellow competitors.