ON INFORMATICS VISUALIZATION

— Currently, an academic system with structured data is needed for all lecture institutions, especially universities in Indonesia, Siliwangi University, with its academic system, namely the Campus Academic Information System (SIMAK). Over time, complaints from the visual aspect and user experience that did not keep up with the times became a new problem for SIMAK with student access rights. Therefore, the UI/UX aspect in developing an application is vital in accessing the available features. In this study, the method applied is Design Thinking to develop SIMAK WEB and SIMAK MOBILE application designs according to the data and input obtained from users. The research stages include Empathize, Define, Ideate, Prototype, and Test. The final result is user testing from expert users with ten examiners, each producing a success rate percentage of 100% for SIMAK WEB and a percentage of 90% for SIMAK MOBILE. In addition, the User Experience Questionnaire (UEQ) assessment from the same expert user plus end-users of 39 respondents and 33 respondents for web and mobile respectively increased 6 UEQ scales, namely Attractiveness, Clarity, Efficiency, Accuracy, Stimulation and lastly especially Novelty which has an increase of 5.286 and 5.264 from the initial value of -0.880. The Novelty scale is the only scale with a negative impression initially and was successfully evaluated in this study with a good score. The implication for further research is that an in-depth study and application of unique methods regarding the conversion of designs into prototype form is necessary so that coding can run smoothly.


I. INTRODUCTION
Academics are all formal educational institutions that provide education in a branch or part of a particular branch of science, technology, or art [1]. With technological advances, an academic system with structured data is needed for all lecture institutions, especially universities in Indonesia today. A system that processes data and academic activities involving students, lecturers, academic administration, assessment, and other attribute data is known as an academic information system [2].
SIMAK was first released in 2010 and is a web-based Siliwangi University academic information system that is accessed by approximately 13,000 active students [3] with academic features of student access rights such as KRS, exam registration, value data, UKT payments, KKN registration, practical work, seminars, sessions, final project and other academic activities.
In developing a web-based or mobile-based system, the designer has many aspects to ensure that the system developed can meet user needs. If a user or users experience difficulties or discomfort in using a system, especially in this case, SIMAK, it indicates that the SIMAK service has less than optimal performance and needs re-evaluation. Evaluating a software environment's usability is an important measure of its success and is useful in assisting the design process and ensuring user satisfaction [4]. Approaches with usability aspects can be implemented in analyzing the user interface (UI) and user experience (UX) at SIMAK. Usability is the ease of use and understanding software applications [5].
UI is part of the system that acts as an intermediary between users and facilitates users to interact with the system efficiently [6], [7]. User Interface has been recognized as one of the most critical elements of a software project, and it has been estimated that as much as 48% of the project work goes into the design and implementation of the user interface [8]. The importance of Human-Computer Interaction (HCI) shows that at least 50% of the program code is devoted to the User Interface. However, the importance of interface design and HCI topics has not risen to a high level in information systems and science education [9].
Unlike the User Interface (UI), User Experience (UX) User Experience (UX) refers to an encounter with a system that has a beginning and an end. It refers to the overall designation of how people have experienced periods dealing with a system. This view emphasizes user outcomes and recalls rather than their dynamic nature [10], [11]. Another opinion states that User Experience (UX) increases user satisfaction, pleasure, needs, and engagement with the interaction of a product made. User Experience (UX) is concerned with studying, designing, and evaluating the experiences people have through using (or encountering) a system [12].
The concept of design thinking has existed since the 1960s, which is called design science [13]. Design thinking directs designers to new ways of thinking and ideas to find optimal designs through breakthrough design conception, and more new products can be created [14], [15].
In the field of design, Jobst et al. [16], Meinel et al. [17], Serrat [18], Carayanni [19], Augier and Teece [20], and Kenny [21] conducted relevant studies on the application of design thinking, and Tu et al. proposed improving tutorials with design thinking [22]. IBM Design Thinking Software Development Framework has also carried out similar research. The research explained that the Design Thinking approach method had been applied to produce better designs [23], [24]. It is an effective solution to problems that arise in Software Development, especially in the Agile Software Development (ASD) approach method, in which ASD methods are still traditional (waterfall methods), and the success rate is still low. It also takes a long time to develop [25], [26]. The rest, comfort, and user experience are benchmarks for a system's success in helping users meet their needs with the system. Using the Design Thinking method for UI and UX design and the User Experience Questionnaire (UEQ) for collecting assessment data from users, it is hoped that new products that are more comfortable and simple will be created so that users can feel comfortable easily using SIMAK.
According to the initial User Experience Questionnaire (UEQ) results from the researchers conducted on Siliwangi University students, there were 156 responses from Siliwangi University students and students from various majors and batches. The questionnaire collects user opinions about a system's UI and UX quality, especially SIMAK's UI and UX assessment. The questionnaire results show that the SIMAK display does not follow the latest design developments and the need for a new display. Furthermore, another thing that needs to be improved is the presentation of information, especially the menus displayed so as not to confuse users when they want to meet their needs, and the users themselves get satisfaction, comfort, and convenience in using the SIMAK. In addition, the development of mobile-based SIMAK is also needed to provide convenience in accessing the SIMAK features and website use.
To solve these problems, we need a design methodology for the current problems: Design Thinking. The background of using this method is because the Design Thinking method can solve complex problems, and the solution is not yet known with the steps, namely rearranging the problem into the user's point of view, then making lots of ideas during the brainstorming session by adopting a direct approach in making the initial framework design. Finally, the developer will test the user. In addition, the Design Thinking method is currently being used by unicorn startups and medium-sized startups in product development because this method is an update from the previous method, so that time, cost, and energy in development can be reduced lower than other methods.

