Developing Web Based Grammar Learning Application Using

Gamification Method and UX Design

Andhik Ampuh Yunanto

, Irwan Sumarsono

and Sylvi Indryana Safira

Electronic Engineering Polytechnic Institute of Surabaya, Surabaya, Indonesia

Informatics and Computer Engineering Department, Electronic Engineering Polytechnic Institute of Surabaya,

Surabaya, Indonesia

Keywords: TOEFL Grammar Application, Game Based Application, Gamification, UX Design.

Abstract: Currently, an effective and efficient learning approach is needed to teach English education to students in

order to face the era of globalization. Especially in Indonesia, this ability has been taught to students,

especially students since they were at the elementary school level. However, based on the facts, most students'

English skills are still below the standard. Therefore, this study builds a game-based learning approach.

According to the survey, the TOEFL score in the grammar section is the lowest compared to reading or

listening. Learning applications are still monotonous, such as there are only a collection of questions and

several other supporting elements. In addition, currently learning applications are also less interactive with

users, therefore I use the gamification method and UX Design approach to develop a website-based

application that can help users interact with the application so that it can motivate them to learn grammar.

Some of the elements that are applied are grades or scores, levels, difficulty levels, etc. Not only that this

application is also implemented and tested on users. From the test results, users provide positive feedback on

the development of this application. So that the development of this game-based application can increase user

interest in learning English grammar in the future.

1 INTRODUCTION

The rapid and significant development of technology

has made humans inseparable from technology.

Technology has helped humans to ease their work and

busyness. For example, the use of television

technology that helps in obtaining information,

transportation technology to help users move places,

and one of the technologies that affect humans in

facilitating their work is information technology.

Information technology has now been used by all

circles of society, for example in the form of using

applications on computer and mobile devices

(Yunanto, Herumurti, & Kuswardayan, 2018).

In connection with this information technology,

there are many applications that are available in

various sources such as on the marketplace. Various

applications have also been developed by developers

such as bitdegree.com and progate.com. Some of

these existing applications have their own purposes,

for example for entertainment (Yunanto, Herumurti,

Kuswadayan, Hariadi, & Rochimah, 2019), health

and education or learning (Andhik Ampuh Yunanto,

2021). One of the important roles of technology in

education is to create media. Information technology

also supports individual learning, collaborative,

content management, activity management, formal,

informal, and work (Yunanto, Herumurti,

Kuswadayan, & Rochimah, 2018). One of the most

common educational systems supported by

information technology is E-learning.

However, the increasing number of learning

applications or e-learning systems that are currently

rampant tend to have monotonous content. Based on

observations on the Google Playstore, educational

themed applications have a lower number of

downloads compared to other themed applications.

One application that is very popular with young

people today is a game-based application (Yunanto &

Rochimah, 2017).

Because of this, many game developers and

researchers use games for certain purposes other than

as a medium of entertainment. One of the popular

topics among researchers is about utilizing the latest

technology, games, and education. Many recent

studies have reported the benefits of educational-

518

Yunanto, A., Sumarsono, I. and Saﬁra, S.

Developing Web Based Grammar Learning Application Using Gamiﬁcation Method and UX Design.

DOI: 10.5220/0011818100003575

In Proceedings of the 5th International Conference on Applied Science and Technology on Engineering Science (iCAST-ES 2022), pages 518-525

ISBN: 978-989-758-619-4; ISSN: 2975-8246

based computer games in promoting students'

motivation to learn (Herumurti, Kuswardayan,

Khotimah, Yunanto, & Yusuf, 2019). Digital game-

based learning has been considered as a very potential

issue among various approaches in the development

of learning technology (Herumurti, Yuniarti,

Rimawan, & Yunanto, 2019 ). In addition, the games

being developed today also apply modern

technologies such as artificial intelligence,

computational intelligence, text processing, virtual

reality, and game simulation (Kuswadayan, et al.,

2019).

Since the era of globalization that has engulfed the

world because of the importance of English as an

international language, interactions between

