Free Flicks. Smart TV & App UI Design Concept for Public Domain Movies.
People love movies, and people also love free stuff. So it makes sense that there are multiple movie sites which allow users to watch movies for free that are in the public domain. However, after a quick browse of these sites it’s clear that the majority, if not all, are outdated regarding their structure, the way content is presented and the practicality of their navigation system.
On the other hand, movie sites such as Netflix, Hulu and Amazon Prime Video place user interface (UI) and user experience (UX) design at the forefront of their design process which in turn leads to an easy to use, user friendly site.
To combat the problem of a lack of contemporary public domain movie sites, I will be creating an interactive movie player interface for both a smart TV and corresponding tablet app for movies in the public domain. The public domain movie sites that are available will be analysed and current design approaches, principles and guidelines will be researched to ensure my final prototypes are modern and user-centred.
The entire process will be documented from creating wireframes, flow charts, a style guide, producing the final high fidelity clickable prototypes and collecting user feedback.
What do public domain movie sites currently offer?
Public Domain Movies is one of the first sites I came across during my research.
Structure. Public Domain Movies offer a grid-like structure on their homepage. Each row consists of 3 movies with an advertisement separating each row. Despite the advertisements, the layout is very organised. Content is sufficiently spaced with margins, creating a less cluttered interface. Once clicking on a genre in the navigation bar, the film results are displayed in list form. This, again, makes the page look uncluttered and organised. Once a film has been chosen, the video player is displayed at the top centre of the page. Following this, the page splits into left and right columns — primarily advertisements on the left and film information on the right.
Presentation of content. The homepage consists of image thumbnails, with the title and synopsis of the film appearing once the user hovers over them. The thumbnails do not appear to fit the grid system properly, with areas being cut off and some not even containing a title in the image. Both of these issues means the user cannot see what films are being presented to them without hovering over each one. The list of films presented, once choosing a genre, each contain an image thumbnail. Not all of these thumbnails are the same size making the page look less consistent. However, all font sizes and colours have been maintained throughout. The individual movie player page offers a link to download the movie, however this button does not stand out from the rest of the content. There is plenty of information provided about the film regarding the plot, cast, production and adaptations.
Navigation system. There is a very simple navigation bar which contains a link to the homepage, followed by links to 5 movie genres. This navigation bar is easily visible on every page, making it easy for users to navigate around the site.
Public Domain Flix is another site which offers a collection of movies in the public domain.
Structure. Public Domain Flix also offer a grid structure on the homepage, with 3 movie poster thumbnails in each row. However, unlike Public Domain Movies, they also show a large thumbnail at the top of the homepage which takes up the majority of the screen space. After choosing a genre, movie thumbnails are displayed in rows of 4. This grid structure keeps content looking organised and clean. The individual movie page includes the title and date of the movie, a large movie player and a short description. The entire right hand side of the page includes a column of adverts and films that are “up next”. This has left a lot of space on the left hand side of the screen which makes the page appear empty.
Presentation of content. The content is presented consistently with the same fonts, colours and size of the movie thumbnails used throughout the site. Keeping the movie thumbnail elements the same size makes the site appear a lot cleaner than Public Domain Movies, which had thumbnails of all different sizes.
A modern sans-serif font has been used throughout the site which is visually appealing and, most importantly, makes all text easy to read. The site uses a minimal colour palette of black, white, grey and blue. Blue has been used for headings and the occasional link, making them stand out.
The individual movie page includes the number of views, a description, cast, public domain status and category. Users can also like, dislike, share, report the film and leave comments — all features that are not offered by Public Domain Movies. These extra social features are more likely to keep users engaged with the site.
Navigation system. The navigation on Public Domain Flix is very condensed and only includes 3 links; videos, articles and contact me. When the “videos” link is hovered over, a drop down list is displayed. This includes a mixture of movie genres, movies from different eras, TV shows, new movies, popular movies, and also a link to browse categories. The navigation appears simple at first, however the way information is displayed in the drop down list doesn’t make it easy for users to find what they’re looking for due to such a mixture of categories.
So, what makes a good user interface?
Sites like Netflix, Hulu and Amazon Prime all have something in common — an intuitive user interface. To ensure my TV player interface and corresponding tablet app are as user friendly as possible, it’s important to analyse the ones that do it well. According to Statista, Netflix had over 182 million subscribers worldwide in the first quarter of 2020. They are clearly doing something right, therefore, I will evaluate Netflix to determine what a good user interface looks like.
Netflix uses a grid like structure on all its pages. Each category has its own row which can be navigated through. Each show/movie has a cover of the same width and height, making it visually appealling.
The presentation of content is useful to users. The home tab shows users what they are currently watching and also various other popular shows. Each show/movie cover is presented with a high quality image. When clicking on a show, Netflix displays some information including a short synopsis, cast details and the year it was created. Clicking on a show also gives users the option to add it to “My List”, which makes it really easy for users to keep shows in one place.
The navigation is simple and intuitive. There are only 6 options in the navigation which is situated on the left hand side — Search, Home, Latest, TV Programmes, Films and My List. Before scrolling to the left, the navigation is simply shown using icons. These icons are universally recognised e.g. a magnifying glass for Search and a house for Home. After scrolling to the left, which causes the navigation to slide out, each tab is shown using icons and the tab name.
Current Design Approaches & Guidelines
The Display
When designing for a Smart TV, it’s very important to take into account how information will be displayed on a screen. On all TVs, there is something called overscan that exists. This is where part of the TV picture is shown outside the screen boundary. To combat this, it is recommended to include a margin or a safe area. Apple recommend designing for a 1920 x 1080 pixel screen with a top and bottom margin of 60 pixels and 90 pixels on each side.
Navigation
The majority of Smart TVs are controlled with a remote, using a D-pad. This only allows users to navigate up, down, left or right. Due to this, most Smart TV interfaces follow a grid structure to ensure it’s quick and easy for users to navigate around this way. Apple also emphasise the use of consistent spacing between elements. Android go into detail regarding focused elements. They explain that there should always be an object in focus when navigating around the screen to ensure users know where they currently are. When an element is in focus it should be easy to recognise by using scale, shadow, brightness or opacity.
Many Smart TVs also offer voice input. Android suggest that voice input should be the default search method because it is the easiest way for a user to input queries. The Apple TV uses the Siri Remote which actually includes a voice control button to make this even easier for users.
Typography
Typography is very important when designing for TV. It is critical that users are able to read an interface when they are sat at a considerable distance away from the televison. A common recommendation is to design the TV interface to ensure it is legible from 10 feet away. Apple have a chart which defines recommended sizes for titles, headlines, subtitles and captions.
Android also have a set of typography guidelines for their Smart TVs, however these appear to be much smaller than the recommendations set out by Apple.
Colour
When designing an interface for a Smart TV on a computer, there will be a variety of colours available. However, these colours don’t always translate properly to the TV screen. There are so many variances in colour depending on the TV manufacturer, brightness and/or display settings. Android recommend using colours from the 700–900 range of the colour palette which are much darker and easier on the eyes. It is often recommended to avoid using pure white as this is too bright for users.
Apple don’t recommend any specific colour choices, however they do stress the importance of contrast. Contrast is especially important in ensuring content is legible and also to make the interface accessible for colourblind users.
Prototyping
There are a variety of prototyping techniques available which enable us to test and further develop a concept. These range from wireframes, storyboards, role-playing and physical mock-ups to creating prototypes out of lego. Each technique serves a different purpose therefore the technique you decide to use depends on what you’d like to achieve from the prototype. When I create my Smart TV player interface and corresponding tablet app, I will be using user personas, wireframing and flow charts. Here’s why:
A user persona is a fictional person, often based on research, which represents a certain type of user that may use your product or service. They enable you to understand user goals and frustrations, and solutions to these frustrations which in turn helps you create a good user experience.
Wireframing is also referred to as low-fidelity prototyping or sketching. It lays out the framework, content and core functions of a design. It is a free, easy and quick technique which allows early insight into the design and any issues there may be with usability.
Flow charts describe the user flow. This is the steps a user takes to allow them to complete a goal or task. They are often based on user personas and enable you to determine how a particular user might navigate around your site or interface. This is particularly useful in ensuring user needs are met.
Although pen and paper is always an option, there are a variety of other tools available to carry out these techniques including Invision, Figma, Adobe XD, Sketch, Webflow and Justinmind. These tools will be especially helpful when it comes to creating the final high fidelity clickable prototype. For this project, I will be using Figma. For a long time the most popular design tool appeared to be Sketch. However, after a bit of research, it appears many people are switching over to Figma. Holly Sunderland explains how the prototyping options in Figma are what convinced her to switch over from Sketch.
Figma offers a variety of prototyping features that these other tools do not. These include the ability to place overlays, horizontal and vertical scrolling, click or hover triggers, interesting transitions and also the ability to duplicate files whilst keeping the same linked up transitions. On top of this, Figma is free! As I am looking to create a clickable prototype for my Smart TV player and app, it makes sense to use the prototyping tool with the best features to ensure I get the best results.
Summary.
When creating my Smart TV player interface I will be adhering to certain guidelines. These include;
- Design for a 1920 x 1080 pixel screen with a top and bottom margin of 60 pixels and a margin of 90 pixels on each side.
- Keep in mind that users can only navigate using a D-pad (up, down, left and right) so a grid structure should be used.
- Focused elements should be easy to recognise with the use of colour, scale, shadow, brightness or opacity.
- Voice input should be available as this is the easiest way for a user to input queries.
- Typography should be legible from 10 feet away.
- Avoid using pure white. Instead, use darker colours as these are easier on the eyes.
Guidelines For Creating a Tablet App
I decided to design my corresponding clickable concept app for the iPad Pro 11 inch, 2020. This iPad has been described as “the ultimate iPad” by Wired and “the best iPad you can buy right now” by Tech Radar.
Screen size
According to Apple, the 11" iPad Pro has portrait dimensions of 1668px by 2388px and landscape dimensions of 2388px by 1668px. I decided to design the landscape version of the app as according to a report by OnSwipe that details how users interact with their iPad, 59.8% of users prefer to use their iPad in landscape mode.
Margins & Corners
The iPad Pro 11" has a size class of “Regular” which means the default margins either side of the device are 26 pixels in width, spanning from the top to the bottom. Therefore, it’s important to ensure no important content spills out into these margins.
There is an additional margin that needs to be taken into account on the iPad due to the home indicator along the bottom of the screen (26 px) and the status bar along the top (32 px). Keeping all content within these margins will ensure you stay within the safe area.
In addition to margins, the newer versions of iPad have rounded corners therefore it’s important not to place any important content close to these.
Touch Targets
Unlike the use of a remote for a smart TV, a user navigates around the iPad using touch. This means that touch targets (the tappable area around an element) need to be sufficient. Apple suggest a minimum touch target of 44pt by 44pt.
Summary.
When creating my clickable concept app I will be adhering to certain guidelines. These include;
- Design for a 2388 x 1668 pixel screen
- Keep all content within the safe area. There is a top margin of 32px, bottom margin of 26px and margins either side of 26px
- Be sure to keep content away from corners
- Have a minimum touch target of 44pt by 44pt
So.. let’s get started!
User Personas
I began by creating 2 user personas which would help me create my wireframes and wireframe flow. The user personas included a bio, goals and frustrations. This enabled me to identify which features should be included in my interface to meet user wants and needs.
My first user persona focused on their experience with free public domain movie sites and the second focused on their experience with the Netflix smart TV app, which is a paid service. This gave me a well rounded insight into both types of services.
From these personas, I was able to create a list of required features for my interface. These requirements included;
- There must be a search feature
- Users must have the option of searching by voice
- Users must be able to watch movie trailers on the app
- Each movie must have a synopsis and images of cast members
- Users must be able to keep all their favourite movies in one place
- The ability to like and dislike movies to improve recommendations
- Must be able to browse films by the year they were made
Wireframes
Smart TV
I started by creating a 1920 x 1080 pixel canvas for the Smart TV interface on Figma with a layout grid of 12 columns and 3 rows. I also included the recommended margin of 60 pixels at the top and bottom, and 90 pixels either side which marks out the “safe area”.
I then began laying out my wireframes. I created all my wireframes with the overlay layout grid to ensure that all my content stays with the safe area.
In my wireframes, I marked out image placements, logo, font choices, typography size and icons I would be using. I kept in mind that all my wireframes needed to adhere to a grid structure so it could be navigated with a D-pad.
I created a total of 12 wireframes to aid in creating my final high fidelity designs. These were particularly useful in ensuring I included all the requirements that had been identified from my user personas. Wireframing allowed me to make easy changes to find the best layout, spacing and sizing to create the best user experience with my smart TV player.
Tablet
I began by creating a canvas with dimensions of 2388 x 1668 pixels with a grid layout of 12 columns by 3 rows. I added a top margin of 32px, a bottom margin of 26px and margins either side of 26px. This marked out the “safe area” so I could begin designing my wireframes.
Laying out the wireframes for the tablet version was slightly easier as I was able to re-use components from the smart TV wireframes.
However, due to the difference in screen size — movie covers, text and icons had to be made larger. There is a lot more vertical space on the iPad screen in comparison to the smart TV screen which meant I had to move some components around to fill the empty space. Also, there is no need to always have an element in focus on an iPad due to the navigation differences therefore changes were made to address this.
Flow Charts
Smart TV
After creating the wireframes, I created a wireframe flow to demonstrate how users would progress from one screen to another. This allowed me to tweak my wireframes to ensure the user flow and navigation were effective.
I explained how each screen linked to the other and how users would navigate around e.g. up, down, or selecting. This was really useful for me to refer to when I was prototyping my final designs because the flow was already there for me to follow.
Tablet
The Tablet flow chart was fairly similar to smart TV. The main difference was that I had to take into account the way users would interact with their iPad. Users will tap, swipe and drag rather than using the D-pad on a remote. Each interaction was included in the wireframe flow to aid in creating the final designs and eventually, to aid in the prototyping stage.
Style Guide
A style guide was created which provided guidelines on colour palette, typography, icons / buttons and ui elements. This allowed me to keep my high fidelity designs consistent and uniform across both the smart TV interface and corresponding tablet app.
High Fidelity Designs
Smart TV
I created a total of 42 high fidelity screens using Figma, ready to be prototyped.
I ensured I used the buttons, icons, typography and colours that I had set out within my style guide. This meant my final designs were consistent in terms of sizing, colour palette and layout.
Tablet
I did not need to create as many screens for the Free Flicks tablet app due to the fact that a user could simply tap on an option, rather than having to navigate through every option to reach the one they want. I created a total of 19 screens for the Tablet app, ensuring I followed the style guide to keep the interface consistent.
Prototyping
Smart TV
Prototyping was the most enjoyable part of the whole process as I was able to see my designs come to life!
I started by prototyping the navigation. I felt this was the most important part to get right, as every other screen flows from here.
I decided to use the up, down, left, right and spacebar keys on my keyboard to control the interactions. I felt this would be the most similar to navigating around with the D-pad on a remote, which is what would be used when actually controlling the interface on a smart TV. I only used one type of animation throughout the entire prototype — “Smart Animate”, set to “Ease Out” at 300ms. This created a very smooth transition between slides, especially when navigating through different movie titles.
Tablet
Prototyping for the Free Flicks Tablet app was done using mostly the “on click” and “drag” interactions as this is how users would interact with an iPad. I followed the wireframe flow which set out how users would navigate between screens.
Similarly to prototyping for the smart TV interface, I used only the “Smart Animate” animation type, set to “Ease Out” at 300ms to keep the transitions smooth.
Final ‘Free Flicks’ Player Interface For Smart TV
Navigation
Searching
Movie Details
Watching a Movie
Favourites
Final ‘Free Flicks’ Concept App For Tablet
Realistically on an iPad, there would be no cursor. However, these videos demonstrate where users would need to tap or drag to navigate around the app.
Navigation
Searching
Movie Details
Watching a Movie
Favourites
User Testing
In order to get feedback on my prototypes, I asked 3 people to test and critique the colour choices, typography, navigation system, presentation of content and structure of my designs.
The process I followed was;
- Asking users to test the smart TV prototype. This had to be tested on my laptop with the up, down, left, right and spacebar keys to mimic a remote.
- Asking users to test the tablet app prototype. This was actually tested on an iPad Pro 11" to give the most accurate results.
- Asking users to fill out a feedback form on their experience with the both the smart TV and tablet app prototypes.
Reflection
To conclude, I felt my entire process ran smoothly from start to finish — From my initial research to the creation of user personas, wireframes, flow charts and prototyping the final high fidelity screens. I believe my design process was very efficient, with each stage aiding the next one. My initial research gave me an insight into what makes a good user experience which in turn helped me create 2 user personas. These personas demonstrated what features were needed in my designs which gave me a solid starting point for creating the wireframes. The wireframes and flow charts went hand in hand, laying out the content, structure, navigation and links between screens. This was particularly important in helping me create and prototype the final screens.
I feel I followed current design practices and guidelines thoroughly, which is further backed up by my user testing results. Users had positive comments about every area. They thought the typography was legible, the colour palette was suitable for a movie player, the structure was clear and navigation was easy and intuitive. On top of this, I also included all requirements and features that were set out as a result of my user personas.
If I was to carry out this project again, I’d like users to be able to test my smart TV player on a smart TV rather than a laptop, to create a more realistic experience. It would have been great to see users navigating around the Free Flicks smart TV interface with a remote control and would have given me more accurate testing results in terms of how my colour choices translated onto the screen and whether typography was legible from 10 feet away.
Overall, I thoroughly enjoyed creating Free Flicks. I particularly enjoyed the prototyping stage and seeing my designs come to life!