Ifan Renanda et al, Perancangan UI/UX Pada E-Rapor Sekolah Berbabis Prototype … 775

## Perancangan UI/UX Pada E-Rapor Sekolah Berbabis
Prototype Dengan Menggunakan Metode Design Thingking
Ifan Renanda Dwi Putra* 1 , Dwi Rosa Indah* 2 1,2 Sistem informasi,Universitas sriwijaya Jl. Raya Palembang - Prabumulih No.Km. 32, Indralaya Indah, Kec. Indralaya, Kabupaten Ogan Ilir, Sumatera Selatan 30862 e-mail: * 1 Ifanrenandacw@gmail.com , 2 indah812@unsri.ac.id
Abstrak
Perkembangan website pada sekarang ini tidak lepas dari teknologi komputer dan informasi. Mulai dari perusahaan yang berkembang, dan lembaga pemerintahan, sampai ke lembaga, namun ada permasalahan dalam sekolah tersebut yaitu, permasalahan tentang sistem yang masih manual dan guru guru menginginkan sebuah design web yang bisa mudah digunakan, mempunyai design yang bagus yang kedepanya akan dibuat menjadi sebuah website, dengan permasalahan yang ada maka akan dibuatkanya design sebuah prototype dengan menggunakan metode Design thiking, metode yang digunakan untuk merancang sebuah design adalah metode design thinking yang mana akan dikombinasikan dengan menggunakan metode User Experience Questionair(UEQ) yang digunakan pada tahap testing. Hasilnya dari perancangan dengan menggunakan metode design thinking bisa dapat menghasilkan sebuah interface dan meningkatkan pengalaman pengguna dibuktikan dengan pengukuran menggunakan metode (UEQ) yang mengatakan dari 6 aspek penilaian terdapat 5 aspek yang excellent (daya Tarik kejelasan, efisiensi, ketepatan dan kebaruan) dan 1 aspek berapa pada nilai good (stimulasi).
Kata kunci —sekolah, sistem infromasi, metode design thinking, prototype
Abstract
The development of the website at this time can not be separated from computer and information technology. Starting from developing companies, and government agencies, to institutions, but there are problems in these schools, namely, problems with systems that are still manual and teachers want a web design that can be easy to use, has a good design that will be made into a website in the future. website, with the existing problems a prototype design will be made using the Design thinking method, the method used to design a design is the design thinking method which will be combined with the User Experience Questionnaire (UEQ) method used in the testing phase. The result of designing using the design thinking method can produce an interface and improve the user experience as evidenced by measurements using the (UEQ) method which says that of the 6 aspects of the assessment there are 5 excellent aspects (attractiveness, clarity, efficiency, accuracy and novelty) and 1 aspect what is the value of good (stimulation).
Keywords— schools, information systems, design thinking methods, prototypes
1. PENDAHULUAN
erkembangan website pada sekarang ini tidak lepas dari teknologi komputer dan informasi. Mulai dari perusahaan yang berkembang, dan lembaga pemerintahan, sampai ke lembaga pendidikan belajar. Perkembangan Teknologi telah menyentuh P