II. MATERIAL AND METHOD
The research methodology carried out in this study is shown in Figure 1.

A. Research -Empathize
The stage of Design Thinking, which is included in the Research stage, empathizes, where at this stage, user research is carried out to analyze and understand the problems that exist in the user and related user requirements. In this stage, researchers must understand what the user feels when using a product and what the user will say, and the output will produce an Empathy Map or User Experience Questionnaire (UEQ).
The empathize stage is an activity about data collection that prioritizes empathy for those around, especially users. The empathize stage in this research includes an online questionnaire using the User Experience Questionnaire (UEQ) to get a response about the usability of the SIMAK application. The User Experience Questionnaire (UEQ) itself is an easy and efficient questionnaire to analyze and calculate the User Experience (UX) value [27]. The purpose of using UEQ as a tool in usability testing is to conduct a concise and practical assessment of end-users that compiles a comprehensive impression that users prefer. Must allow users to express impressions, messages, feelings, and attitudes that arise when instantly using the product.

B. Analysis and Design
1) Define: The first stage of Design Thinking, which is included in the Analysis and Design stage, is Define. Define is an advanced stage when the product developer understands the problems and needs of the user and describes what they get as the basis for making the product. Next, we will produce a user persona, user scenario, and customer journey map. User Persona is a collection of data from personal users, which focuses on personal data such as demographic data, attitudes, behavior, motivation, influence, goals, and difficulties.
2) Idea: Ideate is the stage of describing the solution resulting from the brainstorming and the previously defined stage that will be useful for the user. Ideas can be compiled by evaluating the many ideas that have been achieved or achieved and will produce a user flow and sitemap, which is very important as a framework for working on the next stage.
C. Prototype 1) Low-Fidelity Wireframe: Low-Fidelity Wireframe, as the name implies, is a framework of an application that is practically uncomplicated and serves to start a design and helps communicate the features that will be displayed to the user, that the essential functions will also be discussed, including the layout and layout of an application or product. At this stage, you will visualize some essential elements such as buttons, text, navigation, padding, grids, and so on.
2) High-Fidelity Wireframe: High-Fidelity Wireframe is an advanced stage that is more complete and detailed than the previous low-fidelity. Several elements will be visualized at this stage, including icons, images, typography, visual hierarchies, illustrations, and others. At this stage, a demonstration of the elements made into a unified whole will also be simulated like a complete application in the form of a prototype. Hi-Fi is also the final and final stage in making the user interface of a system before entering the testing stage.