countries have become more open and freer. For this

reason, the ability of foreign languages such as

English is one of the skills that must be possessed by

everyone, especially college graduates. However,

based on existing surveys, the English language skills

possessed by most students are still very minimal and

lacking. This can be seen from the results of the

TOEFL test that has been followed by students where

the scores obtained tend to be below the standard. For

example, a survey of new students who took the

TOEFL test tended to score below the 477 marks by

more than 70%. Not only that, not a few final year

students also find it very difficult to complete the

graduation requirements because of the failure of the

TOEFL test. So that most students fail to graduate for

this reason. This is a very basic problem and must be

resolved in Indonesia (Yunanto, Herumurti,

Rochimah, & Kuswardayan, 2019).

From the description above, it shows that

currently an effective and efficient learning approach

is needed to teach English education to students in

order to face the era of globalization. Therefore, this

study builds a game-based learning approach.

Because according to the survey, the TOEFL score in

the grammar section is the least compared to reading

or listening. So this research focuses on developing

game-based English grammar learning applications.

The research aims to improve the user's ability to

master English grammar in a more enjoyable way.

This research is also useful for students in helping to

do the TOEFL test, especially for grammar material.

2 THEORETICAL BASIS

From the introduction that has been presented

previously, it can be concluded that the problem

domain raised in this study is the lack of students'

ability in English, especially TOEFL grammar and

the number of English learning applications that are

still monotonous.

Based on the problems that have been described,

it can be seen that Indonesia needs to improve its

English language skills. Therefore, an English

learning application will be developed using a

gamification and UX Design approach. The concept

of gamification is expected to increase students'

motivation and commitment in continuing to hone

their ability to learn English, especially TOEFL

grammar. This research is to combine educational

elements and game elements in an application.

Furthermore, the hope of this research is that an

approach like this can help develop learning

applications, especially English so that they become

more attractive to use by users.

2.1 Related Research

2.1.1 Development of Game-Based English

Grammar Learning Applications

(Yunanto, Herumurti, Kuswadayan, &

Rochimah, 2018)

This research builds a game-based learning approach.

This research focuses on developing game-based

English grammar learning applications. The research

aims to improve the user's ability to master English

grammar in a more enjoyable way. This research is

also useful for students in helping to do the TOEFL

test, especially for grammar material.

2.1.2 Application of Game Elements in

the Development of English

Learning Applications (Yunanto,

Herumurti, Rochimah, &

Kuswardayan, 2019)

This research proposes an approach, namely the

application of game elements in learning applications.

Some of the elements that are applied are the value or

score, level, level of difficulty, main character, enemy

character, feedback results, and so on. All of these

elements are expected to form a fun element so that it

can increase user interest. And this research still

focuses on one case study, namely learning English

Grammar. So the main thing to do in this research is

to combine educational elements and game elements

in an application. Furthermore, the hope of this

research is that an approach like this can help develop

learning applications, especially English so that they

become more attractive to use by users.

Developing Web Based Grammar Learning Application Using Gamiﬁcation Method and UX Design

519

2.1.3 Development of an English Learning

System Using a Gamification

Approach (Pambudi, Bachtiar, &

Pradana, 2019)

This study discusses the development of a Java

programming learning system. This research applies

the concept of gamification as an effort to increase

students' interest in learning Java programming. The

concept of gamification is applied to the Java

programming learning system to increase student

motivation in learning and continuing to practice.

Subsequent research that becomes a reference in

this study discusses the analysis of checking

vocabulary and spelling in case studies of Indonesian

texts. This study examines the development of a

system that is useful for checking grammar and spell

errors in writing Indonesian texts.

2.1.4

Application of Gamification Concept in

Web-Based English Tenses Learning

(Kariko & Ayuningtyas, 2021)

Researchers want to develop learning English tenses

with the concept of gamification where learning is as if

playing a game so that it feels fun and not boring. A

learning that uses internet electronic technology so that

anyone who needs it can access it from wherever he is.

