## PENGEMBANGAN UI/UX GAME “SWEET CITY” MENGGUNAKAN METODE UCD DAN UNITY GAME ENGINE
Oliver Vincent Tuah 1) , Magdalena A. Ineke Pakereng 2)
1. Universitas Kristen Satya Wacana, Salatiga, Indonesia
2. Universitas Kristen Satya Wacana, Salatiga, Indonesia
Article Info
ABSTRAK Kata Kunci: UCD , Game , Unity
Keywords: UCD , Game , Unity
Article history: Received 10 May 2023 Revised 24 May 2023 Accepted 7 June 2023 Available online 1 December 2023
DOI : https://doi.org/10.29100/jipi.v8i4.4117
* Corresponding author. Oliver Vincent Tuah E-mail address: 672019034@student.uksw.edu
Penelitian yang dilakukan adalah untuk mengembangkan game dari sisi UI/UX  pada game edukasi  “ Sweet  City ”  yang  bergenre action-plat- former dengan  menggunakan metode User  Centered  Design (UCD). Tujuan dalam pengembangan UI/UX pada game tersebut adalah untuk membantu user memahami bahaya konsumsi manisan berlebih dan diir- ingi dengan gameplay yang mudah. Maka untuk menghasilkan desain UI yang baik dan dapat memberikan user experience dari materi pem- belajaran yang dikemas dengan menarik  maka diputuskan menggunakan User Centered Design sebagai metode penelitian dalam perancangan UI/UX nantinya. Setelah proses desain selesai, komponen game dimasukkan ke dalam Unity Game Engine untuk merealisasikan desain  menjadi  game  sepenuhnya.  Berdasarkan  penelitian  tersebut, ditemukan 66.7% dari 12 responden dapat memahami bahaya memakan manisan dengan baik dan 58.3% menyatakan game edukasi  tersebut layak digunakan sebagai media edukasi.

## ABSTRACT
The study is to develop the UI/UX game on the "sweet city" educational game with the action-platformer using the user centered design (ucd). The purpose in UI/UX development on the game is to help the user understand the dangers of overindulgence and accompanied by easy gameplay. To produce a good UI design and user experience from the study materials attractively packaged, it is decided to use User Centered Design as the research method in planning the UI/UX later. After the design process is completed, game components are incorporated into the unity game engine to realize the design into the game completely. Based on the study, it has been found 66.7% of 12 respondents can understand the dangers of eating sweets properly and 58.3% stating the educational games are worthy of being used as education media.

