DEVELOPMENT OF WEB APPLICATION FOR PACKAGING DESIGN

The International Journal of Multimedia & Its Applications (IJMA) Vol.13, No. 5, October 2021
DOI:10.5121/ijma.2021.13501 1
DEVELOPMENT OF WEB APPLICATION
FOR PACKAGING DESIGN
Rawiphon Charunphankasem
Multimedia Technology, Department of Mass Communication Technology,
Rajamangala University of Technology Phra Nakhon, Bangkok, Thailand
ABSTRACT
The majority of One Tambon One Product (OTOP) entrepreneurs desired a new packaging design that
attracts the attention of consumers. The aims of this research were to 1) determine the packaging demands
of entrepreneurs, 2) develop a conceptual framework for web applications, and 3) create web applications.
Finally, 4) to ascertain entrepreneurs' satisfaction with the use of web applications in packaging design.
The demographic and sample were recruited from the central region's population, entrepreneurs, and
customers. Purposive sampling was used to choose 400 entrepreneurs and customers in Saraburi province.
The main result was that requirement of entrepreneursabout package must be easy to portable. And Web
Application must be also easy to use. By opinion of experts the result of web application development was
overall high level and satisfaction of web application that help entrepreneurs to design package was high
level. So the benefit of research is that entrepreneurs had web application to design the package and lower cost.
KEYWORDS
Web Application, Packaging Design
1. INTRODUCTION
Nowadays, technology has become an integral part of our lives. The advancement of technology
has altered the landscape of the world. Today, we enter the information technology era, which
will impact science advancement in every industry, including work, medicine, commerce,
business, entertainment, education, and communication. The global community places a premium
on investment in information and communication technology: ICT [1]
As much as companies are concerned, the web application is akin to a key to every brand. That is
why the web application should also be professional in appearance and serve as a reflection of the
customer's business. Prior to developing any web application, we need to gather all relevant
information about the web application that will be developed, as well as the customer's
requirements. Depending on the website, a suitable model for developing the web application
should be chosen. After discussing the process, we will adhere to a specific software
development architectural pattern based on the requirements gathered from the customer. The
most critical aspect of designing a web application is selecting the suitable programming
language for development and the framework for making the website more secure and user-
friendly. [2]. A comprehensive approach is required for the web application, which encompasses
numerous facets, including technical, organizational, and legal/philosophical dimensions. As a
result, information processing methodologies, techniques, and tools have been extended to
facilitate the development of these types of applications, for example, Object-Oriented Web
Solutions. Abstract modeling techniques have been used to define needs for web-based software
development processes abstractly; for example, use cases and scenarios have been applied to

2
functional model requirements. [3] According to the study, 400 OTOPentrepreneurs in Thailand
expressed frustration with the inability to create their own product packaging. As a result, the
manufacturing cost is relatively high. Additionally, they were questioned about their use of
mobile phones. We discovered that the majority of entrepreneurs now use cell phones. From the
aforementioned issues, the researcher came up with the idea of developing a web application to
assist entrepreneurs in designing OTOP packaging for internationalization, which is expected to
contribute to community economic growth by upgrading community products to larger markets at
the Association of South East Asian Nations ( ASEAN) and international levels, thereby
increasing the opportunity for OTOPproduct. This is a cultural product that will add to the
country's strength.
2. POPULATION AND SAMPLE
2.1. Sample selection procedure and method
The population for this study was composed of individuals with at least five years of relevant
experience, which included six OTOP product specialists, six packaging design specialists, and
five web application design specialists, for a total of seventeen individuals. The specialists used
in the process of media synthesis and quality determination are those with a doctoral degree or an
academic position equivalent to an assistant professor in computer science or a related field, or
those with at least ten years of teaching experience, for a total of five people. Purposive sampling
in Saraburi Province was used to select 400 consumers and entrepreneurs for this study. Interview
guides and questionnaires were used as research instruments.
2.2. Measuring characteristics of variables
The measurement of variable characteristics consisted of entrepreneurs' satisfaction, consumers'
satisfaction, the efficiency of web applications for designing OTOP product packaging to
promote marketing, and entrepreneurs' satisfaction towards the use of web applications for OTOP
product packaging design to promote marketing.
2.3. Reliability and Accuracy
2.3.1. A questionnaire on the packaging needs of consumers and entrepreneurs was developed
from the collection of Define questions in accordance with the research objectives. Then
a questionnaire was created and pre-tested with 40 samples to test their
reliability. Additionally, determine the reliability coefficient for Cronbach's Alpha
Coefficient, which must be greater than 0.7. The reliability of the questionnaire used in
the trial is 0.85.
2.3.2. An in-depth interview with packaging design specialists and web application specialists
on OTOP product packaging design issues and determine the tool's quality by checking
the content validity by having experts review content, consistency, content coverage, and
the correctness and appropriateness of the questions.
2.3.3. A Form for Evaluating the Performance of a Web Application. The researcher developed
a Web Application Effectiveness Assessment Scale as a five-level Rating Scale
encompassing the following: 1) web applications that are simple to use; 2) web
applications that are stable in use; and 3) web applications that can be used on a variety
of platforms. 4) Web applications use the appropriate color scheme for their intended
audience 5) Web-based applications utilize the proper screen size 6) This web application