## 776
Jurnal JUPITER, Vol. 15 No.1 Bulan April, Tahun 2023, Hal. 775 - 786
kehidupan dalam masyarakat sehari-hari, seperti mencari dan menyampaikan sesuatu informasi[1]. SMK Negeri 5 Muara Bungo telah menggunakan sebuah aplikasi dalam mendukung kegiatan belajar.
Salah satu dari aplikasi tersebut yaitu mengisi rapor dengan menggunakan media word maupun excel, dimana setiap akhir semester dilakukan ujian untuk mengetahui potensi siswa dan siswi tersebut.Pada wawancara saya dengan selaku bapak kepala sekolah di SMKN 5 Bungo dan wakil kepala sekolah ditemukan permasalahan pada pengolahan data rapor yang terjadi selama ini sering terjadi permasalahan seperti tidak cocok dalam perhitungan nilai akhir untuk rapor, sering melakukan perhitungan ulang antara wali kelas dengan guru mata pelajaran tertentu[2]. kemudian adanya keterlambatan waktu dalam pengisian rapot dikarenakan harus menunggu flashdisk dari masing masing guru mata pelajaran, file yang corrupt maupun arsip file yang hilang. Untuk mengurangi berbagai kendala tersebut maka dibutuhkanlah sebuah sistem E-Rapor yang dapat digunakan oleh para guru di SMKN 5 Bungo sehingga bisa membuat waktu pengerjaan rapor lebih effisien , file data juga dapat tersimpan dengan baik serta kemungkinan file data hilang dan corrupt menjadi lebih kecil namun menurut pihak sekolah membutuhkan sebuah design User Interface dan juga para guru berharap pada perancangan ini memiliki design yang sederhana, memiliki tampilan yang bagus, dan memiliki fitur fitur yang tidak mempersulit dalam pengisian rapor sekolah beraharap nantinya design ini bisa menjadi sebuah website pada sekolah [3].
Design Thinking adalah metode penelitian yang berfokus pada 2 manusia untuk menyelesaikan masalah dan menghadirkan inovasi baru[4]. Design Thinking dinilai efektif dan dapat memberikan solusi yang tepat sesuai kebutuhan pengguna perancangan User Experience aplikasi mobile yang membantu pengguna dalam memanajemen waktunya. Dengan penggunaan metode Design Thinking . Yang pada tahap Prototype . perancangan Prototype yang dilandaskan dengan User Interface dan User Experience dapat mempengaruhi fungsional dan implementasi sistem sesuai dengan apa yang dibutuhkan oleh User nantinya[5].

## 2. METODE PENELITIAN

## 2.1 tahapan Metode Design Thinking
Pada tahapan design thinking mempunyai 5 tahapan yang dimana awalnya adalah analisis permasalahan, studi literatur , Emptahize, define, Ideate, Prototpye , dan pada tahapan akhirnya merupakan tahapan testing metode ini akan digabungkan dengan metode User Experience Questioair untuk tahapa testing nya dan akan menghasilkan data yang menghasilkan nilai mean dan sebuah diagram.
Gambar 1. Metode penelitian

## 2.2 Tahap Metode Penelitian
Ada 5 tahapan dalam metode Design thiking yang akan dilakukan penulis ini adalah beberapa tahapan:
a) Analisis permasalahan
Analisis permasalahan dilakukan dengan cara meminta data kepada pihak Sekolah SMKN 5 Bungo dengan cara wawancara kepada 5 guru untuk melihat permasalahan yang ada pada sekolah SMKN 5 Bungo[6].
b) Studi Literatur Studi litelatur dilakukan dengan membaca dan mengumpulkan penelitian terdahulu dari browser dan perpustakaan yang ada pada fakultas yang dijadikan baha referensi untuk penelitian yang sekarang[7].
c) Empathize
Tahap awal dalam sebuah penelitian dalam metode Design Thinking yaitu melakukan empathize ,merupakan cara untuk medapatkan masalah yang akan segera diselesaikan. pada tahap ini peneliti akan melakukan wawancara pada guru SMKN 5 Bungo dimana pada wawancara ini akan dilakukan pada 5 guru pns dan siswa yang ada di sekolah tersebut[8].
d) Define Pada tahapan Define data yang di dapat pada proses Empathize akan didefinisikan secara lebih rinci dan tepat untuk mendapatkan inti dari setiap permasalahan yang di dapat pada tahap Empathize dan juga mempelajari data yang sudah didapat pada wawancara pada pihak sekolah pada tahap Empathize.
778 Jurnal JUPITER, Vol. 15 No.1 Bulan April, Tahun 2023, Hal. 775 - 786 e) Ideate Setelah tahap Define fase Idate tahap ini menghasilkan ide ide atau solusi sketsa dari setiap permasalahan yang telah kita temukan pada tahap Define pada tahap ini merupakan acuan dari tahap berikutnya untuk membuat desain Prototype.
f) Prototype Prototype (prototipe) sebuah proses melakukan perancangan design untuk produk yang akan kita buat untuk user, yang akan di lakukan uji coba kepada user yang menggunakan, pada tahap ini peneliti menggunakan tools figma.
g) Testing Tahap terakhir merupakan Testing (pengujian), yang akan dilakukan pada tahap ini yaitu memperleh respon dan feedback yang diinginkan dari dari hasil sebuah Prototype yang kita buat untuk mendapatkan apakah aplikasi yang telah kita buat telah mengatasi permasalahan pada pengguna dan mendapatkan keinginan user lebih baik dan lebih rinci penliti akan menguji dengan menggunakan metode User Experience Questionair pengujian ini akan diberikan untuk 5 guru dan 5 murid yang dimana akan di uji untuk melakukan test terhadap solusi yang di berikan dan apakah dari pengujian ini sudah menjawab semua solusi yang di berikan kepada SMKN 5 Bungo.

