Redesigning the User Interface in the Mobile-Based Ngaji.AI Application Using the Design Thinking Method

Ngaji.AI is a mobile-based application that makes it possible to learn the recite very flexibly, wherever and whenever we can use it to learn the recite. This application is supported by artificial intelligence (AI) which provides direct and accurate assessments of how to recite Al-Quran verses properly and correctly and this application has been released on the Google Playstore platform and has been downloaded by more than 5 thousand. The Ngaji.AI application is faced with a crucial challenge, after direct observation of children and through the results of previous user input on Playstore, most of the input from users states that it needs to improve the User Interface (UI) design to make it easier to operate for children. The application of the Design Thinking method is an approach that prioritizes creativity and deep understanding of users and the problems they face and is indeed suitable for developing UI/UX of an application. Testing using the System Usability Scale (SUS) in the first test before the redesign got an average score of 50.25 and after the redesign got a significant score of 83.75. This reflects a significant increase in the level of satisfaction and ease for children in learning to recite the recite on the Ngaji.AI application.


Introduction
Ngaji.AI is a mobile-based application that makes it possible to learn the recite very flexibly, wherever and whenever we can use it to learn the recite.This application is supported by artificial intelligence (AI) which provides direct and accurate assessments of how to pronounce verses from the recite, aiming to help improve pronunciation skills to match the correct standards [1].Apart from that, this application provides a variety of very comprehensive learning materials, including text and audio which makes it easier to learn.Users can listen to audio examples of correct pronunciation, and even record their own voice while practicing to later check and compare with the audio examples [2].With a high degree of accuracy, users can clearly see how far their pronunciation skills have progressed.This application also provides a learning recap feature which allows users to find out their learning progress and achievements [3].
The Ngaji.AI application is faced with a crucial challenge, after direct observation of children and through the results of previous user input on Playstore, most of the input from users states that it needs to improve the User Interface (UI) design to make it easier to operate for children [4].Currently, the User Interface (UI) of the application is not completely suitable for children.This issue is a major IICS SEMNASTIK Vol. 4 ■ 98 concern, because a child-friendly User Interface (UI) is very important to ensure easy use of the Ngaji.AI application.Because learning to recite the recite from an early age has an important role in forming a strong religious foundation in children [5].This helps them understand the basic teachings of the Islamic religion and develop skills in Arabic [6].One proposed approach is to redesign the User Interface (UI) to better suit children's needs and preferences.In this way, the application can become more interesting and easier to use for child users, as well as ensuring its effective use in religious learning [7].This solution will help the Ngaji.AI application achieve more significant business growth by improving the User Interface (UI) and expanding the range of use for children [8].
The application redesign process can use the Design Thinking method.The Design Thinking method is an approach that prioritizes creativity and a deep understanding of users and the problems they face [9].This approach involves a series of stages, namely "Empathize, Define, Ideate, Prototype, and Test," which will be implemented to redesign the User Interface (UI) which is not only aesthetic, but also focuses on user needs [10].
There are several studies related to user interface redesign that have been carried out.One of research evaluated and redesigned the website interface of campurparenting.com, a website-based family educational media platform [11].This research aims to improve the design and user attraction of the website.The author uses the design thinking method as an approach to understanding user needs.After redesigning with additional features based on user input, the System Usability Scale (SUS) score increased to 82, achieving a high level of acceptance with an "A" grade and an "excellent" rating [12].Another research redesigned the UI/UX of the Siakadu Student application used by UNESA.The method used is Design Thinking, which helps understand application users, identify existing problems, and develop solutions to solve these problems [13].These results may include improvements in application usage, increased user satisfaction, increased efficiency, or other metrics relevant to improving the application interface [14].
Based on the description presented above and with the lack of research related to the redesign of the Ngaji.AI application, this research aims to identify user needs, evaluate the user experience, especially for children, using the Design Thinking method, and redesign the application's User Interface (UI) to meet the requirements.user needs and preferences [15].The aim of this research is to produce a new User Interface (UI) design tailored to the experience and needs of Ngaji.AI application users.

