UI/UX integrated holistic monitoring of PAUD using the TCSD method

Received Sep 8, 2020 Revised Mar 30, 2021 Accepted Jun 24, 2021 User interface (UI)/user experience (UX) is one part of the stages in the development of the system to produce interactive and attractive web-based application layouts so that it is easy to understand and use by users. In this research, a case study was conducted on early childhood in PAUD Kuntum Mekar. The design of the UI/UX model for holistic integrative PAUD monitoring becomes one of the solutions to help parents and teachers. The method used to design UI/UX is the task centered system design (TCSD) approach starting from the stages; 1) identification scope of use, 2) user centered requirement analysis, 3) design and scenario, and 4) walkthrough evaluate, the method used for system testing is user satisfaction, and heuristic usability. The purpose of this study is the UI/UX design with TCSD can provide valid data needs of each actor based on the assignment and design of the story board of the developed system. The results of this research are UI/UX model design for integrative holistic PAUD monitoring application.


INTRODUCTION
User Interface is an aggregate of the means by which system users interact with machines, devices, computer programs, or other tools. UI provides the means: Input, allowing the user to control the system; and Output, enabling the system to inform users. Blair-Early and Zender [1] meanwhile, user experience (UX) is a person's perception and response to the use of a product, a system used, or service by providing an assessment of how satisfied and comfortable using it is. Nikam et al. [2] the basic principle in designing a UX is that users have the experience that users determine to have the experience to the level of satisfaction based on satisfaction and comfort in interacting with products, systems, or service. If the UX features are developing well but there are no end-users who are satisfied and comfortable, the value of UX will be low [3], [4].
TCSD method is one of the methods used to design UI/UX in accordance with the task needs of system users through useability testing, so the user interface design becomes better and optimal, and easy to use. S. Greenberg [5]. TCSD is a process that can be describing as; 1) a concrete description in the form of the real world, such as doing every task in everyday life [6], 2) Determine the users and assignment in the system based on the descriptions of the users, 3) designing a prototype of an interface that meets system requirements, 4) evaluate the interface by performing a task-centered walkthrough [7], [8].
The research object case study is PAUD Kuntum Mekar in the village of Baros Serang Banten. The problem that exists in PAUD Kuntum Mekar is that the current education system requires communication between parents and teachers so that it requires informative and easy-to-use media. Beside that, the researchers designed a UI/UX model for the needs of a web-based integrative holistic PAUD monitoring information system. This research uses the TCSD method, so the system design developed is followed by user needs, easy to use, interactive, and informative. The purpose of this study was to provide up-to-date information about activities at PAUD Kuntum Mekar is information on a balanced nutrition menu, information on health care, information on child development, and immunization schedules. The scope of this studied discusses UI/UX design based on user needs tasks through the stages in TCSD. The contribution of this research is in the form of a integrative holistic UI/UX design to make it easier for every user involved with the system starting from health monitoring management, PAUD data management, and PAUD monitoring card management.

RESEARCH METHOD
The software development method in this research is to use the TCSD method because it makes it easier for the author to group the work based on the duties and responsibilities of the user required by the Integrative Holistic monitoring system for children of early childhood. The stages of the research method in TCSD can be seen in Figure 1. The flow of the integrative holistic UI/UX design starts from the following stages are [9], [10]: a. The preparation stage, at this stage the identification of problems from the Integrative holistic monitoring system of children of early childhood is carried out. The problem-solving solution was created, by determining the scope and objectives of the systems that fit the business process, b. System user identification stage, at this stage a description of the system is carried out, identifying system users, defining the scope of the system and describing the potential of the existing system, c. The system user requirements analysis stage, at this stage, the component specifications for UI/UX are prepared, d. Design stage scenario system creation, at this stage the user interface design is carried out according to user needs and compiles the story board of each UI, e. The UI search evaluation stage, at this stage, determine who the system user is, assign system user, the required UI and business process flow as well as UI improvements based on search results. Sampling testing was carried out on eight users of the system consisting of teachers, parents of PAUD and health experts. The reason for only assigning eight users to be used as sampling is because the scope of the project does not involve many users. Nielsen [11], [12] the method used for task testing uses a Likert scale to assess positive attitudes with positive statements and negated attitudes through negative statements. A. Joshi et al. [13], the equation of the calculation formula to determine the number of ideal values obtained from the maximum value multiplied by the number of users can be seen in formula (1).

