tupperware brands catalogue augmented reality · feedback and continuous guidance during this...

TUPPERWARE BRANDS CATALOGUE AUGMENTED REALITY

NURSHAHIRA BINTI ENDUT

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019/2020

ii

DECLARATION

I hereby declare that this report is based on my original work except for quotations

and citations, which have been duly acknowledged. I also declare that it has not been

previously or concurrently submitted for any other degree at Universiti Sultan Zainal

Abidin or other institutions.

_____________________________

Name: Nurshahira Binti Endut

Date: ……………………......

iii

CONFIRMATION

This is to confirm that:

The research conducted and the writing of this report was under my supervision.

_______________________________________

Name: Dr. Wan Mohd Amir Fazamin Bin Wan Hamzah

Date: ……………..…………………………

iv

DEDICATION

First and foremost, I would like to express my gratitude to Allah S.W.T, the one

who allowed me to complete this project. Even facing with lots of difficulties in

completing the task, I still manage to complete it.

Then I would like to sincerely thanks to my supervisor Dr. Wan Mohd Amir

Fazamin Bin Wan Hamzah for the continuous support and help for this project.

Furthermore, I would like to appreciate the panel assessment members for their valuable

feedback and continuous guidance during this project presentation that have gave me a

help and support to keep improving this project.

Next, I would like to thanks my friends who have lend me their hand whenever

I need throughout this project. Last but not least, I also grateful and thankful to my

family for their continuous support and love to the end of this project.

v

ABSTRACT

Nowadays, the use of technology is increasing and expanding in human life. In

marketing world, the technology changes the way consumers find, engage with, and

purchase products, companies need to find innovative ways to gain brand visibility. The

latest technology of augmented reality marketing takes the available digital data and

creates an integrated 3-D image of a product. It allows consumers to experience that

product up close and personal. Brands that invest in interactive AR technologies can

quickly reach a large number of consumers, more robustly connect with prospective

buyers, and more easily motivate users to interact with their brands on a repeated basis.

Tupperware Brands Catalogue AR is a catalog that makes it easy for customers to see

more realistic Tupperware items in a 3-dimensional view by using smartphones.

Additionally, it also saves time, energy and customers financial without the need to go

to Tupperware’s stockist. Furthermore, it can maintain the use of catalogues and

enhance Tupperware's catalogue market. Thus, Tupperware Brands Catalogue AR can

overcome the existing catalogue become inattractive and boring. This application is

developed for all users or customers of Tupperware brand products. This application

makes it easy for customers or users to view Tupperware brand products from a 3d

dimension by using Augmented reality technology only. In conclusion, this project can

help user or customer and seller to see the whole angle of product brand Tupperware in

3-Dimensional view.

vi

ABSTRAK

Pada masa kini, penggunaan teknologi semakin meningkat dan berkembang dalam

kehidupan manusia. Dalam dunia pemasaran, teknologi mengubah cara pengguna

mencari, melibatkan diri, dan membeli produk jadi sebuah syarikat perlu mencari cara

inovatif untuk mendapatkan penonjolan jenama sendiri. . Teknologi terkini pemasaran

AR mengambil data digital yang tersedia dan mencipta imej 3 dimensi produ tersebut.

Ia membolehkan pengguna untuk mengalami produk itu sendiri dengan lebih dekat dan

peribadi.. Syarikat yang terlibat dalam teknologi AR interaktif dengan cepat boleh

mencapai sejumlah besar pengguna, lebih kuat untuk berhubung dengan bakal pembeli,

dan lebih mudah mendorong pengguna untuk berinteraksi dengan jenama mereka

secara realistik. Katalog Tupperware Brands AR adalah katalog yang memudahkan

para pelanggan untuk melihat baramgan Tupperware yang lebih realistik dalam

paparan 3 dimensi dengan menggunakan telefon pintar. Di samping itu, ia juga

menjimatkan masa, tenaga dan kewangan pelanggan tanpa perlu pergi ke stokis

Tupperware. Tambahan pula, ia dapat mengekalkan penggunaan katalog dan

meningkatkan pasaran katalog Tupperware. Oleh itu, Tupperware Brands Katalog AR

boleh mengatasi katalog sedia ada yang menjadikan tidak menarik dan membosankan.

Aplikasi ini dibangunkan untuk semua pengguna atau pelanggan produk jenama

Tupperware. Aplikasi ini memudahkan pelanggan atau pengguna untuk melihat produk

jenama Tupperware dari sudut 3 dimensi dengan menggunakan teknologi realiti

sahaja. Kesimpulannya, projek ini dapat membantu pengguna atau pelanggan dan

vii

penjual untuk melihat sudut keseluruhan produk jenama Tupperware dalam paparan 3

dimensi.

viii

CONTENTS

Page

DECLARATION ii

CONFIRMATION iii

DEDICATION iv

ABSTRACT v

ABSTRAK vi

CONTENTS viii

LIST OF FIGURES xi

LIST OF TABLES xiv

LIST OF ABBREVIATIONS / TERMS / SYMBOLS xv

LIST OF APPENDICES xvi

CHAPTER I INTRODUCTION

1.1 Introduction 1

1.2 Problem statement 2

1.3 Objektives 3

1.4 Scopes 3

1.5 Limitation of work 4

1.6 Expected result 4

1.7 Summary 4

CHAPTER II LITERATURE REVIEW

2.1 Introduction 5

2.2 Augmented Reality 6

2.2.1 Augmented Reality History 6

ix

2.3 Related works 8

2.3.1 Interaktif Augmented Realiti untuk katalog

Penjualan Rumah 8

2.3.2 Augmented Reality Tourist Catalogue Using

Mobile Technology 9

2.3.3 Augmented Reality For Real Estate 10

2.3.4 Overview of Smartphone Augmented Reality

Application For Tourism 11

2.3.5 Augmented Reality in Science Education –

Affordances for Student Learning 12

2.4 Comparison of existing application 15

2.5 Summary 15

CHAPTER III METHODOLOGY

3.1 Introduction 17

3.2 Methodology 18

3.2.1 Analysis phase 19

3.2.2 Design phase 19

3.2.2.1 Interface design 20

3.2.2.2 3D modelling 20

