Mobile Application and Interactive Smart TV player concept for Archive.org Movie page.

Screen capture of the Archve.org Video Section

Introduction

This portfolio will present the process of redesigning the archive.org movie page into a mobile application prototype and Interactive Smart TV design interface.

The Internet archive is a non profitable library founded in 1996, which collects published works and makes them available in a digital format. It is a public library that can serve anyone with an Internet access. (Archive.org, 2017)

It contains:

The web page that this portfolio will focus on is how the Movie/Video section user experience and user interface design can be improved, based on the latest trends in the web design.

The aim of this project is redesigning the Video section of the archive website by changing the user interface and experience, and making a mobile app and a TV Interface concept. The process of redesigning will start after a research of similar websites and design concepts, in order to gain understanding of how these websites work, what tools and elements they use in order to give the users a better experience with their website and services. The main focus of this project will be on the user interface and experience and what tools and techniques were used for the creation of the mobile app and TV interface prototype.

Methods/design process

The design process is one of the most important stages of creating or redesigning a website, because it guarantees that the final design of the product will meet all the UI/UX principles and design trends. The design process for this project was divided into a few stages.

1. Analyze Archive.org

The first stage was to analyze the Movie/Video section of the website and do some testing on the usability and the interface of the website in order to gain information about what needs to be changed and how it can be improved.

2. Research

The second stage of the design process was to research similar platforms, apps, websites and TV concepts to gather information about their user interface and experience and to get inspired to make a great looking concept and application for the archive.org website. The two main websites that were used for research of other concepts were Behance.net and Pinterest.com. At Behance, a collection called “TV Concept Inspiration” has been made to save high quality projects and concepts for TV, in order to analyze design,concept, UI/UX and get inspired for the redesign of the archive.org.

Behance Collection Page

3. Reference

Take into consideration the new trends in the web design for 2017 and the UI/UX principles.

4. Wire Frames (Low Fidelity, Medium Fidelity, High Fidelity)

Low Fidelity (Examples)

After the research and analysis are complete it is time for the creation of the rough low fidelity wire frames for the redesign. For the creation and presentation of the UI/UX wire frames an inspiration was used from an Instagram page specialized in only low fidelity wire framing. (Link for the instagram)

Medium Fidelity Wire Frame (Example)

Medium Fidelity

For the medium fidelity wire frames a wireframe.cc will be used to give shape, text, elements and images to the low fidelity wire frame and give it, a more realistic feel about how the final product of the redesign for archive.org will look like at the end.

High Fidelity Wire Frame (Example)

High Fidelity

The high fidelity wire frame is almost the final product of the design. In the high fidelity we already know what fonts and color schemes we will be using in our design, what images and what structure for our website.

5. Design

After all the sketching and wire framing are finished we transfer the sketches into Photoshop and start the redesign process of the archive.org. Before the start of the designing process the first thing that needs to be done in Photoshop is to create UI (user interface) guidelines containing all the fonts, color scheme, buttons and navigation icons. The biggest advantage of creating an UI guideline is the amount of time it will save for the creation of a certain page reported by Moveable Online. The UI kit also gives the design a similar feel through all of the pages of the web site. On the Internet there are a lot of free to use UI kits which can improve the quality of the design and are good learning source (Moveable Online).

6. Prototyping

The prototype building begins after all the designing process is finished and ready to be uploaded for the prototyping process. For this design two prototyping platforms were used, one for the mobile app of the web site and one for the TV concept. The two platforms have different features offered to the users. That’s why for the mobile application of the website was created on Invision.com and the TV concept was built on the Marvel.com.

An Invision app was used for the mobile design, because it gives a wider range of screen resolution and more options on what iPhone ‘skins’ can be used to present the prototype to the audience or a client.

Invision Prototyping Tool

The TV concept was built on the Marvel prototyping tool, because it has the option to create a prototype, specialized for a TV screen which the Invesion App doesn’t offer to the users.

Marvel Prototyping Tool

The prototype gives the opportunity to create a form out of a concept reported by (Sandu, 2017). This is really important, because it gives the designer the opportunity to show the design in a working form and get a critique and feedback. Based on the feedback changes and improvements can be done before delivering the final design to the developer.

Methods

The methodology used for the creation of this project is the Waterfall methodology. For the creation of the portfolio 92 hours should be spend doing research, design, prototyping and completing the portfolio.

82Waterfall Methodology

The waterfall methodology helped for the creation of this portfolio by setting a small tasks each day. This helped the research and design to be up to date.

For the research part of the assignment a 25 hours were spent researching and analyzing TV player designs and mobile application designs in order to get inspired and gain knowledge on how the thing are done and why are done like this.

After the research part was finished it was time for brainstorming some ideas and sketching some low fidelity wire frames, for this task 6 hours were spent.

The finished sketched low fidelity wire frames then became medium and high fidelity wire frames for this task 9 hours were spent.

For the creation of the final design and UI kit Adobe Photoshop was used to build the whole design process. Total of 20 hours was spend.

The next stage was choose the right prototyping tool and start the building of the final design from Photoshop into the prototypes for the TV and the mobile application, a total of 2 hours was spent.