Ideal value=5 x Many Users
(1) To determine the index value based on the number of respondents' values divided by the total ideal number of population multiplied by 100%, it can be shown in formula (2).
While the determination of the average calculation is obtained from the total number of respondents' values divided by the total number of ideal values multiplied by 100%, it can be seen in formula (3).
Average=( total number of respondents score total ideal Number ) x 100% (3)

RESULTS AND ANALYSIS
The flow of activities for designing the UI/UX holistic integrative monitoring model for PAUD using the TCSD method has 4 stages that must be followed, namely [14], [15]; 1) identification scope of use, 2) user centered requirements analysis, 3) design as scenario, and 4) walkthrough evaluate.

Identification scope of use
User identification focuses on the Kuntum Mekar school where researchers interview the information needs of each user related to the system and plan the content requirements needed so that the development of a holistic integrative monitoring system application is in accordance with existing business processes. This stage also determines the tasks and users involved in running the application. Interviewing about the tasks of each user involved in the purpose is to see the habits carried out by each user. After identifying the user there are 3 users where each user has a different task. Details of the tasks required by system users can be seen in Table 1. The teacher of PAUD has the task and responsibility of making master data for PAUD children, list of healthy menus for children of PAUD, monitoring the development of nutrition for children of PAUD, immunization schedule, monitoring of immunization data for children of PAUD, making health care schedules for children of PAUD, making monitoring of recording data on children's health development PAUD and make a schedule of giving vitamins for children PAUD. Parents PAUD parents can monitor the nutritional development of their children, monitor immunization schedules, provide vitamins, health care, monitor the results of children's development and health Health Expert Provide immunization vaccines, check the health of teeth, mouth and nails, provide vitamins and provide a balanced nutritional menu.

User centered requirement analysis
Analysis of the needs of system users is carried out through data needs analysis based on direct observation and interviews [16]- [18] with Kuntum Mekar's PAUD and the parents of the PAUD 's children. The results of the needs analysis will be used as a reference for making system improvements. There are 3 analysis studies based on needs consisting of: a. Analysis of information needs, the problem faced by Kuntum Mekar is that the PAUD teacher as the admin has difficulty making monitoring reports on the activities they have done and PAUD 's parents often lose information on activities carried out by their children while at school. Based on these problems, it is necessary to build a UI/UX model design for a web-based application of a holistic integrative monitoring system for young children so that all users can interact whenever and wherever they are. b. Analysis of data storage needs, the problem faced is that the data on young children is never updated and is often lost, such as data on activity records for young children regarding immunization schedules, healthy nutrition menu schedules, and health care schedules and poorly documented data on monitoring the health of young children. such as; giving vitamins, examination of teeth, and nails. c. Technology needs analysis, existing computer aids are still limited to the use of Microsoft office such as word, excel and ppt which are used as media for making reports so that errors often occur in making reports. Based on this, it is necessary to make a web-based PAUD children's health monitoring system application using the application software used are PHP, MySQL, and Laravel Web server using Xampp (Apache and phpMyAdmin).

Design as scenario
The system user activity process flow can be designed after the researcher identifies the integrative holistic activities carried out by PAUD Kuntum Mekar can be seen in Figure 2. The depiction of the process flow is divided into 3, namely: a. The process flow of the PAUD teacher's activities as admin In Figure 2 (a), you can see the flow of the system based on the activities of the PAUD teacher where the PAUD teacher can manage the holistic integrated monitoring website by accessing the PAUD data menu, the health monitoring schedule menu, the PAUD monitoring card menu, and the user menu as well as making reports to the PAUD school principal. b. Flow of user activity process as parent The process flow of parents' activities in using the holistic integrative monitoring website application starts from the registration menu to get a user account, the immunization schedule menu, the balanced nutrition schedule menu, the health care menu, and the PAUD monitoring report card menu. On the health care menu, there is a submenu of health checkup schedules and a menu of vitamin administration. Can be seen in Figure 2 (b). c. Flow of user activity process as a health expert Health experts have an important role in the development and growth of young children. Therefore the holistic integrative monitoring application provides facilities for health experts to be able to access the system through menus, namely; 1) updating immunization data, 2) updating health care data starting from examining teeth, skin, and nails and updating vitamin data, and 3) updating the menu balanced nutrition. Digram process flow can be seen in Figure 2 (c). The relationship between system users can be seen in Figure 2 (d). Where the interaction between teachers and parents depends on each other in monitoring the health development of young children. Meanwhile, the involvement of experts is a source of data that will provide immunizations, health checks, and the provision of a balanced nutrition menu for young children. This research has produced 9 main scenarios of the activities of the actors involved, namely; 1) managing PAUD master data, 2) making a list of healthy nutrition menus, 3) nutritional care, 4) immunization schedules, 5) health maintenance schedules, 6) immunization schedule information, 7) information on development of PAUD, 8) recording of immunization activities, and 9) recording of health care activities. Hardianto and Karmilasari [8], Silva et al. [19], Escanillan et al. [20] Scenarios in system design are indispensable in making system applications so that there is no mistake in coding programs and designing UI/UX according to the needs of system users.

