Online Player & Device App Portfolio

Introduction

This project portfolio will look into the process of researching, designing and developing two separate prototype applications for both TV and Mobile platforms. The prototypes will be based off the Moving Image Archive website that currently exists only as a webpage. Moving Image Archive is a video sharing website that allows users to upload independent feature length films and everything in between. The main goal of this project is to look into current trends for TV and Mobile video app design then redesign the Moving Image Archive website for these platforms, enhancing the user experience.

In order to successfully redesign for TV and mobile platforms this portfolio will look into various different elements that aid in the creation process. Research will be conducted to find out what makes a successful TV and Mobile video application. An audit will be completed on the current website design detailing how it can be improved, thus helping with the redesign process. Through out the process of design the smart TV player app and corresponding mobile app, user feedback will be collected. This aids in helping to improve the overall user experience, the entire design process will be documented.

Methods / Design Process

The chosen methodology for this project is the agile methodology. As expressed by Joel (2015), while the waterfall methodology is a more traditional approach for product development, it’s arguably less effective. Archer (2014) voices that the agile methodology allows for flexible workflow with it’s multiple sprints and testing phases. Under the circumstance that this project requires several iterations and testing, agile has been selected as the best possible approach.

Seanv554 (2014)

The image above clearly shows the agile methodology along with it’s sprint stages that allows for testing and iteration, these continue until the product is complete and finished ready for launch.

A total of 148 hours is required to be spent over the duration of the entire project. This will be broken down into the various sections that make up the process. The bulk of the project, 60 hours, will be spent on research and analysis section. This is split down into three sections, 10 hours conducting the site audit of the current Moving Image Archive website design, 10 hours collecting user feedback, and the final 38 hours collecting research on current best practices.

20 hours will be spent on the project specification. This includes, project needs, features, functions, and a client invoice. A total of 58 hours will spent on the design aspect of the project, again split down into the various design approach steps. 10 hours of the design process will be spent on creating low fidelity sketches, 10 hours on medium fidelity wire-framing, 10 hours on testing & experimenting with different prototyping tools, and lastly 30 hours creating and documenting the final product. To conclude the entire process, 10 hours will be spent on concluding and reflecting.

Time management will be achieved through the use of a Gantt chart, this will allow for a visual representation of what is to be completed and when it’s to be completed by.

User feedback will be collected using a detailed questionnaire, this will allow users to input their personal thoughts and opinions in a structured manner. In addition this strategy allows for easy data complying and analysis.

Research & Analysis

Audit of the Moving Image Archive

The moving image archive structures its content using irregular grids, this seems like an unconventional method. While under Gestalts principles it could be considered that proximity occurs, using conventional grids with an evenly spaced grids would improve proximity; increasing the grouping effect.

Turtlemedia (2015)

The image above shows an example of how the moving image archive website currently displays its content. This layout style is more suitable for applications such as Pinterest (Turtlemedia, 2015).

The picture below shows an example of regular grid design. Taking design cues from statistically the most popular video sharing website, Youtube (eBiz, 2017).

YouTube Tests a New Interface (2011)

The moving image archive doesn’t make good use of visual elements, within the categories section only a small section per tile is dedicated to graphical elements. In addition, the graphical elements don’t appear to to created with the same consistent styling. This creates the effect that they aren’t in unity with each other, elements aren’t similar enough to be considered for consistency.

moving image archive

The image above clearly shows the inconsistency between category graphical elements. Furthermore, it appears as though certain videos are grouped along side the category screen. It isn’t clear why these are displayed here and conflicts with consistency rules. Hovering over these video shows which category they belong to, though isn’t clear whether these are featured, most viewed or other wise. These have been highlighted in the image above.

Distinguishing between different pages can prove to be difficult, there is little design change between the various different pages. Especially between the categories screen and viewing a particular category, they are to similar. As a results distinguishing between pages can be difficult.

Accordance has been considered within the current design through the use of large clickable elements. Feedback has also been integrated into the website through the use of a colour change upon hovering over clickable elements. However feedback cues change depending on the element, this would be acceptable if they were on different screen and not grouped together as one.

moving image archive

The moving image archive, like many popular video sharing websites, incorporates a recommended section. This section recommended items based on metadata. Currently this section is at the very bottom of the page, below the review section. This isn’t a suitable location for this content, most users will want to find related material quickly without having to scroll to the very bottom past all the reviews. Considering this function is out of sight and hard to find, it’s visibility is compromised. Users aren’t likely to know how to find this functionality easily.

Navigation

TV Apps