## 3. HASIL DAN PEMBAHASAN

## 3.1 Empthazie
Tahap empathize merupakan tahap awal, dan akan dilakukan wawancara dan observasi, digambarkan menjadi 5 User persona guru dan 5 orang murid dan dalam tahap ini tercakup ke semua user yang akan memakai design prototype tersebut dan akan dilakukan pengujian dengan menggunakan UEQ dan juga bisa di lihat pada empathy map aplikasi E-Rapor [9].
Gambar 1. empathy map Guru
Gambar 2. empathy map Murid

## 3.2 Define
Define merupakan tahap kedua dalam proses metode design thinking pada tahap ini penulis melakukan observasi mendalam terhadap sistem yang akan dibuat agar mengetahui permasalahan dan kekurangan yang ada pada sistem yang akan dibuat nantinya dan akan digunakan dengan metode Point Of View (Pov) seperti tabel di bawah [10].
Tabel 3.1 tabel Point Of View (Pov) No Problem Need Insight 1 guru merasa aplikasi yang ada sudah tidak effektif Ingin mendapatkan sistem yang baru dalam pengisian nilai rapor Sulit mengisi nilai karna sering terjadi kesalahan dalam pengisian nilai rapor 2 susahnya pengisian nilai rapor karna lamanya menunggu guru yang lain Membutuhkan sebuah design yang mengisi nilai rapor dan langsung menyambung ke rapor murid masing masing tanpa perlu menunggu Susah dalam mengisi nilai rapor karna menunggu setiap dari masing masing guru 3 banyaknya data rapor yang tidak tersimpan dengan baik Sebuah design sistem yang bisa menyimpan data dalam pengisian rapor yang sudah di isi sebelumnya Belum memiliki aplikasi dalam menyimpan data dengan baik 4 susahnya mendapatkan rapor baru ketika rapor yang sudah lama hilang Dapat menyediakan sebuah design sistem yang bisa mendownload rapor yang pada setiap smester Sulit mendapatkan rapor yang hilang dengan mendaptkan yang baru
780 Jurnal JUPITER, Vol. 15 No.1 Bulan April, Tahun 2023, Hal. 775 - 786 5 susahnya admnisistrasi sekolah ketika membutuhkan sertifikat Membutuhkan sebuah design sistem yang bisa mendownload sebuah sertifikat dan mempermuda layanan terhadap siswa di sekolah Sulit mencari admin di sekolah untuk medapatkan sertifikat yang baru

## 3.3 Ideate
Pada tahap ini merupakan tahap ketiga dalam metode design thinking yaitu dengan pengumpulan ide yang dan akan menghasilkan sebuah prototype yang akan dibuat pada tahap selanjutnya yaitu tahap prototype dan ada bebera task 1 login dan registrasi, task 2 download untuk siswa, task 3 pengisian rapor pada guru.
3.3 Prototype
Pada tahap ini penulis akan merancang sebuah design yang berbentuk prototype design, dan akan dibuat menjadi design prototype yang interaktif dan tombol yang bisa di pakai untuk menyamakan dengan fungsi aslinya, dan prototype akan dibuat dengan menggunakan figma.