## I. P ENDAHULUAN
I akhir tahun 2019, Dunia sedang mengalami masalah besar akibat penyebaran Covid-19 dan berujung pandemi besar yang sudah dikonfirmasi oleh WHO. Maka untuk memutus rantai Covid-19, pemerintah setiap negara melakukan lockdown dan mengubah aktivitas yang biasa dilakukan secara outdoor menjadi indoor atau lebih dikenal Work From Home (WFH).
Selama WFH banyak bidang pekerjaan yang terhenti dan tidak luput proses belajar-mengajar yang dilakukan pengajar. Dimana seperti yang diketahui perkembangan suatu negara dapat terwujud dikarenakan sumber daya manusia yang berkualitas. Maka untuk menyiasati hal tersebut, para Software Engineer menciptakan aplikasi untuk menopang berbagai aktivitas belajar mengajar dan bersifat fleksibel untuk menopang keperluan lainnya. Dimana aplikasi tersebut adalah Google Meet, Zoom, Microsoft Teams tapi di luar aplikasi tersebut juga terdapat media lain yang digunakan untuk mengajar para siswa, yaitu game edukasi. Sehingga dalam penelitian yang dilakukan oleh Kurniawan, A. Y. (2022). dengan judul “Rancangan UI/UX Pada Game Belajar Aksara Lampung”, menunjukkan pentingnya pembangun UI dan UX untuk memudahkan siswa bela- jar dan termotivasi terutama anak Sekolah Dasar (SD) untuk mempelajari aksara lampung. Dimana hasil penelitian tersebut menunjukkan persentase penyelesaian setiap task pada game tersebut sebesar 90% dari total pengguna 8 orang siswa [1].
Sedangkan pada penelitian yang dilakukan oleh Kartika, Y., Wahyuni, R., Sinaga, B., & Rajagukguk, J. (2019). terfokus untuk mengembangkan game edukasi dalam kreatifitas berpikir secara matematis. Tujuan penelian D
tersebut tentunya untuk membangun ketertarikan siswa pada matematika. Matematika sering dibawakan dengan format tertulis yang membuat siswa merasa bosan dan malas untuk mempelajari matematika. Maka untuk mening- katkan minat siswa kepada matematika adalah dengan membuat gameplay pada game tersebut lebih menarik dan memberikan kesan enjoyable saat memainkannya. Penelitian tersebut menunjukkan kemampuan siswa meningkat secara eksponensial dalam kreativitas berpikir sebesar 84,75% dan pemahaman siswa terhadap materi sebesar 85% [2]. Serta untuk mengembangkan game yang baik diperlukan metode yang cocok dengan case yang dihadapi. Salah satunya study case yang dihadapi Ng, Y. Y. N., Khong, C. W., & Nathan, R. J. (2018). dilakukan evaluasi pada game yang didesain menggunakan User Centered Design . Penelitian tersebut menyebutkan user meningkat dalam segi pemahaman dan penyampaian pun dapat tepat sasaran mengenai user . Hal tersebut salah satunya dipengaruhi oleh desain game yang dibuat telah ditentukan terlebih dahulu target user . Dari segi umur, kemampuan pengenalan terhadap objek serta penempatan UI/UX yang tepat. Kesimpulan memberikan harapan agar ke depannya pembu- atan game dapat dilakukan dengan memperhatikan target user beserta kriteria lainnya yang akan menentukan game tersebut cocok dimainkan oleh user yang seperti apa [3].
Dalam UI game yang akan dikembangkan nantinya juga terdapat faktor game engine , dimana setiap game engine memiliki keunikan masing-masing dalam pengaplikasiannya. Dapat dilihat dari jurnal Jungherr, A., & Schlarb, D. B. (2022). menyatakan game developer indie memulai pembuatan game dengan menggunakan Unity dikarenakan optimasi dan game dapat dimainkan dengan lancar serta tidak menggunakan computer resource yang banyak. Di sisi developer memberikan banyak fleksibilitas dalam pengembangan game terutama di bagian game design seperti UI, environment , dan visual effect yang membuat developer bisa menyalurkan ide kreatif ke game yang sedang dikembangkan [4].
Melalui game edukasi yang telah banyak dikembangkan akhir-akhir ini, menunjukkan penyampaian materi yang dapat dicerna lebih mudah oleh siswa serta dengan adanya game edukasi mempermudah pengoperasiaan dan juga membantu pengajar menjadi lebih kreatif dalam membuat materi agar lebih mudah dicerna. Game edukasi yang biasa digunakan untuk aktivitas belajar-mengajar seperti Kahoot, Quizizz, WordWall, Educandy dan masih banyak lagi.
Pada penelitian yang dilakukan oleh Yiing Y’ng Ng dan team (2018) lebih berfokus dalam menggunakan metode kualitatif dalam menentukan desain UI/UX game yang dibuat,  sementara pada penelitian ini penulis  akan menggunakan metode UCD yang lebih berfokus kepada kebutuhan user tertentu untuk membantu meningkatkan hasil belajar siswa.

## II. METODE PENELITIAN
Salah satu tahapan awal dalam pengembangan game adalah melakukan game desain termasuk UI/UX Desain. Tentunya dalam proses desain UI/UX dalam game perlu ditentukan metode yang akan digunakan. Dalam penelitian ini, digunakan metode User Centered Design atau lebih dikenal UCD. Alasan utama penggunaan UCD adalah orientasi game yang dibuat berfokus pada pengguna berumur 13 tahun ke atas sehingga dalam proses desain perlu dilakukan riset mengenai user dan pembuatan desain yang berfokus pada user experience tanpa meninggalkan unsur artistik yang menjadi ciri khas game nantinya. [5]-[8] Terdapat 4 (empat) tahapan dalam UCD, yaitu Understand Context of Use , Specify User Requirements , Design Solutions dan Evaluation Againts Requirements dan berikut flow desain dalam UCD ditunjukkan pada Gambar 1, serta penjelasannya.
Gambar. 1. Flow Desain UCD