Henry thinks that e-learning is bad and boring, even

though the content is good and we admit that the

knowledge in it is useful. The practical answer is that

the majority of e-learning is currently unable to attract

the attention, interest, or full involvement of its partici-

pants. Therefore, researchers will apply gamification in

English tenses learning websites so that electronic

learning (e-learning) is no longer bad and boring.

3 METHODOLOGY

3.1 UX Design

User Experience Design or what is commonly called

UX Design is the process of increasing user

satisfaction (application users, website visitors) in

increasing the usability and enjoyment provided in

interactions between users and products (Hiererra,

Meyliana, Ramadhan, & Purnomo, 2022).

In creating a User Experience (UX) project,

process steps must be carried out in order to produce

a tested and reliable result. The process used and the

resulting document may vary from project/company

to one another. Companies may follow different

design and development methodologies. The

discussion in this article will explain the stages of the

User Experience (UX) Design Process in general. The

process stages in the UX Design Process in general

are as shown in the chart below:

Figure 1: UX Design Process.

3.2 Gamification

Nick Pelling first used the term gamification in 2002

in a TED presentation. Gamification is a learning

approach using elements in games or video games

with the aim of motivating students in the learning

process and maximizing feelings of enjoyment and

engagement with the learning process, besides that

this media can be used to capture things that interest

students and inspire them. to continue learning.

Gamification is using game mechanics to provide

practical solutions by building specific group

engagement. In more detail define gamification as a

concept that uses game-based mechanics, aesthetics

and game thinking to engage people, motivate action,

promote learning and solve problems. Glover

concludes that gamification provides additional

motivation to ensure that learners (learners)

participate in complete learning activities.

3.3 System Diagram

Iterative and incremental development is a process

that combines iterative design methods with an

incremental build model. It is used by software

developers to help manage projects. Iterative and

incremental development models are complementary,

which is why these processes are often used to

achieve project outcomes. The following is an

iterative and incremental development process:

Figure 2: Iterative and Incremental Development.

iCAST-ES 2022 - International Conference on Applied Science and Technology on Engineering Science

520

The first stage is Initial Planning by conducting a

literature study on the methods used in the applications

made and conducting competitor analysis.

The second stage is Planning by conducting

feasibility and interviews, observations, Quesener. If

at the Feasibility stage the results are good, then go

straight to the investigation stage and a form is given

to the client to record the client's needs. In the

investigation system, it can be in the form of

interviews, questionnaires or observations. In this

stage, the first thing to do is to provide a form to the

user that is used to find out the user's request, then

Requirements, namely after the problem is

successfully understood, the developer describes it in

the form of a document specification document. This

specification contains the features and functions

desired by the customer, and does not discuss the

development method at all.

The third stage is Analysis & Design, namely

analyzing what technology is used, analyzing the

information obtained in the planning stage, and

designing applications such as prototype design,

application database design, then implementation,

namely the stage of writing programs that have been

analyzed and designed.

The next stage is application deployment, then

testing the user, if there is feedback from the user, an

evaluation will be carried out.

4 EXPERIMENTAL RESULT

AND ANALYSIS

4.1 Requirements (First Iteration)

In this process determine what the software or

application should be and what requirements are

needed to run it. In addition, determining the

resources needed to build the project such as a team

or software support in the application development

process. In the system to be built, the required

requirement is the preparation of a framework that

can support development.

4.1.1 Prioritize Matrix

Grouping features that have been designed based on

priorities to be more productive and help to form

more effective time management.

Quick wins is a quadrant that requires light effort

but the impact of the results is enormous. In this

quadrant there are login & register features,

dashboards, user profiles and material features. Major

Figure 3: Prioritize Matrix.

projects are a quadrant that contains tasks that have a

large impact on results, but the effort is also not easy.

In this quadrant there are features of discussion of

questions with gamification and features of

discussion of questions.

Fill ins is a quadrant with light work effort and the

result is also light. In this quadrant there is a history

feature. Thankless Tasks is part of the quadrant whose