3.2.2.3 Develop storyboard 20

3.2.2.4 Prototype design 24

3.2.2.5 Navigation map 26

3.2.3 Development phase 27

3.2.4 Implementation phase 27

3.2.5 Evaluation phase 28

3.3 Requirement analysis 28

3.4 Framework 31

3.5 Chapter summary 31

x

CHAPTER IV DEVELOPMENT AND IMPLEMENTATION

4.1 Introduction 32

4.2 Implementation 33

4.2.1 Main Menu Page 33

4.2.2 Category Page 34

4.2.3 About Us Page 38

4.2.4 Help Page 39

4.2.5 Setting Page 39

4.2.6 AR Marker 41

4.2.7 3D Model 46

4.3 Testing 53

4.4 Result 53

4.5 Summary 53

CHAPTER V CONCLUSION

5.1 Introduction 54

5.2 Project Achievement and Contribution 54

5.3 Problem and Limitation 55

5.4 Future Work 55

5.5 Conclusion 56

REFERENCES 57

xi

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Example of marker-based 6

2.2 Augmeneted reality workflow 8

3.1 Addie model 18

3.2 Analysis phase 19

3.3 Interface of Homepage (English) 21

3.4 Interface of Category 21

3.5 Interface of Category’s List 22

3.6 Screenshot of Scan Camera 22

3.7 Interface of About Us 22

3.8 Interface of Help 22

3.9 Interface of Help 23

3.10 Interface of Setting 23

3.11 Interface of Homepage (Malay) 23

3.12 Interface of Model 23

3.13 Create model 25

3.14 Develop apps 25

3.15 Navigation Map 26

3.16 Framework of Application Development 31

4.1 Main Menu Page 33

4.2 Exit Button 34

4.3 Setting Button 34

4.4 Category Button 34

xii

4.5 About Us Button 34

4.6 Help Button 34

4.7 Category Page 35

4.8 The List of Category 36

4.9 Home Button 36

4.10 Scan Button 36

4.11 Show the 3D model on the screen device 37

4.12 Malaysia Tupperware Online Store Button 38

4.13 About Us Page 38

4.14 Help Page of Using the app 39

4.15 Help Page of Get Started 39

4.16 Setting Page 40

4.17 Malay Button 40

4.18 English Button 40

4.19 Sample of Marker (Food Container) 41

4.20 Sample of Marker Features (Food Container) 42

4.21 Sample of Marker (Bottle) 42

4.22 Sample of Marker Features (Bottle) 43

4.23 Sample of Marker (Plate) 43

4.24 Sample of Marker Features (Plate) 44

4.25 Sample of Marker (Bowl) 44

4.26 Sample of Marker Features (Bowl) 45

4.27 Sample of Marker (Glass) 45

4.28 Sample of Marker Features (Glass) 46

4.29 Bottle (1) 3D Model 47

4.30 Bottle (2) 3D Model 47

4.31 Food Container (1) 3D Model 48

4.32 Food Container (2) 3D Model 48

4.33 Plate (1) 3D Model 49


xiii


4.36 Bowl (1) 3D Model 50

4.37 Bowl (2) 3D Model 51

4.38 Glass (1) 3D Model 51



xiv

LIST OF TABLES

FIGURE TITLE PAGE

2.1 Related Work 12

2.2 Comparison of existing application 15

3.1 Hardware and usage 29

3.2 Software and usage 30

xv

LIST OF ABBREVIATIONS / TERMS / SYMBOLS

FYP Final year project

AR Augmented Reality

2D 2 Dimensional

3D 3 Dimensional

xvi

LIST OF APPENDICES

APPENDIX TITTLE PAGE

A Gantt Chart FYP1 59

B Gantt Chart FYP2 60

C Usability Testing 61

D Project Poster 62

1

CHAPTER I

INTRODUCTION

1.1 Introduction

Augmented reality (AR) is an interactive experience of a real-world

environment where the objects that reside in the real-world are "augmented" by

computer-generated perceptual information, sometimes across multiple sensory

modalities. This has made the use of augmented reality an important concept in sales

promotion. Media and technology have a positive impact on increasing the marketing.

The use of augmented reality technology have brought a great influence and potential

to the world of marketing.

Tupperware Catalogue Augmented Reality that contain product brand

Tupperware. Tupperware Catalogue AR that makes it easy for customers to see more

realistic Tupperware Brands product items in a 3-dimensional view by using

smartphones. Additionally, it also saves time, energy and customers financial without

the need go to Tupperware’s stockist. Furthermore, it can maintain the use of catalogues

and enhance Tupperware's catalogue market.

2

1.2 Problem Statement

There are various augmented reality applications of marketing that have been

developed to attract customer into increasing sales. But its lacking in lot of aspect. For

example, most of the application are develop not based on the actual model and simple.

However, lot of information still are not available in the application. Besides, it’s does

not have additional features that very interactive and the function is limited. So, this

kind of application is not practical anymore. In this section, the main purpose of

problem statement is to focus the attention of solution to the problems. There are three

main problems currently:

i. Customer's difficulty to view food container of Tupperware Brands product

realistically from a 3-dimensional angle.

ii. Lack of use Tupperware catalogue is due to the fact is online advertising.

(Peterson, R. A, 1995)

iii. The existing catalogue unattractive and bored for customer. (Kenneth C. Gehrt,

1999)

Without the effective marketing aid tool, the marketing process become less interesting

and difficult to them to understand about the application. As we know an early exposure

through the effective marketing aid tool is very important to increase their interest in

recognition of brands. Concise descriptions of the issues stated need to be addressed to

deal with the problem.

3

1.3 Objectives

There are the following objectives of Tupperware Brands Catalogue AR are:

i. To design Tupperware Brands Catalogue AR using mobile based application.

ii. To develop the application for the seller and growing recognition of brands.

iii. To test and evaluate the application is fully functional and ready to use for user.

1.4 Scope

The scope of this study is divided into:

i Technology of display virtual button of colour. This catalogue using Augmented

Reality technology with 3D modelling technique using Maya software and unity 3D

software to develop the Tupperware Brands Catalogue AR. For create this project

illustration is by using adobe photoshop and adobe Illustrator to make the virtual button.