3
is beneficial to users. 7) Overall satisfaction. The researcher presented the web
application performance evaluation form to five experts to verify the content validity,
determine the IOC (Index of Item-Objective Congruence), and discovered that each item
has a value between 0.67-1.00, which is greater than 0.50, indicating that the web
application is usable.
2.3.4. A survey of entrepreneurs' satisfaction with web applications for packaging design. The
researcher developed a Web Application Effectiveness Assessment Scale as a five-level
rating scale covering the use of web applications in packaging design. The scale was
developed by collecting and defining questions according to the research objectives and
pre-testing with a group of twenty samples to determine the scale's reliability and
confidence coefficient of Cronbach's Alpha Coefficient, which has acceptance criteria of
0.7 or more. The questionnaire used in the pre-test had reliability equal to 0.73.
2.4. Statistics used in research
1. Qualitative data analysis is a form of content analysis in which the researcher extracts
information from an in-depth interview by paraphrasing it, then compiles and synthesizes it to
facilitate interpretation. Summarize and present the findings in accordance with the issues.
2. Quantitative data analysis: after the researcher collected field data via questionnaire,
all data were selected, organized, grouped, and analyzed by computer using a statistical program
and descriptive statistics, including frequency and percentage.
3. DEVELOP WEB APPLICATION
The development of Web Application adhered to the ADDIE model's design principles [4], and
the draft Web Application design was sent to experts with doctorate degrees or academic
positions equivalent to Assistant Professor in computer science or related fields, or who have at
least ten years of teaching experience. Five individuals evaluated the media's efficiency [5] and
noted that the background color style, font, screen size, usage menu, image recording format,
photo printing pattern, interactive buttons within web applications, and content within web
applications all contributed to the efficiency of the media. It should be incorporated into the
development of web applications and can be used to benefit consumers and entrepreneurs.
Regarding packaging and labels designed with color patterns, patterns, and characters, they can
be used in real life, and it was suggested that we add a print and save format that allows for
saving as.png and.pdf files.
Figure 1. System structure of the De-otop Web application
Web applications are developed in two primary languages: JavaScript library [6], which is used
to create applications, and Microsoft.NET Core [7], which is used to create servers that
communicate with databases and other applications. Apps, also known as Used to write APIs
(APIs) for the PostgreSQL database.
Web Application
JavaScript library
API
(Microsoft.NET Core)
DB

