Movie Player App
DES500 AE1 (100%) – 4000 words
Technology is growing at a rapid pace. Over the past 20 years scientists have worked non-stop to contribute to the “Smart Revolution”. It is thought that by 2020 there will be an estimated 50–70 billion connects devices around the world.
Smart TVs allow users to access internet based content directly to your big screen. The implementation of this has seen the rise in streaming services for music and movies such as BBC iPlayer, Netflix and YouTube.
According to a recent survey carried out by Mortar London more than £303 million is spent every month on video streaming services by people in Britain. This means an average of £17 a month is spent on services like Netflix, Amazon Prime and NowTV.
Because of these facts and figures I’m going to design a TV and mobile app to provide a platform for watching copyright free movies that are in the public domain.
Research, Analysis & Considerations
These are some of the most well known media players used at the moment, some request a subscription fee to watch content and some don’t.
* BBC iPlayer
* Netflix
* YouTube
* NowTV
However, for my movie player app I will be using films that are in the public domain much like the ones that can be found on the Internet Archive site along with the Public Domain site. These sites use copyright free content (Creative Commons CC0).
Feedback throughout the design & production process
I will use survey monkey for the initial research stage as I will some basic guidelines on what users perceive a successful movie player app.
I will test my prototypes on the correct devices and make relevant changes to the design before creating the finished prototype for the movie player application.
This process is based on the Agile Lifecycle as it is a systematic and reliable workflow for both the designer/developer and the clients/users.
Initial Research
What makes a successful movie player App?
I decided to carry out a survey on 29 people from the age of 18 to 74-year olds. This was done as initial research to see what they think makes a successful movie player app. See Q1 for specific age groups.
As you can see there is a wide age range of people that use movie players. #
Below is the response that I received when they were asked which services they preferred using the most. See Q2 for popular movie players.
It is clear from Q3 that most users like to watch content on their portable devices including mobile phones, tablets and laptops. The use of Smart TVs are becoming quite popular.
I then asked the users what is the most important aspect of a movie player app in which makes it successful. See results in Q4 bar chart.
Overall, I have found the responses to my survey very informative and have decided to analyse some of the features and functions of the three most ‘popular services including YouTube, BBC iPlayer and Netflix. It is clear that after content, the usability of the apps are very important to the users.
Therefore, I will carry out user testing at the end of the design process and make relevant changes until I have refined my app as much as possible to ensure suitable usability.
Physical Analysis
Here are a few screencasts and screenshots of me using the three most popular apps that are currently available.
Personally, I found the BBC iPlayer and Netflix app nicer to use visually because of the darker UI. An upside is that all three apps are available on most devices and use a flat design with a ‘card’ like layout to display content which enhances a contemporary user experience. This enables the user to travel smoothly throughout the apps whether the users are interacting with a touch screen, TV and game console remotes, PC mice or voice control.
The image above shows how Netflix incorporates its content with its branding to create a recognisable design that is also fully responsive.
The “card” style design is used for Netflix, BBC iPlayer and YouTube. Often the “cards” are designed using the “Stack” approach. This involves 3 layers being put on top of each other to create the overall design of the “card”. An image layer, a brand colour layer and a text layer.
The “card” design shown above allows the user to view the content description without having to navigate to another page within the application.
Here are three videos demonstrating the basic navigation around the Netflix, BBC iPlayer and YouTube websites.
All three of these apps are available on Mobile along with several other devices. See screenshots below for mobile layouts.
These screenshots above show all three apps being displayed on an iPhone 7 through the Safari web browser.
All three applications have an option for casting to a bigger device. A good example of this is Apple’s airplay feature that is available on iPhones, iPads and Mac computers. It also allows you to cast to an AppleTV box.
Critique of current CC0 sites
There are two copyright sites that I am going to use for content — Public Domain Movies and Archive Movies.
As these sites are free to use, the UI (user interface) aren’t very contemporary. They appear very bulky and plain as well as static. Here are some screenshots of both websites.
Archive Movies
Public Domain Movies
As you can see from the screenshots above, both sites are very plain and quite boring to look at. This is mostly because they are free to use therefore don’t receive funding that can be put into the UX/UI aspects of the websites. When I design my app, I will focus on the user interface as well as accessibility. This will be done by looking into current trends.
Tools, frameworks & platforms for creating clickable prototypes
There are lots of tools in which allow you to design and develop clickable prototypes. However, they all have different features and functions. This will have a big impact on the software I will use for creating my movie app prototype. Here are some of the software options that I have had experience with. Please click on each link for more information.
Personally, I prefer to use Sketch to produce wireframes and prototypes as I have experience with it and find it very time efficient and simple to use as it has such a wide range of plugins for the software. Another advantage of using Sketch is that it has a brand new prototyping feature built in to it. However, as it is a new feature, it has limited functions compared to tools like Hype 3.
Since starting this blog I have received early access to InVision Studio and by playing around and following tutorials, I have to say that this piece of software could become the next trend within the UX/UI industry. This is because it offers almost all the features a designer/developer could need to produce clickable prototypes.
Design research & rationale
From my research above and my personal preference, I have decided to design for AppleTV and iPhone X. I am doing this as I am an avid Apple product user and have been for many years.
Software: I feel that I should create my prototypes using Sketch for the design elements and then push it up to InVision where I will implement the hotspots/links. I will also use open source resources for things like icons and menus.
Types of Prototypes: From my physical research it is clear that most media players have a smart TV app as well as a mobile or tablet companion app. With this in mind I have decided to create a mobile app to go with my TV app.
Colour: Apple states in their interface guidelines that I should…
“Be aware of colour-blindness. Many colour-blind people, for example, find it difficult to distinguish red from green (and either colour from grey), or blue from orange. Avoid using these colour combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, you could use a red square and a green circle. Some image-editing software includes tools that can help you proof for colour-blindness.” (Apple Developer)
I found out that there are many ways in which colour should be used together. Here are some of the most popular combinations I found:
- Monochromatic: this means that one colour is used but in many different shades.
- Analogous: This is when colours that are next to each other on the colour wheel are used together.
- Complementary: This is the mix of colours that are shown on the opposite sides of the colour wheel.
I chose to use a complimentary colour scheme for my Mix-up Movies app as I felt that it would enable users to see the content easier.
I also took into consideration the psychological influence that certain colours have on the users emotions and perception of websites and apps.
I chose to use the following colours because of the emotions they portray -
- Purple (#3E0066) — mystery, magic, wealth & royalty
- Orange (#FF4700) — excitement, energy & warmth
- Grey (#807985 & #BEBEBE) — timeless & natural
- White (#FFFFFF) — clarity, wholeness, purity & innocence
- Black (#000000) — traditional, modern, tragic, death & mystery
Typography: Most SMART TVs have their own default fonts that have been tested out to ensure it is legible from 10 feet away. However, it is recommended that you use the the system default type. I will decide on the type for my apps during the design process and test it out on a TV to check that it is clear to read. Apples system font is San Francisco Pro Text and below is a table showing how they use this font for different elements of the app.
Control Types for TV: There are many different remotes for different platforms. I will focus on Apple OS meaning I can use my knowledge from personal experience to create the best UX possible. Below is a screenshot of the Apple remote and Samsung remotes for reference of how they are different.
Viewing distance: When designing for TV you must test the clarity of the font by viewing the app from 10 feet away. Because of this it is important to keep the design simple and clean. This means when design the TV app the amount of information on the screen should be minimal much like the content would be on a mobile app rather than on a desktop site.
Accessibility: As I have decided that I’m going to focus on designing for Apple products I will follow their accessibility guidelines. These include features for the visually impaired, hearing loss and physical/motor skill difficulties. Some of the features I will include are speech control with Siri, Closed Captions (subtitles) on movie content and switch control on navigation.
I found a website that allows the hex values to be entered for the text & background colours along with the text size and weight, then it uses the WCAG 2.0 guidelines for contrast accessibility to calculate the accessibility of the colours on your website. Here are some of the results I received on my colour scheme -
As you can see some of my colour variations passed the AAA ratio of 4.5, however, some didn’t and if I was going to distribute this app I would iterate through the methodology of the design process again to implement some improvements for the accessibility of Mix-up Movies.
Colour Information
There are a lot of reasons why colour is so important within the user interface and user experience industry. For example research provided by ColorCom states -
There are many colour model that can be used, for example the additive model, also known as the addictive colour model. This is well known as being the RGB colour system. This consists of the three primary colours — red, green & blue. These three colours are then mixed to create another well-known colour model known as the CMYK model, uncommonly known as the subtractive colour model. This consists of four secondary colours — cyan, magenta, yellow & black.
The additive system is mainly used for digital design. This will allow you to create a wide range of colour schemes on screen output.
Planning
Below is a Gantt Chart that shows how I plan using my time to complete this project successfully.
I have drawn a flow chart to illustrate the flow that my prototype will use. I am going to try and keep the flow the same across the two platforms. See diagram below.
I have also produced high fidelity wireframes. By doing this I have been able to plan how I am going to layout the content on the clickable prototype. (You may need to zoom in to see the details).
Documentation of design process for final prototypes
In this section of this blog I will demonstrate the process in which I produced my clickable prototypes. I chose to use Sketch for the design aspect as I already class myself as a confident user of this software. I will layout this documentation in numbered and bullet format so that the task order is clear.
1) Firstly, I created an art-board for AppleTV (1920px by 1080px) and the placed guides on the art-board to mark the “safe area”. This is thought to ideally be set to at least 5% margin
2) With this in mind I chose to set the margins to 60px for the top and bottom, then 90px for the left and right margins. By ensuring all of my User Interface Elements are placed within these guides, no content will be cut off when being displayed on an AppleTV.
3) I then did the same with the art-boards for the iPhone X (375px by 812px) and placed the guides at 60px for top and bottom, then 90px for the left and right margins.
4) To ensure the restricted areas were not touched by any UI content I made those areas red.
5) Once I had the art-boards created I went on to produce high fidelity wireframes for both the TV and mobile apps. By doing this I was able to gauge how all content would fit onto each screen.
6) Next, I copied all 24 of the art-boards to another page without the contents so that I didn’t have to re-implement the guides & margins.
7) I then went onto Adobe Color CC to experiment with different possible colour schemes for my app. I took into account my research and decided that my UI should be dark — much like Netflix, BBC iPlayer and AppleTV because it improves the user experience whilst watching content.
8) After carrying out research on colours . I decided on the colour palette shown below. More information like hex values can be found within the UI style guide further on in this blog.
9) Next, I added a gradient background colour to all of the art-boards. I felt like this mix of colour gave a modern feel to my screens.
10) Then my next task was to design a logo and come up with a name for my service. I decided on “Mix-up Movies pretty much straight away. I then started looking at icons that I could use from Flaticon.
11) I found two icons that appeared plain but bold. Therefore, I downloaded them as PNG (Portable Network Graphics) and started arranging them in different positions. When doing this I had to take into consideration the adaptability of the logo. Meaning, would it still look good and be recognisable when scaled down to fit onto the mobile app. By using bright colours against a dark background, I ensured the clarity and recognisability of the logo.
12) I then went onto Archive Movies which provide free access to copyright free content. I looked specifically at movies that had bold posters to go with the boldness of the Mix-up Movies brand.
13) If the website didn’t have posters for the chosen movies I searched Google for CC0 posters and failing that I made posters from screen captures of the movie and then added suitable text to create my own movie posters.
14) I then created all of my user interface assets in SketchApp and converted them into symbols which allows me to reuse them throughout the prototype without having to recreate them every time.
15) Before I started placing content onto the art-boards I implemented a grid system. I tried to follow the human interface guidelines that can be found on Apples developer website.
16) I decided to implement a 7-column grid, much like the one on Apple developer.
17) I then went on to follow Apples guidelines on designing for iPhone X. As this device has rounded corners on the screen, it was crucial that the margins were taken into consideration.
18) I also created styled fonts for all the different text elements needed in the clickable prototype. This ensures each piece of text is formatted correctly.
19) When creating the profile image for the account page I used the masking tool to create the circular shape.
20) Finally, once I had sorted out the UI elements and the grid layouts for both the AppleTV and iPhone X, I started placing all of my content onto the art-boards. When placing elements on the iPhone X art-boards I had to scale everything down by a large percentage and also rearrange a number of elements as the space on a mobile is compact. This was to be expected as this was proven when I created the wireframes.
21) Please see the final prototypes for the final layouts.
22) Whilst making the prototype clickable I came across a few issues, for example I had forgotten to implement content (buttons) to take the user to the ‘recently added’ page and the ‘logout’ page. I quickly corrected this issue by adding the UI elements and pushing the designs to InVision. However, before I did this I tested out the prototype tool in SketchApp. Unfortunately it appeared too static for what I wanted.
23) Thereafter, I linked my screens together in InVision for both the TV app and the mobile app. They looked great with the animations and transitions.
24) But then I tried to embed the final prototypes into this blog and it turns out Medium doesn’t support embeds from InVision.
25) I then carried out research to find out what outputs can be used in my blog. I finally chose MarvelApp for developing and exporting my prototypes with. MarvelApp successfully embeds into Medium and can be interacted with through Medium.
Evidence of feedback
Embedded/linked Clickable Prototypes -
Please note — to view movie information page, trailer and full movie always choose The Jungle Book as this is the only movie linked at the moment. Also if I was to develop this into a fully functioning app, the TV app would be navigational using the standard buttons on the AppleTV remote or voice control. Switch control would also be compatible with the app on both devices for accessibility.
Conclusion
I gathered feedback from three users who view the app on both platforms… here’s what they had to say -
- User 1 (49 year old female): If this was a genuine movie app I would definitely sign up to it as it is very easy to navigate and it is free. It stands out when you open it and is bright and vibrant making it recognisable to the eye.
- User 2 (68 year old male): As a user that normally requires glasses for reading and watching TV I found both the TV and mobile app very easy to use. The font sizes were clear to read from the sofa. However, I think labels should be provided as well as icons for users that aren’t tech savvy.
- User 3 (19 year old female): The app is too dark for my liking and looks too much like the Apple store. Saying that, I really like the logo because it is bright and different than anything else in the TV app industry. Oh, and the movies are all old which is boring.
Reflecting on the feedback above, I feel that this project went pretty well. The app was defiantly user friendly from 10ft away on a TV & the app looked professional on an iPhone X.
In the future, if I were to design a similar app I would carry out more surveys to find out what the users think should be a feature or function implemented in this type of app. I would also gather feedback on the wireframes to ensure the user journey is what they expect and provides a smooth & positive user experience.
Well, that wraps up this post… thanks for reading — any questions, comments or general feedback is always appreciated.