effort is heavy because it is not worth the small

results. In this quadrant there is a chat feature.

4.1.2

Use Case

The following is a use case diagram of the application

to be made:

Figure 4: Use Case Diagram.

The picture above describes the use case diagram of

the application to be made. There is one role, namely

student. The following is an explanation of the use

case above:

- Register

Students register first because they do not have

an account.

Developing Web Based Grammar Learning Application Using Gamiﬁcation Method and UX Design

521

- Access material features

Students can study material that is already

available on the EduMar application.

- Access the practice questions feature

Students can work on a package of questions and

test questions that are already available on the

EduMar application.

- Access the history feature

Students can see the scores obtained, the practice

questions that have been done, the material that

has been studied and the points that have been

obtained.

4.1.3 Sitemap Website EduMar

The following is a website sitemap to explain the

application flow if used:

Figure 5: Sitemap Website EduMar.

When opening the application for the first time, the

user will see a dashboard display with a menu in the

upper right corner, namely about us, login and

password, if so, you can login. After logging in, there

is a menu in the upper right corner, namely material,

practice questions, history and profile. On the

material menu there are several lists of materials that

are already available and when the title is clicked it

will go to the next page, namely material details.

In the practice menu there are two categories of

practice questions, namely structure and written

expression, each category has 3 question packages,

each package contains 10 questions that must be

done, when package 1 has not been completed, the

next package is not open. Next, if you click on

package 1, you will go to the work description page

where there is a choice of a back button and a start

button, if you want to start, click the start button, then

questions that must be done will appear. If the answer

is correct then the score will increase, otherwise if the

answer is wrong then the score will not increase and

discussion of questions will appear. In the history

menu there are values that have been obtained, points

that have been achieved, the total material that has

been studied, and the total practice questions that

have been done. In the profile menu, there is

information for the account that has been registered,

namely in the form of full name and email and there

is a logout button.

4.1.4 ERD (Entity Relationship Diagram)

The following is an ERD or database design that will

be applied to the EduMar application:

Figure 6: ERD application.

In Figure 6 there are 5 entities including users,

materials, questions, package questions, and

categories with each entity having several attributes.

In the user entity, there are id, fullname, email and

password attributes. The question entity has id

attributes, questions, answers, discussions and scores.

The question package entity has an id and package

name attribute. Category entities have id attributes

and category names, while material entities have id,

title and material details attributes.

In addition, there are connected relationships

between existing entities. User entities have many to

many relationships with question and material entities

with each relationship having a date attribute to

record the log and there are derived attributes, namely

total questions, total material and points, while

question entities with material entities have a many to

one relationship. The question entity has a many to

one relationship to the question package entity, while

the question package entity has a many to one

relationship to the category entity.

iCAST-ES 2022 - International Conference on Applied Science and Technology on Engineering Science

522

4.1.5 PDM (Physical Data Model)

The following is a PDM or database model that will

be applied to the EduMar application:

Figure 7: PDM EduMar application.

In Figure 7 there are 7 tables with the following

explanation:

- In the user table there is a user_id with type int as

the primary key, as well as full name, email, and

password with type varchar.

- In the material table, there is materi_id with type

int as the primary key, as well as title and

detail_material with type varchar.

- There is a new table that will appear when the

transaction is made, namely 2 history tables,

namely the question history table and the

material history. In the history table, there are

user_id and question_id with type int as foreign

key, total_hasil and points with type int, and

tgl_hasil with type date.

- In the material history table, there are user_id and

materi_id with type int as a foreign key,

total_material with type int, and tgl_material

with type date.

- In the question table, there are questions_id with

type int as the primary key, material_id and

packets_id with type int as a foreign key,

questions, answers, and discussions with type

varchar, and scores with type int.

- In the question package table, there is a

package_id with type int as the primary key,

category_id with type int as a foreign key, and

package_name with type varchar.

- In the category table there is category_id with

type int as the primary key, and category_name

with type varchar.

4.1.6 Prototype

