Vintage Movies: SmartTV and Mobile Clickable Prototype
Introduction
Online video streaming began in the mid 2000s and has become a worldwide internet feature in the digital industry. Applications are connected to multiple different handheld or smart devices through the internet. Amazon Prime (2006) and Netflix (2007) introduced video streaming for Movies and TV Shows.
Since 2015, Smart TVs have become popular devices for streaming applications. Their ability to connect to the internet and use a range of different applications make them great for streaming content. Major online media companies such as YouTube, Netflix and Amazon Prime all provide Smart TV applications.
Scenario: Vintage Movies is a copyright free online streaming company and appointed me a UX/UI designer, to create a new logo and modern design concept for Samsung SmartTV and Apple’s iPhone. This blog will cover the design process taken, explaining and walking through each stage from research and competitive analysis to designs and user feedback.
Competitive Analysis
Understanding Vintage Movies competitors was the first priority before conducting our research and design rationale. The competitive analysis looked into all Vintage Movies competitors from direct to indirect.
Direct Competitors
Vintage Movies direct competitors are companies that provide public domain content to their users. Analysing our primary competitors will provide a better understanding of how we can optimise our service provision, types of content and design rationale to a competitive edge and attractive new customers and retain existing customers.
Archive. Archive is a web-based content library, it was considered as one of our primary competitors due to the extensive range of different types of content it provides for its audience including books, movies, software, music and websites. The functionality of the system is fairly straightforward and easy to navigate.
Public Domain Movies. Public Domain Movies provides its users with a wide range of old copyright free films from the early 20th century to early 21st century. The website is outdated in terms of aesthetics however its navigation is very good and straightforward for users to follow.
Reruncentury. Reruncentury is a public domain site for TV Shows rather than movies. The site provides a range of different TV Shows and are all listed on the homepage. The content is easily found on this site, but aesthetically the content layout is poor with no images or iconography used.
Indirect Competitors
Indirect competitors for Vintage Movies are companies that license online streaming platforms and have a good company reputation. The method to analysing these companies can be influential on our design thinking and ideation for our TV and mobile designs. Long term if Vintage Movies consider going into the licensed online streaming industry then these companies would be potential competitors.
Netflix
Netflix allows users to watch their favourite TV Shows and Movies on a range of different digital devices. Users have to pay for their subscriptions to watch content. Netflix uses a recommended system to provide content based on the type of content users watch.
Its design structure allows a user to find content easily and affordably. The scroll-able viewing allows users to scroll through multiple different TV shows and films. Each design and content layout is different from all devices. The mobile design uses a grid layout in comparison to TV where it uses horizontal scrolling.
Its clear navigation allows a user to scroll through all the pages. Typography, colours and sizes make design elements noticeable on all, their devices. For TV white colour is used to act as a cursor to allow the user to find their way round the application. For mobile, bottom navigation bar is implemented at the bottom of the user interface.
Presentation of content for Netflix was presented clearly and visible to users. Netflix’s horizontal scrolling views for different types of content was used to allow users to flick through multiple films/tv shows. Iconography is only used for the handheld devices and website. This is good as they are all designed to provide better usability and adapted to suit each device. For TV and console no or little iconography is displayed as the controls from the TV remote or controller are understandable from the user. One set back is Netflix’s recommending system. A user cannot access all content provided by Netflix by browsing, they would have to search using a specific name of a Film or TV show.
Amazon Prime Video
Similar to Netflix, Amazon Prime Video is another well known online streaming service. It is compatible on a range of different handheld and non-handheld devices. Users have to pay for its subscription and they provide a wide range of different TV Shows and Movies for their customers.
The SmartTV application uses a vertical layout which navigation bar and content are divide in two on the screen. Navigation bar is displayed on the left of the users screen and content is displayed on the right. For mobile, content is stacked on top of each other and a navigation bar is used at the bottom of the User Interface (UI).
Amazon Primes products navigation allows users to identify and search for content easily without causing confusion. Typography for both types of devices is displayed clearly to help users identify each design element. The navigation bar uses a good range of iconography to make pages more obvious when using the mobile. For TV, the navigation menu contains large headings to make page names visible from a long range.
The presentation of content for Amazon prime was displayed clearly displayed to the user on all their devices. Amazon Primes Smart TV application uses grids to structure and present content. The grids are all different sizes and film or TV show posters are either large or small. For mobile, horizontal scroll views used posters of the same size, to scroll through multiple different TV shows or movies.
Plex
Unlike Netflix and Amazon Prime, Plex is a media library platform that provides users with the ability to stream their own content. They set up what content they want to display and then watch it on any device they desire. Plex is cross-compatible on all handheld and non handheld devices.
For Plex design structure, navigation and presentation of content is customisable so there is no default design used for this application. However the design elements used contain their own structure. Plex’s scrollable views contain poster and label underneath. Iconography or typography for both menus.
User Research
User Stories
User stories were used to gain user research to help Vintage Movies have a better understanding on what features and user needs may impact on the design decisions and rationale.
Epic 1
Epic 1. As a user I want to be able to have a wide range of Movies/TV shows to choose from.
User Story A. As a user I want to be recommended Movies/TV shows based on interest
User Story B. As a user I want to be able to see the latest Movies/TV shows.
User Story C. As a user I want to be able to see most popular Movies/TV shows.
Epic 2
Epic 2 — As a user I want to be able to find a specific film or TV show.
User Story A. As a user I want to be able to search for movie or TV show
User Story B. As a user I want to be able to find a TV show or Movie based from an A to Z list.
User Story C. As a user, I want to be able to find a Movie/TV show via genre.
Design Research
Design Trends
Researching into the design trends of 2019 is key to help influence and inspire our ideas and decisions for our design concepts. Design features can provide your organisation the upper-hand over your competitor. Below is a few examples of some 2019 design trends that were researched.
Nav 2.0
One trend seen at the moment is the use of bottom navigation for a user interface also known as Navigation 2.0. This type of system involves the user mainly focusing on using the bottom half of the screen. Navigation 2.0 is one major consideration that Vintage Movies should take into consideration. It provides an easy and smoother user experience.
Wireframe based designs
Another design trend reviewed is wireframe based designs. These designs are more task centered and focus on User Experience. With wireframe based designs, medium and high fidelity designs are quicker and easier to create as less colour and patterns are added. This trend is a good consideration if we are to consider a minimal viable product (MVP) approach.
Colour Schemes
Colour schemes are great to grab users attention, provide your target audience with the right user requirements and represent the brand. There are different types of colour schemes to choose from such as monochromatic, analogous or split colours. Mixing the right amount of colours is also crucial to providing the right colour scheme.
Spotify are a good example of mixing colours in there colour palette. They use a mixture of white, turquoise green, black, yellow and salmon. The good use of mixing neutral and cool colours create a vibrant and sleek look to their brand.
Guidelines for iOS
Apples app guidelines walk-through the app requirements that Vintage Movies would have to follow before publishing their app on the App Store.
App Icon sizes. As there are many different sizes for all the apps icons. Size requirements were put in place in which third party companies would have to follow. Different sizes addressed by Apple were spotlight, notification icon, device icon size and settings icon size. The dimensions of each icon would have to be followed when Vintage Movies post their application onto the App store.
Layout and Device Dimensions. Apple devices use margins and padding for each of the device. Apple’s guidelines mentions the different screen sizes and orientations. These are important as they make sure that your app fits within the device screen size for both portrait and landscape orientation. Layout guides and Safe Area provided by Apple give you an indication on how to layout your content and what areas are restricted. The safe area would prevent Vintage Movies content from under lapping the iPhone status bar, navigation bar, toolbar, and tab bar.
Typography and Iconography. Apple provides guidance on the different font families, sizes, weights and hierarchy needed within your apps design. Legibility, clarity and being consistent are main attributes referred by Apple that should be implemented into Vintage Movies design. Similar to typography, all icons must be legible, clear and consistent through the apps design. When creating custom icons they should be designed as Glyph’s to make icons stand out and be more professional in your applications design. Icon sizes are also mentioned throughout the guidelines. It mentions the different sizes for different icon types and all these icon sizes must be similar within the same family.
Guidelines for Samsung Smart TV
Samsung's Smart TV guidelines describes the app requirements that Vintage Movies would have to follow before publishing their app on the SmartHub store.
User Environment. The distance between the TV and its viewer(s) should be at least 3 metres. Therefore sizes of all design elements such as typography and imagery must be larger than other devices as the distance between the user and the device is greater in comparison to mobile phone.
App Icons and Size. All Vintage Movies app icons must support versions from 2015, 2016 and later to provide compatibility for a wide range of Smart TVs . Therefore for older versions the logo must meet the size requirements set out by Samsung. For newer versions, specific size requirements apply to both the logo and the background.
Layouts. Samsung's guidelines on App screen layout covers all the types of different layout options and styles that should be required when producing a TV application. Main points to consider are design structure and content layout. For structure, there are 2 options, horizontal or vertical design structure, each requiring specific requirements. They demonstrate the different styles for configuration and navigation when laying out content for your designs. This information is key when considering the planning of our design structure and presentation of content.
Typography. Samsung demonstrates their rules and requirements for typography through using their one font as an example. They go through the different font families, sizes, weights and hierarchy needed within your TV app design. It covers all the different sizes within your hierarchy, legibility of your text, line spacing and colours used to represent your font colours.
Methodologies
Testing
A minimal viable product (MVP) approach meant that we would gather feedback only on the basic tasks and core features of the applications. Restricting the design to its core functionalities provides a taste of the product to our users and keeps costs down. This is considered a pragmatic and proportionate approach that is mindful of return on investment.
Feedback is to be obtained for the clickable prototypes. Two focus groups would be used, one group for each device. Each group will comprise of 5 people. The user will be given 3 sets of tasks which they need to complete and report on. Communication software such as messenger or iOS messaging will be used to provide comments and suggestions from testers providing live testing. Any flagged ideas or requirements can be addressed and implemented into the design for future development of the app.
User Requirements & Hierarchy of Needs
The aim of both applications is to allow the user to achieve their set objectives which is to be able to watch their favourite TV Shows and Movies on the go or from the comfort of their home. The importance of how the user can complete their user journey is vital and can only be achieved through providing good and consistent navigation which in turn creates positive user perception.
Design features and functions also provide a vital role in our application user experience. The more features and functions that work, the higher chances of the user satisfaction and demands would be achieved. A hierarchy of needs was created to provide a summary of all user needs. It covers each topic in a hierarchy were important topic is at the bottom and less important at the top.
Brainstorming and Design Decisions
Research and Analysis Summary
The research and data analysis, provided an overall understanding of the right type of content needed for our target audience. Design ideas and trends then would help influence our design decisions.
Some contemporary designs features from our indirect competitors influenced our designs for both TV and mobile. Horizontal scrolling views allows more content to be displayed and accessed. For TV, the horizontal navigation bar using large visible typography would improve user recognition and accessibility. Navigation 2.0 would play a key role in our user experience for the bottom navigation bar of the mobile screen. All our designs were considered to be wireframe based. Not only does this make our design clean and easy to use but also ideal for testing and following the MVP approach.
As designs would have to be adapted to suit both devices — TV and Mobile. The two style guides chosen — Samsung and Apple would be used to provide an understanding of set requirements that we would follow in order for our designs to be full adapted to suit each device.
Design Rationale
In general the theme that Vintage Movies was aiming for was to have a modern design with a vintage feel. Mixing the modern and classic provided a professional and clean look but still related to the vintage concept.
A monochromatic colour scheme was used to provide colour for both neutral colours black and white. These colours are reminiscent of the black and white newspaper and early TV from the early 20th century. This links to that classic, vintage design theme. Fonts to be used throughout the designs were Helvetica, again a vintage font. Having a single font meets the style guides for Apple typography and legibility for Samsung TV. Font sizes are to be large for the TV and gradually scale down depending on the importance of each design element. For mobile the same approach was considered however the font size and weight were decreased.
Planning
Softwares & Tools
Overall a few design softwares were looked into to create both TV and mobile prototypes. Softwares that were explored were Invision Studio, Hype 3.0, Mockingbot and Adobe XD. All these prototype design and animation softwares could have been used they were not suitable for creating the prototypes that we desired.
Softwares that were used to create the applications were Figma and Sketch. All digital wireframes and medium fidelity designs were created using Sketch and then imported into Figma to create the prototype. Design library/visual style guide was also created through sketch. The design library feature sped up the process of designing the concepts.
Figma was great software, its horizontal scrolling feature brought our scrollable libraries to life and the prototype features provided a wide range of different options.
Navigation structure
Hierarchal Task Analysis (HTA) or navigation structure was created for both TV and mobile application. The two HTAs created were firstly for main navigation of the applications and secondly for the media player.
Main navigation uses a flat navigation structure in which the user is able to scroll through all the pages on the application. For the navigation bar this would come in very handy as users can switch between pages without getting lost, therefore improving user recognition. Each page then includes all the different elements and tasks that are followed when creating the application.
The Media Player uses two separate HTAs. As the prototypes are for TV and mobile these two HTAs are embedded into one and go through all the different tasks and sub tasks in order for a user to play, stop, pause and rewind their media content.
Design Process Documentation
Logo Designs
The logo used the design of a ‘V’ and the play button to represent the vintage movies brand. The V was for the first character of the company name and the play icon represented watching content. This design consisted of black and white colours to relate to that classic vintage theme provided in the design rationale.
To create the logo, the fibonacci sequence was used within a grid using the design software Adobe Illustrator. The fibonacci sequence allowed all three points from the two triangles to be aligned together.
App Icons
Rough Ideas & Low Fidelity Wire-frames
Rough sketching was the first initial phase of the design process. Creating rough sketches provided basic ideas on how the applications content could be laid out.
TV Rough Ideas: https://drive.google.com/file/d/1hgg9A2m_VcmDF8-nU8T42pMylsaZwbrg/view
Mobile Rough Ideas: https://drive.google.com/file/d/1eMOesBp_csZzT6pWxo46AgNDL7C2AYmA/view
Low fidelity wireframes were developed to provide the first digital design structure on both designs for Mobile and TV. Using grids and layouts meant that content can be laid out evenly and kept within the safe areas of both devices. For TV a 8px grid was used to help align elements and a layout or soft grid was used for the mobile with border margins either side.
TV Wireframes: https://drive.google.com/file/d/13zyEVQ5PcPs5OCjNytznTLj_lZ6gqrIT/view
Mobile Wireframes: https://drive.google.com/file/d/1TcUke0BBcHrHFPhf3rFq8rmOfa7iyVY7/view
Medium Fidelity Designs
Low fidelity wireframes were then re-used within the medium fidelity wireframes. They acted like colouring pages where the design elements were added to the structure. This saves time and money as the design does not have to be recreated from scratch.
Both TV and mobile medium fidelity designs were created using the design library provided below. Elements, molecules and atoms were added into the designs through using the symbols feature created by Sketch. The medium fidelity wireframes are the last stage prior to the development of the clickable prototypes.
Click here for TV: https://drive.google.com/file/d/1Hu38hr6wWBOih6ZwG_DtwryTzQ4VXDkF/view?usp=sharing
Click here for Mobile: https://drive.google.com/file/d/1GGCc6R5C5fNEfUmFNJ9XXa3HWechp6Aj/view?usp=sharing
ATOMIC Design Visual Style Guide
Visual style guide or Design Library was influenced by Brad Frosts design library ATOMIC design. All components are group into either atoms, molecules or organisms.
Click here to view: Style Guide for SmartTV
Click here to view: Style Guide for Mobile
Clickable App Prototype
High Fidelity Mobile — https://www.figma.com/proto/XQk07Fg4qcdYSMz9sQQjYLZd/VM---High-Fedility-Designs-Mobile?node-id=0%3A1&scaling=scale-down
High Fidelity TV — https://www.figma.com/proto/JwpXofOEwkRm3XBFGhAm0rhD/Medium-Fidelity---TV?node-id=0%3A1&scaling=min-zoom
Feedback
Mobile
From the feedback provided for the mobile clickable prototype the common comments included: -
The app was easy to navigate — users were able to search for a nominated TV show easily and quickly.
Some of the prototype are not yet functional, e.g. the video player and input fields making it difficult for users to get the full experience.
One user stated that there was too much information for the TV show info page. This suggests we need to cut down the typography and perhaps rethink using images and horizontal slide scrollers to hide but not loose the detail. The detail may be important to some users more than others.
One user suggested that better use of the back button function could have improved navigation and their own experience.
TV
All participants reported that test ‘task’ was successfully completed. Most participants were able to find the content without experiencing any frustrations.
Content was generally easy to locate, could be read easily and generally the application was simple to use.
One user, however, stated that the font size was unsuitable for his test device (a 14 inc screen). This user also had difficulties navigating through the site citing the example that there was no obvious way to track backwards from the terms and conditions.
Conclusion
Overall, the design process of the Vintage Movies TV app and mobile app was positive and resulted in a prototype product that attracted some positive feedback.
In terms of the development process, with hindsight, feedback could have been provided for the Low Fidelity wireframes. More faults may have been pointed out and adjusted before creating the medium fidelity designs. Considering that they are only basic and do not contain any content or design elements.
For the development of the prototypes, the major challenge relates to the software tools used. My original plan was to import medium fidelity designs from Sketch into InVision Studio as provided by InVision Studio guidance. However, having done this, it was apparent that not all of the features were operational when importing the medium fidelities over to the InVision Studio.
Figma was chosen as an alternative because it provided more features in comparison to other alternatives such as the horizontal scrolling which was an important design attribute for this application. However, this software did not give me the flexibility I needed to include some key features such as watching content and typing text into input fields.
Unfortunately as it stands the users, were unable to have a real life experience with this prototype, ie watch a film etc. The prototype requires further work and the plan is to create a new medium fidelity and prototype using InVision Studio with the low fidelity wireframes provided from Sketch. Critical to this further development work will be addressing the back button navigation feature identified in the user feedback as well as the testing on different screen sizes.