## A. Understand Context of Use
Dalam perancangan game yang akan dikembangkan nantinya, harus diketahui terlebih dahulu kebutuhan user meliputi kebiasaan user dalam bermain dan belajar, cara informasi dibaca dan diolah oleh user dan bagaimana cara user melakukan problem solving melalui permasalahan yang akan diberikan ke user . Maka untuk menentukan hal tersebut perlu dilakukannya pengumpulan data dengan menggunakan beberapa metode sebagai berikut.
1) Metode Wawancara Metode wawancara merupakan tanya jawab antara pewawancara dan responden untuk mendapatkan infor- masi yang akan menjawab topik permasalahan yang sedang dihadapi.
2) Metode Observasi Metode observasi berfokus dalam menentukan cara objek penelitian dalam menyeselaikan suatu masalah melalui reaksi yang diberikan oleh objek penelitian.
3) Metode Studi Literatur Metode literatur merupakan metode yang berfokus pada pencarian data melalui jurnal atau hasil studi yang berkaitan dengan penelitian yang sedang dilakukan.
4) Metode Focus Group Discussion Metode Focus Group Discussion merupakan metode wawancara semi terstruktur yang dipimpin oleh mod- erator sehingga topik diskusi lebih terarah dan informasi yang didapatkan lebih bermanfaat.

## B. Specify User Requirements
Setelah  mendapatkan informasi melalui proses sebelumnya, maka dilakukannya pengolahan data dengan menggunakan metode analisis konten. Analisis konten merupakan metode analisis yang digunakan untuk me- mahami tema dari informasi yang telah didapat sebelumnya menjadi user requirement yang akan membantu dalam proses design solutions . [9]-[12]
C. Design Solutions
Melalui user requirement yang telah dibuat, maka dilanjutkannya proses desain yang meliputi pembuatan 3 hal komponen desain berikut.
1) Wireframe Wireframe merupakan proses pembuatan blueprint untuk UI dan UX yang ingin dibuat berdasarkan user re- quirement serta melalui proses tersebut dapat membantu menyelesaikan proses berikutnya dengan efektif dan efesien.
2) Prototype Prototype merupakan tahapan dalam menambahkan elemen yang kurang dari wireframe , seperti tekstur, warna, button dan elemen lainnya. Proses prototype dinyatakan selesai setelah memenuhi user requirement.
3) Implementation Design Implementation design adalah tahap untuk mengaplikasikan prototype ke dalam produk yang sebenarnya. Hal tersebut dilakukan oleh tim pengembang sehingga hasil akhirnya berupa produk yang siap digunakan oleh user .

## D. Evaluation Againts Requirements
Setelah semua proses sebelumnya dilakukan, maka yang terakhir adalah tahap evaluasi. Dimana evaluasi dil- akukan untuk memastikan produk sudah siap dan layak untuk digunakan oleh user . Untuk melakukan evaluasi maka dilakukannya Software Testing yang dilakukan melalui form online ataupun wawancara langsung dengan user setelah menggunakan aplikasi secara offline maupun online .

## III. HASIL DAN PEMBAHASAN
Pada penelitian yang dilakukan terdapat berbagai temuan yang menjadikan game edukasi “ Sweet City ” dapat terwujud. Hasil dan pembahasan UI/UX pada penelitian yang telah dilakukan dijelaskan sebagai berikut.