## 3.4.1 Halaman login
Halaman login ini merupakan halaman login adminn guru, kepala sekolah, dan siswa dengan memasukan ID , Nip, Nis dan setiap login hanya bisa di akses dengan oleh masing masing user dengan memasukan 3 ID di atas.

## Gambar 4. Login setiap User
3.4.2 Halaman Data pribadi siswa
Halaman ini merupakan halaman data pribadi siswa yang dimana isinya adalah data data siswa yang sangat di perlukan oleh sekolah dan wajib di isi oleh masing masing siswa yang ada pada sekolah tersebut.

## Gambar 5. Halaman Data pribadi siswa
3.4.3 Halaman E-Sertifikat pribadi siswa
Pada halaman ini merupakan lanjutan dari halaman data akademik yang dimana pada halaman ini user bisa mencari sertifikat yang pernah di dapatkan di setiap ajang lomba dan kompetisi yang pernah di ikuti dan juga pada user bisa mendownload sertifikat tersebut dan tidak perlu harus memintak buatkan kepada pihak sekolah.
Gambar 6. Halaman E-Sertifikat pribadi siswa

## 3.3.4 Halaman E-Rapor pribadi siswa
Pada halaman ini merupakan lanjutan dari halaman data akademik yang dimana pada halaman ini user bisa mencari rapor dari semester 1 sampai semester 6 yang akan disesuaikan setiap kelas. Pada halaman ini juga kita bisa mengetahui wali kelas kita siapa dan juga pada halaman ini user bisa mendownload e-rapor.
Gambar 7. Halaman E-Rapor pribadi siswa
782
Jurnal JUPITER, Vol. 15 No.1 Bulan April, Tahun 2023, Hal. 775 - 786

## 3.4.5 Halaman Pengisian E-Rapor pribadi siswa
Selanjutnya halaman pengisian form nilai guru yang dimana guru bisa melakukakn edit pada waktu yang ditetapkan dan juga melakukan submit yang dimana ketika submit maka guru titdak dapat melakukan editing terhadap nilai yang ada pada murid.yang diamna dibawah terdapat 14 tugas, 1 uts, dan 1 uas dalam pengisian nilai mata pelajaran dan nilai keterampilan.
Gambar 8. Halaman Pengisian E-Rapor Guru

## 3.4.6 Halaman Edit Profile Guru
Pada halaman ini guru harus melakukan pengisian 5 data pada halaman ini yang dimana awalnya yaitu nama, email , alamat, dan password yang dimana kalau semisalnya ada kesalahan dan mau dirubah pada tahap registrasi salah maka pada halaman ini bisa melakukan edit ulang setiap data yang salah dan bisa langsung di simpan.
Gambar 9. Halaman Edit Profil Guru
3.4.7 Halaman Data E-Rapor Sekolah
pada halaman ini admin bisa mendapatkan semua data E-Rapor siswa dan siswi dari semester 1 sampai semester 6, yang dimana setiap siswa dan siswi dari kelas 1 maupun kelas 3 admin bisa mencari semua data tersebut, dan bisa mendownload data yang dimana ketika siswa tersebut masih bisa dicari dengan nisn yang dipakai dahulu dan mencari tahun angkatan siswa tersebut ketika masuk sekolah tersebut pertama kali.

## Gambar 10. Halaman data E-Rapor Admin
3.4.8 Forggot password
Halaman ini ada padafv setiap login setiap user masing masing yang dimana halaman ini adalah cara untuk membantu setiap user agar mempermudah untuk merubah password yang lupa User harus memasuki email dan nanti user akan medapatkan pesan peringatan bahwa sudah dikirim pada email untuk melakukan reset password , Setelah mendapatkan email maka user akan kembali pada halaman login dan bisa langsung login dengan menggunakan password yang telah di perbarui sebelumnya.