And for the creation of the portfolio, a total of 30 hours should be spent.

Research & Analysis

  1. What makes a successful App?

There are few things that needs to be done for an application to be successful nowadays. The first and most important thing is the originality and the functionality it gives to the users. Nowadays most of the people are impatient and want everything to happen fast and easy (Hooper, 2017). The second thing that makes an application good is that they usually do only one thing, but they do it really, really good compare to the other applications. Third thing, for one application to be successful is the user interface and the user experience are well designed and developed and offer to the user an easy, fast and fun application to use.

2. How can the user experience and the user interface of the Moving Image Archive section of the archive.org be improved?

Almost 35% of the users using archive.org are on a mobile device reported by (Blog.archive.org, 2015). For the users using the mobile application of the web site the user experience is not that smooth as for the web. The user experience for the mobile version of the web site after the redesign, will be made more intuitive clean and easy to navigate through all of the pages of the web site.

For the user interface there are some thing in the design that can be changed or removed from the design.

The first thing that needs to be redesigned is the navigation of the website in order to make it usable on the TV player. On the website there are two navigations.

Navigation of the sections in Archive.org

This navigation is located on the left side of the navigation bar and it navigates the sections in archive.org. This navigation will be used for the TV player design, in order to make the design clean and intuitive to the users.

Screen capture of the navigation of Archive.org

The second navigation appears when the user hover with the mouse over the archive logo. This navigation consist information similar as a footer, because the web site doesn't have justified one. This navigation can be removed in order to simplify the user experience on the TV player.

Screen capture from Archive.org

On the home page of the archive.org website it can be seen all the collections at archive. One thing that can be changed and make it easier for the user is to group those categories on the first page, because most of them are not related at all. So for the redesign of the website the most popular communities will be displayed in a clean way.

Screen Capture from the Archive.org

For the Movie Section of the web site it can be seen there is some kind of a grid system used for the categories in the design, they are structured well vertically, but horizontal it can be seen some categories are not on the right place. This will be redesigned by using a vertical and horizontal grid in Photoshop, so the visual presentation of the categories becomes more structured and easy to navigate.

3. What are the user profiles, goals, frustrations and solutions?

They are usually “time poor” and get frustrated easy if they can’t navigate well trough the interface of the mobile application or the TV application. The redesign will have the creative challenge to make the navigation and the user experience, fast and easy to use.

4. What approach should be taken when creating a Clickable App prototype based on current best practice?

The prototyping in 2017 is one of the most important steps of creating a UI/UX design. There are a lot of prototyping tools on the Internet. The approach of creating a prototype depends on the design it is going to be developed. Each prototyping tool offer different thing to the designers, so they must choose careful which tool will be best for the given design. There are some good free to use prototyping tools other than the Marvel and the Invision App. Really popular are UXpin, Moqups, Just in mind and Mockingbot .

5. How should I gain feedback throughout the design and production process?

The feedback can be gain by making an online questioner about the prototype and the design asking a few questions and sending it to creative people, designers, friends, social media. After receiving feedback the design can be improved before developing it and it will give the users what they wanted.

A good way to gain a feedback from a real designers and creative people is to upload the work to Behance or Dribble.

Specifications

Following the research and the new trends in the web design and development the following specification list will be needed for the redesign of the Archive.org from a web site to a mobile application and a TV player concept.

  1. The new web design of the Archive.org web site will have a user interface and user experience change.
  2. Following the research and the analysis the design of the web site will follow all the new trends for a successful mobile application and TV player.
  3. The two platforms should have the same consistency of elements in their design.
  4. The design of the TV player should be easy to use and navigate with a remote control from a distance, and the mobile design should be intuitive and simple to navigate.
  5. Choose the right prototyping tools for building the both prototypes.

Design, Planning and implementation

After the research and analysis are done now it is time to show the creative process of redesigning the archive,org for both the mobile application and the TV player.

Low Fidelity planning and wire frames (sketches)

The first thing that will be presented is the early wire frames with only brief ideas on what the redesign might look like. There are two separated sketches ideas, one for the TV player and one for the mobile application.

Low fidelity Mobile app
Low fidelity Mobile app
Low fidelity Mobile app
Low fidelity TV player
Low fidelity TV player
Low fidelity TV player

Design and Production of the User Interface Style Guide

The user interface style guide is simply a reference sheet that gives information about:

  • size of the screen
  • what grid system will be used
  • what fonts are used in the creation of this design
  • what pixel size are the selected fonts
  • what color scheme will be used
  • buttons, icons and navigation specifications
Style guide for TV player

This is the style guide that was used for the redesign. Two fonts were used for the both designs Open Sans and Playfair Display. For the design of the TV player the font is a lot bigger than the one on the mobile device, because the users will use the TV player with a remote control from at least 5ft away.

The Screen resolution for the standard HDTV resolution is 1920x1080.

The grid system for the TV design will be separated in 12 columns so the positioning of the elements can be done quickly with precision.

Grid System for tv design example (12 columns)

The color scheme chosen for the redesign of the archive.org are white and green. The chosen green was selected, because it symbolize peace, freshness according to the meaning of colors by (Black, 2017).

