Interactive Smart TV and Mobile prototype for a new film streaming service: FreeFlix

This case study is undertaken to research and analyse current video/film streaming services and design an interactive prototype of a brand new streaming service for both a mobile application and a smart TV application. The industry is currently dominated by streaming services such as Netflix, Hulu and Amazon Prime. Within this case study I will analyse what makes these services successful, and how they can be improved further to benefit a new streaming service called FreeFlix.

Public Domain Movies is a free movie streaming website showcasing movies that are in the public domain. The first thing I notice when viewing this website is the use of a carousel banner at the top of the page showcasing movie artwork that a user can click on to be directed to the movie.

Image for post
Image for post
Screenshot from Public Domain Movies

Another great thing about Public Domain Movies is their use of a grid-like system, allowing for clean and consistent design throughout the website. Each row within the website has three movies displayed with the movie artwork as a link to view the movie. When a user hovers over a movie’s artwork, the image increases in size and an overlay appears with the movie’s title and brief synopsis.

Image for post
Image for post
Screenshot from Public Domain Movies

The one thing I noticed lacking within the Public Domain Movies website was a search feature. Users are forced to scroll to find a movie or look at certain categories, and are unable to search for a movie directly. Advertisements are also obtrusive in the website, appearing after every row and often not rendering advertisements, just displaying as a placeholder box. The website also isn’t responsive, and doesn’t change for a mobile device, displaying the desktop version of the website.

Image for post
Image for post
Photo of the mobile website for Public Domain Movies

Internet Archive is another website which provides users with millions of free movies (as well ass books, software, music, websites and more) that are in the public domain. Unlike Public Domain Movies, Internet Archive displays a clear search bar for users to be able to find their desired content. Navigation overall on this website is a lot more intuitive than on Public Domain Movies.

Image for post
Image for post
Screenshot of Internet Archive

Internet Archive provides its users with an extensive list of advanced search options, allowing for refined searches regarding category, creator, language and more. The general organisation of this website is clean and while it seems to be cluttered at first (there is a lot of content!) it still remains easy to navigate for most users. Despite these navigational advantages, Internet Archive’s layout wouldn’t lend well as it transferred over to a Smart TV device due to controllers using D-pad functionality, and the sections not being aligned in a grid system.

Image for post
Image for post
Screenshot from Internet Archive — Sections not aligned

While BBC iPlayer doesn’t provide a free movie streaming service, it is still beneficial to analyse the successes and downfalls of their design. BBC iPlayer provides a slick, consistent and modern design throughout their website and applications, with an intuitive navigation strategy and ease of use. They have followed a clear grid system, with everything lining up and following a similar pattern throughout the website.

Image for post
Image for post
Screenshot of BBC iPlayer

BBC iPlayer has a powerful colour scheme with dark backgrounds and pink call-to-actions and secondary colours. These colours add to the modern feel of their website, and the dark background is perfect to create a cinematic atmosphere in a users lounge.

Feedback on the website is quick, smooth and satisfying with images enlarging on hover with an overlay of information appearing and links changing to a call-to-action colour. When a user clicks an arrow to slide content, the ease-in-out feel of the animation is smooth and doesn’t appear jarring to the user.

To ensure that the application is successful on both mobile and smart TV, it is important to critique what makes navigation easy and accessible for both of these devices. These devices are on two ends of the spectrum in terms of screen size, and therefore the way they are used and consequently designed is completely different.

On a smart TV application, users are often using a console controller or remote control D-pad to navigate through different shows. The up-down-left-right actions that users are restricted to heavily influences the design when it comes to smart TV interfaces, and displaying long rows of content to maximise what is displayed to the user has become standard within television UI design. Within the industry currently, Smart TV applications for streaming services such as Netflix, BBC iPlayer, and Amazon Prime all take on a grid-like system with large blocks for videos and categories in horizontal or vertical lines.

Image for post
Image for post
Image provided by Pascal Potvin

The focus engine is a paradigm which states that within a smart TV application there is always content in focus, unlike on a mobile or desktop application. Due to the d-pad navigation used on smart TV’s, users are usually directed through a series of areas that then come into focus. This differs from a mobile application where the user usually touches and swipes for navigation, and therefore there isn’t always an area of focus.

Users should be able to see 10–20% of the content that goes off-screen in order to make it clear that there is more to be discovered within the interface. As well as this, it is often desirable for horizontal navigation to take precedence over vertical navigation and is seen as smoother and less jarring on the user.

Image for post
Image for post
Image created by Michael Flarup