Designing a system schema that forms the model and

standard size or scalability that will be worked on

later. As well as adapting to the initial needs of

software development to find out some of the features

and functions that have been previously. So as to be

able to find errors early before implementing and

releasing the product as a whole. The following is the

prototype of the edumar application in Figure 8 and

Figure 9.

Figure 8: Landing Page.

Figure 9: About Us Page.

4.1.7 Gamification

This study applies gamification elements including

values or scores, rewards and challenges. The

application of this element will be placed throughout

the system with the aim of increasing user interest in

learning TOEFL grammar at Edumar.

- Points

The first element is point. The point in question

is the value obtained by the user. points can

increase systematically as long as the user learns

the material and works on a package of

questions. The more points the user gets, it

means that he has understood the material being

studied.

Developing Web Based Grammar Learning Application Using Gamiﬁcation Method and UX Design

523

The point system that will be used in this

application is Experience Point. Experience

Point is a point that shows the user has had a lot

of understanding of the material being studied,

as well as working on a package of questions in

the application according to the number of

points. This point will affect the user's reward so

that to get a reward, you must have enough

points.

- Rewards

The second element is reward. The reward is in

the form of a total of all points earned. The

rewards obtained are used to determine the user's

progress, the faster the user collects points, the

higher the reward criteria that have been

determined by the system. In addition, the

system will provide profile points for each user

to complete the package of questions and test

questions that are already available. Each

package of questions and test questions will have

different points depending on how the user

answers the available questions. This point can

be used as a reward or reward for the user which

can be used to unlock items. Each item has a

different cost point. The items referred to are as

follows.

Table 1: Reward Conditions.

No Nama Deskripsi Item

1 Beginner Collect 50

oints

Can do test

uestions

2 Intermediate Collect 150

oints

Get the link of the

learnin

video

3 Advanced Collect ≥300

oints

Get toefl book link

to donwloa

- Challenge

The third element is challenge. Challenge is an

activity in the application that can make users

feel challenged to go further into the application.

Challenges can be many when the user has

started to bond with the application. The

challenge in question is in the form of test

questions that are already available on the

practice questions menu. There are 30 questions

in this test which will be answered by the user.

This test question will open if the user has

worked on the available question packages and

collected the points described above. The test

questions given are in the form of a collection of

questions with material that has been studied and

questions that have been done before

4.2 Implementation (Second Iteration)

After the prototype is complete and the results show

that it is acceptable, the next stage is implementation

or development. At this stage, the Edumar system will

be built where the architecture is shown in Figure 10.

Figure 10: Implementation Design.

The first stage carried out the implementation of the

frontend. In this process is the implementation of the

final test results into the frontend view of the

application. For this research, the implementation

phase will be carried out using the React JS

framework. After completing the frontend, proceed to

implement the backend which uses Laravel. Some of

the APIs that will be built are CRUD for user data,

material data, practice questions and history data.

Furthermore, the process of collecting practice

questions and discussions has been carried out,

namely looking for references to TOEFL books such

as Longman books, Kaplan TOEFL books and

looking for other TOEFL book references. Each

question will be entered in the system along with the

answer. Discussion of the questions in the form of

correct answers and a brief discussion of the grammar

formulas in the questions. The next stage is to create

a database to store the CRUD data set that has been

created on the backend.

5 CONCLUSION

This final project aims to make it easier for students

to learn English grammar with UX design and

gamification methods. In this application there are

material features, practice questions and history. The

material available is in the form of grammar material,

as well as practice questions taken from TOEFL

questions which are presented with scores and

discussion of questions. In this application there are

elements of gamification, namely points, rewards and

challenges. The first element is point, the point in

question is the value obtained by the user. The second

iCAST-ES 2022 - International Conference on Applied Science and Technology on Engineering Science

524

element is in the form of a reward, the reward is in the

form of a total of all points earned. The rewards

obtained are used to determine the user's progress, the

faster the user collects points, the higher the reward

criteria that have been determined by the system. The