ii Identify the marker-based of Augmented Reality Catalogue. For the AR features

by using Vuforia Augmented Reality SDK to detect and track the target, marker-based

technique is used for this AR application. C# language as the program language. The

module in this AR catalogue include language selection, scanning image on the

catalogue, knows the name of the product, the information about the product, and the

user can change the available of colour of product.

iii Animation augmented reality of product. For this project, animation is the main

purpose to attract the user as customer to use Tupperware Brands Catalogue AR and

can avoid the user from bored.

4

1.5 Limitation of Work

There is a limit when developing a mobile application. For this project, the

limitation was this application only compatible with Android mobile phone. Mobile

phone with IOS cannot access to this application. Moreover, this application did not

have sound. Users can only interact with the application such as click on the button of

colour, button of information and user can control the animation to make it moving in

and moving out. In mobile phones, limited processing power, small amount of memory

and little storage is a one limitation in this application. Thus, limitation of use this

application only to all Tupperware user.

1.6 Expected Result

The expected result by the end of the development of this project are:

i. The development of mobile Application using Augmented Reality Catalogue.

ii. This application can be used by the user as a customer using a Tupperware

Brands Catalogue AR to see the whole angle of each Tupperware product.

1.7 Summary

In conclusion, this chapter discussed about the introduction for the proposed application

such as problem statement, objectives, scope, limitation of work, expected result and

project schedule.

5

CHAPTER II

LITERATURE REVIEW

2.1 Introduction

This chapter will discuss about previous research thesis on same alike topic with

this project. There were few research thesis that were almost similar to this project. This

chapter will show the multiple technique that have been used for previous project such

as the software used to develop the project, the methodology used, the advantages and

disadvantages of every single project. Through this study, all the useful information will

be used to help developing this Tupperware Brands Catalogue AR. These information

will be the guideline for developing this project since there were few research thesis

that were almost similar to this project. In this project literature review, a research has

been made to understand and get some overview about existing project and related

technology.

6

2.2 Augmented Reality

In augmented reality, there are four types, Marker-less AR, Marker-based AR,

projection-based AR and superimposition-based AR. For Marker-less AR or it also

called as location-based AR because it known as position based AR and GPS based

augmented technology. In projection-based AR, its technology is based on AR

projection function where lights from the device projected on the objects. For

superimposition-based AR, the augmented image can replace the original image, either

partially or fully.

This study will focus on Marker-based AR. It also called Image Recognition or

Recognition based AR. Usually, 2D images are used to be the visual marker. The users

get the result when camera reader senses the marker. The figure 2.2 show the example

of marker-based AR.

Figure 2.1: Example of marker-based

2.2.1 Augmented Reality History

The beginning of the AR idea was in 1950s when Morton Heilig, a motion

cameraman, believed that cinema as an art that should be able to attract the audience

7

into the screen. During 1962, Heilig developed his idea model, called in 1955 as "The

Cinema of the Future", known as Sensorama, which existed before digital computing.

(Abrar Omar Alkhamisi, 2013).

Then the first Augmented Reality was first invented by a Professor and

Computer Scientist from Harvard name Ivan Sutherland in 1968. He invented a device

that he called The Sword of Damocles which is a head-mounted display. This device is

the first sort of augmented reality device that being invented by him and his student,

Bob Sproull. (Isberto,, 2018) During 1975 an artificial reality laboratory was established

by Myron Krueger. This laboratory or this video place is an area where user can deal

with the virtual elements for the first time easily.

Hence AR become a field of study in the early of 1990s. The first survey about

AR was conducted by Ronald Azuma in 1997 to introduced the exact meaning of AR

whereas he defined AR as assembling real and virtual environment together while both

of them is being recorded in 3D and interactive in real time. In 2000 the first mobile AR

game was invented by Bruce Thomas. This mobile AR game was displayed during the

International Symposium on Wearable Computers. Subsequently, more AR apps have

been designed primarily with mobile apps. e.g. Wikitude. After that, AR Travel Guide

was created in 2008. (Abrar Omar Alkhamisi, 2013) Figure 2.1 below show how the

Augmented Reality workflow.

8

Figure 2.2: Augmented Reality Workflow

2.3 Related works

A few articles have been studied to analyse and compare to find out what are the

weakness of the previous research that can be overcome. Besides, those articles also

used as references for this project.

2.3.1 Interaktif Augmented Reality untuk Katalog Penjualan Rumah Berbasis

Android

Augmented reality (AR) is a term for the environment that combines the real

world and the virtual world created by computers so the boundary between the two

becomes very thin and closer to a real (real) environment. Augmented Reality (AR)

allows users to interact with virtual objects and real objects in real life in real time.

Some applications are developed using augmented reality technology such as medical

applications, manufacturing, visualization, path planning, entertainment, and military

that have been explored.

The growth of property business in Indonesia every year has increased, however

9

not many property developers in Indonesia are using technology Augmented Reality

(AR) as a promotional medium to market the product, the average is still using

brochures. In addition to using brochures many property developers have create

applications about web-based home marketing or catalogues available on the web.

Research on building home catalogues using AR is not new, there are some similar

studies that have been done before, however concentrated on marker detection to

display 3D models using either special markers or brochures that are used as markers

In addition to concentrations on marker detection there are some features that are added

like home floor plans both 3D and 2D and 3D home based case studies taken

This research focuses on the manufacture of home sales catalogues using

technology AR by adding features that have not been in previous studies. Some features

Added is to change the colour of paint the walls, doors and windows on the home model

3D, so users can change colour according to the colours provided. (Eko, 2016)

2.3.2 Augmented Reality Tourist Catalogue Using Mobile Technology

Tourism studies have noted that insufficient attention has been paid to the

experience and practices of the tourist. Tourism research does not help to explain the

nature of modern mass tourism. The most detailed research that has been done is tourist

information seeking, but the literature has tended to avoid detailed qualitative

description, focusing more on broad categorizations of tourist practice. The purpose of

this article is to show how I will go about in creating a tourist catalogue that uses

augmented reality. This catalogue will help tourists both domestic and foreign get visual

aid for viewing objects on a simple map. This article shows the extent this new

technology has been explored in to and how much has been implemented. This article

10