Stroryboard design
The following is an example of making a storyboard for immunization content on a web-based, holistic integrative monitoring application. Immunization scenarios based on the main tasks produced are five task scenarios, namely; 1) the task of recording immunizations, 2) the task of recording immunization schedules, 3) the task of viewing immunization schedule information, 4) the task of immunization activities, and 5) the task of viewing reports on immunization activities. Admin users (PAUD teachers) can make data changes for immunization activities, while parents can only view information on the schedule of immunization activities. All storyboard designs can be seen in Figure 3.
After designing the conceptual model is complete, the next step for the researcher is to test the tasks that are included in designing the system application to be converted into a test scenario. Previously, researchers had obtained results from eight users who had been tested in a series of tests, then the users gave each interaction a score based on the task that had been carried out. In Table 2, you can get the ideal number=40 from the calculation of the number of tasks multiplied by the number of users according to formula (1). The value in the amount column is obtained from the total value of potential users per task. The test results based on the index value refer to the calculation formula (3). In the first task, there were 8 users with the index value=(30/40) 100%=79%. The calculation results for the second task up to the task five are the same as the first task.

Mockup design
Based on the storyboard design, a UI/UX mockup design has been made that has been approved by the system user. Hussain et al. [21] UI design uses the Marvel application tools that can be designed online.
The following UI/UX mockups can be seen starting from Figure 4 (a)-(e). Researchers did a UI redesign after getting feedback from the user. This design is carried out in order to get optimal results and tailored to user needs. The following is an image of the UI/UX design after improvements, see Figure 4. The researcher continues the next testing phase to get the optimal value from the user. It can be seen in Table 3 that the results of user satisfaction with the model design offered increased to 84.5% from the previous average value.   [21] , Klotins [22] all the design results as a scenario at this stage will be coded into the programming language using the hypertext prepocessor (PHP) script language and my structured query language (MySQL) database. Furthermore, the design evaluation is carried out whether it is in accordance with the needs of the task and the needs of the user [23]. All the design results as a scenario at this stage will be coded into the programming language using the PHP scripting language and the MySQL database.

Usability heuristics
UI design testing uses usability heuristics to be able to observe user activities. Observation of user activity is carried out directly where the user and the researcher are at the same location at one time. This is done so that researchers get feedback from every activity undertaken by the user . Usability heuristic has 10 indicator variables that will be used as a tool to measure the UI that is designed. Nielsen [11], Filippi [24] Farzandipour et al. [25] indicators that are used as variables in the heuristic test can be seen in Table 4. After the task is made and tested, the overall assessment results of all integrated holistic monitoring application modules can be seen in Table 5. Based on Table 5, the average value index of the test results is 91%, it is means the users are satisfied with the final achievement. These results also indicate that the user has understood all the tasks used to design a web-based integrative holistic monitoring application system [26]- [28].

CONCLUSION
The conclusion of this study is that UI/UX design using the TCSD method for web-based applications can run on an intranet network or the internet. The development of this system is for easy data availability, easy data update management, user-friendly menus, and reporting. UI/UX design testing uses satisfaction with test results of 84.5%. This proves that the preparation of the designed tasks has answered user needs. The usability system test uses a usability heuristic by using ten indicators are used as measurement variables. The test result was 91%. Based on these conclusions, this study suggests are the development of mobile app-based applications can be continued so that parents can more easily monitor every activity carried out by the PAUD school. Besides, applications can be developed integrated with population data in Baros Serang District, Banten.