Professional Documents
Culture Documents
fattya.fty@nusamandiri.ac.id, a.taufik30@gmail.com,
atifah.tifa@gmail.com3
Keywords: Design, Kaji, Design Thinking, User Interface and User Experience
Abstract: Learning at home during the Covid outbreak has more or less become an
obstacle for children, so parents are required to participate in the learning process,
one of which is by learning the Qur'an. The purpose of this study is to create new
media that makes it easier for teachers to assess and receive payments easily by
designing the User Interface display and User Experience of the study application
that makes it easy and interesting for students, teachers, and parents by using the
design thinking method which has several processes, namely emphasize, define,
ideate, prototype, and test on the user. Based on the results of research that has been
carried out, it can be concluded that the design of the appearance of the NgajiYuk
application attracts interest in learning to study children, helps make it easier for
teachers to provide learning materials and conduct learning assessments, and makes
it easier for parents to monitor children's learning outcomes.
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
425
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Keywords: Design, Review, Design Thinking, User Interface and User Experience
I. INTRODUCTION
During the Pandemic (Covid-19) until now, all activities must be done from home, work from home, study
from home and worship from home. In order to break the chain of Covid-19 by reducing activities outside the
home. With the pandemic, the Quran Education Park (TPA) around us that provides Quran learning for the
community has also become an obstacle in conducting direct learning.
All learning is currently done at home, from playgroups to college and teaching and learning at home, so
that for Al-Qur'an learning, learning is continued online. In this study, the author raises questions about the
effectiveness of learning to read the Quran online so that the teaching and learning process can be continued
online even though the pandemic period is over due to the familiarity of the community and children with all
activities carried out at home [2].
Learning at home during the covid outbreak is more or less an obstacle for children, so parents are required
to participate in the learning process, one of which is learning the Qur'an. During the pandemic, parents are very
supportive of their children when learning the Qur'an, including 1) accompanying children when learning the
Koran, 2) giving advice and motivation, 3) giving gifts or rewards as a form of appreciation, and 4) choosing fun
methods and diverse media so that children are not bored, 5) Create effective and comfortable home conditions.
[1].
With the development of existing technology, Android-based applications can be used to improve Qur'an
learning. With this android-based Quran learning application, it makes it easier to learn the Quran from children
to adults [3]. Android is a Linux-based mobile device operating system that includes an operating system,
middleware and applications [4].
UI and UX stand for User Interface and User Experience, which are visual presentations in the form of
websites in applications or digital marketing tools that enhance a company's business or brand [5].
With this problem, this research aims to provide a solution with the appearance of an android-based Quran
application that makes it easy and fun for children to learn the Koran, makes it easy for teachers to conduct
assessments and parents who can easily monitor the progress of learning the Koran of children. The method
used in this research is the design thinking method for designing user experience (UX) displays and user
interface (UI) optimization, namely there are five stages of the design thinking method Empathize, Define,
Ideate, Prototype, and Test. The various stages of the design thinking approach require designers to be able to
analyze problems, express ideas, try to make prototypes, and collect feedback on the media created. The purpose
of this research is to propose a design thinking style in design that can be applied in stages and is easy to
understand, so that visual works can be accurately implemented in any medium. By understanding the design
thinking method, designers will have a better understanding of the characteristics and process of creation, so that
the creation of works has higher quality, innovation, objectivity, and can be accepted by a large audience [6].
The result of this research is a display of Koranic learning applications for early childhood on Android-
based smartphones that presents Koranic learning that attracts children's attention in the form of text, images,
and sound elements. In this application there are also memorization of the Quran, daily prayers, student
assessments in learning the Koran and Koran payments that make it easy for parents to easily make transactions
for K o r a n payments.
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
426
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
In this research for designing User Interface and User Experience using the design thinking method
following the stages in the design:
The complete stages carried out in this research are described as follows:
1. Problem Identification
At this stage, find out what problems can be given a solution in this research and collect data to be
able to proceed to the analysis stage of the existing data.
2. Problem Formulation
At this stage after the problem of what to study has been found, it is continued by analyzing for the
formulation of the problem of how to solve the problems that occur from the data that has been
collected.
3. Developing Ideas
At this stage after the data is collected, it continues with the development of ideas to be applied
and developed in the design for the display of User Interface (UI) and User Experience (UX).
4. Prototype
At this stage, the process of implementing design ideas for the NgajiYuk User Interface (UI) and User
Experience (UX) display.
5. Results and Conclusion
The results of this design thinking method are presented in the form of prototypes or UI and UX
displays that have been made.
The method used in this research is design thinking. design thinking is a process of Emphasize, define,
ideate, prototype, and test on users. Using design thinking in
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
427
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
Software development can reduce errors in the software and make it easier to implement into the finished
product after the prototype phase is complete [7].
1. Empathize (Understand User Needs)
The Empathize stage is the core of the process where problems arise and must be addressed in a human-
centered way, the Empathize method is used to understand the problem. user experience so that researchers
can feel and find solutions to these problems, Things that can be done in the Emphasize method are
observation, interview, and data collection stages.
2. Define (User Requirement Analysis)
Define is the stage of analyzing the problem and understanding the results that have been done on the
Empathy process project. The process of analyzing and understanding the insights gained through research
Emphasize that the goal is to identify the main problem statement in the research
3. Ideate (User Needs Solution)
In this stage, which is the transition process from posing a problem to getting a problem solution, the
ideation process focuses on obtaining ideas or idea generation as a basis for prototype design.
4. Prototype
At this stage, is the initial design stage of the manufactured product, the prototype is used to watch for errors
and get new possibilities. In its implementation, gradually Prototype, the initial design will be tested directly
to the user to get feedback Improve the design appropriately according to needs
5. Test
This test phase is to collect various user responses from users Various final designs were developed during
the prototyping process.
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
428
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
B. Interview Results
4 What assessments can determine a In reading Iqro or Al-Qur'an, the tajweed must be good and clear,
student's graduation from TPA? memorization of short letters, and memorization of selected verses.
5 What method does TPA use Iqro Method
in teaching?
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
429
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
C. Empathy Map
After getting the results from each user, the next step is to create an empathy map as a way to understand
each user's needs. The following are the results of the empathy map from each user:
1) Head of Landfill Unit
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
430
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
2) Student Guardian
The next step is for the author to create How Might We as a statement of user needs which will later be used
as an idea development when creating features in the application. Here are the results of How Might We that the
author has obtained:
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
431
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
The following are the How-Might We results that the author obtained:
a. Create Authentication features namely login, registration and forgot password
b. Create learning material features
c. Create a cashless (digital) Quranic payment feature
d. Create an assessment feature in the form of achievement results in the form of points
The result of this ideate stage is a solution to the existing problem, namely:
Solution Idea
After determining the solution, the author categorizes the required criteria into
affinity diagram. Here are the results of the affinity diagram that the author made:
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
432
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
3.4 Prototype
The final result of this research is to solve the problem with a solution from the prototype drawing results.
Prototyping using figma editing software. Figma is a cloud-based design application and prototyping tool for
digital projects. Figma was created to be able to help its users to collaborate on projects and work in teams as
well as anywhere [8].
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
433
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
You can click register here at the bottom of the login application display and will be directed to the
register page.
2) On the register page, users can input the email and password they want to register, and can also register
an account with a google or facebook account that they already have so that it is connected to the
NgajiYuk application account.
3) If the user forgets the password when logging in, the user can click forget password on the login page
then the user will be directed to the forget password page, simply by inputting the registered email and
clicking forget password then there will be a notification to the registered email to change the password,
if it is successful then it can return to the login page by inputting the email and password that has been
changed.
1) In this account page display serves to display user data information and users can change user
information on the change profile page.
2) In the change profile view, users can change their personal data and profile photo.
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
434
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
435
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
3.5 Testing
At this testing stage, testing the results of the prototype that has been made using the System Usability
Scale (SUS) Measurement with the usability testing method is carried out to assess whether the interaction
between the user and the application can run well and the System Usability Scale has 10 statements as a testing
tool and does not require a large number of samples [9]. by giving questionnaires and sharing prototype testing
links to 10 teachers and 10 student guardians to find out the results of how helpful this prototype display is for
learning to recite the TPA children.
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
436
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
The response results are then calculated using a predetermined formula to get the System Usability Scale
(SUS) score. By obtaining the average score of each respondent by summing up all scores and dividing them by
the number of respondents. The following is the formula for calculating the SUS score:
1. For each odd-numbered question, the score for each question obtained from the user score will be reduced
by 1.
2. For each even-numbered question, the final score is the value of 5 minus the question score obtained from
the user.
3. The SUS score is obtained from the sum of the scores of each
question multiplied by 2.5 The following are the results of the System
Usability Scale (SUS) calculation
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
437
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
4 4 2 4 4 4 0 2 4 0 28 70
4 4 4 4 4 4 0 2 3 0 29 73
4 4 4 3 4 4 0 0 4 0 27 68
4 4 4 4 4 3 0 1 4 0 28 70
4 4 4 4 4 4 0 2 4 0 30 75
3 4 4 4 4 4 0 0 4 1 28 70
4 3 4 4 4 4 2 0 4 0 29 73
4 4 4 4 4 4 0 2 3 0 29 73
4 4 4 4 3 4 0 0 4 0 27 68
4 4 2 4 4 3 2 2 4 0 29 73
4 4 3 4 4 3 0 0 4 0 26 65
3 4 4 4 3 2 1 0 3 2 26 65
4 4 4 4 3 4 0 0 4 1 28 70
4 4 4 3 4 4 0 1 4 0 28 70
4 4 4 4 4 2 1 0 4 1 28 70
4 4 4 4 4 4 0 2 3 0 29 73
4 4 3 4 4 4 0 0 4 3 30 75
4 4 2 4 4 4 0 2 4 0 28 70
3 4 4 4 3 3 1 1 4 0 27 68
4 4 4 4 4 4 0 2 4 0 30 75
Average Score (Final Result) 71
Based on SUS score data, testing is successful when the results of the drinking range of 50 testing
results are quite good, and from the results of the System Usability Scale (SUS) calculations that have been
collected from respondents with an average value of 71, it can be concluded that the NgajiYuk Application
display has met the needs of users to help the teaching and learning process of the Koran become easier
and more interesting for children.
IV. CONCLUSIONS
The results of the research that has been done can be concluded that the design of the NgajiYuk
application display attracts children's interest in learning the Koran, helps make it easier for teachers to provide
learning materials and conduct learning assessments, and makes it easier. Seta people can see payments. .
REFERENCES
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
438
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
[1] A. S. Putra and F. R. Radita, "The Paradigm of Learning to Recite the Quran Online during the Pandemic
Coronavirus Disease 2019 (Covid-19)," Mataazir: Journal of Educational Administration and Management, Vol. 1,
No. 1, Pp. 49-61, 2020.
[2] S. Z. Hadi, T. Nur and N. Ulya, "Parental Participation in Supporting Children's Learning to Recite the Qur'an during
the Pandemic," Edukatif: Journal of Education Science, Vol. 3, No. 5, Pp. 2705 - 2713, 2021.
[3] M. N. Yati And N. Rochmawati, "Android-Based Application for Learning the Koran," Journal of Informatics
Management,
Vol. 8, No. 2, Pp. 89-97, 2018.
[4] N. Azis, G. Pribadi and M. S. Nurcahya, "Analysis and Design of Android-Based Basic English Learning
Applications," Journal of IKRA-ITH Informatics, Vol. 4, No. 3, Pp. 1-5, 2020.
[5] M. A. Muhyidin, M. A. Sulhan and A. Sevtiana, "Ui/Ux Design of My Cic Application for Student Academic
Information Services Using Figma Application," JOURNAL DIGIT, Vol. 10, No. 2, P. 208~219, 2020.
[6] Y. Yulius and M. E. P. Putra, "Design Thinking Method in Designing Health Promotion Media," Besaung Journal of
Art Design and Culture, Vol. 6, No. 2, Pp. 111-116, 2021.
[7] S. Y. Sutanto, F. Kurniawan, R. Rijaya and M. Firmansyah, "Application of Design Thinking to the Design of User
Interface of Vegetable Supplier Application," In MDP Student Conference, Palembang, 2022.
[8] R. Pramudita, R. . W. Arifin, A.. N. Alfian, N. Safitri And S. D. Anwariya, "The Use of the Figma Application in
Building Interactive Ui / Ux in the Stmik Tasikmalaya Informatics Engineering Study Program," Journal of Buana
Pengabdian, Vol. 3, No. 1, Pp. 149-154, 2021.
[9] N. Huda, "Implementation of Usability Testing Method with System Usability Scale in the Assessment of Rs Siloam
Palembang Website," Collection of Computer Science Journals (KLIK), Vol. 6, No. 1, Pp. 36-48, 2019.
[10] V. Yasin, "Object-Oriented Software Engineering," Jakarta: Mitra Wacana Media, vol. 274, 2012.
[11] M. Hasanudin, I. R. Immasari, and A. B. Yulianto, "Design of fleet inventory application system Perum DAMRI," J.
Eng., Technol. Comput. (JETCom), vol. 1, no. 1, pp. 10-18, 2022, [Online]. Available:
https://journal.binainternusa.org/index.php/jetcom/article/view/2
[12] H. Heriyanto, V. Yasin, and A. B. Yulianto, "Vipos application development design," J. Eng., Technol. Comput.
(JETCom), vol. 1, no. 1, pp. 19-31, 2022, [Online]. Available:
https://journal.binainternusa.org/index.php/jetcom/article/view/3
[13] H. Hamidah, V. Yasin, R. Hartawan, and A. Z. Sianipar, "Designing a warehouse management information system
(Cases Study: PT. Fatijja Digital Indonesia)," J. Math. Technol., vol. 1, no. 2, pp. 91-103, 2022, [Online]. Available:
https://journal.binainternusa.org/index.php/matech/article/view/75
[14] F. H. Pratama, S. D. Putra, and V. Yasin, "IMPLEMENTATION OF SMARTHOME IN THE PROPERTY INDUSTRY ( CASE
IN SINGKIL HOUSING)," JISICOM (Journal Inf. Syst. Informatics Comput.), vol. 6, no. 1, pp. 280-291, 2022, doi:
10.52362/jisicom.v6i1.829.
[15] V. Yasin, "Object-Oriented Software Engineering," Jakarta: Mitra Wacana Media, vol. 1, no. 1, pp. 1-332, 2012,
[Online]. Available: https://www.mitrawacanamedia.com/rekayasa-perangkat-lunak-berorientasi-
object?search=Rekaya&category_id=0
[16] Z. Azmi, M. Zarlis, and V. Yasin, "Perceptron with Image Input for Russian Letter Recognition," Pros. SeNTIK
STI&K, vol. 2, pp. 111-116, 2018, [Online]. Available: https://ejournal.jak-
stik.ac.id/files/journals/2/articles/sentik2018/3156/3156.pdf
[17] R. Buaton, M. Zarlis, and V. Yasin, "Data Mining Concepts in Implementation," Jakarta: Mitra Wacana Media, vol.
1, 2021, [Online]. Available: https://www.mitrawacanamedia.com/Konsep-Data-Mining-dalam-Implementasi
[18] M. Awaludin et al., "Optimization of Naïve Bayes Algorithm Parameters for Student Graduation Prediction at
Marshal Suryadarma Aerospace University," J. Inf. Syst. Informatics Comput., vol. 6, no. 1, pp. 91-106, 2022, doi:
10.52362/jisicom.v6i1.785.
[19] V. Yasin, "Software Engineering Tools in Modeling Design Using Unified Modeling Language (UML),"
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
439
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
TRIDHARMADIMAS J. Pengabdi. Kpd. Masy. Jayakarta, vol. 1, no. 2, pp. 139-150, 2021, doi:
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
440
e-ISSN: 2597-3673 (Online), p-ISSN: 2579-5201 (Printed)
Vol.6 No.2, December 2022
Journal of Information System, Informatics and Computing
Website/URL: http://journal.stmikjayakarta.ac.id/index.php/jisicom
Email: jisicom@stmikjayakarta.ac.id , jisicom2017@gmail.com
https://doi.org/10.52362/tridharmadimas.v1i2.666.
[20] V. Yasin, M. Zarlis, O. S. Sitompul, and P. Sihombing, "Hierarchical Of Grid Partition (HGP) For Measuring The
Similarity Of Data In Optimizing Data Accuracy," Webology, vol. 19, no. 2, pp. 1495-1514, 2022, [Online].
Available: https://www.webology.org/abstract.php?id=1369
DOI: 10.52362/jisicom.v6i2.940
The work is distributed under a Creative Commons Attribution 4.0 International
License.
441