## A. Understand Context of Use
Untuk memahami objek penelitian yang dilakukan, maka peneliti melakukan pengumpulan data dengan- menggunakan metode studi literatur untuk memahami user yang akan menggukan game edukasi yang akan dikem- bangkan nantinya. Berikut hasil temuan melalui studi literatur yang telah dilakukan oleh peneliti. Melalui riset pada jurnal, “Proses Belajar Mengajar Selama Pandemi COVID-19 Pada Tingkat Sekolah Dasar Di Kalimantan Barat”, yang ditulis oleh Suparjan, S., Mariyadi, M. (2020)., menunjukkan siswa sekolah dasar lebih menyukai pembelajaran yang bersifat game kuis simulasi. Dimana hal tersebut memberikan dampak lebih baik kepada anak-anak disekolah tersebut. Melalui penelitian tersebut, ditemukan anak-anak dalam usia tersebut lebih menyukai pembelajaran dalam bentuk visual interaktif serta dapat berinteraksi langsung melalui game tersebut [13]. Untuk mendukung hasil penelitian sebelumnya, maka dilakukannya riset lebih jauh dengan mencari informasi yang ada di tahun 2022, yaitu melalui jurnal “Pengembangan Model Pembelajaran Pasca COVID-19 Berdasarkan Pembelajaran Abad 21” yang ditulis oleh Assya’bani, R., Majdi, M. (2022). menemukan setelah pasca COVID-19 terjadi harus dilakukan perubahan kurikulum mengajar dikarenakan kebanyakan siswa  sudah terbiasa dengan kegiatan dilakukan secara online dan interaktif [14].
Melalui studi yang dilakukan oleh Suparjan dan Mariyadi (2020) menunjukkan karakterstik siswaa sekolah dasar selama pandemi COVID-19 menunjukkan karakteristik belajar yang lebih baik melalui game simulasi kuis. Yang menunjukkan siswa lebih termotivasi belajar melalui game yang memiliki visual yang informatif dan interaktif. Informasi tersebut juga ditemukan melalui jurnal yang ditulis oleh Ridhatullah Assya’bani dan Muhammad Majdi (2022), dimana siswa telah terbiasa dengan proses pembelajaran melalui media interaktif selama pandemi berlang- sung. Salah satunya adalah melalui game edukasi yang bisa dibawakan secara langsung di kelas dimana mampu merangsang siswa dalam memahami materi serta berinteraksi dalam proses mengolah materi yang didapat melalui visual interaktif lebih baik.

## B. Specify User Requirement
Setelah dilakukannya tahap pertama, maka dilanjutkan dengan pengolahan data yang dilakukan dengan ana- lisa konten dan divisualisasikan melalui user requirement . Elemen yang ada didalam user requirement , salah satunya adalah mengenai target capaian untuk desain UI/UX yang menjadi elemen dalam game interaktif terse- but. Berikut User requirement yang telah dibuat berdasarkan analisa konten yang didapatkan. [15]
Gambar. 2. User Requirement Game
C. Design Solutions
Pada tahap design solutions , dilakukannya telaah untuk mengetahui desain yang cocok berdasarkan user require- ment yang telah dibuat. Melalui proses ini ditemukannya solusi yang akan dikembangkan sebagai berikut.
1) Desain UI/UX yang sederhana serta mudah untuk digunakan oleh siswa dan pengajar, dengan sajian infor- masi yang menarik dan mudah dipahami.
2) Tombol navigasi yang jelas dan mudah digunakan untuk user dapat menggerakkan karakter yang dimain- kan.
3) Diperlukannya fitur untuk memantau kondisi darah, tekanan darah serta uang yang diperoleh oleh user saat memainkan game tersebut.
Setelah ditemukannya solusi untuk menyelesaikan target desain melalui user requirement maka tahap selanjut- nya dilakukannya proses desain berdasarkan 3 tahap berikut.
a. Wireframe Pada tahap wireframe , peneliti melakukan proses pembuatan komponen dan layouting untuk button, teks, tom- bol navigasi yang akan menjadi blueprint untuk tahap pembuatan prototype nantinya. Berikut hasil wireframe yang telah dibuat.
Gambar. 3. Wireframe
b. Prototype Melalui wireframe yang telah dibuat, peneliti perlu memberikan elemen tekstur, warna dan efek pada komponen yang telah dibuat berdasarkan wireframe . Hal tersebut untuk memberikan informasi yang lebih jelas dan tampilan yang menarik serta dapat digunakan dengan mudah, ditunjukkan pada Gambar 4.
Gambar. 4. Prototype
c. Implementation design Langkah selanjutnya dilakukan proses implementation design dengan menggunakan game engine Unity untuk membuat game dapat dimainkan. Pada proses ini, dilakukannya slicing yang dimana merupakan teknik untuk mengimplementasikan komponen UI/UX yang telah dibuat ke dalam game agar dapat dimainkan, ditunjukkan pada Gambar 5.
Gambar. 5. Implementaion Design