## Gambar 11. Halaman Forgot password
3.5 Testing
Pada tahap Testing (pengujian) pada tahapan ini akan dilakukan kepada pengguna dengan menggunakan design yang sudah dibuat pada tahap sebelumnya dan juga akan melakukan pengisian kuesioner UEQ (User Experience Questionnaire) dan akan di akan dilakukan pengujian kepada 5 guru dan 5 murid melalui link yang nanti setelah pengetesan akan dibagikan kepada pengguna yang sudah dipilih utnuk melakukakn pengujian sebelumnya dan akan langsung mengisi kuesioner tersebut.
784 Jurnal JUPITER, Vol. 15 No.1 Bulan April, Tahun 2023, Hal. 775 - 786 Tabel 3.2 tabel nama nama task NO Nama dari task 1 Login dan registrasi 2 Setting profile 3 E-Rapor 4 E-Sertifikat 5 Pengisian rapor 6 Data History E-Rapor dan E-Sertifikat 7
Forgot password
8 Log out dari halaman utama
Hasil dari pengujuan UEQ tersebut dapat dilihat dari gambar 4.12 dan table 3.1
Gambar 12. Hasil pengujian UEQ Table 3.3 Hasil Mean Setiap Skala Skala UEQ Hasil Nilai Mean Daya Tarik 2.270 Kejelasan 2.140 Efisiensi 2.110 Ketepatan 1.750 Simulasi 1.660 Kebaruan 1.840
Pada hasil gambar 12 terdapat hasil dari tahap uji UEQ. Kesumpulan yang bisa Tarik pada diagram yang ada diatas mengatakan User Experience design prototype yang dibuat. mendapat kategori good Untuk Daya tarik dengan nilai mean 2.270 dengan kategori Excellent, Kejelasan mendapatkan nilai meann 2.140 dengan kategori Excellent , Efisiensi mendapatkan nilai meann 2110 dengan kategori Excellent , Ketepatan mendapatkan nilai mean 1.750 dengan kategori Excellent , Stimulasi mendapatkan nilai mean 1.660 dengan kategori Good , dan Kebaruan mendapatkan nilai mean 1.840 dengan kategori Excellent .
4. KESIMPULAN
Berdasarkan hasil penelitian yang telah dilakukan penulis, terdapat beberapa Kesimpulan sebagai berikut :
a) Telah dibuat rancangan solusi dari permasalahan di SMKN 5 Bungo design prototype menggunakan software figma untuk meningkatkan User Experiemce untuk pengerjaan
Ifan Renanda et al, Perancangan UI/UX Pada E-Rapor Sekolah Berbabis Prototype … 785 rapor. Beberapa design telah dibuat seperti Registrasi, Login, Dashboard, profile, Dashboard E-Rapor , Dashboard E-Sertifikat , Dashboard Pengisian rapor, Dashboard Arsip E-Rapor , Dashboard arsip E-Sertifikat , Dashboard Forgot password , dan Dashboard setting password ,. Pada design prototype sudah dilakukan testing dan memilki nilai yang baik saat menggunakan UEQ .
b) P ada tahap testing menggunakan User. Experience questioair untuk mendapatkan hasil dari design tersebut dan didapatkan nilai ratta rata skala UEQ sudah diatas rata rata. Hasil dari benchmark UEQ menunjukan User Expeerience dari desain solusi yang dibuat telah meningkat. Adapun pada aspek Simulasi mendapatkan nilai “ good ” lalu pada aspek daya tarik, kejelasan, ketepatan, effisiensi , dan kebaruan mendapatkan nilai, “ excellent ”.
5. SARAN
Berdasarkan hasil penelitian yang telah dilakukan penulis, terdapat beberapa saran sebagai berikut :
A. Pada design ini hanya sebatas prototype dan penulis berharap terutama pada pihak Sekolah SMKN 5 Bungo bisa mengembangkan design prototype tersebut menjadi sebuah website yang sudah bentuk program.
B. Evaluasi perbaikan terhadap User. Experience dan diharapkan untuk peneliti selanjutnya melakukan perbaikan pada aspek stimulasi diakrenakan mendapatkan kategori “ good ”, Harus mendapatkan nilai excellent .
C. Pada penelitian lainya yang ingin meneliti bisa menggunakan metode design thinking dan pada testing bisa menggunakan metode UEQ . D. Pengujian bisa dilakukan kepada 11 orang supaya bisa mendapatkan permasalhan yang lebih dari yang ada sekarang dari 11 responden.

