Interactive Design — Corresponding Smart TV and Mobile Movie Player App
Introduction
In this post, I will look into and analyse the design of mobile and smart TV movie player/streaming apps and include the documentation of the production of my own corresponding, fully clickable prototypes of a mobile and TV movie streaming app based on the research carried out. Within the research and analysis, I will look into things like what makes a movie player app successful, how I will design an interface that will enhance a user’s experience, also the user’s profiles, goals, frustrations and solutions and what approach should be taken when creating the prototypes based on current practices along with looking at the different tools, frameworks and platforms that are available to do so.
Different movie apps that are currently on the market will be studied to gain this research along with an analysis on public domain/copyright free websites and libraries to get an idea of their structure, content presentation and the navigation functionality. I will also be researching standard design guidelines for different devices and operating systems so that I know exactly how to design for the platforms that the TV and mobile app will be intended for. The last thing will be to look at which are the best ways to receive feedback throughout the design and production of my prototypes so that I can keep the designs up to standard and good quality and to know that I am staying within the specification and user requirements.
The design process will consist of some first ideas/low fidelity wireframes for each screen for both the TV and mobile app and then feedback will be gained on these designs. This is so that they can be improved and made more detailed which leads to them becoming medium fidelity wireframes which are then ready to be transferred and made into actual designs/prototypes. I will then document some steps carried out throughout designing the prototypes and display the final outputs. A user style guide will also be created to go hand in hand with the designs so that an understanding of all the features and functions can be gathered so that users know exactly how to use and navigate around the final high fidelity, interactive prototypes/concepts that will be presented.
Second to last, I will document some user testing and feedback where I will ask a couple of volunteers to sit down and test my prototypes on real devices and give their personal opinion on them and any feedback they wish to give me including positives and things they liked and also aspects they might not have liked that will be received as constructive criticism and used to make improvements to in the future. Finally, I will conclude the post reflecting on the whole project from the research to the design process to the user testing giving my opinion on it all and how I felt it went and what I would do next time if were to do a project like this again.
Research & Analysis
Current top competing movie player apps on the market
Netflix
What is Netflix?
Netflix, According to TheDailydot, is the original major streaming option for home television and movies which started out as a subscription-based DVD service that posted DVDs to your home, going back almost 20 years ago. It wasn’t until 2007 where Netflix debuted their streaming service which allows users to view thousands of ad-free TV shows and films on-demand. Because of competitors bidding for exclusive rights on content Netflix have started working with film producers and TV Productions to create their own exclusive content which keeps them ahead in the battle. Netflix can be viewed across many platforms from online on a PC, to Smart TVs, consoles, mobiles and tablets.
App icon
Netflix’s App icon is simple and easy to notice as it has a black background and the red ’N’ from their original logo. The way the ’N’ is designed and placed on the black background gives it a 3D looking effect which makes it really stand out and be visible.
Mobile App
The mobile app sticks with the colour pattern of the app icon and also has a black background and red logo allowing that logo to really stand out so users are always aware of it. Once the ‘watcher’ has been chosen it leads to the home page which consists of things like previews of new additions to Netflix, ‘My List’ which users can add different shows/films to be able to watch next and ‘top picks for you’ which are suggestions made by Netflix based on what the user has previously watched. The user can also browse easily through different categories or use the search bar to find exactly what they’re looking for. The content/selection page displays information about the selected film/show and will give a brief description of what it is about and will allow the user to add it to their list, rate it or share it and will also display next episodes or any related films. Once the program is played, the screen rotates horizontally and goes full screen to maximize the viewing. The mobile app features a hamburger navigation icon in the top left corner to allow users to navigate around the app with ease and in the top right is where the search icon is located.
Smart TV App
The smart TV app, once logged in as the chosen ‘watcher’ shows a screen with some navigation options like search and settings but that’s about it for a navigation menu throughout the app. The user will then enter the main part of the app where all the content/shows/films are displayed. The user can navigate up and down through the genre, suggested top picks or previously watched programmes and also from left to right through the different options under each section. The user can also access the search from here too to select the exact thing to watch. If the user is hovered over an option the information and description will be displayed in the top left corner along with a large preview image in the top right. The best feature of this app is that if a user stays hovered over an option for longer than a few seconds then a short preview trailer will start to play which isn’t just the original trailer it is a series of small clips picked out by Netflix to some up what it is about.
Amazon Prime video
What is amazon prime video?
Amazon prime video usually comes as part of the ‘Prime’ packaged that amazon offers which includes the access to streaming videos, music, e-books, free shipping on amazon items and variety of other services or Amazon prime video can be subscribed to separately for a monthly much smaller monthly fee. Amazon prime video like its competitors Netflix and Hulu offers unlimited streaming of thousands TV shows, box sets and films. Like Netflix it also hosts a number of exclusive series however unlike the other two amazon allows á la carte rentals and content purchases according to TomsGuide.
App Icon
This app icon is again simple and effective but it has more lettering on than the Netflix icon and this is because it needs to be clear on exactly which services it is for as Amazon offer a variety of different services and not just video streaming. The logo consists of 3 colours blue, black and white as the background and this makes the word ‘prime’ and the arrow/swoosh stand out. The arrow/swoosh is from the original amazon logo which usually stretches from the ‘a’ to the ‘z’ to connect the two letters to represent it sells everything from A to Z, it also represents the smile that customers would experience from using the amazon services says AOL.
Mobile App
The Prime video mobile app is in some ways similar to Netflix’s and an example of this would be the layout of the home page as it has a large advertisement at the top, a search icon in the top right corner and then has film/TV show options displayed on the rest of the page underneath different headings/categories. However, prime video has a very handy and easy to use, 5 icon navigation bar fixed to the bottom of the screen which allow the user to navigate to the main pages with just one touch. It also includes a three link navigation menu at the top of the page so the user can switch between the three main sections which are the home, TV shows and Movies. The content/selection page has a large preview image background at the top and displays some but minimal details however it gives the user the option to view more. It features an ‘add to watch list’ button and also lists other episodes or relevant films.
Smart TV App
The Smart TV app has a really simple feel to it and looks very smooth and easy to use. It has four large and visible navigation links located at the top of the screen for quick use to the four main sections keeping the pages minimal and not confusing for the user when roaming the app. Also a quit, help and search button are included at the bottom of the page for the user if they are deemed necessary. This design is very effective.
Current standard design guidelines
IOS
The AppleDevelopers state that their main design principles are aesthetic integrity, consistency, direct manipulation, feedback, metaphors and user control.
Aesthetic integrity is how well an app’s appearance and behaviour work with its function. An example of this would be an app that helps users perform serious and real tasks by keeping them focused either by using graphics, controls or behaviour predictions.
Consistency within an app will keep things familiar for the user and consist of features and behaviours that people would expect and are used too. This will include things like well-known icons, easy text styles and standard terminology.
Direct manipulation is added to an app with features that make the user rotate or use gestures to effect on screen content and by doing so allows people to become more engaged and have a better understanding of the content as they can see immediate, visible results of their actions.
Feedback is when a feature or element shows a response and acknowledgement of a user’s action which informs them that the feature/element is working properly and clarifies the results of their actions.
When an apps objects and actions are metaphors it allows users to learn more quickly as they can relate to familiar experiences. This involves dragging/sliding content, toggling switches, sliders, scrolling through picker values and flicking through pages like a book.
An app with user control will suggest a course of actions and warn users about dangerous decisions but should take over and control the decision making. This will make people think and feel like they are the ones in control of the app and this is done by again keeping it all familiar and making it easy for them to cancel an action half way through and also confirming any constructive actions.Current standard design guidelines
Android
The AndroidDevelopers have split their design principles up into six sections which are layout, style animation, components, patterns and usability.
The layout should be predictable, consistent and responsive. This is all achieved with consistent UI regions, and special organisation, consistent grid, key lines and padding and allowing the layout to adapt and react to input from the user, device and screen elements.
For the design style it comes down to the app being in hierarchical order, legible and expressive. Colour is used to give elements a hierarchy as it indicates which are interactive, which relate to other elements and their level of prominence. The element that stand out the most should be the most important ones. Text and other elements like icons should meet the legibility standards when appearing on coloured backgrounds keeping it the same across all devices. Brand colours should also be shown at memorable moments to boost the brand and keep the user aware of it. The design principles for components are that they should be ergonomic, consistent and related. An example of an app being ergonomic would be if it had a bottom navigation menu as it is very easy to reach and use on a hand-held device. The bottom navigation will appear at the bottom of every screen therefore keeping the consistency throughout. Also the icons in the navigation bar should be related to the page topic and be of equal importance.
To comply with the usability design principles the app must be clear, robust and specific. The app should be simplified with sufficient contrast and size, key information that is noticeable at a glance and all elements being clearly visible. To be robust it should give the user confidence in knowing where they are in the app by using appropriate navigation and page headers/titles. This also applies for the rest of the content too.
Samsung
When designing a TV app different considerations need to be made as different principles apply. This includes things like traditionally people lean back and relax whilst watching TV so they are not used to complex screens and controls. Although TV screens are a lot bigger than mobiles they tend to be viewed from further away, an average distance being three metres or ten feet. Because of this legibility must be a top consideration for the distance, and text size and other elements must be adjusted appropriately too.
A standard remote control is used across nearly every television so navigation around the app must only be made with four directional navigation, focus selection, return and exit. Feedback must instant and distinct because the application will be used at a distance so complex and detailed buttons, elements and navigation should be avoided altogether.
The design principles are similar to those of the mobile apps as TV apps also have to be simplistic, they need to have clarity, include user control, consistency, feedback and also have aesthetic considerations.
For a better user experience a couple of things can be looked at further like the navigation and screen transitions. To work well and smoothly the navigation must be predictable for the user and very simple to figure out. This can be done by using the grid layout implemented with the four directional control and it will greatly minimize confusion for the user. Screen transitions should only be included when absolutely necessary because frequent transitions will make the user feel lost and it will seem difficult for them to navigate.
Current tools, frameworks and platforms for clickable rapid prototypes
Sketch
The Sketch app, according to Creativelive is a professional design tool for Mac OS that uses a full vector based workflow and is for all kinds of creators. This can be whether you are a product design, UX/UI designer, web designer or a total beginner in any design area.
Sketch is very easy and simple to use and you will pick up the basics in no time at all. As a general layout and vector drawing tool it is very powerful and effective with many great features and some of them being that sharing and exporting multiple resolution assets is very simple, it also has amazing integration with other apps and plugins too. Another great aspect of sketch as said again by Prototypr is its ‘craft’ Invision plugin which is amazing as it allows you to auto-sync art boards between the two apps. This save a great deal of time. You can also create style sheets as well as import images directly from iStock and Getty images all with one click.
Invision
Sitepoint explains that Invision is currently the largest and most successful collaboration app on the market and apparently is to the ‘go to’ tool for top designers. It features some great tools like dynamic prototyping, whiteboard collaboration, comments on projects, device preview, user testing, version control and design handoff and video calling. Invision has been made even greater now that it has Photoshop and sketch integration with the new craft plugin which creates a very powerful and effective all-in-one design suite.
Methods
User feedback and testing strategies
How will feedback be received on the designs?
To get feedback on the designs I have created I will give two volunteers a questionnaire that I have made which asks them questions relating to what they like about the designs and what they don’t like and that could be improved or changed. This will allow for
How will the prototype be tested once its created?
The prototypes will be tested on their appropriate devices so the mobile app will of course be tested on a mobile phone and the Smart TV App will hopefully be tested on a television, if this is not for some reason can’t be done then a similar device will be used to get a closer result which will be better than none. Testing on actual devices with give a real-world feel to the prototypes and allow them to be tested properly and to the best of their potential and enable the functionality to run as smoothly as possible.
How will feedback be received on the final prototypes?
Like the design phase, to receive feedback on the final prototypes I will again ask two volunteers to fill out another questionnaire which will include questions more specific to the design elements and features so that I can get exact results on whether or not every aspect of the prototypes work and if so how well the work. Also it will include questions to get a comparison to other movie apps in the market and whether or not it would be something that the volunteers would use if these apps were created.
Specification
- Required outputs
1. Log in/sign in page
2. Home page
3. Categories
4. Film viewing/details page
5. Search bar/page
6. Profile/log out
- Design style
1. Grid style
- Colour scheme
1. Bright colours for important elements so they stand out
- Font usage
1. Large and bold
2. Clear, easy to read
- User interface features/functions
1. Bottom navigation
2. Navigation icons
3. Search icon
4. Change content like settings with sliders or switches
5. Page transitions
- Content needs
1. Film titles
2. Film dates
3. Description of films
4. Any other information about the films
5. Film posters
6. Film backgrounds
7. Show where film would play from
8. Page titles
9. Recommendations
Design Process
Medium fidelity wireframes
Mobile App
Smart TV App
Link to mobile prototype
Link to Smart TV App prototype (please zoom out in the browser to allow it to fit the screen)
Final Output screens
Mobile App
Smart TV App
App Icon
Style Guides
Mobile App
Smart TV App
Testing
Mobile App (Invision app screenshots)
Testing the mobile app was done using the downloadable Invision app which allowed the prototype to be tested like a real app on a real device. The only downside to this was that my app was designed for an apple iPhone X screen whereas it was tested on an iPhone 6 screen so it didn’t quite fit the screen and meant that scrolling was needed to to see the rest of the page. However this did not effect the functionality in any way so I was able to test the links and features successfully. When testing the app it was clear that it was easy to use and navigate around and had very smooth and interesting transitions between pages which gave good effect.
Smart TV App (Invision online via xbox one console)
Testing for the smart TV App was done on a television however it was done through Invision online in internet explorer on an xbox one console which wasn’t ideal as the resolution messed up meaning it had to be zoomed out to fit it all the content on the page. Despite this though I was again able to test it successfully, with a realistic feel to it on an actual TV testing the links and pages which all worked correctly. The app was also very easy to navigate around and was simple, also the text through was readable from a distance.
Conclusion
To conclude overall I felt this project has been a success as I have managed to design and create a fully clickable prototype for both mobile and Smart TV that meet the design specification and needs and I have learnt a lot in the process. I was quite impressed with the way the app worked as all the links went to the right pages and the mobile one transitioned well between each one. All the page elements were clear and visible with some colour hierarchy making the more important ones stand out more than the others. All the text is visible and easily readable too which is another positive as it allows the user to fully understand all of the information and content that is display. I am also quite impressed with how the extra functionality in the profile and settings pages turned out. These were the password change, log out and delete account pop up boxes and the changing of the settings as well which made the app feel a lot more realistic and have real life functions which gives the user more control and also will give a user/client a much better understanding of how the app might work if it was to be put into production.
Although I have created working prototypes there are a lot of things that I think could be improved and they are that more pages and content could of been created and I could of had a lot more functionality added to it. The inputs were clickable but it would have been much better if a user could actually type into them and have the keyboard work to be able to do this. Another thing would be to actually be able to have the films play so users would be able to know what the video playback is like and what it would actually be like to watch a film through the app. These are all things that can be taken into consideration for the future.