## D. Evaluation Againts Requirements
Pada tahap evaluasi dilakukanlah proses beta testing yang meliputi 9 partisipan untuk mengetahui seberapa layak game dapat digunakan serta elemen apa saja yang masih bisa dikembangkan. Melalui form yang telah diisi partisipan beta test , ditemukan tingkat keberhasilan berjalannya fitur shop bisa dijalankan dengan sebesar 77.8% dan juga responden banyak memberikan kritik dan saran untuk bagian UI Shop pada game edukasi ter- sebut. Pada fitur shop , menurut responden terlalu banyak repetisi serta interaksi         dengan user yang masih perlu dikembangkan dan sizing font yang digunakan terlalu besar, ditunjukkan pada Gambar 6.
Gambar. 6. Form Beta Test
Setelah melalui beta test dan melakukan pengembangan UI/UX berdasarkan kritikan dari form beta test . Dil- akukan kembali testing melalui feedback form untuk mengetahui seberapa baik game “ Sweet City ”  dapat menyampaikan materi mengenai bahaya manisan. Ditemukan  peningkatan pemahaman serta berbahayanya me- makan manisan secara berlebihan sebesar 66.7% dari 12 responden. Selain itu juga, ditemukan 58.3% responden menyatakan game tersebut layak digunakan  sebagai media edukasi, ditunjukkan pada Gambar 7. Akan tetapi, diperlukan perbaikan di beberapa bagian agar memenuhi Minimum Valuable Product (MVP).
Gambar. 7. Feedback Form
Hasil temuan dari penelitian ini menunjukkan bahwa penggunaan UCD dalam pengembangan UI/UX dapat mening- katkan kepuasan user dan mempengaruhi persepsi mereka terhadap kualitas produk. Akan tetapi , penelitian yang dil- akukan sedikit berbeda dengan penelitian sebelumnya oleh Yiing Y’ng Ng dan team (2018) yang hanya menggunakan metode kualitatif dalam pengembangannya UI/UX . S ecara keseluruhan, hasil temuan sejalan dengan penelitian
sebelumnya yang berbeda hanyalah dari segi metode yang digunakan untuk mengetahui keinginan user dalam UI/UX yang dikembangkan.

## IV. KESIMPULAN
Melalui proses pengumpulan data, proses pengolahan dan pengembangan serta perbaikan pada elemen desain UI/UX berdasarkan saran dan kritikan dari form beta test . Dilakukanlah kembali testing melalui feedback form untuk mengetahui seberapa baik game “ Sweet City ” dalam menyampaikan materi mengenai bahaya manisan. Setelah memainkan game “ Sweet City ” ditemukan   peningkatan  pemahaman  serta  berbahayanya  memakan manisan secara berlebihan sebesar 66.7% dari 12 responden feedback form . Selain itu juga, 58.3% dari 12 re- sponden  menyatakan game tersebut  layak  digunakan sebagai  media  edukasi  sehingga dapat disimpulkan penggunaan metode UCD dapat menghasilkan desain yang layak digunakan oleh user . Serta saran untuk pengembangan penelitian ke depan perlu dilakukannya eksplorasi lebih dalam terkait metode desain UI/UX untuk pengembangan game.