## DAFTAR PUSTAKA
[1] M. Hamdandi, R. Chandra, F. Bachtiar, N. Lais, D. Apriyanti, and M. R. Pribadi, “Perancangan Ui/Ux Pada Aplikasi V&F Menggunakan Metode Design Thinking,” MDP Student Conf. 2022 , no. 2021, pp. 392–397, 2022.
[2] K. Fitriana, D. Priharsari, and Kariyoto, “Perancangan User Experience (UX) Aplikasi Manajemen Waktu Berbasis Mobile dengan Metode Design Thinking dan Human- Centered Design,” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 5, no. 5, pp. 2036– 2044, 2021, [Online]. Available: http://j-ptiik.ub.ac.id [3] D. A. Rusanty, H. Tolle, and L. Fanani, “Perancangan User Experience Aplikasi Mobile Lelenesia (Marketplace Penjualan Lele) Menggunakan Metode Design Thinking,” J. Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 3, no. 11, pp. 10484–10493, 2019.
[4] E. C. Shirvanadi and M. Idris, “Perancangan ulang UI/UX situs e-learning aminkom center metode design thinking (studi kasus: amikom center),” Automata , vol. 2, pp. 1–8, 2021, [Online]. Available: https://journal.uii.ac.id/AUTOMATA/article/view/19438/11541 [5] F. Hygiene, “andri 1USE OF DESIGN THINKING AT DIGITAL TECHNOLOGY CONSULTANT COMPANY INDIE LABTEK BANDUNG 2 Studi kasus Indie Labtek Bandung,” vol. 22, no. 6, pp. 552–555, 2005. [6] M. R. Fadli, “User Interface and User Experience of Indosport Mobile Applications Using a User Centered Design Approach,” Arty J. Seni Rupa , vol. 9, no. 2, pp. 128–138, 2020, doi: 10.15294/arty.v9i2.40365.
786 Jurnal JUPITER, Vol. 15 No.1 Bulan April, Tahun 2023, Hal. 775 - 786
[7] J. F. Wawolumaja, “Jurnal Pengaruh User Experience (Ux) Design Terhadap Kemudahan Pengguna Dalam Menggunakan Aplikasi Carsworld,” J. Acta Diurna , vol. 17, no. 1, pp. 53–71, 2021, doi: 10.20884/1.actadiurna.2021.17.1.3813. [8] R. Auliazmi, G. Rudiyanto, and R. D. W. Utomo, “Kajian Estetika Visual Interface Dan User Experience Pada Aplikasi Ruangguru Aesthetic Studies of Visual Interface and User Experience of the Ruangguru Application,” J. Seni dan Reka Ranc. J. Ilm. Magister Desain , vol. 4, no. 1, pp. 21–36, 2021, doi: 10.25105/jsrr.v4i1.9968. [9] R. Umar, A. Z. Ifani, F. I. Ammatulloh, and M. Anggriani, “Analisis Sistem Informasi Web Lsp Uad Menggunakan User Experience Questionnaire (Ueq),” METHOMIKA J. Manaj. Inform. dan Komputerisasi Akunt. , vol. 4, no. 2, pp. 173–178, 2021, doi:
10.46880/jmika.vol4no2.pp173-178.
[10] V. K. Reynaldi and N. Setiyawati, “Perancangan UI/UX Fitur Mentor On Demand Menggunakan Metode Design Thinking Pada Platform Pendidikan Teknologi,” JIPI (Jurnal Ilm. Penelit. dan Pembelajaran Inform. , vol. 07, no. 03, pp. 835–349, 2022.