focuses on explaining what augmented reality is and the methodology that will be used

to go about this new and unexploited technology.

The main benefit is that tourists are able to view variable information about an

object of interest that is placed immediately in context but there is still a lack of a wider

adoption by the general public as well as tourists, many of whom prefer more traditional

sources of information, such as, for example, paper-based guidebooks. The full potential

of smartphone AR for Tourism is still not widely explored. Therefore, the aim of this

study was to identify the key challenges that smartphone AR applications pose when

used to access tourism-related information in unfamiliar environments. This study is

part of an ongoing research project that examines the effective design of tourism

context-aware smartphone AR applications for on-site access to geo-tagged content.

(Mohamedali, 2010)

2.3.3 Augmented Reality For Real Estate

The real estate sector has already adopted this development achieving apps and

AR. So far, several real estate applications have been established. While there is only

few literature concerning AR in the field of real estate the mentioned applications are

the result of an extensive internet and literature research. In several publications AR

applications for real estate are partially mentioned. Jánszky/Schildhauer (2010) describe

the AR search of property regarding the app of the real estate search engine Immonet4.

The search of property is the best known and most distributed AR application in the

field of real estate. Sutau (2006) offers a classification which does not include real

estate applications. (Veronika, 2012)

11

This is an often seen fact in the literature that real estate applications are mixed

with architecture and other fields of applications. But real estate is still an enormous

economic factor. Additionally Mehler-Bicher et.al. (2011) offer a classification based

on fields of communication consisting of the sectors education,

collaboration, simulation, orientation and visualization in general and a role based

classification by which the fields of living environment and living architecture are

corresponding to fields of applications in real estate. Hayes (2009) classifies 16 AR

models. These models also cover a variety of real estate applications.

2.3.4 Overview of Smartphone Augmented Reality Applications for Tourism

Based on this article, a visual AR system enhances or augments the surroundings

of the user with virtual information that is registered in 3D space and seems to coexist

with the real world. Unlike traditional AR devices, such as head-mounted displays

(HMDs) and mobile laptops, smartphones combine all necessary technologies for

augmentation in one small device. This is also the first medium to introduce AR to the

mass market which has enormous potential for tourism. In a typical GPS-based

smartphone AR application for outdoor use, the user points the device towards physical

objects in their surroundings. They then able to see additional virtual information

overlaid on top of the real world camera view through virtual annotations. The type of

content and amount of information within the 13 virtual annotations varies amongst

applications and can include video, images, text or symbols for different types of

landmarks. Available data includes descriptions of tourist attractions, restaurants and

monuments. Other useful information, such as Wi-Fi spots, ATMs, car parks,

transportation, local news items, and weather can also be displayed in AR-view.

12

The main objective of this study was to explore the benefits and drawbacks of

current smartphone applications in their effort to support tourists roaming in unfamiliar

environments. It was found that when it comes to effective support of mobile on-site

needs of tourists, current smartphone AR applications is to provide access to location-

based. (Zornitza Yovchevaa, 2012)

2.3.5 Augmented Reality in science education – affordances for student learning

This paper presents findings related to augmented reality (AR) for educational

purposes, more specifically for Science Education in lower secondary school. When

reviewing research in the field, several researchers emphasize the importance of

focusing on the ways that AR technologies can support meaningful learning more than

the technologies themselves, acknowledging that the use of AR in education is still in

its infancy.

The aim is to develop a framework for designing and analysing AR in science education

based on rich qualitative data provided by expert teachers, researchers and designers

from Denmark, Norway, the UK and Spain. The table 2.1 is show the literature review

of article. (Birgitte Lund Nielsen, 2016)

Table 2.1 Related Work

Article Title Author/Year Platform Purpose

Interaktif

Augmented

Reality untuk

Katalog

Penjualan

Lailatul

Husniah et.al,

Fendy Saputro,

Eko Budi

Cahyono

i. Android

mobile

ii. Aplikasi

Unity

Research on sales catalogue

home using AR is also not

new, there are few similar

studies that have been done

before, but concentrated on

13

Rumah Berbasis

Android

(2016)

the detection marker to

display a 3D model using

either marker or special

brochures that serve as a

marker.

Augmented

Reality Tourist

Catalogue

Using Mobile

Technology

A. H. Lashkari,B

et.al, Parhizkar ,

M. A.

Mohamedali

(2010)

i. Android

mobile

ii. Aplikasi

Unity

iii. Autodesk

Maya

The aim of this article is to

show how I will go about in

creating a tourist catalogue

that uses augmented reality.

This catalogue will help

tourists both domestic and

foreign get visual aid for

viewing objects on a simple

map.

Augmented

Reality For Real

Estate

Veronika LANG

et.al, Peter

SITTLER

(2012)

i. Android

mobile

ii. Application

Unity

iii. AR

Browser

Market analyses assume a

rapid growth of the number of

augmented reality

applications. One field of

application is searching for

property via smartphone. On

the other hand there are

several real estate applications

concerning architecture,

14

buildings, refurbishment and

housing renewal and even

orientating in shopping center.

Overview of

Smartphone

Augmented

Reality

Applications for

Tourism

Zornitza

Yovchevaa

Dimitrios

Buhalisb

Christos

Gatzidisc

(2012)

i. GPS-based

AR

ii. Data

analysis

A visual AR system enhances

or augments the surroundings

of the user with virtual

information that is registered

in 3D space and seems to

coexist with the real world.

Augmented

Reality in

science

education

– affordances

for student

learning

Birgitte Lund

Nielsen

Harald Brandt

Hakon Swensen

(2016)

i. Delphi

Method

i. Data

analysis

Findings related to augmented

reality (AR) for educational

purposes, more specifically

for Science Education in

lower secondary school.

In conclusion, these applications were developed to help the learning process.

There were lots of things that could be the guide and reference to develop Tupperware

Brands Catalogue AR such as the methodology and the design that might fit for this

application. These article also help with the software that suitable and could be used to

develop the application. Improvement that will be implemented for this project’s

application is more animated graphic, more interaction between user as a customer with

15

the application. According to the research, this application is the first mobile application

that will provide interactive 3D Catalogue in application from Tupperware Brands.

2.4 Comparison of existing applications