## D AFTAR P USTAKA
[1] Kurniawan, A. Y. (2022). Rancangan UI/UX Pada Game Belajar Aksara Lampung Bersama Muli (Studi Kasus : Sekolah Dasar Swadhipa Natar). Jurnal Informatika Dan Rekayasa Perangkat Lunak (JATIKA), 3(3), 266–277. http://jim.teknokrat.ac.id/index.php/informatika
[2] Kartika, Y., Wahyuni, R., Sinaga, B., & Rajagukguk, J. (2019). Improving Math Creative Thinking Ability by using Math Adventure Educational Game as an Interactive Media. Journal of Physics: Conference Series , 1179 (1). https://doi.org/10.1088/1742-6596/1179/1/012078
[3] Ng, Y. Y. N., Khong, C. W., & Nathan, R. J. (2018). Evaluating Affective User-Centered Design of Video Games Using Qualitative Methods. International Journal of Computer Games Technology , 2018 . https://doi.org/10.1155/2018/3757083
[4] Jungherr, A., & Schlarb, D. B. (2022). The Extended Reach of Game Engine Companies: How Companies Like Epic Games and Unity Technologies Provide Platforms for Extended Reality Applications and the Metaverse. Social Media and Society , 8 (2). https://doi.org/10.1177/20563051221107641
[5] Aleem, S., Capretz, L. F., & Ahmed, F. (2016). Game development software engineering process life cycle: a systematic review. Journal of Software Engineering Research and Development , 4 (1). https://doi.org/10.1186/s40411-016-0032-7
[6] Tasril, V., Zen, M., Fitriani, E. S., & Putra, A. D. (2023). Desain UI/UX Prototipe  Pembelajaran Berbasis Game Kosakata Bahasa Inggris Dengan Metode Hcd UI/UX Design Of English  Vocabulary Game-Based Learning Prototype Using The HCD Method. Journal of Information Technology and Computer Science (INTECOMS) , 6 (1).
[7] Aleem, S., Capretz, L. F., & Ahmed, F. (2016). Game development software engineering process life cycle: a systematic review. Journal of Software Engineering Research and Development , 4 (1). https://doi.org/10.1186/s40411-016-0032-7
[8] Putra, P., Liriwati, F. Y., Tahrim, T., Syafrudin, S., & Aslan, A. (2020). The Students Learning from Home Experiences during Covid-19 School Closures Poli cy In Indonesia. Jurnal Iqra’ : Kajian Ilmu Pendidikan, 5(2), 30 –42. https://doi.org/10.25217/ji.v5i2.1019
[9] Wang, A. I., & Wu, B. (2009). An application of a game development framework in higher education. International Journal of Computer Games Technology , 1 . https://doi.org/10.1155/2009/693267
[10] Ullah, M., Amin, S. U., Munsif, M., Safaev, U., Khan, H., Khan, S., Ullah, H. (2022). Serious Games in Science Education. A Systematic Literature Review. Virtual Reality and Intelligent Hardware, 4(3). https://doi.org/10.1016/j.vrih.2022.02.001
[11] G. Tao, B. Garrett, T. Taverner, E. Cordingley, and C. Sun, “Immersive virtual reality health games: a narrative review of game design,” Journal of Neuro Engineering and Rehabilitation, vol. 18, no. 1. 2021. doi: 10.1186/s12984-020-00801-3.
[12] S. K. Ghoman et al., “Serious games, a game changer in teaching neonatal resuscitation? A review,” Archives of Disease in Childhood: Fetal and Neonatal Edition, vol. 105, no. 1. 2020. doi: 10.1136/archdischild-2019-317011.
[13] Suparjan, S., Mariyadi, M. (2020). Proses Belajar Mengajar Selama Pandemi Covid-19 Pada Tingkat Sekolah Dasar Di Kalimantan Barat. Jurnal Didika: Wahana Ilmiah Pendidikan Dasar, 6(2). https://doi.org/10.29408/didika.v6i2.3044
[14] Assya’bani, R., Majdi, M. (2022). Pengembangan Model Pembelajaran Pasca Covid-19 Berdasarkan Pembelajaran Abad 21. Al Qalam: Jurnal Ilmiah Keagamaan Dan Kemasyarakatan, 16(2). https://doi.org/10.35931/aq.v16i2.903
[15] Corell-Almuzara, A., López-Belmonte, J., Marín-Marín, J. A., & Moreno-Guerrero,  A.  J.  (2021).  Covid-19  in  the  field  of  education:  State  of  the art. In Sustainability (Switzerland) (Vol. 13, Issue 10). MDPI AG. https://doi.org/10.3390/su13105452