Vinyl Color Scheme

Another interesting thing about the selected green for the redesign is that, it was selected for PANTONE color of 2017 . Pantone color mean it is a symbolic color selection of what is taking place in our global culture that serves as an expression of a mood and an attitude (Pantone.com, 2017).

Style Guide for the mobile application

The main difference from the TV player is that all user interface elements change their size. The selected screen resolution for the design of the mobile device is 640x1136 which is the one that iPhone 5 is supporting.

The grid system for the mobile design was chosen to be 4 column grid with a 20px gutter, splitting the screen on two part.

Four column grid system in Photohop

Medium Fidelity wire-framing

Taking into consideration the early low fidelity wire frames and the user style guide, it was time now to create the medium fidelity wire frames into wireframe.cc

TV player Medium fidelity wire frames

Home Page of the Archive.org page (Medium Fidelity wire frames)
Movie Section of Archive.org (Medium Fidelity wire frame)
Selected movie from the movie section (Medium Fidelity wire frames)

Mobile Application Medium fidelity wire frames

Mobile Home page Medium Fidelity wire frames
Mobile Movie Section Medium Fidelity Wire frames
Selected movie Mobile design Medium Fidelity wire frame

Clickable prototyping

The two designs are split in a two different web sites the TV player is on Invision app and the mobile app prototype is on Marvel.com.

Firstly we will talk about the TV player prototype and its usability and user experience.

Click here to see the prototype TV player Archive.org on Marvel app

The prototype design for the TV player is designed in a way that it can be controlled with a remote control.

Screen capture of the Home page of the TV playe
Screen capture of the Movie Section of the TV player
Screen Capture of the Horror section of the TV player
Screen capture of the Nosferato movie TV player

Clicking through the prototype the users will get the experience by clicking on the elements that each of the screens is going from right to left. This gives them an indication they are going forward in the user journey and it give a feel of similarity and continuity. When the user decides to go backward or click on the logo of the archive pages the screen moves from fight to left to give the feel to the user they are returning to the previous screen or the Home page.

The user experience for the mobile design is similar to the UX for the TV player, only the screen size and some elements are changed.

Click here to see the mobile version of the Archive.org on Invision app

Mobile Home page prototype
Mobile Movie Section prototype
Mobile Horror Section prototype
Mobile Nosferatu page prototype

Final design concept

Through our the whole process of designing one of the most essential thing was keeping everything clean and organized. To achieve this, it was really important every layer in Photoshop to have a proper name to indicate what information it consist.

The names of the artboards in Photoshop

For the needs of the design the whole design process was done in only one Photoshop file by using artboards. Using arboards gives the designer the opportunity, to duplicate easy and fast consistent elements like navigation, footer and icons.

Taking into consideration the research and the new trends in the web design this year the main focus was to create a clean, fresh and minimalistic user interface and also an enjoyable user experience showed with the help of the prototyping tools.

The new design for the collections on the home screen of the archive.com make it look way more appealing for the eyes of the user. The structure of the collections is designed using the grid in the Photoshop and no more have the inconsistency of vertical and horizontal alignment.

Home page
Movie Section

In the movie section the design still stays consistent and well structured as it was on the home page of the archive.org.

The only difference is that the elements increase their number and only show content related to the Movie Section.

Horror Page

As it comes for the selected Horror Section the design is a little bit different from the other two. Each movie is represented by its poster and the name of the movie. The white line behind the posters is creating an illusion that the posters float in the air and have, a bit like a 3D effect on them, which gives the design a fresh and trendy new look.

All redesigned pages for the TV player:

TV player Home page
TV player Movie Section page
TV player Horror page
TV player Download page

All redesigned pages for the mobile application:

Mobile application Home page
Mobile application Movie Section
Mobile application Horror page
Mobile application Download page

Conclusion

The purpose of this blog was to introduce, everything needed for creating a redesign/design from the early stages to the final concept design and prototypes. The blog aims to show to the readers how one UI/UX designer approach a certain problems and try to solve them by using the most recent trends and methods in the web design and development filed.

The research and analysis showed how the archive.org is analyzed and what observation and conclusions were made on its design, features and structure. After the research and the analysis it was time to start the design process. The designing started with the creation of low fidelity wire frame sketches, which were later developed in medium fidelity wire frames. For the final redesign Photoshop was used, because it offers the right tools for the design needs of the project.

The final step of the design process was to make a prototypes for the Mobile application and the TV player based on the current trends in the web design. The blog shows what prototyping tools were used and it gives a justification on why the prototypes were designed in the way they are. Above in the blog there are a few more suggestions for a prototyping tools which are worth checking out.

The use of waterfall methodology helped for the creative process of the design work by completing small tasks everyday in order to finish the project on time.

Overall the produced redesigned concepts for both the TV player and the mobile app follow the new trends in the web design. The user interface was completely visually redesigned and structured, also some elements disappeared and others changed their location in order to simplify and make the design consistent on each screen. The user experience was changed based on the latest prototyping trends and presented by an on line prototyping tools Invision and Marvel where the prototypes are live now.

Marvel app prototype TV player

Invision app Mobile app