According to the views held by Lafferty (2016) navigation trends are often defined by the hardware in question. Lafferty (2016) goes on to suggest that the wide yet squat screen real estate of standard TV sets lends itself to long rows of content. This approach is commonly used as it allows for maximum visible of content on screen.

(Lafferty, 2016)

UI Patterns for TV (2017) suggests that a key aspect to successful TV UI design comes from understanding that users are typically navigating via a directional pad (D-pad). This type of controller is limited to four movements; up, down, left, and right. As a result, user interfaces should be created using lists and grids to take advantage of the two-axis navigation that a D-pad allows (Lafferty, 2016).

(Design and user experience guidelines for fire tv, 2017)

In addition to a D-pad Mischel (2011) voices that a selection button and volume buttons are necessary as standard, any additional button are considered luxuries and causes unnecessary distractions. The Apple remote used for the Apple TV is a good example of this simplified process.

(Identify your apple TV remote, 2017)

Mischel (2011) expresses the opinion that user interfaces for a TV UI should be simple and obvious, users should be able to easily navigate using only their thumb without having to look at the input device. Lafferty (2016) concludes in suggesting that another essential element to consider is the on-screen cursor. Lafferty (2016) expresses that without the ability of touch or a traditional mouse, users are forced to navigate to each element. A cursor should highlight the selected element and move with input of the D-pad, borders, shadows, and enlarged elements are often used to simulate this. Lafferty (2016) states that every item on the screen should be assessable via the cursor and in addition it should always be clear where the cursor can move to next. The image below shows how a cursor might be used to show a selected element.

(Lafferty, 2016)

Mobile Apps

There are several ways to structure navigation for mobile devices, with each having advantages and disadvantages. Following current modern trends, normally the content of the application would dictate the style of mobile navigation to be used (Mobile Navigation Design Fundamentals, 2015).

Babich (2016) illustrates the mobile trend movement the original Apple Iphone delivered that made multi-touch gestures mainstream for navigating around mobiles and applications. As Babich (2016) infers, users quickly discovered that they were able to perform several new interactions such as swiping and pinching to zoom. Though as expressed by 10 Exciting Trends in Mobile App Design (2015) forcing the user to use the zoom function just to clearly read text is considered bad design.

Sam (2017) brings the idea that using enhanced in-App gestures improves the overall user experience by increasing interactivity between the user and the device. People love interacting with their devices.

(Plouff, 2015)

ThinkMobiles Team (2016) reinforces the idea that simple navigation on mobile devices is essential to creating a successful app. ThinkMobiles Team (2016) suggest that simple navigation is the practice of using a clear type font, visually pleasing elements, and a clean interface along with ensuring users are able to easily move around and find their destination without conscience thought.

As stated by Anthony T (2012), hitting a bulls-eye in darts is the hardest thing to do due to its small size, this same principle can be applied to touch elements on mobile devices. This suggests that an emphasis on touch element sizing should be considered. The IOS Human Interface Guidelines suggest that tappable areas should be a minimum of 44pt x 44pt for all controls. According to Anthony T (2012) Microsoft Phone UI design guidelines and Nokia developer guidelines have smaller recommendations for touch element size compared to Apple. Anthony T (2012) claims that the average pixel width of a normal finger is 45–57 pixels and 72 pixels for thumbs.

As a result of the concurrent research, the mobile application will follow Apple’s guidelines with touch elements being no smaller than 44 pixels. This will help increase usability and improve the user experience.

Colour

TV Apps

According to the views held by Lafferty (2016), it’s important to consider certain colours when designing for TV. Lafferty (2016) suggests that pure white colour surfaces may be too bright and cause halos and other visual distractions. The main reason for this phenomenon is due to TV’s having a much higher gamma value when compared to other device screens; such as mobile and tables (Potvin, 2016). Highly saturated colours, especially red, should be avoided as much as possible. When using whites for TV design it’s recommended to pick a hex value of #f1f1f1 or #EEE, this will avoid flickering (Potvin, 2016). Lafferty (2016) also suggests being cautious with gradients and deep blurs, due to the limited colour range TV’s can achieve these can create banding. AndroidTV (n.d.) also agrees with previous points that suggest colours can vary greatly between devices, as a result suggests constant testing on multiple devices and environments. In addition, image quality can be tested using the TV’s display settings.

(AndroidTV, n.d.)

Mobile Apps

After functionality colour could be considered the most important aspect to good app design. Deciding on a colour scheme should be done using a colour wheel to identify colours that compliment each other respectively Babich (2016).

