p–ISSN: 2723 – 6609 e-ISSN: 2745-5254
Vol. 5, No. 12, December 2024 http://jist.publikasiindonesia.id/
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5647
Evaluation Of Construction Support Through Business
Entities (Case Study: Terbanggi Besar - Kayu Agung Toll
Road)
Rafly Farandi Firdaus
Universitas Telkom Bandung, Indonesia
Email: [email protected]
*Correspondence
ABSTRACT
Keywords: UI/UX, web-
based learning application,
UML class diagram, UCD
method, user-driven
design.
This research aims to design a user interface (UI/UX) for
UML Class Diagram learning applications, especially for
students who want to explore UML class diagrams, by
applying the User-Centered Design (UCD) Method. This
method involves students as the main users of the application
to understand their needs, preferences, and user experience
in depth. The application interface design will be focused on
ease of use, attractive aesthetics, and user data security. The
development of this application is expected to help students
in learning and exploring UML class diagrams.
Introduction
In today's digital era, information and communication technology has become an
integral part of various aspects of life, including in the world of education. One of the
most important areas in software development is system modeling using Unified
Modeling Language (UML) (Putri, 2021). UML is a standard modeling language used to
describe, visualize, build, and document object-based software (Pawenrusi, Kamariana,
Kasma, Wahyuni, & Aman, 2024). One of the most important diagrams in UML is the
class diagram, which depicts the structure of the system by defining classes, attributes,
operations, and relationships between objects. (Barbieri, Bruno, & Muzzupappa, 2018).
Based on a survey conducted by researchers on 40 Telkom University students
through Google Forms, the results show that 45.4% of students can make UML class
diagrams, while 54.6% of them have not mastered it. (Maharani, Durachman, &
Ratnawati, 2021). Students experience some of the main difficulties in learning UML
class diagrams, including understanding the types of diagram shapes and how to apply
them. Students majoring in Informatics at Telkom University expect features such as
video tutorials, practice questions to understand the material further, and complete
material presented (Bergkulla, 2024).
Learning UML class diagrams is not an easy thing for students or beginners in the
field of programming and software engineering. Concepts such as class, object,
inheritance, and association are often considered complex and abstract. Traditional
learning methods that rely only on textbooks and explanations from teachers are
Rafly Farandi Firdaus
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5648
sometimes less effective in helping students understand this material in depth (Nugraha,
Suyanto, & Utami, 2024).
To overcome these problems, a more interactive and interesting learning approach
is needed. One of the solutions that can be offered is the development of a website-based
UML class diagram learning application designed with user interface (UI) and user
experience (UX) aspects in mind. (Almenara et al., 2017). User Interface (UI) refers to
the visual appearance and elements that allow interaction between the user and the
application or system. A good UI should have an attractive, intuitive, and easy-to-
understand design for users. Meanwhile, User Experience (UX) is a broader concept,
covering the overall user experience when interacting with a product or service, including
aspects of usability, ease of use, performance, and user satisfaction. (Yılmaz & Gözüm,
2023).
In the context of this website-based UML class diagram learning application, a good
UI/UX is essential to ensure that users can learn the material comfortably and effectively.
Some aspects of UI/UX to consider include a clean, uncluttered, and consistent interface
design, intuitive navigation, interactive presentation of material, interactive features such
as exercises and quizzes, and a fun and engaging user experience (Braham, Buendía,
Khemaja, & Gargouri, 2022).
In this application design process, the User-Centered Design (UCD) method can be
used to ensure that the user's needs and preferences are the top priority. (Choirunisa &
Ryansyah, 2023). The UCD method is an iterative approach that actively involves users
in every stage of product development, starting from initial research, concept design, and
prototyping, to evaluation and refinement. By using this method, it is hoped that the
resulting application will have an optimal UI/UX and match the needs and expectations
of users. (Chen & Tai, 2023).
Thus, this study aims to design a UI/UX of a website-based UML class diagram
learning application using the UCD method. This application is expected to be an
alternative solution for students or students who want to learn UML class diagrams
independently, interactively, and fun so that it can improve their understanding of
important concepts in object-oriented system modeling.
The objectives of this study are:
1. Producing financial planning application designs using the UCD (User Centered
Design) method
2. Obtain Usability scores from financial planning applications built using SUS
Method
This study uses qualitative methods to gain a deep understanding through student
questionnaires, aiming to explore user needs and design learning media that emphasize
the interaction aspect.
Evaluation Of Construction Support Through Business Entities (Case Study: Terbanggi Besar -
Kayu Agung Toll Road)
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5649
Place and Time of Research
This research was conducted at Telkom University and several other institutions,
with the author currently pursuing an S1 education in the Department of Informatics. This
research lasts for a certain period, starting from the analysis stage to implementation and
evaluation.
Research Stages
This research consists of several stages or processes that can be used to solve
existing problems, as well as help produce user interface designs that suit the needs
through the User-Centered Design (UCD) method.
Design Solution
A "design solution" is a part of a research or design project that describes the
resulting design solution to address an identified problem. In the context of research
involving User-Centered Design (UCD).
LowFidelity
In the early stages of design, Low Fidelity was created, which is the first step in this
design process. Low Fidelity is just a skeleton with no elements such as fonts, colors,
logos, or other design components.
High Fidelity
After the Low Fidelity stage is completed, the next step is to design High Fidelity
so that the design that has been created is easier for users to understand. In this High
Fidelity design, elements such as images, icons, and colors will be added to clarify the
design that has been prepared.
Results and Discussion
At this stage, user needs will be explained based on the data that has been collected
from the results of the user persona questionnaire that has been created. This explanation
aims to help users achieve their desired goals.
Mental Model
A mental model is a representation of how a person understands, illustrates, or
explains his beliefs about how things work. In the context of user experience (UX), a
mental model refers to how a user or designer visualizes how a system or product works.
Here is the mental model of the system designer for the UML CLASS DIAGRAM
APPLICATION:
Rafly Farandi Firdaus
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5650
Hierarchical Task Analysis
User task analysis using Hierarchical Task Analysis (HTA) is carried out to map
the activities or workflows required by users to achieve their goals. In this study, HTA is
used to describe how users access learning materials and practice instruction videos in
the UML learning application. (Dananjaya, Prathama, & Darmaastawan, 2024).
Create design solution
At this stage, the researcher focuses on designing interface design for UML learning
applications. This process begins with the creation of a low-fidelity prototype in the form
of an initial wireframe sketch. (Frans, Dominica, Lucky, Lilik, & Eva, 2024). After the
wireframe is completed, it is followed by the development of a high-fidelity prototype
that includes elements such as images, icons, typography, themes, interactions, and
functionality that is close to the shape of the final product.
a. Low-fidelity and high-fidelity Landing Pages
Evaluation Of Construction Support Through Business Entities (Case Study: Terbanggi Besar -
Kayu Agung Toll Road)
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5651
b. Low fidelity and high fidelity Login User
c. Low fidelity and high fidelity Register User
d. Low fidelity and high fidelity Dashboard
Rafly Farandi Firdaus
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5652
e. Low fidelity and high fidelity Courses
f. Low-fidelity and high-fidelity Practice questions
g. Low Fidelity and High Fidelity Tests
Evaluation Of Construction Support Through Business Entities (Case Study: Terbanggi Besar -
Kayu Agung Toll Road)
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5653
h. Low fidelity and high fidelity Profile
Usability Testing
Table 1
Original score
Original Score (Sample Data)
Q1
Q
2
Q
3
Q
4
Q
5
Q
6
Q
7
Q
9
Q1
0
5
3
4
4
4
2
5
3
5
4
2
5
1
4
2
5
4
3
4
1
2
1
4
1
4
5
2
4
2
3
2
4
2
4
4
4
1
3
2
3
4
4
2
4
4
5
2
4
2
5
1
4
4
3
5
2
2
3
5
3
5
4
5
5
2
4
2
4
2
4
4
2
Rafly Farandi Firdaus
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5654
5
1
5
1
4
2
4
5
1
3
3
3
3
5
3
5
5
5
4
5
2
4
5
2
4
4
2
4
2
2
4
5
1
5
4
1
4
2
1
2
5
2
4
4
2
4
2
2
2
5
2
5
5
2
4
2
2
2
4
2
4
4
1
5
2
1
3
4
2
5
1
4
5
3
1
2
4
2
4
4
5
5
1
3
2
5
2
4
5
4
4
3
2
4
5
2
5
4
4
4
2
3
4
5
2
4
5
3
4
2
4
2
5
2
5
5
3
4
4
5
5
4
4
4
5
4
4
5
5
4
4
4
5
5
5
5
1
5
1
4
2
4
4
2
5
1
5
2
4
2
5
5
3
5
2
4
2
5
1
5
5
2
5
2
1
2
4
1
4
4
3
4
2
2
3
4
2
3
4
4
5
1
4
2
4
3
4
4
2
4
2
2
3
4
2
4
4
2
4
2
2
3
4
2
4
4
3
5
1
4
2
4
2
5
4
3
4
2
3
4
2
4
2
4
4
3
2
2
4
4
2
4
4
4
4
2
2
2
4
2
4
4
4
4
2
4
2
5
2
5
4
2
4
1
4
1
4
1
5
5
1
5
2
4
2
4
2
5
4
2
4
2
4
2
5
2
5
4
2
4
2
4
2
5
2
4
4
2
The results obtained still do not fully reflect the actual usefulness value. However,
these results do not provide an accurate picture of the true usability value. To determine
the true value, the original score on odd-numbered questions must be subtracted by one
point, while the original score on even-numbered questions must be subtracted by five
points. Next, the number must be multiplied by 2.5. The following formula can be used
to calculate the actual average value.
Evaluation Of Construction Support Through Business Entities (Case Study: Terbanggi Besar -
Kayu Agung Toll Road)
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5655