Due to a TV’s wide canvas a horizontal navigation allows for the content available to be maximised within one view. This can be seen commonly through Netflix TV app, Hulu Plus on Playstation, iTunes Store on Apple TV and AMC on Apple TV.

Image for post
Image provided by Molly Lafferty

While a smart TV navigation is block-like, four-directional and limited; a mobile application allows for much more freedom when it comes to navigation. Mobile application often lends itself to navigation gestures including tap, long tap, swipe, double swipe, pull and much more in order to get around the application.

Despite navigation being easier on a mobile, it should still remain self-evident with a familiar feel and consistent design across devices. In order to maintain a consistent design across apps, the grid-like system should be carried over from the smart TV design to the mobile design.

TV manufacturers still sit on the side of caution and use overscan to ensure that a clean picture is displayed on the edge of a TV. Even the newest TV’s do not show all of the pixels with about 3% of them being cropped off, which is demonstrated by the red box in the image below. The pixels remaining inside this box are then blown up to fill the entire screen.

Image for post
Image provided by Molly Lafferty

Broadcasters anticipate that some of the image will be clipped, and therefore they avoid placing critical information too close to the edge of the screen. The current recommendation when designing for HDTV’s is to set a 5% margin, defining a general safe area in which all UI should be kept.

The intent of a minimum viable product (MVP) is to reduce the risk and increase the return of investment by building only what is necessary. This is the smallest product that can be created while still being meaningful to the target audience.

There are many benefits of having a MVP, including early testing opportunities which allow you to get an idea if the product will work before investing a lot of money on it. It also takes less time to develop the application, lowing costs and launching prototypes to users quicker allowing for more iterations in a shorter time period.

Image for post
Image for post
How to build an MVP — Image provided by Net Solutions

Samsung’s developer guide has a comprehensive list of guidelines for developers and designers that are creating applications for their smart TV’s.

User Environment for Samsung SmartTV
The average distance between and TV and its viewers is 10ft (3 meters), and users tend to lean back while watching TV. Users are not used to complex screen layouts and controls when using a SmartTV application, and therefore controls should be kept to select, return and exit only.

UX Principles for Designing applications for Samsung SmartTV
Simplicity — More complicated does not equal better when it comes to applications, and the layout should be user-friendly with intuitive features arranged in a convenient manner.

Clarity — Navigation should be clear and accurate for user operations. Ambiguous navigation will cause users to feel confused and insecure, likely leading to them closing the application and never opening it again. Move, Return, Enter and other navigational functions must be clear at all times.

User Control — An intuitive layout must be provided for the method in which the user will be controlling the application. To achieve this, button names and icons on the remote control should match the actions that occur on the screen. There must be consistency in movement specification.

Consistency — When using a new application, consistency with other applications will allow a user to quickly learn. Although UI cannot be the same for every application due to each application having different traits, using these consistent components will enable to the user to become familiar with common controls: consistent controls, consistent screen layout and consistent navigation.

Feedback — Items within the focus of the focus engine must be displayed in a way that is clear to the user to distinguish between items that are currently not in focus. When the time to load an application exceeds a certain period, a loading animation must be displayed as a visual confirmation to the user that the screen will soon change.

Image for post
Image for post
Image from Samsung: Good(left) and bad(right) examples of Focus.

Navigation — Samsung tells designers and developers that navigation movements must be predictable and unambiguous, and therefore diagonal placements of content should be avoided while horizontal and vertical placement is intuitive for the user.

Image for post
Image for post
Image from Samsung— Confusion caused by diagonal placement.

Apple goes into great detail for their guidelines when developers create applications for their macOS and iOS systems. They suggest that the following principles should be kept in mind when imagining an app’s identity; aesthetic integrity, consistency, direct manipulation, feedback, metaphors and user control.

Aesthetic integrity represents the level of success in which an apps appearance and behaviour integrates with its functions. The example that Apple uses on this page is that if an application has a serious task, subtle and unobtrusive graphics as well as standard controls and predictable behaviours will allow the application to have good aesthetic integrity.

Consistency within Apple means that by using system provided UI elements, common icons and standard text styles, developers are able to implement familiar standards and paradigms in the way users expect.

User control ensures that throughout iOS it is people, not applications, that are in control. In summary, an app should let a user feel in control with the use of familiar elements and making it easy to cancel operations even if they’re already underway. It is not recommended for an app to take over on decision-making, even if the outcome is potentially destructive.

Apple’s San Francisco typeface was designed to be legible in both small and large font sizes, providing flexibility by letting readers choose their preferred text size. Below is the table provided by Apple displaying all the font sizes for the Large(Default) setting.