4
API design with Visual Studio 2019 is a tool for developing APIs in the.NET Core programming
language. It consists of establishing a database connection, managing data, and transmitting data
to the database via an API. .NET Core will use an intermediary called Entity Framework to
communicate with the database. Any Entity Framework method that saves or retrieves data will
be invoked via Entity Framework.
Figure 2. An illustration of how to retrieve user data from the User API.
Figure 2 illustrates how the Entity Framework's "_context.User.FindAsync" method is used to
retrieve user information by ID.
The information that requires saving or editing the database is managed via the Entity
Framework. However, if the data is of a media type such as images or files, it is saved to the
server, partitioning it according to the recorder's ID.
Figure 3. File Management Functionality
API traffic, which will be received as JSON via HTTP from the application, will consist of nine
endpoints with the following HTTP traffic types: POST, GET, PUT, and DELETE.
Because the database is managed by the Entity Framework, a Code-First approach is used to
design it, which is a method for designing a database without having to know the language used
to write the database, which is the Code-First principle used to write a model first, which is also
used as a database structure.
After running the commands dotnet migration dt-user and update-database at the Terminal, the
User database will be automatically created in the PostgreSQL database. This step will define the
program's appearance. The program page will be designed by a designer using the principles of
Google Material Design, resulting in a simple and easy-to-use program page. The language used

5
to develop applications is ReactJS, which is extremely powerful in terms of user interaction and
data access and runs on all platforms. The program is divided into two sections: the front-end and
the administrative back end (Dashboard).
Three structures comprise the front-end systems: A Header zone, a Content zone, and a Footer
zone, which is also a Header zone. This is the section where the application names and menus are
displayed. The content zone contains the items selected from the menu, while the footer zone
contains the project's or university's name.
The dashboard system is divided into three sections: the Side Menu, the Header Zone, and the
Content Zone.
Figure 4. Administration page
As illustrated in Figure 4, the Content Zone will change in accordance with the Side menu. When
a Content Zone member is selected, the names of all members in that system are displayed.
4. RESULTS AND DISCUSSION
The research findings were based on a purposive sampling of 400 consumers and entrepreneurs
in Saraburi Province. As a result of the research, it was found that:
1. Demands of entrepreneurs regarding OTOP product packaging. Entrepreneurs desire a
redesign of their packaging. The desired packaging characteristics are attractive, robust,
capable of protecting the product, environmentally friendly, exotic, and modern. A web
application design will also be beneficial. They necessitate the use of web applications on
mobile devices and computers.
2. Developing a conceptual framework of web applications for packaging design. It can be
summarized as a picture of the conceptual framework development of web applications to
assist entrepreneurs in designing OTOP products for the world as follows:

6
Figure 5. Conceptual framework of a web application for packaging design.
3. As a result of the web application development for packaging design, five experts provided
their opinions. Expert opinions on overall quality were found to be excellent (𝑥̅= 4.72, SD =
0.32), as detailed in the table. 1
Table 1. Evaluation results for the development of a web application for packaging design
Items Results
𝒙
̅ S.D.
1. The web application is user-friendly. 5.00 0.00
2. The web application is stable and is suitable for the
use.
3.80 0.83
3. The packaging style is modern. 5.00 0.00
4. The web application can be used on a variety of
platforms.
5.00 0.00
5. The web application's colour scheme is appropriate
for the intended audience.
4.80 0.44
6. The web application's screen size is appropriate. 4.20 0.44
7. The website is beneficial to entrepreneurs. 5.00 0.00
8. You are satisfied with the web application's overview. 5.00 0.00
Total 4.72 0.32
The results of three individuals' web application performance tests for packaging design
efficiency (E1 /E2 ) were 5 2 .3 3 /5 5 .5 6 . After testing a small group of nine participants for
efficiency of 64.44/67.79, and a field test of 30 people for efficiency of 80.83/81.45, it was
determined that they were effective according to the 80/80 criteria. Details are shown in Table 2.