The comparison between the existing applications and this project application are shown as in

Table 2.2 Comparison of existing applications.

Table 2.2 : Comparison of existing applications

Application

Interaktif

Augmented

Reality untuk

Katalog

Penjualan

Rumah Berbasis

Android

Augmented

Reality

Tourist

Catalogue

Using Mobile

Technology

Augmented

Reality For

Real Estate

Overview of

Smartphone

Augmented

Reality

Applications

for Tourism

Augmented

Reality in

science

education

Image Yes Yes Yes Yes Yes

Animation/

Video

No Yes Yes Yes Yes

Audio Yes Yes Yes No Yes

Text

Description

Yes No No Yes Yes

AR Method Marker-based

(Download

marker)

Marker-

based

(Download

marker)

Marker-

based

(Download

marker)

Marker-based

(Download

marker)

Marker-

based

(Using

flashcard)

2.5 Summary

This chapter discuss about an overview about the concept of the system.

Literature Review is important to help the developer to know the problem from the

previous system that can be improves or as a guidance of the flow of new system.

Besides, it helps the developer in understanding the system and the chosen techniques

16

more. There were few techniques that can be considered to be the guidance for this

project so it will meet its goals.

17

CHAPTER III

RESEARCH METHODOLOGY

3.1 Introduction

This chapter will explain the details about the research methodology and system

development methodology that being used in this proposed project. Research

methodology is a systematic procedure or technique to solve a problem. According to

(Oxford University Press, 2018) methodology is defined as a system of methods used

in a particular area of study or activity, it is the analysis of the principles or procedure

of inquiring in a particular field. The project methodology is being used to solve all the

problems arising in the system analysis systematically to ensure this project is

completed and meet the objectives. It is important to decide what is the problem occur

and what kind of method that are suitable to overcome the problem in the proposed

project.

18

3.2 Methodology

Methodology that was suitable to be used to develop this application is ADDIE.

The Addie model is an instructional design methodology used to help organize and

streamline the production of your course content. ADDIE method is a one of effective

method from cost, time, energy and it also systematic method. ADDIE method consist

of five phase which is Analysis Phase, Design Phase, Development Phase and

Implementation and Evaluation Phase. ADDIE is an acronym for every phase. It is

analysis, design, development, implementation and evaluation.

The ADDIE model is basically a generic, systematic, step-by-step framework

used by instructional designers, developers and trainers to ensure course development

and learning does not occur in a haphazard, unstructured way (Castagnolo, 28 2008)

This approach is very useful because having stages clearly defined every phase of

developing this project.

Figure 3.1 Addie model

19

3.2.1 Analysis Phase

In this first phase which is analysis phase where is important to determine the

requirements and the needs of the application. It was important to identify what was

needed and suitable to be applied to the application since this application will be used

to all user as a customer of Tupperware Brands product. In this phase, any problems or

constraints that might happen when developing the application were also considered to

make sure the application will achieve the initial purpose. The analysis phase clarifies

and identify the problem statement, objective, target user, content, strategy and

requirement.

Figure 3.2 Analysis phase

3.2.2 Design Phase

In this phase, there were few processes that need to be done to give a clear

picture of the application such as the sketching of the storyboard, framework for the

application, prototype which is the screen design that will help to ease the development

20

process since it will give guidance throughout the process. The design phase should be

systematic and specific. Information gathered during analysis phase is reviewed and

compiled.

3.2.2.1 Interface Design

To design the interfaces need to use several software such as Adobe Photoshop,

Adobe Illustrator and Adobe InDesign. Interface is as a guide to create the real project.

In designing the interface requires high creativity so that the interface looks appealing

and fits into the theme and the title it brings. In this project, based on the title eclipse,

the interfaces designed with outer space view include the background and the buttons.

3.2.2.2 3D Modelling

3D modelling is the process of developing a mathematical representation of any

surface of an object either inanimate or living, in three dimensions via specialized

software such as Autodesk Maya, Blender and Autodesk 3ds Max. 3D modelling is

creating 3D model that were sketch as 2D. Modelling object need high creativity to

design every detail on the objects. After model has been developed, the next step is

texturing which it needs to put colour and texture on the model. The colour used is the

original colour of the object in the real world as example the sun has reddish orange

colour and some white yellowish. The texture is a special effect on the model so that

the model looks more realistic as example the moon has rough and cratered texture.

3.2.2.3 Develop Storyboard

After designing the interfaces, developing storyboard also an important step and

requires high creativity. The function of developing the storyboard is to show the

21

change from one interface to another interfaces when the button in interface was

clicked. Storyboard is to make it easier for developers to understand the navigation keys

contained in the project storyboard. Storyboard is a sketch or illustration in purpose of

pre-visualization the design that will be implemented for this application.

Figure 3.3 Interface of Homepage(English) Figure 3.4 Interface of Category

22

Figure 3.5 Interface of Category’s List Figure 3.6 Screenshot of Scan Camera

Figure 3.7 Interface of About Us Figure 3.8 Interface of Help

23

Figure 3.9 Interface of Help Figure 3.10 Interface of Setting

Figure 3.11 Interface of Homepage(Malay) Figure 3.12 Interface of Model

24

Storyboard is the primary guide for the design of this application but it also can

change according to suitability and circumstances happen in the future. Figure 3.3:

Storyboard 1 shows the starting page of the application where the user will enter their

name. Figure 3.4: Storyboard 2 show the page of category. Figure 3.5: Storyboard 3

show the page of category’s list that show to user the product of each category. Figure

3.6: show the page when user click scan camera button.. Figure 3.7: Storyboard 4 shows

the page of about us. Figure 3.8 and 3.9: Storyboard 5 shows the page of help. Figure

3.10: Storyboard 6 shows the page of setting. Figure 3.11: Storyboard 7 shows the page

of homepage(Malay). Figure 3.12: shows the page of category’s list product. All of this

are the example and guideline of how the contents of this application will look like and

additional design will be implemented according to circumstances and suitability of the

application in the development phase.

3.2.2.4 Prototype (Screen Design)

Prototype is an early sample or model of a product built to test a concept or

process. In this project, the screen designs were developed to show how the application

will work such as the button and the 2D animated graphic. Figure 3.13 below show