There are several different methods and theories for using the colour wheel to select fitting schemes. A few popular ones include the analogous colour scheme, the idea of using colours that are next to each other on a 12 colour wheel. Complementary is a popular method that uses colours which are opposite each other on the colour wheel (Levdikova, 2016). Finally Triadic is a method that uses colours which are evenly spaced around the wheel, this creates vibrant colour themes. To use triadic themes effectively colours should be well balanced with one dominant colour and two others for accenting (Color Harmonies, n.d).

Jennings Wiebe (2012)

Safe Areas

Pacheco (2012) expresses the need for incorporating safe areas within TV design. TV’s often use overscan which means not all TV’s display content to the very edge of the screen, this can mean that content spills over the edge and is not displayed. To avoid this, when designing for TV safe areas should be defined. TV software developers recommend different safe area margins to use, as a general guidelines a 5% margin should be implemented (Style for TV, n.d.).

Potvin (2016)

Typography / Text

TV Apps

According to Style for TV (n.d.) there are certain typography rules that should be followed to ensure maximum visibility and increase usability. Style for TV (n.d.) expresses the view that 12sp is the minimum font size that should be used on TV’s, this is to keep readability at distance and reduce eye strain. Designing for interactive television (n.d.) brings up the argument for avoiding the use of thin or light typefaces, this is primarily because they can appear jagged and hard to read under default TV contrast and sharpness settings.

Style for TV ( n.d.) voices how text should be kept to a minimum to help with the user experience, text is hard to read at a distance and users aren’t expecting to have to read large amounts of text in a TV environment. In addition Style for TV ( n.d.) recommends breaking text up into smaller chunks so users aren’t overwhelmed, allowing them to quickly scan through and using light text on darker backgrounds to increase readability.

Mobile Apps

One of the most important mobile app design protocols to take into consideration is typography, if the font is hard to read then the app will be impossible to use (The Basics Of Designing Mobile Apps, 2016).

According to Alvarez (2014) as a standard rule for mobile, 30–40 characters per line is optimal for the user experience. Experts in design suggest that sans serif, grey text is the best font to use for increased readability. Some people believe that black on white is too much of a contrast and decreases the readability (Alvarez, 2014).

Research conclusions

Concluding from the research it’s clear that there are several aspects that need to be considered within the final design. Below is a list of conclusions that, according to research of current best practices, are essential to the success of the project.

  1. Navigation is a top priority for creating a good user experience.
  2. Content structure and layout massively affects how users will use and view the application.
  3. The most important content that users will actually want to interact with regularly should be the main focus point of the screen. For this project, the focus point should be on the video content.
  4. Colours are extremely important to be aware of, especially due to the diversity of TV screens in production, they all produce different colours and hues. Pure white and highly saturated colours should be avoided.
  5. Elements on the mobile variant of the application should be appropriately sized to be usable by fingers and thumbs.

Specification

Following on from the research & analysis section, a list of requirements has been created for the redesigning process of the Moving Image Archive website, helping to create a successful finished product. Under the consideration that two separate prototypes are being created, although the end user experience should deliver similar results, the design process differs. In respect to this two separate lists of requirements have been created.

General project requirements

  1. Create a Smart TV interface based off the Moving Image Archive website.
  2. Create a mobile application based off the Moving Image Archive website which holds similar design aspects to the smart TV variant to signify unity.
  3. 4 usable screens to be created for each application using prototyping tools.

Smart TV interface requirements.

  1. The interface should have considerate colours, certain colours shouldn’t be displayed due to the relaxed nature of the TV environment. Over saturated colours and pure whites should be avoided, they are likely too bright for a dimly lit room.
  2. Simplistic navigational elements should be used through out the interface, which lends itself to being easily navigated using a simple directional pad (d-pad). Navigation elements should be easily identifiable using onscreen visual cursors.
  3. Appropriate font sizes should be used throughout the entire interface to accommodate for the average 10 foot viewing distances. TV’s are generally used in a relaxed environment and viewed at greater distances compared to other devices, therefore legibility becomes an important aspect to be aware of during the design process.
  4. The interface should adopt simplistic elements with light weight interaction which is clear and visually relaxed. Clarity is especially important, large well spaced elements should be used to achieve this.
  5. Important content should always be displayed first, enabling users to quickly find what they are looking for.
  6. Low information density, meaning textual elements should be kept to a minimum with more visual elements for the user to interact with.
  7. The design should be created for a 1920 x 1080 resolution at a 6:9 aspect ratio.

Mobile App requirements.

