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,2Sistem informasi,Universitas sriwijaya
Jl. Raya Palembang - Prabumulih No.Km. 32, Indralaya Indah, Kec. Indralaya, Kabupaten Ogan Ilir, Sumatera Selatan 30862 e-mail:*1[email protected],2[email protected]
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
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 Interfacedan 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 Thinkingdinilai efektif dan dapat memberikan solusi yang tepat sesuai kebutuhan pengguna perancangan
User Experienceaplikasi mobile yang membantu pengguna dalam memanajemen waktunya. Dengan penggunaan metode
Design Thinking. Yang padatahap
Prototype.perancangan
Prototypeyang dilandaskan dengan
User Interfacedan
User Experiencedapat 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 Questioairuntuk tahapatestingnya dan akan menghasilkan data yang menghasilkan nilai mean dan sebuah diagram.
Ifan Renanda et al, Perancangan UI/UX Pada E-Rapor Sekolah Berbabis Prototype … 777
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 metodeDesign 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 tahapEmpathize.
e) Ideate
Setelah tahap Define faseIdate 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 desainPrototype.
f) Prototype
Prototype(prototipe) sebuah proses melakukan perancangandesignuntuk 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 sebuahPrototype 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 designprototypetersebut dan akan dilakukan pengujian dengan menggunakanUEQdan juga bisa di lihat padaempathy mapaplikasi E-Rapor [9].
Gambar 1.empathy mapGuru
Ifan Renanda et al, Perancangan UI/UX Pada E-Rapor Sekolah Berbabis Prototype … 779
Gambar 2.empathy mapMurid 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 metodePoint Of View (Pov)seperti tabel di bawah [10].
Tabel 3.1 tabelPoint 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
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 sebuahprototype yang akan dibuat pada tahap selanjutnya yaitu tahapprototype 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 berbentukprototypedesign, dan akan dibuat menjadi designprototypeyang interaktif dan tombol yang bisa di pakai untuk menyamakan dengan fungsi aslinya, danprototypeakan 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 3IDdi 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.
Ifan Renanda et al, Perancangan UI/UX Pada E-Rapor Sekolah Berbabis Prototype … 781
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 iniuserbisa 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 bisamendownloade-rapor.
Gambar 7. Halaman E-Rapor pribadi siswa
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, danpasswordyang 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.
Ifan Renanda et al, Perancangan UI/UX Pada E-Rapor Sekolah Berbabis Prototype … 783
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
passwordyang lupa User harus memasuki
emaildan nanti user akan medapatkan pesan peringatan bahwa sudah dikirim pada
emailuntuk melakukan reset
password, Setelah mendapatkan email maka user akan kembali pada halaman login danbisa langsung login dengan menggunakan
passwordyang 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.
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 pengujuanUEQtersebut dapat dilihat dari gambar 4.12 dan table 3.1
Gambar 12. Hasil pengujianUEQ 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 kategorigoodUntuk 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 kategoriExcellent, 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 kategoriExcellent.
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 designprototype menggunakansoftwarefigma 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 menggunakanUEQ.
b)
P
ada tahap testing menggunakanUser. Experience questioairuntuk 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 nilaiexcellent.
C. Pada penelitian lainya yang ingin meneliti bisa menggunakan metode design thinking dan padatestingbisa menggunakan metodeUEQ.
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.
[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.