󰇛 󰇛
󰇛

󰇜
󰇛

󰇜
󰇜

Calculated Score (Sample Data)
Sum
Value
Q1
Q2
Q3
Q4
Q5
Q6
Q7
Q8
Q9
Q10
(Qty x
2.5)
4
2
3
1
3
3
4
1
2
0
23
58
3
3
4
4
3
3
4
4
3
2
33
83
3
4
1
4
3
4
3
4
4
3
33
83
3
3
2
3
3
3
3
3
3
1
27
68
0
2
1
2
3
1
1
0
3
1
14
35
4
3
3
3
4
4
3
3
3
2
32
80
4
3
1
2
4
2
4
3
3
0
26
65
4
3
3
3
3
3
3
3
3
3
31
78
4
4
4
4
3
3
3
4
4
4
37
93
2
2
2
2
4
2
4
2
4
0
24
60
3
0
1
1
4
3
3
3
3
3
24
60
3
3
1
1
4
4
4
3
3
4
30
75
3
3
0
3
4
3
3
3
3
3
28
70
3
3
1
3
4
3
4
3
4
3
31
78
3
3
1
3
3
3
3
4
3
4
30
75
4
3
0
2
3
3
4
3
0
1
23
58
4
2
0
3
3
3
3
3
3
0
24
60
4
4
2
3
4
3
3
3
4
1
31
78
3
2
1
1
4
3
4
4
3
1
26
65
3
3
2
1
4
3
3
4
4
2
29
73
3
3
3
3
4
3
4
2
4
2
31
78
3
1
4
0
3
1
3
0
4
1
20
50
3
0
4
1
3
1
4
0
4
0
20
50
4
4
4
4
3
3
3
3
3
3
34
85
4
4
4
3
3
3
4
4
4
2
35
88
4
3
3
3
4
4
4
4
4
3
36
90
4
3
0
3
3
4
3
3
3
2
28
70
3
3
1
2
3
3
2
3
3
1
24
60
4
4
3
3
3
2
3
3
3
3
31
78
3
3
1
2
3
3
3
2
3
3
26
65
3
3
1
2
3
3
3
3
3
2
26
65
4
4
3
3
3
3
4
4
3
2
33
83
3
3
2
1
1
1
1
1
3
1
17
43
2
3
1
1
3
3
3
3
3
1
23
58
3
3
1
3
3
3
3
3
3
1
26
65
3
3
3
3
4
3
4
2
3
3
31
78
3
4
3
4
3
4
4
4
4
4
37
93
4
3
3
3
3
3
4
3
3
3
32
80
3
3
3
3
4
3
4
3
3
3
32
80
3
3
3
3
4
3
3
3
3
3
31
78
Average Score (Final Result)
71
Rafly Farandi Firdaus
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5656
Conclusion
Based on the results of analysis and testing, the UI/UX design for the UML learning
system with the User Centered Design (UCD) method has successfully achieved its goals.
This system is able to provide an easy-to-use and efficient learning experience, according
to the user's needs.
Usability testing showed a SUS score of 71, which is included in the GOOD
category with a grade of C and ACCEPTABLE in the Adjective Ratings. This indicates
that the system meets the recommended usability standards and provides comfort in its
use. For further development, it is recommended to conduct a more in-depth analysis of
each SUS question to identify aspects of usability that can be improved, in order to meet
more specific user expectations.
Evaluation Of Construction Support Through Business Entities (Case Study: Terbanggi Besar -
Kayu Agung Toll Road)
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5657
Bibliography
Almenara, Maria, Cempini, Marco, Gómez, Cristina, Cortese, Mario, Martín, Cristina,
Medina, Josep, Vitiello, Nicola, & Opisso, Eloy. (2017). Usability test of a hand
exoskeleton for activities of daily living: an example of user-centered design.
Disability and Rehabilitation: Assistive Technology, 12(1), 84–96.
Barbieri, Loris, Bruno, Fabio, & Muzzupappa, Maurizio. (2018). User-centered design of
a virtual reality exhibit for archaeological museums. International Journal on
Interactive Design and Manufacturing (IJIDeM), 12, 561–571.
Bergkulla, Jack. (2024). Design and development of an interactive mobile application for
wearable sensor data collection and visualization: A user-centric approach.
Braham, Amani, Buendía, Félix, Khemaja, Maha, & Gargouri, Faiez. (2022). User
interface design patterns and ontology models for adaptive mobile applications.
Personal and Ubiquitous Computing, 26(6), 1395–1411.
Chen, Chung Yang, & Tai, Kuang Yen. (2023). Online ontological quality assessment of
converted UML class diagrams in SRE. Automated Software Engineering, 30(2),
18.
Choirunisa, Yasmin Nur, & Ryansyah, Muhamad. (2023). Experience Evaluation Of
Online Cinema Ticket Applications With User Experience Questionnaire. JIKO
(Jurnal Informatika Dan Komputer), 6(3), 203–208.
Dananjaya, Md Wira Putra, Prathama, Gede Humaswara, & Darmaastawan, Kadek.
(2024). User-centered design approach in developing user interface and user
experience of Sculptify mobile application. Journal of Computer Networks,
Architecture, and High Performance Computing, 6(3), 1089–1097.
Frans, Sudirjo, Dominica, Maria Ratna Tungga Dewa, Lucky, Indra Kesuma, Lilik,
Suryaningsih, & Eva, Yuniarti Utami. (2024). Application of the user-centered
design method to evaluate the relationship between user experience, user interface,
and customer satisfaction on banking mobile applications. Jurnal Informasi Dan
Teknologi, 6(1).
Maharani, Lisa, Durachman, Yusuf, & Ratnawati, Suci. (2021). Systematic Literature
Review Method for Evaluation of User Experience on Ticket Booking
Applications. 2021 9th International Conference on Cyber and IT Service
Management (CITSM), 1–7. IEEE.
Nugraha, Bhanu Sri, Suyanto, M., & Utami, Ema. (2024). Innovative Approaches in
Child-Friendly User Interfaces: A Systematic Literature Review on Technologies,
Motoric Skill and Evaluation. 2024 7th International Conference of Computer and
Informatics Engineering (IC2IE), 1–6. IEEE.
Pawenrusi, Esse Puji, Kamariana, Kamariana, Kasma, Andi Yulia, Wahyuni, Eka, &
Rafly Farandi Firdaus
Indonesian Journal of Social Technology, Vol. 5, No. 12, December 2024 5658
Aman, Andryanto. (2024). UI/UX Design of Stunting Survey Application
Prototype User-Centered Design Method. Brilliance: Research of Artificial
Intelligence, 4(2), 484–490.
Putri, Silviani Nurlita. (2021). Analisis Pengalaman Pengguna Pada Aplikasi Moproker
Telkom Witel Dengan Menggunakan Metode User Experience Questionnaire
(UEQ).
Yılmaz, Zeynel Abidin, & Gözüm, Ali İbrahim Can. (2023). Augmented reality app in
pre-school education: Children’s knowledge about animals. Southeast Asia Early
Childhood Journal, 12(2), 130–151.