This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 383

## J-INTECH (Journal of Information and Technology)
Terakreditasi Kemendikbud SK No. 204/E/KPT/2022 E-ISSN: 2580-720X || P-ISSN: 2303-1425

## Desain UI/UX SIAKAD dengan Metode Design Thinking pada Universitas Katolik IndonesiaSantu PaulusRuteng
Devita Maulina Putri 1* ,Madre Volenta Adil 2
1,2 Sistem Informasi, Fakultas Teknologi Informasi, Universitas Merdeka Malang , Indonesia Informasi Artikel Abstrak Diterima: 30-11-2023 Direvisi: 29-12-2023 Diterbitkan: 30-12-2023 SIAM adalah aplikasi sistem informasi akademik berbasis web pada Universitas Katolik Indonesia Santu Paulus Ruteng dengan tujuan memberikan informasi seputar akademik kepada mahasiswa. Saat ini SIAM memiliki permasalahan terkait jumlah pengunjung yang menurun. Hal ini dikarenakan tampilan dari SIAM ini kurang menarik dan kurang responsif pada tampilan mobile web. Sehingga tujuan perancangan dari sistem informasi ini agar dapat memberikan pelayanan dalam bentuk tampilan yang menarik agar pengguna sering mengakses. Pemecahan masalah dilakukan dengan merancang user interface/user experience yang dikhususkan untuk perangkat mobile dengan menggunakan metode Design
Thinking . Pengujian dilakukan ke 36 mahasiswa pada Universitas Katolik Indonesia Santu Paulus Ruteng dengan usability testing menggunakan metode System Usability Scale . Hasil pengujian didapatkan bahwa prototype yang dirancang mendapatkan kategori sangat baik ( Acceptable ) yang artinya sistem dapat diterima dengan sangat baik dari segi user interface / user experience sehingga prototype dapat mudah digunakan pertama kali pada tampilan mobile .
Kata Kunci Desain Thinking; SIAM; User Interface; User Experience
*Email Korespondensi: devita.maulina@unmer.ac.id

## Abstract
SIAM is a web-based academic information system application at Santu Paulus Ruteng Catholic University of Indonesia with the aim of providing academic-based information to students. Currently, SIAM has a problem with the declining number of visitors. This is because the view from SIAM is less attractive and less responsive to the mobile display of the web. So the purpose of the design of this information system to be able to provide services and a form of appearance that is attractive so that users often access. Troubleshooting is done by designing a dedicated user interface/user experience for mobile devices using the Design Thinking method. The test was carried out to 36 students at the Catholic University of Indonesia Santu Paulus Ruteng with usability testing using the System Usability Scale method. The test results were obtained that the prototype designed received a very good category (Acceptable) which means that the system can be accepted very well in terms of user interface/ user experience so that prototypes can be easily used first on a mobile display.