develop model in Autodesk Maya and Figure 3.14 below show develop button in unity.

25

Figure 3.13 Create model

Figure 3.14 Develop apps

Prototyping is where the functionality of the application was shown. In this process, the

functionality of the button, the animated graphic and any function that should be done

are recognized to make sure its meet the objectives of this application.

26

3.2.2.5 Navigation map

Navigation map is a basic structure of a system or generally the concept of a

system. Figure below show the flow of application for Tupperware Brands Catalogue

AR. In developing this project, a navigation map was created to illustrate the continuity

between one interface and one another. In addition, the navigation map also serves to

give you an overview of what is contained in this project. Figure 3.15 below show

navigation map .

Figure 3.15 : Navigation Map

For this application, the users will enter the application homepage. The users

can see the homepage that contain 5 button at homepage where is scan category, about

us, help, exit and setting. Each of the button have their own function. At the first button

which is button of category, this is page for category where there are five list of category

then the user need to click the scan camera and scan the marked-based of catalog to see

27

the 3 dimensional product from the whole angle. The second button which is button of

about us, it is about the information of background Tupperware product. The third

button which is button of help, at this page it is about the instruction for the user to use

this application.At the button of setting, this page for the user to choose the language of

the application that available. And lastly the button of exit, this button it use for user

when user want to exit from the application.

3.2.3 Development phase

Development phase is where the application will be develop using the chosen

software where the software is the suitable software to develop the 2D environment

mobile application. The software is Unity3D to create the Virtual Reality app and

overall project and modelling 3D object. Then, the models imported into unity3D for

the next process which is to arrange the position of the model and its environment. This

phase have 3 stage which is at the first stage is pre-production that contain the idea,

script and storyboard. The second stage is production that contain texturing, rendering,

modelling, building AR and create marked-based phase. The third stage is post-

production that contain compositing and final output.

3.2.4 Implementation phase

In the implementation phase, several tests have been performed on prototypes

that have been developed during the development phase. Tests are conducted from one

interface to another interface to make sure no mistakes occur. If there are errors, it will

be corrected and re-tested until there is no mistake. This phase is crucial to ensure no

defects and no errors in the project that being developed.

28

3.2.5 Evaluation phase

In the last phase for the ADDIE method is evaluation phase where need to gather

feedback from user and iterate process to improve deliverable. This phase to publish the

final output and to evaluate the usability study for user based on the application.

Evaluation phase provides a final review checkpoint for the project. During this

evaluation phase, the supervisor and panels measure how well the project achieved its

goals and provide their feedback.

3.3 Requirement Analysis

In this section, hardware, software and it usage throughout this project are listed

below. Table 3.1 below show hardware and usage. Table 3.2 below show software and

usage.

29

Table 3.1: Hardware and usage.

Hardware No. Hardware Usage

1.

Laptop Acer Nitro 5

(AN515-51)

(Processor Intel i5)

Used to write the proposal

and report for this project.

2.

Smartphone Vivo Y71

(Android 8.1 Oreo)

(3GB RAM)

Used for test the

functionality of the

application.

3.

Hard disk To copy all files and as a

backup to the project.

4.

Printer

To print the report or any

required sheet.

5.

Pendrive SanDisk 64GB

To store the backup file

and project

30

Table 3.2: Software and usage.

SOFTWARE No Software Usage

1.

Unity3D

Used to create the Virtual

Reality app and overall

project and modelling 3D

object

2.

Autodesk Maya

Used to create 3D

character model

3.

Vuforia

To create Augmented

Reality

4.

Microsoft Word Used to complete the

proposal writing and

report writing for the

project.

5.

Adobe illustrator CS6

(64bit)

To create and design

page

6.

Adobe Photoshop Cs6 Used to design the layout

needed.

31

3.4 Framework

Framework is a basic structure of a system or generally the concept of a system.

Figure 3.16 below show the framework for Tupperware Brands Catalogues AR.

Figure 3.16 : Framework of Application Development

3.5 Chapter Summary

This chapter discusses the methodology for the application development,

hardware and software required to develop the application. Every phase in the

development follows the project methodology mentioned earlier in this chapter.

Application requirements regarding the hardware and software required to develop the

augmented reality were briefly explained. This chapter also discuss every phase in

ADDIE model which are analysis, design, develop, implement and evaluation. Every

phase were briefly explained in this chapter.

32

CHAPTER IV

IMPLEMENTATION AND EVALUATE

4.1 Introduction

This project is implemented as an android application by using Unity which

is Unity’s industry-leading developer experience combined with tools purpose-built

for AR creators and unified workflow across AR devices to push the bounds of user

imagination. We have the custom resources to bring user immersive vision to life.

This project also used C# language to connect in the Visual Studio to the Unity of

application.

The core of project is focused on user site only. The user has functions are

selecting the AR camera, taping on the screen to get more detailed about the object,

zoom in for enlarging the map, zoom out for shrink the object and rotate the object

about 360. User also can selecting collection to see all of object contained by 2D

graphic.

33

4.2 Implementation

The implementation phase refers to the actual delivery of the instruction. The

purpose of this phase is to give the effective and efficient delivery of a fully functional

application. This project is to develop and implement as an android application by

using the main software by using Unity 3D that integrated with Vuforia. Furthermore,

this project use C# as the programming language for writing script.

4.2.1 Main Menu Page

Based on the Figure 4.1 below show the home page. This page has 4 buttons

which is Category Button, About Us Button, Help Button, Setting Button and Exit

Button.

Figure 4.1 Main Menu Page

34

Figure 4.2 Exit Button

Figure 4.3 Setting Button

Figure 4.4 Category Button

Figure 4.5 About Us Button

Figure 4.6 Help Button

4.2.2 Category Page

Figure 4.7 below show the Category page for show the list of category of

product. User need to get the catalogue which are called as marker-based. Next, user

35

can scan the image on the catalogue using AR User need to click button category to

see the list of category as seen in figure 4.8. There are five category which is food

container, bottle, glass, bowl and plate. The figure 4.9 is a home button for user to go

back at the home page. The figure 4.10 is a scan button for user scan the catalogue and

the 3D models will pop out automatically on the mobile phone screen as seen as in