Research Methods
The research method used in this study is the Design Thinking method with a case study approach.The case study approach was chosen because it allows researchers to understand in more depth the User Interface (UI) redesign stage in the context of the Ngaji.AI application redesign [16].There are several stages, starting from problem analysis, then moving on to the design stage and the final stage.The user interface evaluation aims to collect data that will be used in comparison before and after the user interface redesign process in the Ngaji.AI application.This analysis process uses the System Usability Scale (SUS) method, from the calculations this method produces a value or score.This score provides an in-depth understanding of the extent to which users are satisfied and efficient in using the Ngaji.AI application, so that it can be used as a basis for better user interface improvements [17].The following are the results of the System Usability Scale (SUS) analysis: Table 1.System Usability Scale (SUS) Test Results Table 1.Shows the results of the System Usability Scale (SUS) analysis calculations.From these values it is necessary to find the final value or average.Then to get this value it is necessary to calculate using the following formula: The results of the System Usability Scale (SUS) calculation in Figure 2. show that the Ngaji.AI application received an average score of 50.25, which indicates a level of usability and user satisfaction that still has room for improvement.The commonly used SUS average standard is 68 [18].So the score obtained is below the System Usability Scale (SUS) standard.This indicates that there are still areas that need to be improved in terms of usability and user satisfaction for children regarding the user interface of the Ngaji.AI application.Figure 3. System Usability Scale (SUS) Rating Score Results Figure 3. Shows that users are quite satisfied with the Ngaji.AI application.Therefore, these results provide a strong basis for initiating corrective action and the process of redesigning the user interface in the Ngaji.AI application in order to provide a better experience to users.With the System Usability Scale (SUS) approach, we strive to overcome problems or dissatisfaction found in usability testing so that we can improve the overall quality of the application.

Planning Level
In the design phase, this research redesigned the user interface of the Ngaji.AI application using the Design Thinking method.Using Design Thinking is an approach in the design process that aims to generate ideas for solutions to problems faced by users.By being user-oriented, the Design Thinking approach makes it easier to understand user needs so that the resulting product can be a solution to problems faced by users [18].The Design Thinking method consists of five process stages, namely Empathize, Define, Ideate, Prototype, and Testing.Can be seen in Figure 4.
Figure 4. Flow of the Design Thinking Method

Empathize
The empath stage is carried out to gain a deep understanding of the user's point of view, detect the problems they face, and identify needs that must be met [20].By means of field observations which include direct observation and semi-structured interviews with children aged 11-16 to understand preferences regarding the desired design of the Ngaji.AI application.Apart from that, user research was also carried out to dig up information from the user's perspective by asking questions and creating user personas, with the aim of identifying potential obstacles or problems that might arise when users use the application, especially among children.

Define
The define stage involves organizing, sorting and analyzing data that has been collected during the empathize stage.The information collected from the empathy stage is then analyzed by the researcher as a whole to identify the main focus of the problems faced by users and solve user problems.The researcher will use the How Might We (HMW) method.The basic principle of the How Might We method is to change statements into questions.The problem that has been described previously is then transformed into a question in the form of "how?" or "how?"These questions can then be answered by considering each possibility or hypothesis that the researcher identifies as a way to address the problem.

Ideate
In the third stage, a creative thinking session was held to produce various ideas for solutions to the problems identified in the previous stage.These ideas are obtained through creative thinking sessions that produce solution ideas that will be organized according to the context of the user's problems.The ideate stage consists of two parts, namely idea collection, where ideas are arranged to become the basis for solutions, and solution search, where solutions are built based on these ideas in the form of User Flow which is a visual representation of user activities in using the system.

Prototype
The prototype stage is a User Interface redesign process where the main concern is the formation of a User Interface design based on solutions or ideas that have been found in the previous stage.Before starting to redesign the User Interface, the first step is to create a UI style guide which will make the redesign process easier.With this UI style guide, the design process can be carried out more efficiently and quickly, as well as ensuring the consistency of components in the application display.This prototype redesign process will use Figma software.The results of making the prototype will be tested on respondents or application users to assess and validate the extent to which the design meets their needs.

Test
The final stage in the Design Thinking process is testing.The purpose of the testing phase is to test the new design that has been created for users.In testing application designs, the System Usability Scale (SUS) method is used to obtain an assessment or score of the design that was created in the previous stage [6].The testing process involves several steps, including preparing a test script,

IICS SEMNASTIK 2023
E-ISSN: 2774-5899 | P-ISSN: 2774-5880 ■ 101 determining respondents for testing, carrying out usability testing using scenarios, filling out questionnaires by respondents, and determining results based on System Usability Scale (SUS) calculations.The calculation results will be used to compare the results before and after the redesign.

Research Results and Discussion
At this stage, we will discuss the results of the Ngaji.AI application redesign process using a Design Thinking approach.

Empathize
The results of this interview were used to create a user persona, which details the goals to be achieved through redesigning the user interface of the Ngaji.AI application, as well as to identify the obstacles faced by respondents.The results of this interview will help in identifying the main problems and generating solution ideas that are relevant to the respondents' points of view.The following user characteristics have been determined in Figure 5 and Figure 6.