## 1. Pendahuluan
Kemajuan pesat ilmu pengetahuan dan teknologi telah membawa umat manusia memasuki era informasi (Rahmawati, 2021). Informasi merupakan kebutuhan yang sangat penting bagi setiap orang. Di bidang akademik, sistem informasi semakin meluas di universitas-universitas. Fungsi utama sistem informasi akademik adalah untuk memudahkan akses dan akses informasi akademik bagi penggunanya (Saputra, 2019). Website menjadi media publikasi yang memperkenalkan dan mempromosikan sekolah sehingga masyarakat dapat mengetahui segala informasi terkait sekolah, sehingga meningkatkan potensinya sebagai media informasi pemerintah (Sholikhat, 2019).
Universitas Katolik Indonesia merupakan salah satu perguruan tinggi swasta yang telah mengimplementasikan teknologi informasi di Pulau Flores, Nusa Tenggara Timur. Salah satu layanan teknologi informasi yang tersedia di perguruan tinggi adalah Sistem Informasi Akademik Mahasiswa atau biasa dikenal dengan SIAM. Berdasarkan peninjauan website https: //www.similarweb.com diketahui trafik website SIAM mencapai 5.843 pengunjung dalam 4 bulan terakhir yakni Juni hingga September 2022. Tingkat kehadiran menurun dari 9,35% di bulan Juli menjadi 9,28%. Jumlah pengunjung semakin menurun sebesar 32,18% pada bulan Agustus dan 7,20% pada bulan September. Tingginya kehadiran pada bulan Agustus diketahui disebabkan adanya pengawasan mahasiswa menggunakan SIAM untuk melihat informasi Kartu Rencana Studi (KRS) yang telah disetujui. Namun, pada bulan-bulan berikutnya, kami melihat penurunan jumlah pengunjung terjadwal. Hal ini disebabkan oleh menurunnya menggunaan aplikasi SIAM oleh pelajar sehari-hari. Observasi awal dari wawancara dengan beberapa mahasiswa pengguna aktif SIAM menunjukkan bahwa mereka masih kesulitan dalam mengoperasikan SIAM. Aplikasi SIAM ini kurang efektif dan efisien karena terdapat beberapa tombol dan menu yang tidak dapat dipahami oleh siswa. Oleh karena itu, fungsi informasi program studi mahasiswa belum dilengkapi dengan grafik kemajuan belajar mahasiswa (IPK, IPS, SKS) setiap semester. Belum ada informasi mengenai materi, tugas, dan diskusi yang dapat diakses oleh mahasiswa melalui platform lain.
Selain tidak bisa berinteraksi dengan pengguna secara maksimal dengan fitur-fitur yang ada, siswa lain mengatakan tampilannya kurang responsif dan kurang menarik. Skema warna atau konsep warna untuk aplikasi SIAM masih menggunakan warna dasar dan masih kurang terlihat cantik. Frame mana yang aktif tidak terlihat jelas, serta layout masih terlihat datar. Selain itu tidak ada tampilan awal atau splash saat pertama kali membuka aplikasi SIAM sehingga tampilannya kurang menarik dan mengakibatkan kurang percaya diri dalam menggunakan SIAM.
Dalam penelitian ini, penulis menggunakan metode design thinking terapan. Metodologi design thingking merupakan pendekatan yang berpusat pada manusia dalam memecahkan masalah dan menghadirkan inovasi baru dalam bentuk desain produk (Maniek 2021). Dengan memanfaatkan metode design thought diharapkan kebutuhan penggunaan dapat terpenuhi dan permasalahan pengguna pada saat menggunakan aplikasi dapat teratasi (Susanti, 2019).
Antarmuka pengguna (UI) dan pengalaman pengguna (UX) merupakan dua komponen penting dalam proses desain produk yang tidak dapat dipisahkan. UI adalah tampilan program ketika dijalankan (Syafwandi & Ahdi, 2018), dan UX adalah apa yang dirasakan pengguna saat menjalankan program. Sedangkan dengan memanfaatkan Perancangan dan UI/UX menggunakan metode Design Thinking dapat menyelesaikan permasalahan pengguna. Metode berpikir desain mencakup proses “empati”, “definisi”, “ide”, “prototipe”, dan “tes”. Berdasarkan latar belakang di atas, tujuan penelitian ini adalah untuk mengembangkan UI/UX siswa informasi akademis adalah membuat desain prototipe berbasis aplikasi seluler di Universitas Katolik Santtu Paulus Ruteng..

## 2. Metode Penelitian
Metode penelitian merupakan cara ilmiah agar mendapatkan data dengan tujuan dan kegunaan tertentu (Wardana, 2022). Metode penelitian yang digunakan dalam proses perancangan desain UI/UX pada Sistem
This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 385
Informasi Akademik Mahasiswa (SIAM) dengan metode Design Thinking pada Universitas Katolik Santu Paulus Ruteng yaitu terlihat pada 1.

## Gambar 1 . Metodologi Penelitian

## 2.1 Tahap Awal

## 2.1.1 Analisis Permasalahan
Proses dalam pengumpulan masalah ini dilakukan dengan cara wawancara ke 5 Mahasiswa pengguna aplikasi SIAM pada Universitas Katolik Indonesia Santu Paulus Ruteng untuk mengidentifikasikan permasalahan serta kendala yang dihadapi dari sisi pengguna.

## 2.1.2 Studi Literatur
Studi literatur dilakukan dengan mencari informasi dari berbagai literatur yang berhubungan dengan proses perancangan desain UI/UX menggunakan metode design thinking

## 2.1.3 Pengumpulan Data Pendukung
Pengumpulkan data pendukung dengan cara melakukan observasi objek yang diteliti dan melakukan wawancara kepada pihak UPT Komputer.

## 2.2 Tahap Pengembangan

## 2.2.1 Empathize
Tahap ini merupakan tahap untuk memahami secara langsung masalah yang dihadapi oleh pengguna.

## 2.2.2 Define
Pada tahap ini mendefinisikan permasalahan apa yang dibutuhkan pengguna dengan mengumpulkan informasi yang sudah diperoleh dari tahap empathize.

## 2.2.3 Ideate
Pada tahapan ini mencari segala macam solusi yang dapat memecahkan permasalahan dari tahap sebelumnya.