7
Table 2. Results of Performance Testing on a Web Application for Packaging Design
Tests
Number of
entrepreneurs
Scores on the In-Study Test
(E1) on a 100-point scale
Scores on the Post-Study
Test (E2) on a 30-point
scale
𝒙
̅ Percentage 𝒙
̅ Percentage
Individual 3 52.33 52.33 16.68 55.56
Group 9 64.44 64.44 20.34 67.79
Fieldwork 30 80.83 80.83 24.44 81.45
4. In the assessment item, entrepreneurs' overall satisfaction with the use of web applications
for packaging design (𝑥̅= 4.78, S.D. = 0.24) was excellent. It enables you to design in a
variety of ways. The assessment outcome (𝑥̅ = 3.60, S.D. = 0.54) was considered to be
moderate. Additionally, it excels in other areas. Consumers and entrepreneurs have
suggested that packaging and labeling options should be expanded, as well as the use of
more colors. As specified in Table 3
Table 3. Entrepreneurs' satisfaction with the use of web-based packaging design applications.
Items
Results
𝒙
̅ S.D.
1. The web application is user-friendly. 5.00 0.00
2. The web application's design is appealing. 5.00 0.00
3. The packaging style is modern. 4.80 0.44
4. The web application can be used on a variety
of platforms.
5.00 0.00
5. The web application facilitates packaging
design.
4.80 0.44
6. The web application enables you to design in a
variety of ways.
3.60 0.54
7. The web application saves money on the cost
of hiring a designer.
5.00 0.00
8. This web application is useful to you. 5.00 0.00
9. You will recommend this web application to
your friends.
4.80 0.44
10. You are satisfied with the web application's
overview.
4.80 0.44
Total 4.78 0.24
5. CONCLUSIONS
Packaging requirements for OTOP products. The following conclusions can be drawn from the
findings: The majority of them are entrepreneurs of OTOP products, which include food and
beverages, clothe and apparel, accessories/decorative items, and non-food herbs, respectively.
The majority of OTOP entrepreneurs, up to 96.20 percent, desired a new packaging design.
Creating a conceptual framework for the web application that will be used to design OTOP
product packaging for marketing promotion. The following conclusions can be drawn from the

8
findings: 1. The name of the product. Users can type the product name into the web application's
field for printing product names. To control the tone, users can select the font style, size, color,
bold, italic, and color categorization. 2. The brand. A web application developer has created a
pre-formatted package format, organized by category, that users can edit, insert images and
detailed information, and customize with their own branding. The design must adhere to Thai and
destination country laws. Must be suitable for packaging, have a pleasing appearance, be easy to
read and comprehend. 3. Symbols or logos used in commerce. Currently, web applications and
websites that assist entrepreneurs with product packaging design do not include the capability to
design trade symbols or logos due to budget constraints. However, anticipating the issue, such
capabilities should be added to web applications and websites that assist entrepreneurs if there is
an opportunity to improve web application development. Packaging design is more
comprehensive and efficient. 4. Product details, web applications have been designed with a pre-
built form, and the location of the product details has been blocked. Adjust the font style, size,
and color to correspond to the categories of the web application and allow users to insert images
and detailed information. 5. Promotional details are information that occurs on a periodic basis in
order to increase sales or keep the business moving at a particular time. Entrepreneurs can use
web applications and websites to design product packaging and the area on the product label that
will be used to print promotional messages. Users can include images or symbols to enhance the
readability of the text. 6. Images in web applications and websites to assist entrepreneurs with
packaging design; users can choose from a pre-made design helper that categorizes products and
pre-made images divided into graphics, background images, and icons. 7. Product components
integrated into web applications and websites to assist entrepreneurs in internationalizing OTOP
product packaging. On the package, there is a location block for product components. Users can
type such messages. 8. Volume or quantity of web applications and websites designed to assist
entrepreneurs with packaging design. For printing volume messages or product quantities,
position blocks are provided. Users may make changes as necessary, categorize fonts, sizes, and
colors and leave blank spaces in languages to make the text clear and easy to read. 9.
Manufacturers' and suppliers' names in web applications and websites that assist entrepreneurs in
designing product packaging. The manufacturer and supplier names are not visible. The user can
type the text and customize the font style, size, color, and language selection. 10. According to
experts, regulatory details such as production date and expiration date are designed to position
regulatory details such as production date and expiration date while allowing users to modify the
information to meet their specific needs.
The results of developing a web application for OTOP's product packaging design in order to
promote marketing. The following conclusions can be drawn from the findings: It is possible to
deploy web applications. Additionally, by polling entrepreneurs, the web application can help cut
down on design costs. The evaluation of the suitability of web applications to assist entrepreneurs
in designing OTOP product packaging for international distribution found that the overall
suitability of web applications to assist entrepreneurs in packaging design is excellent (𝒙
̅ = 4.72,
SD= 0.32). The evaluation results for the following items: the web application is user-friendly,
the packaging style is modern, and the web application is useful to entrepreneurs are excellent (
𝒙
̅= 5.00, S.D. = 0.00), indicating that the web application is practical, and entrepreneurs can
easily use it. Print and save formats should be added to allow for the saving of images as PNG
and PDF files, as the development of web applications that render images is not entirely
transparent in terms of file format rendering. As a result, it must be revised to make it clearer, in
accordance with expert opinion.
Entrepreneurs' satisfaction with using a web application for OTOP product packaging design for
marketing promotion. The research discovered that, on average, the effect of web application
satisfaction was excellent ( 𝑥̅= 4.78, S.D. = 0.24) due to easy to use, good looking, modern and
using various platform, helping entrepreneurs to design package easier and reduce cost and increase