figure 4.11. The model will automatically appear on the screen of user’s device based

on pages of catalogue.

Figure 4.7 Category Page

36

Figure 4.8 The list of category

Figure 4.9 Home Button

Figure 4.10 Scan Button

37

Figure 4.11 Show the 3D model the screen device

Figure 4.11 show after selecting AR Camera button, AR view will appear

and user can scan the catalogue (Tupperware Brands Catalogue AR) as provided

from the developer. There has a lot of button for user friendly application. The

figure 4.12 is a button for Tupperware Malaysia Online Store for the user click and

directly to the website of Tupperware Brands for making the order. The user can

click the home button to go to Category page as shown as in figure 4.8. User also

can choose and change the color that available. The color that available in four color

which is blue, yellow, red and green.

38

Figure 4.12 Malaysia Tupperware Online Store Button

4.2.3 About Us Page

Figure 4.13 below show the About Us Page. This page shows the background of

Tupperware Brands. The user can click the home button to go to Main Menu Page as

shown as in figure 4.1

Figure 4.13 About Us Page

39

4.2.4 Help Page

Figure 4.14 below show the Help Page. This page shows how to use this

application. The user can click the home button to go to Main Menu Page as shown as

in figure 4.1. There is two button in help page, button Using the app as show in figure

4.14 explain what does app do while the button Get Started as show in figure 4.15

explain the function of scan camera when the 3D appear on screen.

Figure 4.14 Help Page of Using the app Figure 4.15 Help Page of Get Started

4.2.5 Setting Page

Figure 4.16 below show the Setting Page. This page the user can choose and

change the language of application in Malay or English. As show in figure 4.17 and

40

4.18. The user can click the home button to go to Main Menu Page as shown as in

figure 4.1.

Figure 4.16 Setting Page

Figure 4.17 Malay Button

Figure 4.18 English Button

41

4.2.6 AR Marker

Image recognition is an imperative component of augmented reality systems.

By use of identifying visual markers already embedded within the system, physical

world objects are detected for superimposition of virtual elements. In order for an

AR application to estimate the orientation and position of a camera with respect to

the real world frame, most applications employ a tracking technique known as

marker based augmented reality.

Once you begin using the marker-based augmented reality system with a digital

device, the image of the physical world captured by your camera is converted into

a grayscale image to expedite the image processing algorithm. The algorithm then

uses the image of the camera as well as the decoded marker ID to augment the

virtual object onto the physical world model. By focusing the camera of whichever

digital device you are using to deploy the augmented reality app on the specified

markers, the app is able to retrieve the information stored to display the three-

dimensional virtual object accurately.

Figure 4.19 Sample of Marker (Food Container)

42

Figure 4.20 Sample of Marker Features (Food Container)

Figure 4.21 Sample of Marker (Bottle)

43

Figure 4.22 Sample of Marker Features (Bottle)

Figure 4.23 Sample of Marker (Plate)

44

Figure 4.24 Sample of Marker Features (Plate)

Figure 4.25 Sample of Marker (Bowl)

45

Figure 4.26 Sample of Marker Features (Bowl)

Figure 4.27 Sample of Marker (Glass)

46

Figure 4.28 Sample of Marker Features (Glass)

4.2.7 3D Model

Augmented Reality is a combination of 2D objects or 3D objects in real 3D

environment and present them into virtual objects in a real time. 3D modeling is the

process of developing a mathematical representation of any surface of an object either

inanimate or living in three dimensions via specialized software. The product is called

as a 3D model. This project created 3D model using Autodesk Maya. When users scan

the marker, the 3D model will appear at the mobile phone screen based on the marker.

12 product model 3D have been created by using Autodesk Maya software. Below are

12 pictures of 3D model that contained in the Tupperware Brands Catalogue

Augmented Reality. In real time when scan the catalogue, the model can zoom out and

zoom in, rotate, drag move position and change color.

47

Figure 4.29 Bottle (1) 3D Model

Figure 4.30 Bottle (2) 3D Model

48

Figure 4.31 Food Container (1) 3D Model

Figure 4.32 Food Container (2) 3D Model

49

Figure 4.33 Plate (1) 3D Model


50


Figure 4.36 Bowl (1) 3D Model

51

Figure 4.37 Bowl (2) 3D Model

Figure 4.38 Glass (1) 3D Model

52



53

4.3 Testing

Testing is one of an important phase in the development of the project. This phase

to test the system or application whether it fully function or vice versa. There are three

types of testing in this phase to test the application which are unit testing, integrate

testing and application testing. Unit testing is carried out to verify the functionality of a

specific section code. Integration testing is to exposed defect in the application

interfaces and interaction between module.

4.4 Result

The expected result after releasing of the application Tupperware Brands

Catalogue Augmented Reality is user should be able to get the easier way to view the

product of Tupperware. Tupperware Brands Catalogue AR can reduce decreasing of

catalogue marketing and can attract more customer to use this catalogue. The advantage

of Tupperware Brands Catalogue AR application is does not use an internet connection

and user can save the cost without need go to stockiest to see the product of Tupperware.

The developer also expected that the system could function well and fulfill the

satisfaction of user.

4.5 Summary

In this chapter of implementation and testing, it has been described and show all

the user interfaces in the application. Testing also an important part to make sure that

all the functionality has been achieve and run smoothly. Maintenance should also be

carried from time to time to check whether there are any bugs detected. This phase will

repeat to ensure the error can be minimized and the application will be optimized.

54

CHAPTER V

CONCLUSION

5.1 Introduction

In this chapter, the result of the project is discussed and concluded. The

content of this chapter will summarize the overall contribution.

5.2 Project Achievement and Contribution

By the end of this study, Tupperware Brands Catalogue Augmented Reality

enhanced using AR technology is an interactive catalogue that uses new era technology

to help people, especially to enhance the growing recognition of brands as well as

technology advanced. Furthermore, it is develop application for customers using

interactive application to make customer more easier with 3Dimensional view. This

application also develop for customers using interactive approach. Additionally, users

can see the 3D model of product Tupperware Brands with whole angle. It has achieved

the objectives and scope of this project. Below is the list of the achievement on this

55

project :

i. The successful of augmented reality technology to create Tupperware Brands