D. Test
At this stage, a test will be carried out with several users to measure the quality of the application from the user's point of view. This stage is crucial because developers will get feedback to evaluate applications or products that have been made and tested, especially users who have previously given an impression on applications that have been tried before if the case study is a redesign or application improvement.

III. RESULTS AND DISCUSSION
This section describes the results of the user interface (UI) and user experience (UX) modeling steps using a design thinking approach.

A. Empathize
On average, filling out the questionnaire from UEQ takes about 3-5 minutes. Data analysis can also be done quite efficiently by using the provided Excel-Sheet. The UEQ itself contains 26 questions which are grouped into several rating scales: Attractiveness, Perspicuity, Efficiency, Dependability, Stimulation, and Novelty.
Each item of the questionnaire is manifested as a semantic differential, i.e., each question item is composed of a pair of feelings or adjectives with opposite meanings (e.g., helpfulnot applicable). The final result of UEQ is depicted in a benchmark chart that shows the quality of the product into five categories: excellent, good, above average, below average, and bad. Researchers carried out the SIMAK evaluation using the User Experience Questionnaire (UEQ) method by distributing questionnaires containing 26 questions given to SIMAK users with a student scope. This questionnaire's product or system assessment scope includes KRS Services, Value Data, Class Schedules, and Finance.
Along with the questionnaire used, the following are the results of distributing online questionnaires, with the scope of the questionnaire being all Siliwangi University students from various batches and majors from 27 May 2021 to 27 June 2021 using Excel Sheet Google Forms. From 156 answers collected from respondents, each question has calculated the mean, variance, and standard deviation, and each question item is color-coded according to 6 rating scales: attractiveness, efficiency, novelty, clarity, accuracy, and stimulation. The average value > 0.8 is included in the positive evaluation (green up arrow), and the average value < -0.8 is included in the negative evaluation (red down arrow). If the average is between the two, it is between positive and negative evaluation values. It will be included in the neutral evaluation value (yellow arrow right).
From the data above, there are 156 responses from 8 faculties, each of which consists of various departments, indicating that all Siliwangi University majors have used SIMAK. It can be concluded that the majority of respondents came from the Engineering Faculty (FT) at 45.5%. Furthermore, all respondents who filled out the questions have given a scale from 1 -7, where each question item consists of pairs of terms or meanings of feelings and contradicting adjectives that can represent the assessment of the product.  Next, the efficiency scale gets an average value of -0.14. Next, the accuracy scale gets an average value of 0.63. Then the stimulation scale got an average value of 0.01, and the novelty scale got a low average of -0.88. The average result that can help further analysis is to determine the benchmark data set for comparing SIMAK products with 452 other products, which are product collections from the UEQ benchmark tools data set inputted into the central UEQ database. Table II shows the results of the comparison.
Based on Table II, it can be concluded that SIMAK needs to improve the user interface on the scale of attractiveness and novelty. At this scale, it can also be concluded that the user expects a new SIMAK design or user interface. Then improve the user experience on the efficiency, accuracy, and stimulation scale.

1) User Persona:
At this stage, a sample of 3 users was obtained, which were previous SIMAK users. The first is an active student from Siliwangi University, the second and third are Siliwangi University alumni.

2) User Scenarios:
This section aims to describe the user's flow and steps, starting from the problem that is the root to several solutions that will be given to meet the optimal goal. This stage focuses on the user's goals in meeting their needs in the system or user goals. This stage is also helpful in understanding, imagining, and evaluating UX design conceptually and physically from its UI design.

As a
College Student I want I want to use SIMAK UNSIL with an appropriate menu and to the point with the content the user is looking for, a comfortable appearance, and not dull even though in terms of its function, it is perfect and very helpful for students. So that I can access SIMAK UNSIL at the beginning of the semester, but it can be a user-friendly university system with students and administrative purposes, and it is better to add information about UNSIL in it. Scenario At the beginning of last semester, to be precise, when she finished PLP, Shinta wanted to pay UKT for the next semester, but when she wanted to pay, there were several stages, and one of them was the BIPOT process where the menu was in the student sub-menu again, which made Shinta confused. It would be nice if the payment menu were separated by itself. Then on the start page of the system, there is an announcement for 2018, and it does not seem updated even though the landing page is one of the core parts of the system.