## 2.2.4 Prototype
Pada tahap ini bertujuan untuk memvalidasi bahwasannya ide yang di dapat menyelesaikan masalah dari pengguna.

## 2.2.5 Test
Pada tahap ini merupakan tahap terakhir dari metode design thinking yang mana melakukan uji coba dari ide dan rancangan dari tahap sebelumnya
Gambaran umum pada penilitian ini berupa Use case diatas terdapat 2 aktor yaitu mahasiswa dan admin dimana mahasiswa dapat mengakses beberapa fitur, seperti regristrasi KRS, KRS, KHS, Jadwal Kuliah, Kemajuan Belajar, Absensi, Biodata, KKN, skripsi dan transkip nilai. Sedangkan admin dapat mengakses semua fitur dalam SIAM yang meliputi data Mata Kuliah dan Data Mahasiswa.

## Gambar 2. Use Case Diagram
Populasi dalam penelitian ini adalah seluruh mahasiswa aktif Universitas Katolik Santo Paulus Ruteng angkatan 2019-2022 yang menggunakan aplikasi SIAM. Sedangkan dalam perhitungan responden dalam penelitian ini menggunakan metode sampling kuota yang merupakan salah satu dari Non Probability Sampling dan diambil sebanyak 36 responden. Dalam penelitian ini, peneliti menggunakan beberapa Teknik pengumpulan data yakni, observasi, kuesioner, wawancara , dan studi Pustaka. Adapun Teknik analisa data untuk olah data kuesioner menggunakan software Ms. Exel 2013 lalu mentransformasukan jawaban repsonden pada metode SUS dengan menggunakan 5 skala likert. Setelah itu menghitung data Kuesioner lalu dipresentasikan dengan melakukan pengelompokkan jawaban dari responden yang menjawab respon positif dan respon negative. Pada tahap perhitungan skor SUS ini melakukan perhitungan dari jawaban responden terhadap pertanyaan, mulai dari responden 1 sampai responden 36, selanjutnya di rata-ratakan skor SUSnya. Metode penelitian menjelaskan rancangan kegiatan, ruang lingkup atau objek, bahan dan alat utama, tempat, teknik pengumpulan data, definisi operasional variabel penelitian, dan teknik analisis.

## 3. Hasil dan Pembahasan 3.1 Implementasi Design Thinking

## 3.1.1 Empathize
Setelah melakukan observasi dan penyebaran kuesioner terdapat berbagai permasalahan yang dialami oleh pengguna aplikasi SIAM saat ini terutama apabila diakses melalui smartphone. Untuk tampilan penyajian informasi pada aplikasi SIAM saat ini masih kurang baik terutama apabila diakses melalui smartphone sehingga membuat beberapa pengguna kebingungan dalam memahami informasi yang diberikan. Selain itu pada aplikasi SIAM saat ini masih terdapat beberapa fitur penting yang belum ada. Dari hasil kuesioner tersebut dapat dijadikan acuan untuk proses perancangan prototype pada penelitian ini.

## 3.1.2 Define
Pada tahap ini mendefinisikan permasalahan apa yang dibutuhkan pengguna dengan mengumpulkan informasi yang sudah diperoleh dari tahap empathize. Berikut adalah hasil yang didapat : Menghasilkan prototype aplikasi SIAM yang dirancang khusus untuk tampilan mobile, Pengguna dapat lebih mudah menggunakan aplikasi SIAM menggunakan smartphone karena user experience pada prototype yang dikhususkan untuk tampilan mobile. Tampilan interface aplikasi SIAM menjadi lebih menarik dan sesuai dengan tampilan mobile sehingga memudahkan pengguna dalam memahami informasi yang disajikan oleh aplikasi SIAM dengan baik, Pengguna dapat melihat kemajuan belajar tiap semester, Pengguna dapat mengakses fitur tugas, materi dan diskusi, dengan adanya fitur tersebut mahasiswa tidak perlu mengaksesnya melalui website lain, Pengguna dapat melihat informasi penting seperti jadwal perkuliahan serta informasi penting lainnya ketika pertama kali membuka aplikasi SIAM, Pengguna dapat mengetahui informasi seperti pengumuman penting dan pengingat jadwal pembayaran UPP dengan adanya fitur notifikasi dan reminder pembayaran serta lebih mudah melihat informasi KHS dibandingkan setelah perbaikan pada menu KHS.

## 3.1.3 Ideate
Pada tahap ini yang dilakukan adalah pengumpulan ide dengan metode Crazy 8. Crazy 8 adalah metode inovasi brainstorming dengan menggunakan metode kertas yang dilipat sebanyak 8 kali yang dapat menuangkan ide-ide digambarkan didalam kertas tersebut.