A lot of elements from the smart TV interface requirements will carry over to the mobile version, though here are requirements that are particularly important for the mobile version.

  1. Usability must be highly considered within the mobile variant of the design. Users expect apps to be easy to use and navigate, without good usability they will uninstall and download a competing app which is easier to use.
  2. Mobile gestures must be taken into account within the design, allowing users to intuitively use gestures they are already familiar with.
  3. Design the interface to be finger-friendly. Mobile applications are navigated using finger touch controls and due to human design, fingers are fatter and less pixel-precise in comparison to physical controls.
  4. Accordance must be considered within the design, function must be obvious via appropriate accordance principles.

Design, Planning & Implementation

Low fidelity Concepts

Initial low fidelity concepts have been sketched out by hand. This helped gather ideas and design elements from scratch. Below shows the low fidelity concepts.

These drawings represents the Home page, Categories page, Movies page and the video play page. These ideas are very basic and were used to get the main structure down along with element placement.

These concepts show the remaining pages. Reviews / details page and the mobile variants.

Medium Fidelity Concepts

Medium fidelity concepts were created after first completing the low fidelity concepts. The medium fidelity concepts help give a better idea of what is to to expected in the final prototype. The medium fidelity concepts were uploaded to behance in order to gather feedback via surveys. Below are the medium fidelity concepts.

Style Guide

Documentation of final designs

The final design prototype was created using a combination of Adobe illustrator and the Invision prototyping tool. This method was chosen above other prototyping tools as Adobe illustrator allows for more freedom when creating elements. Invision acts as a way to turn screens into fully working prototypes.

The first step was to create all the screens in Adobe illustrator. Below is some screen shots and analysis of how this process was done.

This screenshot shows the feature Films section of the prototype within Adobe Illustrator. Creating the screens only required the use of a few tools in Illustrator.

The first tools used were the Rectangle and circle tool, these allowed all square, rectangle, and circle shapes to be created easily. The rectangle tool is shown below:

The circle tool shown below:

A lot of opacity options were used to make certain squares and other shapes transparent. This tool is shown below:

Text was created using the text type tool as shown below:

Colors were selected using the colour select tool, this is shown below:

A combination of these tools allowed for the screens to be created in Adobe Illustrator.

After the screens were all complete Invision was used to create the final prototype. The step below show this process:

After logging in, this screens allows for new projects to be created. The Pink + sign in the top right was clicked to create a new project.

From here the project type was selected, prototype was chosen. The next screen below allows for a type to be selected and project named.

Next, Invision prompts for screens to be uploaded. This is shown below:

Once uploaded, the Invision app can be used to make the screens functional. The uploaded screens is shown below:

The final step was to link all the screens together. Clicking on each screen brings up a preview and allows for hotspots to be created, this is shown below.

As can be seen, using the mouse an area can be select and then a linked screen can be added. This is shown below.

These steps were completed for all screens on both prototypes.

Conclusions

Looking back at research conclusions we can measure the success of the project. Below is a recap of said research conclusions:

  1. Navigation is a top priority for creating a good user experience.
  2. Content structure and layout massively affects how users will use and view the application.
  3. The most important content that users will actually want to interact with regularly should be the main focus point of the screen. For this project, the focus point should be on the video content.
  4. Colours are extremely important to be aware of, especially due to the diversity of TV screens in production, they all produce different colours and hues. Pure white and highly saturated colours should be avoided.
  5. Elements on the mobile variant of the application should be appropriately sized to be usable by fingers and thumbs.

Having looked back over these conclusions there are several areas that were successfully implemented into the final design. Effective navigation was implemented on both prototypes, mobile featuring on screen touch controls and TV player featuring d-pad and button controls. The smart TV player doesn’t feature any on screen back buttons and relies on using a controller for this functionality. This perhaps was a bad design choice looking back, though most people would favor using a physical button. As mentioned by Smyk (2015) horizontal navigation patterns should be used instead of vertical, this is due to using a remote for navigation. The prototype incorporates horizontal elements. The structure of the content has been appropriately laid out with the most important features near the top of the screen and easily accessible. The colours used through out are effective and fit in line with general guidelines, though perhaps a slightly darker theme could have been implemented. However, Lafferty (2016) suggests that using the #eeee colour as a background is acceptable. mobile prototype appropriately restructures the content and has acceptable sized touch controls according to research from Anthony (2012).

The project methodology used was Agile, this helped keep track of each phase of the project and break it down into smaller chunks. In addition, it allowed for testing and refinement. This was essential to the design process. Overall Agile was an effective methodology for this project, aiding in the success of the finished prototype.

Feedback

Throughout the design process feedback has been gained on design elements via a free to use survey website. SurveyNuts was used to do this. Below is a screenshot of the feedback gained using this method:

This survey was presented on Behance along with the design concepts in order to gather results. This can be seen below:

Using the feedback gained several areas of the final prototype were improved that would have otherwise been overlooked.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.