3) Customer Journey Map:
In this section, a diagram is made that describes the various steps taken by the user in dealing with the problem by considering the user's feelings and motivations to know more deeply about the user. This section will explain the parts of the customer journey map: stages, user actions, user goals, channels, problems, and ideas. The stages section describes the stages that the user goes through in compiling the customer journey maps, consisting of awareness (the level of concern for the user's problem), considerations (consideration of solutions from the user), decision (actions from the solution being considered) and finally interest (interest in the solution to be considered)done). Next, user actions describe what the user's actions will look like on each stage encountered. Then user goals explain each goal of each stage. The channels define how the user uses and finds the steps for each stage. The stage of problems defines the problems that exist in each stage. Then the ideas stage defines the solution obtained from each stage the user faces.

C. Ideate
At the ideate stage, the data that has been obtained from the define stage must be developed into an idea. The ideate is the initial stage that enters into the realization of the solution into a product through several steps, including sketching, brainstorming, and prototyping. After the project map is created, the next step is to create a user flow to connect the user steps from the beginning of entering the system to the final stage until the user finishes getting what he needs.

1) Wireframe Low Fidelity:
In this section is the initial sketch design of the application. Then, sub-menu distribution, layout position or layout, and page function division are carried out. Wireframe does not have a font face, color, logo, or other design elements and consists only of a framework. 2) Wireframe High-Fidelity: In this section, the wireframe that has been made is more specific by adding other design elements such as colors, fonts, logos, and so on to resemble the actual application. 2) Task User Testing: At this stage, the task or task is given to all expert user evaluators thoroughly according to the features available in the application design, both SIMAK WEB and SIMAK MOBILE. The tool used to perform Remote User Testing is Useberry. In this task, one expert user failed to carry out his task because he could only answer 2 of the nine tasks given. When doing the test in task 3, the expert user got stuck in his browser, so he could not continue until the final task and immediately exited. The rating is 90% on the three failed tasks and nine users for the next task. All of them managed to complete the task to give a 100% rate at different times for other expert users. Then the resulting misclick rate is the percentage of user clicks that miss the wrong path. The heatmap in Figure 11 is a technique for visualizing the tracking of cursor clicks or taps from users to find the frequently selected paths. With a heatmap, the evaluation of the display can be more precise according to the user's behavior.

3) User Experience Questionnaire (UEQ):
Based on the answer data from 10 expert users plus 39 and 33 end-users regarding testing each feature and task of the SIMAK UNSIL WEB application design, the following data were obtained: The overall results can be concluded that the six UEQ scales have had the expected developments marked by an up and positive impression, especially on the Novelty scale, which changed from negative -0.880 to positive, respectively 5.286 5.264. In addition, there is a scale with a neutral impression, namely efficiency, with a value of -0.080 for SIMAK WEB and 0.052 for SIMAK MOBILE. However, according to the concept of UEQ's assessment, the negative evaluation value or negative impression for a system is < -0.8, so with the Efficiency scale value obtained, it is not required to evaluate if it is not necessary.

IV. CONCLUSION
Based on the data obtained in this study, it can be concluded that the results obtained from the SIMAK WEB and UI/UX SIMAK MOBILE designs using Design Thinking are declared excellent and successful, with percentages of 100% and 90%, respectively, for user testing using multiple tasks. Furthermore, on the User Experience Questionnaire (UEQ) that has been carried out, the negative impression obtained on the old system, namely the Novelty scale of -0.880, has turned into a good positive impression of 5.286 and 5.246 for web and mobile, respectively. In addition, no other negative scales were found on the Attractiveness, Clarity, Efficiency, Accuracy, and Stimulation scale so that the design of the new system was not needed to be improved again in the present.