Image for post
Image for post
Screenshot from Apple — Font size for different text types

Apple provides their developers with UI essentials from UIKit, which is a programming framework to define common interface elements. This allows all iOS apps to achieve consistency across the system as well as offering a high level of customisation. The elements provided by UIKit fall into three main categories; bars, views and controls.

Within an iOS system, Apple states that progress indicators should be utilised to inform a user if something is loading. Content should be shown as soon as possible, and it is beneficial to entertain people to mask loading time with the use of entertaining graphics or other media.

Based on the research I conducted at the start of this case study, I have drawn some conclusions and specifications which have been taken on board to be included within my final design prototypes.

From the research it is clear that common features that are important for applications such as this is consistency, ease of use and accessibility. Common design trends for Smart TV devices follow a grid-like system due to being navigated using a d-pad on a controller. Popular streaming services such as BBC iPlayer and Netflix user horizontal scrolling within the applications as it is easier on the eye for users and less jarring. All of this will be considered when creating the design prototypes for FreeFlix. Below are the five specifications laid out that need to be met and successful by the end of the case study and first iteration of the prototype.

  • The design must be consistent throughout the prototype
  • The website must be legible, so text needs to be clear and colour contrasting
  • The layout of the application must look familiar across all devices
  • The Smart TV layout must be easy to navigate using a d-pad and therefore follow a grid-like system
  • The navigation for the application must be intuitive and quick to use
  • When content goes off-screen, 10–20% of it must be shown so users know that they can scroll horizontally.

My design will be a minimum viable product and will have a focus on the user journey from the home page to finding a specific movie title through the use of categories and a search feature. Therefore, features such as accounts will be included in the design however not made interactive.

Throughout the design process there are five main stages I am following: low fidelity, medium fidelity, high fidelity wireframes, prototyping and finally feedback.

The feedback gained within the final stage will create goals for the next iteration of the prototype, which will be carried out in an entirely new design process from low fidelity through to testing once again.

Stage One: Low Fidelity Wireframes
The low fidelity wireframes were carried out using pen, paper and post-it notes in order to get ideas flowing and come up with a rough design and user journey for the prototype. Doing these designs allowed me to put ideas onto paper and play around with different layouts very quickly, which in turn generated more ideas and possibilities than I would have thought of if I jumped straight onto a laptop and started designing.

Image for post
Image for post
Low Fidelity Wireframes created during the Design Process

Stage Two: Medium Fidelity Wireframes
These wireframes were created using Figma, an online collaborative prototyping tool. The reason I chose to use Figma to create the designs is because it is all saved online, allowing me to access my designs from any computer without needing to transfer files via a USB, as well as meaning I would not need to change to a different editing program when conducting the prototyping stage of the design process due to Figma having prototyping capabilities.

Within this stage of the design process, the low fidelity wireframes were refined, and in some cases combined, to create a more clean and solid understanding of the dimensions and layout of the final high fidelity designs. Several design decisions changed from low to medium fidelity, and there was often two low fidelity options which different elements combined to make one medium fidelity page. I also did some minor prototyping within this design stage to get more of an understanding of how the user journey flowed throughout the current design of the website, but nothing too detailed.

Image for post
Image for post
Screenshot of medium fidelity wireframes during the design process.

At the end of this phase, I undertook some testing regarding the user journey of the website UI and the website navigation to ensure that users view the design as originally intended. This was done by a focus group of ten random people at Solent University campus between the ages of 18–22 all given the mobile version of the UI design. I tasked them with the following:

  • Locate the categories page and find the comedy section
  • On the home page, find the Continue Watching section
  • Locate search within the navigation

The results of this short test showed that 100% of users were able to locate the categories page and comedy section in less than 30 seconds. 100% of users could scroll locate the Continue Watching section with no issues. Locating the search gave more interesting feedback, with 60% of users attempting to use the search icon in the navigation and 40% of users opening up the hamburger menu and expecting to see a search option there.

Stage Three: High Fidelity Wireframes
The next stage took my designs one step further; adding colour, fonts, images, relevant text and final design changes. The final design changes were minimal between medium and high fidelity, and the testing done in the medium fidelity wireframes ensured I was confident with the current user journey within the UI system. The SmartTV version of the prototype was made using a 30px grid, and the Mobile version was made with a 15px grid.

Image for post
Image for post
Screenshot of some High Fidelity Wireframes during the design process

Based on the feedback gained in stage two, with 40% of users expecting there to be a search feature under the hamburger menu, I decided to include this within my high fidelity designs. This way, based on feedback, 100% of people should locate the search option easily whether it’s through the search icon or the hamburger menu.