third element is challenge, Challenge is an activity in

the application that can make users feel challenged to

go further into the application. Challenges can be

many when the user has started to bond with the

application.

ACKNOWLEDGMENT

Thank you to the software development team of the

Electronics Polytechnic of the Surabaya Institute for

their guidance and input during the research process,

thanks also to the supervisors and friends who have

been willing to cooperate and help with this research.

REFERENCES

Andhik Ampuh Yunanto, D. H. (2021). A Literature

Review for Non-player Character Existence in

Educational Game. In Cyber Physical, Computer and

Automation System: A Study of New Technologies (pp.

235-244). Springer Singapore.

Herumurti, D., Kuswardayan, I., Khotimah, W. N.,

Yunanto, A. A., & Yusuf, A. A. (2019).

Implementation of Artificial Ant Colony Algorithm

(AACA) in dynamic labyrinth generation for android-

based 2D games. International Conference on Science

Education and Technology (ICOSETH) 2019.

Surakarta, Indonesia.

Herumurti, D., Yuniarti, A., Rimawan, P., & Yunanto, A.

A. (2019 ). Overcoming Glossophobia Based on Virtual

Reality and Heart Rate Sensors. IEEE International

Conference on Industry 4.0, Artificial Intelligence, and

Communications Technology (IAICT). Bali Indonesia.

Hiererra, S. E., Meyliana, Ramadhan, A., & Purnomo, F.

(2022). Prototype UX Design: Mobile Augmented

Reality Application based on Gamification for Cultural

Heritage Tourism. 8th International HCI and UX

Conference in Indonesia (CHIuXiD) (pp. 30-35). Bali,

Indonesia: IEEE.

Kariko, A. A., & Ayuningtyas, P. (2021). Examining

Students' Preferences of Quizizz and Kahoot's as

Formative Assessment and Competitiveness.

International Seminar on Application for Technology of

Information and Communication (iSemantic) (pp. 400-

404). Semarang, Indonesia: IEEE.

Kuswadayan, I., Herumurti, D., Hariadi, R. R.,

Wildianurahman, M., Yunanto, A. A., & Arifiani, S.

(2019). Survival Education for User on Unknown

Islands using Simulation Games. 12th International

Conference on Information & Communication

Technology and System (ICTS). Surabaya, Indonesia.

Pambudi, I., Bachtiar, F. A., & Pradana, F. (2019).

Development of English Learning System Using

Gamification Approach. IEEE Conference on e-

Learning, e-Management & e- Services (IC3e) (pp. 1-

6). Pulau Pinang, Malaysia: IEEE.

Yunanto, A. A., & Rochimah, S. (2017). Systematic

Literature Review Terhadap Evaluasi Perangkat Lunak

Tentang Serious Game. Jurnal Informatika.

Yunanto, A. A., Herumurti, D., & Kuswardayan, I. (2018).

Kecerdasan Buatan Pada Game Edukasi Untuk

Pembelajaran Bahasa Inggris Berbasis Pendekatan

Heuristik Similaritas. Jurnal Sistem dan Informatika

(JSI).

Yunanto, A. A., Herumurti, D., Kuswadayan, I., &

Rochimah, S. (2018). Intelligent System for Agent in

Educational Game Using Dynamic Gram Similarity.

2018 International Seminar on Application for

Technology of Information and Communication.

Semarang.

Yunanto, A. A., Herumurti, D., Kuswadayan, I., Hariadi, R.

R., & Rochimah, S. (2019). Design and Implementation

of Educational Game to Improve Arithmetic Abilities

for Children. 12th International Conference on

Information & Communication Technology and System

(ICTS). Surabaya, Indonesia.

Yunanto, A. A., Herumurti, D., Rochimah, S., &

Kuswardayan, I. (2019). English Education Game using

Non-Player Character Based on Natural Language

Processing. The Fifth Information Systems

International Conference. Surabaya, Indonesia.

Developing Web Based Grammar Learning Application Using Gamiﬁcation Method and UX Design

525