## Gambar 3. Contoh Wireframe crazy 8 Halaman Pembelajaran
This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 388

## 3.1.4 Prototype
Pada tahap ini bertujuan untuk memvalidasi bahwasannya ide yang di dapat menyelesaikan masalah dari pengguna. Berikut merupakan hasil dari perancangan desain prototype aplikasi Sistem Informasi Akademik menggunakan aplikasi Figma.
Gambar 4. Halaman Login, Dashboard dan Notifikasi
Gambar 5. Halaman Lihat Kartu Rencana Studi
This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 389
Gambar 6. Halaman Isi (KRS) Gambar 7. Halaman Absensi
Gambar 8. Halaman Jadwal Kuliah
Gambar 9. Halaman Materi
Gambar 10. Halaman Diskusi
Gambar 11. Halaman Tugas
©2023 J-Intech. Published by LPPM STIKI Malang This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 390
Gambar 12. Halaman Biodata

## Gambar 13. Halaman About
3.1.5 Test
Pada tahap ini dilakukan uji coba dari ide dan rancangan dari tahap sebelumnya dengan menggunakan digital prototype yang terdapat pada Aplikasi Figma. Pengujian test dilakukan dengan cara memberikan kuesioner dalam bentuk google form dengan pertanyaan usability dengan metode System Usability Scale (SUS). Kuesioner SUS ini terdiri atas 10 (sepuluh) butir pernyataan yang memberikan pandangan secara menyeluruh dan menilainya secara subjektif dari segi usability. Pada tahap ini penulis memberikan kuesioner kepada 36 responden untuk mendapatkan feedback dari rancangan yang telah dibuat.
Tabel 1. Intrumen Pernyataan SUS NO PERNYATAAN Skala 1 2 3 4 5 1. Saya berpendapat, bahwa saya akan lebih sering menggunakan aplikasi ini 2. Saya menemukan bahwa aplikasi ini seharusnya tidak dibuat serumit ini
3. Saya beranggapan bahwa aplikasi ini mudah untuk digunakan
4. Saya berpendapat bahwa saya akan memerlukan bantuan dalam menggunakan aplikasi ini
5. Saya menemukan berbagai fungsi dalam aplikasi ini yang terintegrasi dengan baik
6. Saya menemukan banyak hal yang tidak konsisten dalam aplikasi ini
7. Saya membayangkan bahwa kebanyakan orang dapat belajar dengan mudah dalam menggunakan aplikasi ini
8. Saya beranggapan bahwa aplikasi ini sangat sulit untuk digunakan
9. Saya sangat percaya diri dalam menggunakan aplikasi ini
10. Saya perlu belajar banyak hal sebelum dapat menggunakan applikasi ini
Menurut Brooke (2022) pada tabel 1 menunjukkan 10 item pernyataan dari kuesioner SUS. Pada SUS setiap pernyataan kuesioner menggunakan 5 point skala likert dimana responden diharuskan mengisi 10 item pernyataan SUS untuk memberikan penilaian yang bersifat subjektif dari beberapa pilihan berikut :
 Sangat Tidak Setuju (STS) = 1