9
competition capacity. In other areas, the evaluation results are excellent. Experts are asked to
comment on the web applications, assess their suitability, and conduct interviews with consumers
and entrepreneurs. In terms of web application usage, there have been numerous summaries,
document reviews, and web application reviews conducted by experts, consumers, and
entrepreneurs, all of which resulted in remarkably high satisfaction levels. In item; The web
application enables you to design in a variety of ways., the evaluation result ( 𝑥̅= 3.60, SD =
0.54) is moderate due to consumer and entrepreneur preferences for patterns and colors. Web
applications will need to diversify their designs to capture consumers' and entrepreneurs'
attention.
ACKNOWLEDGEMENTS
Thank you so much for your support. As always, it was an honour and a pleasure to collaborate with
Rajamangala University of Technology Phra Nakhon.
REFERENCES
[1] CHINASRI, W and WASUGREE, S. (2015). “Web application development for multiple choice exam
analysis ”, VRU RESEARCH AND DEVELOPMENT JOURNAL SCIENCE AND TECHNOLOGY. Vol 10, No.1,
pp1-17.
[2] Sushant Kumar Bhandi, (2018). “Web Application Development and Tackling the Problems”, IOSR
Journal of Computer Engineering, Vol 20, No. 3, pp63-68.
[3] M.Taylor, McWilliam, S. Wade and W. Anacoura, (2015), “A User Centre Website Development
Approach”, International Conference on, Troyes.
[4] Promwong, C. (2013). Testing the efficiency of media or teaching series. Silpakorn Education
Science Research Journal, Vol 5, No.1, pp5-20.
[5] Yuangngoen. W, Saengrith. W, Sitthimongkolchai. N, Makeshin. S, Petsangsri.S, and
Tuntiwongwanich. S, (2020),“Blended Learning Management of WordPress Website Development
Skill for Communication Design Undergraduates Using The ADDIE Model”. International Journal
Industrial Education and Technology, Vol 1, No.1, pp50-58.
[6] Abhijit J, (2014),“Controlled Terms or Free Terms? A JavaScript Library to Utilize Subject Headings
and Thesauri on the Web”.Journal of Computing Sciences in Colleges, Vol 30, No.2, pp.139–141.
[7] Hardeep. K.D., (2020), “A Performance Comparison of RESTful Applications Implemented in
Spring Boot Java and MS.NET Core”. Virtual Conference on Engineering, Science and Technology
(ViCEST) 2020, pp.1-7.

DEVELOPMENT OF WEB APPLICATION FOR PACKAGING DESIGN

More Related Content

What's hot (20)

Similar to DEVELOPMENT OF WEB APPLICATION FOR PACKAGING DESIGN (20)

Recently uploaded (20)

DEVELOPMENT OF WEB APPLICATION FOR PACKAGING DESIGN