Image for post
Image for post
Search option added under the hamburger menu based on feedback in the design process.

Stage Four: Prototyping
As the wireframes were created in Figma, it removed the need for exporting my files to another program to conduct the prototyping stages of the design process.

Within Figma, I made use of the overlay option when creating the keyboards and navigation for the prototype. This allowed me to create just one frame for the navigation and keyboard, and have these pop-up on any screen I wanted when needed. Figma also allows for horizontal scrolling within a frame, which was especially useful for my design due to film lists going off screen and the user needing to scroll horizontally to view them all.

Image for post
Image for post
Prototyping connections made on Figma during the design process.

Figma allows designers to add a directional entry onto overlays and transitions, as well as allowing designers to change the speed in which these transitions happen. This was a great tool for getting the mobile navigation to slide on screen and the keyboards to rise from the bottom of the screen.

Image for post
Image for post
GIF demonstrating overlays during the design process.

Stage Five: Feedback and User Testing
The feedback strategy I decided to take on at the end of the design process was to take a random sample of ten people within Solent University between the ages of 18–25 and get them to use the final prototype of the mobile app and smart TV app. While they were using the app, I would ask them to complete tasks and note down the approach taken and time taken to complete the task. The tasks were as follows:

  • A) Use the search feature to locate “Night of the Living Dead”.
  • B) From the home page, locate the categories page and discover thriller.
  • C) On the home page, locate “King Kong” (Mobile) or “Three Friends” (Smart TV) under the section “Timeless Classics”.

The results for the user testing came back with some conclusive feedback on what was successful about this project and what should be improved in future prototype iterations.

  • A) This task showed 100% of users were able to locate the search feature within both the mobile and smart TV prototypes to view “Night of the Living Dead”
  • B) This task showed that 80% of users were able to locate the categories page on a smart TV with no issues, and 100% of users discovered this page on a mobile device. 20% of users testing the smart TV prototype were slowed down due to not recognising the categories icon in the navigation.
  • C) 100% of users for both the mobile and smart TV prototypes were able to locate the “Timeless Classics” section and the correct movie without issues.
Image for post
Image for post
User Testing of the mobile and Smart TV Prototype during the design process

I also produced an online questionnaire containing images to get feedback on the visual elements of colour scheme, typography and icons. These questions were:

  • A) On a scale of 1 (low) to 5 (high), how appropriate do you find the colour scheme of the application?
  • B) Here is an icon {display categories icon}, what do you think this icon means?
  • C) On a scale of 1 (low) to 5 (high), how legible do you find the typography within the application?

The results for this survey consist of 20 anonymous respondents.

  • A) An average of 4.0/5.0 stars was awarded for the colour scheme
  • B) 85% of respondents correctly identified that the icon was for the categories page
  • C) An average of 4.15/5.0 stars was awarded for the legibility of the typography

When designing for the brand of FreeFlix, the UI Style Guide must be used precisely to ensure a consistent brand style.

Image for post
Image for post
UI Style Guide for FreeFlix

Based on the feedback received in the user testing and surveys, conclusions can be drawn regarding the overall success of the current prototype and the direction in which future iterations should go.

With 20% of the user’s that underwent the User Testing of the Smart TV prototype unable to easily identify the categories icon, and 15% incorrectly identifying this icon altogether within the survey, it is clear that more can be done within the next iteration of the prototype surrounding the categories icon to improve it’s recognisability for some user groups.

Another big improvement that I personally feel could be done with the project is experimenting with different colours, gradients and overall having a lighter colour scheme. Despite saying this, the survey proves that the current colour scheme is appropriate and a success scoring 4.0/5.0 stars. As well as this, the typography, font size and font colours used for the prototypes have been a success scoring 4.15/5.0 stars within the survey.

The user journey of the prototype is a success with users throughout the user testing successfully navigating the application to achieve the tasks set out for them. Verbal feedback given to myself during these tests highlighted the use of overlays for the search feature being an interesting choice that was favourable to many users as it removes a whole search page commonly seen in user journeys on applications such as Netflix.

This iteration focused on the user journey from the home page to finding a movie title, and therefore the prototype does not include interactivity regarding creating accounts, or viewing accounts. The future of this prototype will be a second iteration, taking on feedback to improve the categories icon and adding in more functionality regarding accounts. Features that could be added in future is the ability to save movies to an account to view later and an option for users to download movies rather than just view them on the application.

The final prototypes are available to be viewed online:

BSc Web Design and Development Graduate and aspiring UX innovator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store