Define
Every problem that arises during the empathize stage is converted into a specific statement using the How Might We (HMW) method [10].The aim of this change is to produce various scenarios which will then become the basis for designing solutions for redesigning the user interface of the Ngaji.AI application.The following is a summary of the pain points and results from applying the How Might We (HMW) method.

Ideate
As a result of this ideation, a group of solution ideas was formed that came from the problems identified in the previous stage.These ideas have received attention in their development as potential solutions to overcome the problems faced by child users of the Ngaji.AI application.Following are the results of the ideation seen in Figure 9.

Figure 9. Solution Ideate Results
For users who have difficulty using the Ngaji.AI application, this research also creates a user flow.This user flow helps identify the steps that users must take to complete a task or achieve their goals.The following is a visualization of the user flow.
Figure 10.User Flow Find Sentence In Figure 10, there is a User Flow which describes the process when the user wants to search for the verses they want to read when doing tadarus.This User Flow provides a visual view of the steps that users must follow in searching for verses.

Figure 11. User Flow Play Surah
In Figure 11, there is a User Flow which describes the process when a user wants to play a surah while on the tadarus page that they want to listen to.This User Flow provides a visual view of the steps that must be followed by the user in playing the surah on the tadarus page.

Prototype
As a result of this prototype, a user interface was designed based on solutions and ideas that had been found previously.This prototype design uses Figma software to create an application display model that includes design elements such as buttons, layouts and icons.These elements have been detailed based on the results of the ideas that were discovered in the previous stage.A UI style guide was also prepared to maintain the consistency of the elements in the prototype.The prototype is then tested again on respondents or application users to evaluate the extent to which the design meets the user's needs and preferences.The following are the results of designing the Ngaji.AI application prototype: The results of the Ngaji.AI application redesign process include several significant changes.Firstly, a 'play surah' button was added to each surah in the app, allowing users to play the surah more easily.A timer is also introduced to help users know when to finish reading the surah, improving the user experience.In addition, changes were made to the color of the application interface, as seen in Figure 9.
In Figure 10, the changes continue with the addition of a timer when the user plays the surah.This timer is also applied to each verse, allowing users to measure time while reading verse by verse.A more detailed explanation of the function of the 'search verse' button in the application is also provided to provide better guidance to users.And the color changes on the tadarus page were made to create a more comfortable appearance when viewed.

Test
In the final stage, testing is carried out on the prototype which has been redesigned based on the solutions and ideas found in the previous stage.In this case, 10 respondents had previously tested the Ngaji.AI application before the redesign, were asked to try the redesigned prototype and fill out a questionnaire based on the System Usability Scale (SUS).The purpose of filling out this questionnaire is to measure the extent of user satisfaction with the use of the Ngaji.AI application after the redesign.Following are the results of the System Usability Scale (SUS) testing which have been processed in Table 2.
Table 2 The System Usability Scale (SUS) test results in Table 2 show that the Ngaji.AI application received a score above the average of 83.75 with grade B, so it can be concluded that the new design of the Ngaji.AI application received an excellent rating which can be seen in Figure 11.The score indicates that users are satisfied with the new design and rate the level of satisfaction and ease of use of this application positively.With these good results, it can be concluded that the design changes have succeeded in improving the user experience.

Conclusion
The application of the Design Thinking method in the process of redesigning the user interface of the Ngaji.AI application has had a positive impact on user assessment.Test results using the System Usability Scale (SUS) show significant developments in user assessment of the Ngaji.AI application.In the initial stage, this application received an average score of 50.25, which indicates there is room for improvement in usability and user satisfaction.This score is below the SUS average standard that is generally used, indicating that there are aspects that require improvement in the user interface.However, after design changes were made in the redesign stage, the application succeeded in increasing user ratings significantly.With an average score of 83.75 and a grade of B, the app received an "excellent" rating, indicating that users were satisfied with the new design.This reflects a significant increase in the level of satisfaction and ease for children in using the Ngaji.Ai application in learning the recite.

Figure 1 1 .
Figure 1.Research Flow 2.1.Problem Analysis 2.1.1.Evaluation of the User Interface of the Ngaji.AI ApplicationThe user interface evaluation aims to collect data that will be used in comparison before and after the user interface redesign process in the Ngaji.AI application.This analysis process uses the System Usability Scale (SUS) method, from the calculations this method produces a value or score.This score Interface in the Mobile-Based Ngaji.AI Application … (Aminudin) IICS SEMNASTIK 2023 E-ISSN: 2774-5899 | P-ISSN: 2774-5880 ■ 99

Figure 2 .
Figure 2. System Usability Scale (SUS) Average Score Formula and Results

Figure 14 .
Figure 14.System Usability Scale (SUS) Rating Score Results After Redesign . System Usability Scale (SUS) Test Results After Redesign