This is an open access article under the CC BY SA license. (https://creativecommons.org/licenses/by-sa/4.0/) 391
 Tidak Setuju (TS) = 2
 Ragu-ragu (RG) = 3
 Setuju (S) = 4
 Sangat Setuju (SS) = 5
Kuesioner yang telah disusun dalam format google form dibagikan kepada 36 responden mahasiswa aktif Universitas Katolik Indonesia Santu Paulus Ruteng. Pada tahap perhitungan skor SUS ini melakukan perhitungan dari jawaban responden terhadap pertanyaan, mulai dari responden 1 sampai responden 36, selanjutnya di rata-ratakan skor SUSnya.
Gambar 14. 80 Nilai acceptability atau tingkat penerimaan pengguna berdasarkan Skor SUS aplikasi SIAM Dari 36 mahasiswa yang terlibat dalam penelitian, didapatkan Nilai Rata-rata skor SUS sebesar 83 dan masuk kategori sangat baik (Acceptable) yang artinya sistem dapat diterima dengan sangat baik

## 4. Kesimpulan
Kesimpulan yang dapat diambil dari perancangan desain user interface/user experience Sistem Informasi Akademik Mahasiswa (SIAM) dengan metode Design Thinking pada Universitas Katolik Indonesia Santu Paulus Ruteng yang telah dilakukan dalam penelitian ini menghasilkan rancangan prototype yang terdiri dari:
Skema warna yang digunakan didominasi oleh warna biru dengan kode heksa ##009DFF sebagai warna dasar agar memberi kesan tampilan yang menarik dan tidak kaku dalam memberikan informasi seputa akademik, Font Roboto karena font yang cukup popular pada tampilan mobile dan mudah diterapkan diberbagai elemen pada prototype sehingga terlihat jelas untuk dibaca. Layout pada prototype yang konsisten dan disesuaikan dengan tampilan mobile sehingga dapat menampilkan informasi akademik yang dibutuhkan oleh pengguna dengan baik.Hasil dari pengujian menggunakan usability dengan metode SUS dengan jumlah responden 36 mahasiswa, didapatkan nilai rata rata skor SUS yaitu 83 dari 100. Dengan hasil nilai rata rata skor SUS sebesar 83, nilai tersebut masuk kedalam kategori acceptable, hal ini menunjukkan bahwa sistem dapat diterima dengan sangat baik. Dengan menggunakan metode Design Thinking dapat menjawab segala permasalahan yang dialami oleh pengguna dengan menghasilkan desain user interface/user experience yang sesuai dengan keinginan dan harapan dari pengguna. Metode Design Thinking dapat memaksimalkan proses perancangan desain antar muka Aplikasi SIAM karena menggunakan sudut pandang pengguna aplikasi. Metode ini juga membuat aplikasi SIAM menjadi lebih user friendly. Sehingga hasil desain lebih tepat dan dapat langsung diberikan kepada frontend developer untuk diaplikasi ke program.
Peneliti memberikan saran berdasarkan penelitian yang telah dilakukan, sebagai berikut: Untuk penelitian selanjutnya dapat mengembangkan rancangan prototype untuk versi web desktop dengan tampilan yang bisa menyesuaikan dengan semua ukuran device menggunakan metode UI/UX yang lain sehingga dapat menghasilkan rancangan prototype yang lebih bagus lagi kedepannya

## 5. Referensi
E. Rahmawati and N. Ningsih, “Perancangan Desain UI/UX untuk Aplikasi Sewa Sawah Online Di Desa Tanjungsari Kabupaten Jember Menggunakan Metode User Centered Design (UCD),” Spirit, vol. 13, no. 1, pp. 17–27, 2021, doi: 10.53567/spirit.v13i1.196.
Saputra. Andreas B, Putri. Devita Maulina, “Sistem Informasi Perpustakaan Sekolah di SMPK ST Ignatius Loyola Labuan Bajo,” SENASIF (Seminar Nasional Sistem Informasi), vol. 3, pp. 2094-2099, 2019.
Sholikhat. Iis, Rosyadi. Hudan Eka, Putri. Devita Maulina, “Rancang Bangun Website yang Berorientasi Video Sebagai Sarana Media Informasi Di SMK YP 17-2 Malang,” ILKOMNIKA (Journal of Computer Science and Applied Informatics), vol. 1, no. 1, pp. 15-23, 2019, doi: https://doi.org/10.28926/ilkomnika.v1i1.12.
A. Maniek, A. Triayudi, and A. Rubhasy, “Penerapan Metode Design Thinking Dalam Rancang Aplikasi Penanganan Laporan Pencurian Barang Berharga Di Polsek Sukmajaya,” JIPI (Jurnal Ilm. Penelit. dan Pembelajaran Inform., vol. 6, no. 2, pp. 267–276, 2021, doi: 10.29100/jipi.v6i2.2026.
E. Susanti, E. Fatkhiyah, and E. Efendi, “Pengembangan Ui/Ux Pada Aplikasi M-Voting Menggunakan Metode Design Thinking,” Simp. Nas. RAPI XVIIII, pp. 364–370, 2019.
A. Naser, Syafwandi, and S. Ahdi, “Perancangan User Interface Dan User Experience Halaman Website Program Studi Desain Komunikasi Visual Universitas Negeri Padang,” DEKAVE J. Desain Komun. Vis., vol. 8, no. 1, pp. i–23, 2018, [Online]. Available: http://ejournal.unp.ac.id/index.php/dkv/article/view/100136
Wardana. Fadilah Candra. (2022). “Perancangan Ulang UI & UX Menggunakan Metode Design Thinking Pada Aplikasi Siakadu Mahasiswa Berbasis Mobile”. JEISBI Vol. 03 No.04
Leedy, P. D., & Ormrod, J. E. (2014). Practical Research: Planning and Design. Pearson.
J. Brooke, “SUS: A ‘Quick and Dirty’ Usability Scale,” Usability Eval. Ind., pp. 207–212, 2020, doi: 10.1201/9781498710411-35.