Journal of Applied Multimedia and Networking (JAMN) Vol.
No.
Desember 2025, pp.
e-ISSN: 2548-6853 Design and Development of UI/UX HRIS Application for Human Resource Management at PT Kreatif System Indonesia M Taufiq Karim Haikal*.
Hilda Widyastuti**, * Multimedia Engineering Technology.
Batam State Polytechnic ** Informatics Engineering.
Batam State Polytechnic Article Info
ABSTRACT
Article history:
The rapid shift toward digital business requires organizations to implement integrated Human Resource Management (HRM) systems to reduce inefficiencies caused by manual processes.
At PT Kreatif System Indonesia, the lack of integration between the fingerprint attendance system and core HR functions resulted in fragmented data, higher human error risk, and reduced decision-making accuracy.
This study focused exclusively on PT Kreatif System Indonesia to address its internal operational challenges.
The research aimed to design a consistent, easy-to-use, and memorable UI/UX based on Material Design principles and validate it through comprehensive usability Interface consistency was emphasized to reduce cognitive load, improve recognition, and support smooth task execution across different user skill levels.
The Prototyping development model enabled iterative refinements through continuous user feedback.
Usability was evaluated using Task Completion Rate (TCR).
Time-Based Efficiency (TBE), and the System Usability Scale (SUS).
The developed HRIS successfully integrated all targeted modules.
Initial testing achieved a TCR of 87.
85% and a TBE of 0878 goals/second, which improved to 93.
45% and 0.
1258 goals/second after UI/UX enhancements.
A SUS score of 74.
42 indicates that the system is acceptable and well received.
These results confirm that consistent UI/UX design significantly enhances HRIS effectiveness, efficiency, and usability.
Received Aug 23rd, 2025 Revised Dec 27th, 2025 Accepted Dec 28th, 2025 Keyword:
UI/UX
HRIS
Human Resource Usability HRM Corresponding Author:
Hilda Widyastuti.
Informatics Engineering.
Batam State Polytechnic.
Ahmad Yani St.
Teluk Tering.
Kec Batam Kota.
Batam.
Riau Island, 29461.
Indonesia Email: hilda@polibatam.
INTRODUCTION
The rapid advancement of digital technology has significantly transformed Human Resource Management (HRM) practices .
Manual HR processes often lead to inefficiencies, data inconsistencies, and recording errors that reduce the accuracy of performance evaluation and managerial decision-making.
At PT Kreatif System Indonesia, the fingerprint-based attendance system operates separately from payroll, leave, and overtime modules, resulting in manual verification processes, increased administrative workload, and higher risk of human error.
These challenges emphasize the need for an integrated Human Resource Information System (HRIS) to improve efficiency, data consistency, and decision-making accuracy .
However.
HRIS success depends not only on functionality but also on user adoption, which is strongly influenced by system usability, interface quality, and user experience .
Effective UI/UX design plays a critical role in minimizing errors, improving user satisfaction, and ensuring sustained system use .
Despite increasing HR digitalization, many studies still prioritize system implementation while providing limited focus http://jurnal.
id/index.
php/JAMN e-ISSN: 2548-6853 on UI/UX and user-centered design solutions .
Therefore, this study proposes the design and development of an HRIS using a prototyping approach with a strong emphasis on UI/UX.
The system integrates core HR functions and is quantitatively evaluated to measure effectiveness, efficiency, and user satisfaction, aiming to demonstrate the impact of user-centered UI/UX design on HRIS usability and operational performance .
RESEARCH METHOD
This study adopts the Prototyping method to facilitate iterative development based on direct user feedback .
The development process began with requirement identification and user persona refinement, feature planning, workload estimation, obstacle identification, and tool selection.
The completed system was then reviewed by the company, followed by usability testing and evaluation using a descriptive quantitative approach .
An overview of the development process based on the Prototyping Model is shown in Figure 1.
Figure 1.
Prototyping Model (Pressman: 2.
Communication This stage analyzes user personas based on technological proficiency, classified into AulowAy and AuhighAy The AulowAy persona requires simple and intuitive interfaces, while the AuhighAy persona can effectively utilize more complex system features .
This classification supports UI/UX design alignment with actual user needs, as summarized in Table 1.
User needs were identified through interviews with the general manager, administrative officer, and operational technicians, as the company has no dedicated HR staff.
The interviews revealed fragmented and manual HR processes resulting in inconsistent user experiences.
These findings indicate the need for an integrated HRIS interface that streamlines workflows, reduces cognitive load, and provides centralized data visualization.
The identified system requirements are presented in Table 2 .
Table 1.
User Persona Aspect Low-Level User Persona High-Level User Persona Objectives Basic HR operations .
Managing employee data.
attendance and performance analysis.
Demographics Age 18-27.
male and female.
technicians and sales staff.
Age 19-50.
male and female.
admin officers.
Knowledge Smartphone as primary device.
familiar with simple apps.
Uses both PC and smartphone.
familiar with productivity and administrative systems.
Habits Prefers simple interfaces.
stops or asks for help when confused.
Actively explores features.
reads guidelines and adapts to new Goals fast access with clear essential information.
efficient monitoring, validation.
and decision-support Complex layouts.
slow performance.
too many menus.
Unresponsive system.
inaccurate data.
lack of analytics and management features.
Frustrations Table 2.
User Needs Role UI Needs UX Needs Feature Requests General Manager Clean and professional dashboard with simple data visualizations.
Fast access to key information, cross-device flexibility, stable and easy to use.
Attendance with location tracking, integrated HR modules, automated payroll calculation, summary dashboard.
JAMN Vol.
No.
Desember 2025: 99 Ae 111
JAMN
e-ISSN: 2548-6853 Role UI Needs UX Needs Feature Requests Admin Office Readable data tables with search and consistent input forms.
Consistent workflows, easy data access and Automated payroll module, synchronized data across modules.
Excel export, payroll processing.
Technician Simple and consistent interface with clear task details and easy process.
Simple task flow, readable information, fast upload process.
Location-based task assignment, task report form with uploads, task schedules, notifications.
Quick Plan At this stage, quick planning outlines key features, development timelines, potential challenges, and proposed solutions for the HRIS based on user personas and identified requirements .
These elements are summarized in Table 3.
Table 3.
Quick Plan Features Timelines Potential Problem Solution Attendance.
Leave.
Overtime.
Payroll.
Task.
Employee Data.
Reminder.
12 - 14 week / 3 Device compatibility, user Flutter based cross-platform implementation.
Feedback user loop Quick Design The desktop wireframe, shown in Figure 2.
Navigation and interaction flows are aligned with the mobile version.
The mobile wireframe emphasizes simplicity and readability.
These design principles are consistently applied across all pages in accordance with Material Design guidelines .
Figure 2.
Low-Fidelity Design UI (Wirefram.
Construction of Prototype The application employs a minimalist visual design with light and dark modes, as shown in Figure 3.
Dark mode uses a dark-gray background (#121.
with white text, while light mode uses a light-gray background (#F0F0F.
with black text .
A consistent functional color system is applied, supporting rapid status recognition and reducing user error in line with minimalist design principles .
Figure 3.
Color Palette.
From a typographic perspective, the application uses the Poppins font to supports the readability of dense information while minimizing visual clutter and eye fatigue.
Open letterforms and a large x-height maintain clarity even at smaller sizes .
, as shown in Figure 4.
Design and Development of UI/UX HRIS Application for Human Resource Management at PT Kreatif System Indonesia (Haika.
e-ISSN: 2548-6853 Figure 4.
Font Poppins.
Subsequently.
Figure 5 presents the high-fidelity website and mobile design refined from the earlier The CCTV background on the mobile landing page serves as a visual representation of the companyAos identity and reinforces its core brand Dahua as the flagship product and a distinguishing element of its position as an official distributor.
Figure 5.
High-Fidelity Design UI.
Next.
Figure 6 illustrates the differences in tabular data presentation between the mobile and website On mobile, each row is displayed as an individual card, ensuring a consistent vertical scrolling flow and improving readability.
In contrast, the website uses a conventional multi-row table, which is more efficient for large-scale data management and administrative workflows Figure 6.
Difference Table Design Between Mobile and Web.
Figure 7 illustrates the applicationAos use case diagram, depicting interactions between system actors and functional modules.
The General Manager manages employee data, tasks, attendance, final approval of leave and overtime, reminders, and payroll.
The Admin Office handles task management, attendance recording, initial approval of leave and overtime, reminders, and payroll.
Users can record attendance, complete assigned tasks with attachments, and submit leave and overtime requests .
Figure 7.
Use Case Diagram.
Figure 8 illustrates the applicationAos navigation flow.
Users log in using a registered account, while unregistered users must contact the administrator for account creation.
After successful authentication, users access the dashboard displaying key information such as performance and attendance summaries.
Additional modules are accessed via the navigation bar, and sessions are terminated through the logout option.
This structured flow supports intuitive navigation and reduces user confusion .
JAMN Vol.
No.
Desember 2025: 99 Ae 111
JAMN
e-ISSN: 2548-6853 Figure 8.
User Navigation Flow.
1 Task Completion Rate (TCR).
Task Completion Rate (TCR) testing was conducted to evaluate the effectiveness of the HRIS Data were collected through direct observation as participants completed predefined, role-based task scenarios.
Each task was classified as successful if completed independently and unsuccessful if researcher intervention was required.
The researcher acted solely as an observer, providing assistance only in cases of technical failure.
The observation results were quantified to calculate the TCR for each task scenario using the following formula:
ycNyaycI = ycAycycoycayceyc ycuyce ycyycaycycycnycaycnycyycaycuycyc ycEaycu ycaycuycoycyycoyceycyceycc ycEayce ycycaycyco y 100 ycNycuycycayco ycuycycoycayceyc ycuyce ycyycaycycycnycaycnycyycaycuycyc Following this, the systemAos effectiveness was evaluated using the Effectiveness Measurement Standard, as shown in Table 8, to determine the extent to which the implemented features meet functional requirements and support overall user performance.
Table 8.
Effectiveness Measurement Standard established by the Litbang Depdagri.
Rasio Efektivitas Tingkat Pencapaian < 40% Sangat Tidak Efektif 40% - 59.
Tidak Efektif 60% - 79.
Cukup Efektif
> 80%
Sangat Efektif Task scenarios were evaluated based on user roles, as shown in Table 4, involving 13 participants:
Managers .
Admin Office staff .
, and Users .
The assessment measured participantsAo ability to complete tasks independently.
A high TCR reflects an effective, intuitive, and easily understood interface, while a low TCR indicates issues in design, navigation, or workflow.
These findings form a basis for assessing and improving the systemAos usability and overall effectiveness.
Tabel 4.
Task Scenario.
Task Manager Task Admin Office Task User Logging into the system using a valid manager Logging into the system using a valid account.
Logging into the system using a valid Adding a new employee.
Viewing the employee payroll list and exporting salary data to CSV format.
Performing check-in attendance on the main page.
Editing the information of an already registered Adding a new reminder.
Performing check-out attendance after Deleting one employee record from the list Performing check-in attendance on the main page.
Uploading task attachments on the task Design and Development of UI/UX HRIS Application for Human Resource Management at PT Kreatif System Indonesia (Haika.
e-ISSN: 2548-6853 Viewing the employee payroll list and exporting salary data to CSV format.
Performing check-out attendance after work.
Submitting a leave request.
Adding a new reminder.
Creating a new task and assigning it to a specific Submitting an overtime request.
Viewing and monitoring the attendance list of all Submitting a leave request.
Logging out of the application after completing tasks.
Creating a new task and assigning it to a specific Approving or rejecting leave requests from Approving or rejecting employee leave requests.
Submitting an overtime request.
Approving or rejecting employee overtime Approving or rejecting overtime.
Logging out of the application after completing all Logging out of the application after completing 2 Time-Based Efficiency (TBE).
Time-Based Efficiency (TBE) testing was conducted using the same task scenarios as the TCR Task completion time was measured with a stopwatch, starting at task initiation and ending upon completion or failure.
TBE values were calculated by combining task success status .
= success, 0 = failur.
with completion time and averaging the results across all participants.
The calculation used the following ycI ycA ycuycnyc yuyc=1 yuycn=1 ycycnyc ycNyaAya = ycAycI This approach measures interface efficiency, where failed tasks or longer completion times result in lower TBE values, while successful tasks completed more quickly yield higher TBE values.
Thus.
TBE serves as an objective indicator of overall system efficiency, which is subsequently compared with the time-behavior indicator interval to determine the efficiency level, as presented in Table 9.
Tabel 9.
Interval Indicator Time Behavior.
Time Qualification 1 - 5 Minute Very Fast 6 - 10 Minute Fast 11 - 15 Minute Slow 3 System Usability Scale (SUS).
System Usability Scale (SUS) data were collected using a 10 item questionnaire on a 1-5 Likert scale.
Odd-numbered items were positive and even-numbered items were negative, to reduce response bias.
The questionnaire was distributed online via Google Forms to ensure efficient and accurate data collection, with the list of questions presented at table 7.
Tabel 7.
SUS Questionnaire.
Item Question Scale I feel that I will frequently use this HRIS application in my daily work.
- Q2
I feel that this HRIS application is too complicated to use.
JAMN Vol.
No.
Desember 2025: 99 Ae 111
JAMN
e-ISSN: 2548-6853 Item Question Scale I feel that this HRIS application is easy to learn and use.
- Q4
I feel that I need assistance from others in order to use this HRIS application.
I feel that the main features in this application are well integrated.
- Q6
I feel that there are many inconsistencies in this HRIS application.
I feel that other people will easily understand how to use this HRIS application.
- Q8
I feel that this HRIS application is confusing to use.
I feel confident when using this HRIS application.
- Q10
I feel that I need to learn many things first before being able to use this HRIS application.
SUS scoring followed the standard rules: positive items used .
esponse - .
, negative items used .
The total score .
was multiplied by 2.
5 to obtain a final SUS score of 0-100.
Mean SUS scores were then calculated and compared to the benchmark score of 68.
Scores above this threshold indicate above-average usability, with further interpretation available through adjective ratings, grade scales, and acceptability ranges as illustrated in Figure 9.
Figure 9.
System Usability Scale Score.
Deployment.
Delivery.
Feedback After the prototype was completed, the design was delivered to the company through a presentation to communicate the proposed UI.
The final interface, shown in Figure 10, illustrates the complete UI design, including support for both light and dark themes to enhance usability.
Figure 10.
Overall UI design of the page.
RESULTS AND ANALYSIS
The system opens with a login page.
After login, access is differentiated by user roles, directing each to a corresponding dashboard as shown in Figure 10.
Users record attendance via a dashboard card with clockin and clock-out options.
Selecting an option opens the attendance form, where users enter date and time, capture and verify GPS-based location, and, for clock-in, record facial data using a hold-to-record feature.
Once all fields are completed, the form is submitted to finalize attendance.
Design and Development of UI/UX HRIS Application for Human Resource Management at PT Kreatif System Indonesia (Haika.
e-ISSN: 2548-6853 Figure 10.
Login.
Dashboard & Attendance Page.
The leave & overtime page allows users to submit leave requests and view existing records in a table format (Figure .
A floating action button (Au A.
opens the leave form.
Submitted requests are assigned a Figure 12.
Leave & Overtime Request Form Figure 13 illustrates the task page, which follows the same layout pattern as other pages to maintain design consistency.
A floating Au Ay button is provided to add new task entries.
The task form includes a location field that assigns employees to specific sites.
For assigned users, an upload field is available.
selecting it opens an edit form where users submit evidence of task completion.
The task status is then updated by the admin based on the uploaded documentation.
The payroll interface, where salary data is generated automatically based on existing employee information.
Deduction and allowance components are integrated with variables such as leave records, overtime, taxes, and attendance, enabling automated salary calculations that improve accuracy and efficiency.
Figure 13.
Add Task Form & Payroll Page Figure 15 presents the employee management interface.
This feature is used to register new employees as active HRIS users.
This interface streamlines administration by ensuring employee data are systematically recorded and integrated with payroll, attendance, leave, and overtime modules.
Furthermore.
The Reminder page, which follows the same layout consistency as other interfaces.
This module functions as a scheduler for recurring obligations, such as monthly vehicle maintenance, tax payments, and other administrative tasks.
The system automatically sends reminder notifications to the responsible user starting seven days before the due Notifications are delivered through the application and email each day until the task is completed.
Figure 15.
Employe Management & Reminder Page 1 Task Completion Rate (TCR) The Manager role achieved a TCR of 90.
91% (Highly Effectiv.
, with most tasks reaching 100%, indicating strong UI/UX performance.
However.
TS09 .
eave approva.
and TS10 .
vertime approva.
scored only 50%, highlighting major usability issues that require immediate improvement.
The Admin Office role recorded a TCR of 86.
36%, with nine tasks achieving perfect completion rates.
Nevertheless, the approval JAMN Vol.
No.
Desember 2025: 99 Ae 111
JAMN
e-ISSN: 2548-6853 module showed critical weaknesses, where TS08 .
eave approva.
failed entirely .
%) and TS10 reached only 50%, indicating severe design flaws in approval workflows.
The User role attained a TCR of 87.
30%, with core daily tasks performing well.
However, usability issues were observed in TS01 (Logi.
TS05 (Leave Reques.
, and TS06 (Overtime Reques.
, while TS04 (Upload Task Attachmen.
emerged as the most critical issue with a TCR of 66.
67%, suggesting non-intuitive interaction or functional problems.
Overall, the system achieved an aggregate TCR of 87.
85% across 107 task attempts, classifying all roles as AuHighly EffectiveAy (Manager: 90.
Admin Office: 86.
User: 87.
30%).
Table 7.
Task Completion Rate
Manager Admin Office
User
Success
TCR (%)
Success
TCR (%)
Success
TCR (%)
TS01
TS01
TS01
77,78
TS02
TS02
TS02
TS03
TS03
TS03
TS04
TS04
TS04
66,67
TS05
TS05
TS05
88,89
TS06
TS06
TS06
77,78
TS07
TS07
TS07
TS08
TS08
TS09
TS09
TS10
TS10
TS11
TS11
Average 90,91 Average Average 87,30 86,36 2 Time-Based Efficiency (TBE) Based on the TCR results, the Manager role successfully completed 20 of 22 tasks, with failures occurring in TS09 and TS10.
As shown in Table 10, the average completion time produced a Time-Based Efficiency (TBE) 1112 goals/second, equivalent to approximately 9 seconds per task, which is classified as very fast according to time-behavior indicators.
In this study, the notation 1/x represents a successful task completed in x seconds, while 0/x indicates a failed attempt recorded at x seconds.
Overall, the results indicate high task efficiency from the ManagerAos perspective.
Similarly, the Admin Office role completed 19 of 22 tasks, with failures in TS08 and TS10.
As presented in Table 11, the average task completion time was under one minute, resulting in a TBE of 0.
0655 goals/second .
pproximately 15 seconds per tas.
, also categorized as very fast.
These findings demonstrate efficient task performance for the Admin Office role.
Table 10.
Time-Based Efficiency Manager Manager Admin Office Task Avg .
Task Avg .
TS01
1/11
TS01
1/12
TS02
1/62
1/57
TS02
1/34
1/23
TS03
1/16
1/11
TS03
1/17
1/14
Design and Development of UI/UX HRIS Application for Human Resource Management at PT Kreatif System Indonesia (Haika.
e-ISSN: 2548-6853 Manager Admin Office Task Avg .
Task Avg .
TS04
TS04
1/18
1/27
TS05
1/18
1/21
TS05
1/13
TS06
1/19
1/22
TS06
1/35
1/49
TS07
TS07
1/14
1/15
TS08
1/50
1/44
TS08
TS09
1/11
TS09
1/10
1/12
TS10
TS10
1/12
TS11
TS11
TBE
0,1112 goals/sec TBE 0,0655 goals/sec For the User role, 55 of 63 tasks were completed, with a Time-Based Efficiency (TBE) of 0.
goals/sec, each task took 11.
5 seconds, classified as fast presented in Table 12.
Overall Time-Based Efficiency (TBE) analysis indicates that all user roles achieved Very Fast performance.
The overall average TBE was 0878 goals/second, equivalent to approximately 11.
38 seconds per task, confirming that the system enables rapid task completion across all roles.
Table 12.
Time-Based Efficiency User
1/15
1/21
1/17
0/23
0/25
1/19
1/11
1/14
1/26
1/29
1/22
1/13
1/16
1/14
1/20
1/32
1/19
1/10
1/14
1/11
1/16
1/15
1/16
1/18
1/17
1/22
1/15
1/11
1/12
1/19
1/10
1/12
0/12
1/16
1/15
1/18
1/16
1/11
1/12
1/11
1/15
TBE : 0,0655 goals/sec 3 System Usability Scale (SUS) The System Usability Scale (SUS) results, presented in Table 16, show respondent scores ranging from 40 to 100 on a 0Ae100 scale, with an overall average of 74.
Based on SUS interpretation standards, this score falls within the Acceptable acceptability range, with an adjective rating of Good and a grade scale of C.
JAMN Vol.
No.
Desember 2025: 99 Ae 111
JAMN
e-ISSN: 2548-6853
Q10
Table 13.
System Usability Scale The lowest SUS score was 40 (R.
, while the highest reached 100 (R7.
, as shown in Figure 17.
The average score of 74.
42 corresponds to Grade C with an Adjective Rating of Good, indicating that the system is generally acceptable and relatively easy to use for most users.
However, a 60 point gap highlights inconsistent user experience.
Other respondents scored between 52.
5-95, suggesting that usability is not uniformly effective.
Scores in the 40-65 range indicate significant usability failures that cannot be ignored.
Figure 17.
System Usability Scale Chart 4 Evaluation and Improvement Evaluation identified usability issues requiring improvement.
In the web version, leave approval initially required users to click the edit .
icon, causing confusion since the icon typically indicates data The UI was revised so approval is now handled via a status dropdown, simplifying the approval Before-and-after views of this improvement are shown in Figure 18.
A similar issue occurred in overtime approval.
The system was updated to use a status dropdown, ensuring a more consistent approval Before-and-after views of the improvement are shown in Figure 18.
The task attachment upload process was improved as shown in Figure 18.
Previously, users had to click the edit button to access the upload The update displays AuUpload AttachmentAy text in the table when the attachment column is empty, which directly opens the form when clicked.
Additionally, a AuSelect FileAy button was added to clarify the workflow and reduce user confusion during the upload process.
Before After Figure 18.
Approval (Top: Befor.
, (Bottom: Afte.
Upload Attachment.
Design and Development of UI/UX HRIS Application for Human Resource Management at PT Kreatif System Indonesia (Haika.
e-ISSN: 2548-6853 Table 14.
TCR & TBE After Refinement Scenario
User
Success
TCR
Approve or reject leave request Approving or rejecting overtime.
Upload Attachment.
TBE
0,3125
0,0956
CONCLUSION
The Human Resource Information System developed in this study successfully integrates core HR functions into a unified platform.
The evaluation results demonstrate that the system effectively addresses the research objectives.
Effectiveness test achieved an initial Task Completion Rate (TCR) of 87.
85%, indicating that most scenarios were completed without major obstacles, after resolving issues in the failed scenarios, each task reached 100% completion, and the combined post-improvement TCR increased to 93.
45%, confirming that the previously identified usability barriers were successfully mitigated.
Efficiency testing further supports these findings, with an initial Time-Based Efficiency (TBE) of 0.
0878 goals/sec categorized as very fast, which improved to 0.
1258 goals/sec after adjustments, reinforcing that the system enables rapid and efficient task User satisfaction, measured through the System Usability Scale (SUS), yielded a score of 74.
above the benchmark of 68 indicating that the application is perceived as acceptable.
Collectively, these results demonstrate that the proposed system provides a contribution by delivering an effective, efficient, and usable HRIS solution, validating the design decisions and confirming its feasibility for adoption within small-scale companies.
Based on these findings, several recommendations for future development can be proposed, including expanding the systemAos features to support more complex business processes, conducting evaluations in medium and large-scale organizations to obtain broader and comparable insights, and involving a larger number of users to ensure consistency in system effectiveness across diverse operational contexts.
ACKNOWLEDGEMENTS
The author declares no conflict of interest, and this research received no external funding support from any institution at any stage.
REFERENCES