Interactive Design — TV & App prototypes

Introduction

In this report it will detail and explain the process and thought patterns that have gone into making the final interfaces. By adopting the role of the UI/UX designer, it will look into incorporating current design approaches and rapid prototyping tools to build two interactive prototypes for the ‘moving image archive’ of archive.org, one for a smart TV app and the other for a mobile app.

Aim and Objectives

The aim of this project is to create two prototypes for a TV and mobile application for the moving images archive using current development techniques and rapid prototyping tools.

Objective 1 — Create two interactive final prototypes that meet the desired specification outcome which reflect the research within the given time constraints.

Objective 2 — Analyse current design patterns and critique the work against these to determine success during development of finals.

Objective 3 — Determine the best software packages for these will be crucial to the workflow and ‘rapid’ prototyping so that the prototypes can be completed, again, within the given time constraints.

Objective 4 — Develop iterations of rough ideas that will provide the elements and objects, these should reflect how successful the research was and ensure the prototype is delivered on time.

Method

(https://uk.pinterest.com/source/katieameyer.com)

It is crucial to employ a design process to the work to achieve optimum results in creating a design solution, this is usually the combination of research, time management, iterations and feedback. By sticking to this method of working it allows for accurate refinement of the best ideas through user generated feedback.

“The strength of a design lies as much in the steps taken to create it as in the final result. The process — the totality of time, effort and attempt at solving the given design problem — demonstrates the care a designer is willing to take and the depth to which he is willing to go on behalf of the client. A good process will pretty much guarantee a good result.”- (Lundgren, 2017)

Beneath is the timeline in which the project will be completed, as per the small legend it shows the time slots, 37 slots each 4 hours totaling 148 hours.

Research

By conducting an audit on the company it provides a better understand of where they stand from a design perspective and what could potentially be improved on. Looking into some of the key competitors, based on those who already have TV and mobile apps, it would be the likes of Netflix, YouTube and the lesser known Vimeo.

Netflix — Netflix provides a video streaming service across many platforms, they used to do DVD rentals but adapted to the times and is now one, if not thee, most successful streaming service in the world with over 100 million paid subscribers. (Netflix, 2017)

YouTube — Everyone has heard of YouTube, popular video streaming service, all user uploaded content, and tutorial central. Mission statement based around freedom of speech. Does not allow for the upload of movies. (Youtube, 2017)

Vimeo — Vimeo differs to the others in a way that all of the uploaded content is user generated but also can be downloaded and used with the correct licensing. It is much more focused around video producers and film makers showcasing their work. (Vimeo, 2017)

A SWOT analysis allows us to breakdown the strengths, weaknesses, opportunities and threats of the current structure, looking at internal and external factors. Often used in a marketing campaign it can also be tailored for design specific reasoning and lead to a better design solution based on these factors. (Liquori, 2017)

What we can distinguish from this analysis is that there are lots of great content on there for video producers and film makers, all the credit is attributed to them which is good for exposure and to top that off it is displayed in a grid system so much of it can be seen at once. The downsides of this is that sometimes the content can appear very mixed and does not seem to have much organisation to it, this can make it difficult to find specific pieces. So from a design point of view it allows us a great starting point to find a solution to the problem, based on the free ability to categorize these topics. They do currently have refinement options but not the standard ones you would expect to see.

Competitor Evaluation

It is important to construct a competitor evaluation to see what tactics are being employed in maximizing the design capability. As it happens so often in the industry, it is good to see what others are doing and if it can be adapted and improved into your own designs. One popular exception is the Amazon ‘One-Click’ feature patent which allows for, as you would expect, a one-click and buy ability so no others companies can streamline their sites as such. (Chaffey and Ellis-Chadwick, 2016)

Netflix

Above is the Netflix TV application homepage, as you can see they use a large hero based image to advertise some of the top content they offer, then using a mix of a grid-tile design the categories are filtered into rows with each tile expanding into a small section about the film/TV show. Using this method means you can display as many different categories as possible whilst also being able to scroll through all the top for each one with ease.

Above are screenshots of the Netflix mobile app, you can tell almost instantly that this is a condensed version of the TV app. It has a robust and dynamic scrolling pattern that is familiar throughout any device you use which improves usability through consistency across all platforms.

YouTube

This is the YouTube TV app, it uses a similar layout with tiles and grids, but also displays extra information such as the user who uploaded it and the amount of views this allows for much better channel recognition. Unlike Netflix, YouTube has a menu feature on the left that pops out to give easier search options, or to browse subscriptions etc.

YouTube has a slightly different approach to the mobile app, they use screen-wide sections as they need to display more information than Netflix and by using large imagery it provides a much more visual experience for the user. Most apps use a 5 item menu system but it seems YouTube prefers to opt for the 4 item method to keep it simple as they already have a built in search function at the top.

Vimeo

This is the Vimeo app, albeit the Apple TV model which differs slightly to the android model, but the design principles remain roughly similar as the remote is restricted to the same constraints. Again we see similar patterns in the layout, although it doesn’t seem to offer a search function. Rather it offers hand-picked content and top features, which is more appropriate for what the users would be searching for.

Vimeo’s mobile app is very similar to that of YouTube’s although they don’t appear to credit the user who has uploaded it in the video sections. Due to the nature of the content it can be categorized in a different manner so users can search freely on a topic of their choice more so rather than for individual videos. This is something that should be taken into account when creating the for the archive.org’s redesign as it is the same style of content.

One obvious recurring feature they all use is the mobile media player, by overlaying the icons onto the player it saves space and is user friendly due to the familiarity of its common use. Another notable design feature is the grid-tile system in which they are able to display lots of categories whilst simultaneously showing at least 4/5 of the top picks. We must take into account the fact that the content uploaded onto archive.org is very different in the sense it is all free to download targeted towards producers and editors. Vimeo have found a happy medium in which to combine these design principles to accommodate to the content.

Customer Personas

Constructing a customer persona is essential in digital design, and marketing in general. It allows you to categorize and analyse the characteristics of the people who visit your website and create groups based upon these facts. Once this is completed you can then tailor your content to the user’s needs (Scott, 2015).

Adele Revella defines a customer persona in her book ‘The Buyer Persona Manifesto’ as:

A composite picture of the real people who buy, or might buy, products like the ones you market, based on what you’ve learned in direct interviews with real buyers.” — (Revella, 2012).

These customer personas outline two of the average Joe’s that would visit the app, by developing from these it identifies and focuses on a specific target audience. As we can make out from here most people use the sites free download advantage for video editing purposes but also for browsing and showcasing their works. A TV app would be good because like in persona 1, if you have a class of pupils and a smart TV/screen then you could log on to the app with ease and play your uploaded videos, students could also visit your page out of hours if needs be.

Tools

Popular prototyping blog prototypr.io says there are 6 factors you must take into account when deciding on a prototyping: learning-curve, is it going to be time consuming learning this product; usage, are you designing for web, mobile, TV or all of the above; fidelity, are you looking to create basic wire-frames or full detail composites; sharing, are you able to use this tool to collaborate or at least publish your work; professional skill, do you need to know how to code or can it be a simple drag and drop system; cost, basically how much is it going to cost, if at all. (Prototypr.io, 2017)

3 top prototyping tools have been picked, all with varying degrees ability and difficulty. Moqups, Justinmind and Visual Studio are the three chosen software packages.

Moqups

Moqups is an online prototyping application, it offers a range of drag and drop features with preset icons and templates which is very useful. As far as a learning curve is considered it is relatively simple, position where you want and format accordingly. It can be used as a solid wire-framing tool but with decent application can be a good prototyping tool, with the ability to link pages and add in your own imagery. You can then share your prototype via a link and also add people in to collaborate on the work. This drag and drag system is in a familiar tool box design for the application with different tabs and alt functions abilities. Irritatingly you can only have one project before you have to pay a monthly fee so this limits your work a lot. (Moqups, 2017)

Justinmind

Justinmind is a desktop application that features a lot of the same tools as moqups but with an extra bit of power. For instance when testing, it opens the pages into a web browser and has web components in the small template tool. It’s very user friendly with a familiar and ease-to-use interface, like many others using a drag and drop system with adjustable formatting someone can learn to pick it up quickly. Each page can be individually created to a specific dimension so whether it be TV or mobile that isn’t an issue, this is a powerful tool to have and can create full scale clickable prototypes. It has full collaboration and sharing abilities, the only small downside is that to view on chrome you have to add an extension but it is only minor. It does not require much previous knowledge to use and even has a handy view on device tool for proper testing. To top it all off the entire program is free! This is a strong candidate as the tool for the job. (Justinmind, 2017)

Visual Studio

Visual studio, also known as visual basic, is a completely different kettle of fish. Basic actions such as linking pages means coding the connection, and on first appearances there are about 3 different variations of template for one type of software. It does appear a very popular and powerful tool also but it cannot be learnt overnight, but with these difficulties and template variations, you can create designs for anything from android apps, to full blown computer applications. On the skin, it does not appear to have any sharing capabilities, as it is more focused towards application development. Most of the dynamic abilities in this must be coded in, so it takes someone with a decent knowledge of the language to make the pieces in a decent time. Like Justinhand, a big bonus is that it is all free. A notable point also is that even with a mediocre spec laptop, it was struggling to launch and run this program as it is very heavy. (Webster, 2017)

These 6 factors give a plain view on which one to use, Justinhand is a powerful, locally stored, prototyping tool. It has all the necessary tools and features that rapid prototyping requires such as the ability to share and test your application, all packed into an easy to learn and easy to use program. Moqups is a close second though and will most likely be used for the medium fidelity wire-framing. The biggest downside is that it only lets you have one project at a time, another more minor issue is that fact it is a web app so not always accessible. Other than that it is a strong contender with its templates and features. Unfortunately, Visual Studio is not really a viable option, if there were more time to learn the ways around the program it could be very useful but lacking the ability to publicly share the work and the sheer effort of learning the software completely takes the ‘rapid’ out of rapid prototyping.

Specification

This is broken down into three sections of needs, features and functions to clearly define the parts that are required to create an adequate design solution.

Needs — The applications need to be able to logically display the varieties of content available from archive.org in a fluid and intuitive manner. A look at the website would show they currently don’t have much methodology in their look. A consideration to take into account is the distance from where the user is viewing the device from, a TV could be as far as 10 feet, whereas a mobile user will be up to 1 foot from theirs. The TV application needs to be robust to cope with the restraints of a remote controller, whereas the mobile app would be able to use the dynamic abilities of a mobile device to its advantage.

Features — The apps should both feature large imagery of the films, with details such as the users account name, amount of views and ratings. It should use a tiled grid system layout, and in doing this needs to consider the unique content archive.org has to offer. The colour scheme should be consistent throughout to increase usability across devices and the menu system should be kept simple and provide access to the most relevant needs of the user.

Functions — One of the most important functions of the apps will be the ability to search for content, it needs to display the results with varying filters. It should have a media player with common icons associated with the standard players. In turn all icons used for the mobile device must be those the user has instant recognition of its meaning. The TV app isn’t as reliant on them due to the larger viewing area.

Design, Planning and Implementation

This part will show the development from rough ideas, onto the style guide, through wire-framing, storyboards and flow charts, to the medium fidelity testing and final production.

Rough Ideas

By free hand drawing them it allows for a quick transfer of ideas onto the canvas, and is a much more natural way to start the design process. As they do not have to be neat, you can experiment with ease.

Above are the rough ideas for the various TV application screens. They will mainly consist of large block like sections in a tile system that allows for easy scrolling and searching.

The mobile concepts require more attention to detail, focusing mainly on how the content will be positioned as you have to cram more into a smaller space. Just like on the website the idea of having the views, ratings and comments in each section give it a much more interactive appearance.

Style Guide

This style guide shows the fonts, colours and icons to be used across the apps. By using objects from here it creates consistency throughout the applications and improves the overall look.

Choosing to use the dark grey and orange look sticks to what bits of the current website use, but they are also good contrasting colours, with a white background it should have a nice overall visceral appeal.

Wire Frames

Wire frames are a great way to establish the basic framework for the final piece. It visually displays where elements, whether it be text, imagery or sections, should go in relation to the others. (Haas, 2017)

TV

Home Screen
Search Screen
Player Screen

These wire frames show the basic layout of what the final piece should aspire to appear like. They use the design techniques learnt through research to construct a system in which everything has high usability and readability. Large imagery has been used to provide a more visual experience for the user along with large text and brief descriptions. The placeholders seen in the top right would act as home and search icons allowing for quick movement throughout the app, and the placeholder seen on top of the image of the player screen is to act as a large play button.

Mobile Apps

Home screen
Search Screen
Player Screen

For the mobile app wire frames we must use a slightly different style where the content is more compact into the screen. The 4 placeholders seen at the bottom of the screen will allow for quick movement through the home, categories, favourites and settings. The three seen with each section on the search page will act as the ‘views’, ‘comments’, and ‘ratings’. This leaves room to have the search icon as its own at the top where it naturally belongs.

Storyboards

Storyboards allow the creator to illustrate the actions a user would take in performing tasks within the application. Below is the storyboard that depicts how a user searches and finds a video.

Beneath is the same action being performed on the mobile version of the app.

To finally clearly define the precise actions the user must take, showing decision making where necessary, we can construct flowcharts which also illustrate the steps taken. For this flowchart it will show the specific movements, with all key choices that must be made.

Final production documentation

This section will show the final screens and the explain the thought process behind them.

TV

This is the home screen, it follows the wire frame used in the mid fidelity along with the colour scheme and icons in the style guide. The lighter coloured box shows what a tile would look like if it were to be highlighted so the user can see where they are on the screen.

This is the search results screen, it displays the various results that a specific return would show. For the sake of copyright, placeholder blocks have been used, but all are of large size so that a user who can be sat up to around 10 feet away can still easily distinguish the text and content.

This is the player screen, this page is split 50/50 so the user has a good visual experience, it includes an extended blurb on the video in hand so the user can read more into it. It also shows a larger view of the overall rating with two big ‘Play’ or ‘Back’ buttons to keep it simple.

Mobile

This is the home screen for the mobile app, it too features a tiled system that allows the user to search by genre which is the main way users search on the moving images archive. At the bottom it also shows a featured item of the day. The four menu icons at the bottom are Home, Library, Genre, and Settings.

This is the search screen, again the images and certain content have been substituted for placeholders. The use of icons in this contexts has a familiarity with the user that allows the to connect quickly, the heart represents likes, the middle icon is clearly comments and the eye is views.

This is the player screen, much like the TV application it extends on the description of the video to give the user a better understanding of the meaning behind the video. The screen would also have a scroll ability with related videos the user could search through.

Conclusion

To conclude, through thorough research and a clear understanding of the objectives the targets originally set out have to a degree been met. More iterations could have been created to identify other elements to add to the prototypes, that would have led to an overall better user experience. A positive of the designs is that the applications have true consistency throughout with colour scheme and the elements.

As far as the software is concerned, it was ultimately flawless with the slight hick-up of the ability to link the pages. Justinmind is an easy to use, drag-and-drop program with great features. Images are easily sizable and it comes with a plethora of pre-installed widgets and icons, couple this with the familiar layer’s tool it makes for a great rapid prototyping tool.

If this had to be done again, more time would be dedicated into creating rough ideas. This would allow for a larger range of elements and therefore potential combination leading to a better layout. Further more, additional screens and functionality could be brought into the prototype to give more immersive experience.

References

Chaffey, D. and Ellis-Chadwick, F. (2016). Digital marketing. Harlow: Pearson.

Haas (2017). Wireframing. [online] Online Portfolio. Available at: https://td650.wordpress.com/2017/03/16/wireframing/ [Accessed 28 Jun. 2017].

justinmind (2017). Prototyping tool for web and mobile apps — Justinmind. [online] Justinmind.com. Available at: https://www.justinmind.com/ [Accessed 28 Jun. 2017].

Liquori, E. (2017). Use SWOT Analysis for Your Next Design Project. [online] Onextrapixel. Available at: https://onextrapixel.com/use-swot-analysis-for-your-next-design-project/ [Accessed 28 Jun. 2017].

Lundgren, A. (2017). Why the Design Process Is Important — Alvalyn Creative. [online] Alvalyn Creative. Available at: https://alvalyn.com/process-and-outcome/ [Accessed 28 Jun. 2017].

Meyer, K. (2017). Pins from katieameyer.com on Pinterest. [online] Pinterest. Available at: https://uk.pinterest.com/source/katieameyer.com [Accessed 28 Jun. 2017].

moqups (2017). Online Mockup, Wireframe & UI Prototyping Tool · Moqups. [online] Moqups.com. Available at: https://moqups.com/ [Accessed 28 Jun. 2017].

Netflix (2017). About Netflix. [online] Netflix Media Center. Available at: https://media.netflix.com/en/about-netflix [Accessed 28 Jun. 2017].

prototypr.io (2017). The 7 Best Prototyping Tools for UI and UX Designers in 2016. [online] prototypr. Available at: https://blog.prototypr.io/the-7-best-prototyping-tools-for-ui-and-ux-designers-in-2016-701263ae65e8 [Accessed 28 Jun. 2017].

Revella, A. (2011). The Buyer Persona Manifesto. 2nd ed.

Scott, D. (2015). The new rules of sales and service.

Vimeo (2017). About Us | What is Vimeo?. [online] Vimeo.com. Available at: https://vimeo.com/about [Accessed 28 Jun. 2017].

Webster (2017). Introducing Visual Studio. [online] Msdn.microsoft.com. Available at: https://msdn.microsoft.com/en-us/library/fx6bk1f4(v=vs.90).aspx [Accessed 28 Jun. 2017].

YouTube (2017). About YouTube — YouTube. [online] Youtube.com. Available at: https://www.youtube.com/yt/about/ [Accessed 28 Jun. 2017].