Catalogue.

ii. Design and develop Tupperware Brands Catalogue AR that attract users to use

the catalogue with AR features.

iii. Test the functionality of Tupperware Brands Catalogue using augmented reality.

5.3 Problem and limitation

Every application need some limitation to ensure it perform perfectly. There are

few problems found during process in order to achieve the target and objectives. The

problem occur during the development of the application as the following :

i. Tupperware Brands Catalogue AR is not an internet based application, so user

cannot directly buy or order the product that available in application, so they

need to click official Tupperware website to proceed the order.

ii. Lacking of knowledge in this field also make the project development harder

since the tutorial for the selected method are limited.

iii. The type of object which is Tupperware’s product is unsuitable for animation.

5.4 Future Work

Tupperware Brands Catalogue Augmented Reality still has a lot of to be

improved. There is some suggestion that can be made in order to upgrade the application

to be more efficient in the future. Since this AR Application only have marker-based

and basically Tupperware’s product are suitable by using marker-less method. This AR

Application can also build into e-commerce application that specialized to add-to-cart

56

the selected item without go to their website. I hope this application might be a sell in

the market so that the seller and user can gain knowledge with technology augmented

reality. Lastly, this AR Application also can add more interaction to give attraction for

user to using and applied more detailed in their information.

5.5 Conclusion

As a conclusion, Tupperware Brands Catalogue Augmented Reality is the

application that help the user or customer more easier to see the product with 3D view.

ADDIE model has been used in this system to analysis, design, development,

implementation and evaluation the suitable category or type of mobile devices for user’s

daily life. The storyboard interface design that included in this report can also act as a

guideline for user to use this system. Furthermore, with development of this application,

its will enhance the brands of company that is follow 4th revolution industry. Finally,

the developer hopes this application can use for the business market and achieve the

user expectation. So, the application can give better solution or suggestion to them while

giving feedback for improving the application in the future.

57

REFERENCES

Bulearca, M., & Tamarjan, D. (2010). Augmented reality: A sustainable marketing

tool. Global business and management research: An international journal, 2(2),

237-252.

Bonetti, F., Warnaby, G., & Quinn, L. (2018). Augmented reality and virtual reality in

physical and online retailing: A review, synthesis and research agenda.

In Augmented reality and virtual reality (pp. 119-132). Springer, Cham.

H. Lashkari, B. Parhizkar, M. A. Mohamedali (2010) Augmented Reality Tourist

Catalogue Using Mobile Technology, Second International Conference on

Computer Research and Development, doi:10.1109/ICCRD.2010.5

Hahn, J. (2012). Mobile augmented reality applications for library services. New library

world, 113(9/10), 429-438.

Jiaoe Wang, Fengjun Jin, Huihui Mo and Fahui Wang (2009). Spatiotemporal evolution

of China’s railway network in the 20th century: An accessibility approach.

Journal of Transport Geography, Volume 43, Issue 8, October 2009, Pages 765-

778.

Kothari, C. (2004). Methods of Data Collection. In C. Kothari, Research Methodology,

Methods and techniques (p. 110). Jaipur: New Age International (P) Limited

Publishers.

Lailatul Husniah, Fendy Saputro, Eko Budi Cahyono (2016) Interaktif Augmented

Reality untuk Katalog Penjualan Rumah Berbasis Android, Interactive

Augmented Reality, 1, 33-38, ISSN 2503-2259

Oxford University Press. (2018). Dictionary : Methodology. Retrieved from

58

en.oxforddictionaries.com:

https://en.oxforddictionaries.com/definition/methodology

Rouse, M. (n.d.). Definition: Augmented Reality. Retrieved from

whatis.techtarget.com: https://whatis.techtarget.com/definition/augmented-

reality-AR

Rajappa, S., & Raj, G. (2016, January). Application and scope analysis of Augmented

Reality in marketing using image processing technique. In 2016 6th

International Conference-Cloud System and Big Data Engineering

(Confluence) (pp. 435-440). IEEE.

Steve Chi-Yin Yuen, Gallayanee Yaoyuneyong, and Erik Johnson (2011). Augmented

Reality: An Overview and Five Directions for AR in Education. Journal of

Educational Technology Development and Exchange (JETDE) : Vol. 4 : Iss. 1 ,

Article 11.

Shekhtman, L., & Thompson, J. (2018, October 9). Overview: Our Solar System.

Retrieved from solar system.nasa.gov: https://solarsystem.nasa.gov/solar-

system/our-solar-system/overview/

Veronika LANG, Peter SITTLER (2012) Augmented Reality For Real Estate, 18th

Annual PRRES Conference, University of Applied Sciences of the Chamber of

Commerce Vienna

Yaoyuneyong, G., Foster, J., Johnson, E., & Johnson, D. (2016). Augmented reality

marketing: Consumer preferences and attitudes toward hypermedia print

ads. Journal of Interactive Advertising, 16(1), 16-30.

https://en.oxforddictionaries.com/definition/methodology

https://whatis.techtarget.com/definition/augmented-

https://whatis.techtarget.com/definition/augmented-

https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/

https://solarsystem.nasa.gov/solar-system/our-solar-system/overview/

59

APPENDIX A (GANTT CHART FYP1)

60

APPENDIX B (GANTT CHART FYP 2)

ACTIVITY WEEK

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Project Meeting with

Supervisor

Project Development

Proposal Progress

Presentation &

Evaluation

Project Development

Project Testing

Submit Draft Report

and Documentation

of the project

Seminar Presentation

Discussion &

Correction Report

Final Thesis

Submission

61

APPENDIX C (USABILITY TESTING)

User Testing “Smart Furniture Catalogue using Augmented Reality”

1. Interface in this application interesting? * Tick only one oval

Yes

No

2. All button in this application function? * Tick only one oval

Yes

No

3. This application can give benefits to you? * Tick only one oval

Yes

No

4. Do you feel interesting while using this application? * Tick only one oval

Yes

No

5. Do you think this application can enhance company brander? * Tick only

one oval

Yes

No

6. Any suggestion to improve this application?

62

APPENDIX D (PROJECT POSTER)

tupperware brands catalogue augmented reality · feedback and continuous guidance during this...

Documents