Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM PERANCANGAN UI/UX APLIKASI SCHOOL CONTROL HUB LAYANAN INFORMASI ABSENSI SISWA MENGGUNAKAN APLIKASI FIGMA 1Ade Uswa Fauzi, 2Rini Suwartika 1,2 Sistem Informasi Politeknik Piksi Ganesha 1 uswaade37@gmail.com, 2rinisuwartika@gmail.com 1,2 ABSTRACT The student attendance information service is a system designed to process and present student attendance data. The School Control Hub application is an attendance information service designed to facilitate the management of student attendance data by the school and provide easier access for parents to monitor their children's attendance. In this design, Figma was used as the primary tool to design and implement the UI/UX concept. The prototype design of the School Control Hub application demonstrates that the developed UI/UX design is able to meet users' needs effectively. Therefore, the School Control Hub application is expected to be an effective solution for managing student attendance that is easily accessible for obtaining attendance information. Keywords : UI/UX, Figma, Student Attendance, School Control Hub ABSTRAK Layanan informasi absensi siswa merupakan suatu sistem untuk mengolah dan menyajikan data kehadiran siswa. Aplikasi School Control Hub adalah layanan informasi absensi siswa yang di rancang untuk memudahkan pengelolahan data kehadiran siswa oleh pihak sekolah serta memberikan akses lebi mudah bagi orang tua untuk memantau absesnsi anak mereka.. Dalam perancangan ini,digunakan aplikasi Figma sebagai alat utama untuk mendasain dan mengimplementasikan konsep UI/UX. Dalam perancangan prototype aplikasi School Control Hub menunjukan bahwa desain UI/UX yang di kembangkan mampu memenuhi kebutuhan pengguna dengan baik. Dengan demikian,aplikasi School Control Hub diharapkan dapat menajdi solusi efektif dalam pengelolaan absensi siswa yang mudah di akses untuk mengetahui informasi absensi siswa. Kata Kunci : UI/UX, Figma, Absensi siswa, School Control Hub Jurnal INFOKOM | 1 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM PENDAHULUAN thinking mampu menghasilkan desain Di era modernisasi seperti sekarang, prototype aplikasi absensi siswa yang manusia sangat bergantung pada teknologi. sesuai Hal ini membuat teknologi menjadi kebutuhan pengguna dan itu memudahkan desainer dan pengembangan kebutuhan dasar setiap orang. Dari orang untuk merancang aplikasi secara online. tua hingga anak muda, para ahli hingga Dan ini mendasari penulis untuk mendesain orang awam pun menggunakan teknologi aplikasi SCH sebagi salah satu aplikasi dalam berbagai aspek kehidupannya. yang memberikasn pengalaman bagi orang Teknologi di masa kini telah berkembang tua yang lebih baik dengan fitur yang dengan pesat. Tak seperti waktu dulu, lengkap sseperti pengumuman dari sekolah Teknologi sangatlah berpengaruh dalam untuk orang tua,ada vidio untuk jadi aspek kehidupan manusia dan ikut berperan prasarana belajar siswa di rumah atau dalam kehidupan masyarakat luas diluar sekolah,orang tua bisa dapat khususnya peran teknologi di bidang informasi langsung anaknya masuk dan pendidikan. Dalam pendidikan sendiri keluar pada pukul berapa,dan keaman teknologi kini memiliki peranan tersendiri sangat terjaga. dalam proses belajar mengajar. [1] Meninjau School Control Hub ini masih School Control Hub adalah aplikasi absensi berbasis web dan belum ada yang berbasis digital yang dirancang khusus untuk orang aplikasi mobile,oleh karena itu pihak tua agar dapat memantau kehadiran anak sekolah ingin membuat aplikasi School mereka di sekolah dengan mudah dan real- Control Hub. Dan diharapkan dapat time. Aplikasi ini memberikan akses cepat meningkatkan kinerja, memberikan dan praktis kepada orang tua untuk melihat pengalaman bagi orang tua yang lebih baik, catatan kehadiran, menerima notifikasi, memanfaatkan fitur dan mendapatkan laporan kehadiran secara meningkatkan keamanan, berkala. menggunakan sumber daya dengan lebih Berdasarkan penelitian sebelumnya yang efisien.Oleh karena itu dalam tugas akhir dilakukan oleh [2] dengan perangkat, dan judul ini penulis tertarik merancang design “Perancangan Aplikasi Portal UI/UX Pada UI/UX aplikasi layanan informasi absensi Siswa Menengah Kejuruan (SMK)”,di siswa atau SCH dengan tampilan minimalis jurnal itu menujukan hasil metode design Jurnal INFOKOM | 2 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM dan efektif dengan metode prototype memenuhi fungsi dan kegunaan secara baik. menggunakan aplikasi figma. Perancangan merupakan penggambaran, Dengan tujuan memudahkan pihak sekolah perencanaan, pembuatan sketsa dari dan orang tua yang mebutuhkan infromasi beberapa elemen yang terpisah kedalam terkait absensi siswa dengan aplikasi ini satu kesatuan yang utuh dan berfungsi. menjadi 2. UI/UX prkatis dikembangkan lebi ,efisien,dan lanjut dapat dan bisa User Interface (UI) dan User Exprerience digunakan oleh orang tua. (UX) sangat penting dalam pembuatan sebuah aplikasi atau webset,karena desain TINJAUAN PUSTAKA pada aplikasi 1. Pengertian Perancangan menarik,terorganisir dan rapih sehingga Menurut [3]) perancangan di definisikan mempermudah pengguna memakai fitur berupa penggambaran, perencanaan dan fitur pembuatan sketsa atau pengaturan dari aplikasi.Seperti beberapa elemen yang terpisah ke dalam menjadi faktor penentu bagi pengunjung satu kesatuan yang utuh dan berfungsi, tertarik yang atau telah untuk webset harus di sediakan oleh menurut [5] UI/UX mengeksplorasi sebuah termasuk menyangkut mengkonfigurasi platform. dari komponen-komponen perangkat lunak 3. User Interface (UI) dan perangkat keras dari suatu system. Menurut [6] UI adalah merancang dan (2005:196) mengembangkan Menurut [4] Perancangan adalah proses grafis untuk aplikasi,mobile,atau situs merencanakan segala sesuatu terlebih web.Merhatikan dahulu. Perancangan adalah wujud visual letak,dan antarmuka desain aspek pengguna estetika,tata visual untuk yang dihasilkan dari bentuk-bentuk kreatif meningkatkan daya tarik visual. yang telah direncanakan. Langkah awal Jadi dapat disimpulkan User Interface (UI) dalam perancangan desain bermula dari adalah sebuah sistem yang mengatur hal-hal yang tidak teratur berupa gagasan tampilan antarnuka yang memfasilitasi atau ide-ide kemudian melalui proses pengguna penggarapan dan akan sistem,dan desain UI yang dibuat harus menghasilkan hal-hal teratur, dapat mempermuda para pengguna dalam pengelolaan yang untuk berintraksi dengan sehingga halhal yang sudah teratur bisa mengoprasikannya karena UI yang baik Jurnal INFOKOM | 3 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM membuat pengguna merasa nyaman Figma adalah salah satu design tool yang dengan tampilan aplikasi yang digunakan. biasanya 4. User Exprerience (UX) tampilan aplikasi mobile, desktop, website Definis UX menurut [6] digunakan untuk membuat adalah dan lain-lain. Figma bisa digunakan di pengalaman pengguna termasuk interaksi sistem operasi windows, linux ataupun mac dan perasaan pengguna saat menggunakan dengan terhubung ke internet. Figma produk atau layanan.Memahami kebutuhan memiliki keunggulan yaitu untuk pekerjaan dan motivasi pengguna untuk merancang yang sama dapat dikerjakan oleh lebih dari solusi yang memuaskan satu orang secara bersama-sama walaupun Desainer UX akan berkerja sama dengan ditempat yang berbeda. Hal tersebut bisa tim- tim untuk mencari titik temu antara dikatakan kerja kelompok dan karena kebutuhan kemajuan kemampuan aplikasi figma tersebut lah teknologi.Titik temu itu dijadikan sebuah yang membuat aplikasi ini menjadi pilihan produk bermakna,berguna,dan banyak UI/UX designer untuk membuat menyenangkan.Jadi UX adalah bagaimana prototype website atau aplikasi dengan user merasakan kesenangan dan kepuasan waktu yang cepat dan efektif.[8]. pengguna yang dan dari menggunakan sebuah produk,melihat 6. Elemen Dalam Desain atau memegang produk tersbut Elemen-elemen desain sendiri terdiri dari 5. Figma titik,garis,bentuk,tekstur,ruang,dan warna. Menurut [7] Figma adalah desain grafis [9] untuk merancang prototype dan user A. Titik interrface untuk produk digital sperti Titik adalah elemen dengan bentuk smartphone atau webset.Jadi figma adalah wujud perangkat memanjang sofware untuk membantu desainer UI/UX dengan berbagai fitur didalamnya seperti fitur untuk kolaborasi relatif kecil,dimensi dan melebar,serta dianggap tidak berarti. B. Garis tim,dan figma memberi semua alat yang Garis adalah unsur desain yang dibutuhkan menghubungkan antara satu titik untuk tahap desain proyek,termasuk alat vektor yang mampu dengan titik lainnya,sehingga membuat terganbar garis dengan lengkung (curve) ilustrasi semampunya kemampuan prototyping. serta atau bentuk lurus Jurnal INFOKOM | 4 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM (straight).Garis mampu membuat antar objek berunsur keteraturan,mengarahkan pandangan titik,garis,bidang dan warna.Ruang dan memberi kesan bergerak,serta lebih pada perwujudan tiga dimensi memiliki karakter tertentu. sehingga ruang dapat dibagi dua C. Bidang Bidang yaitu nyata dan semu.Unsur visual merupakan visual yang berdimensi panjang dan lebar,bidang di bagi menjadi dua yaitu bidang ruang sebenarmya tidak dapat di raba tetapi dapat di mengerti. F. Warna geometri atau beraturan,dan bidang Warna merupakan elemen desain non yang geometri atau tidak kuat dan provokatif.Pada beraturan.Bidang geometri adalah dasarnya,warna merupakan cahaya bidang yang yang relatif ukur,sedangkan non mudah di terpantulkan oleh sebuah geometri benda.Jenis media mempengaruhi merupakan bidang yang relatif tidak sistem warna yang digunakan.Media bisa diukur keluasannya. layar atau digital D. Tesktur warna primer Tekstur ialah nilai raba dari suatu biru.Media permukaan.Dilihat menggunakan dari fisiknya tekstur di bagi menjadi tekstur kasar dan halus,dengan kesan pantul menggunakan merah,hijau,dan cetak atau warna cat primer biru,merah dan kuning. METODE mengkilat dan kusam.Di tinjau dari efek tampilannya,tekstur di golongkan menjadi tekstur nyata dan tekstur semu.Tekstur nyata bila ada Gambar 1. Metode Prototype kesamaan antara hasil raba dan Metode yang digunakan dalam penelitian pengelihatan,sedangkan tekstur semu ini adalah metode prototype. Prototype terdapat adalah salah satu pendekatan dalam perbedaan dari hasil pengelihatan dan peraba. rekayasa perangkat lunak yang secara E. Ruang Disebut langsung mendemonstrasikan bagaimana ruang karena adanya sebuah perangkat lunak atau komponen- bidang.Pembagian bidang atau jarak komponen perangkat lunak akan bekerja Jurnal INFOKOM | 5 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM dalam lingkungannya sebelum tahapan yang konstruksi aktual dilakukan. Model diskusi dari tahapam pertama prototype digunakan sebagai indikator ingin dibuat berdasarkan C. Bangun Prototype dari gambaran yang akan dibuat pada Tahap ke-tiga setelah desain cepat masa yang akan datang dan membedakan disetujui selanjutnya pembangunan dua prototype sebenarnya yang akan fungsi eksplorasi dan demonstrasi.[10]. dijadikan rujukan tim progemmer Tahapan perancangan sistem kali ini untuk pembuatan program. adalah dengan menggunakan metode D. Evaluasi Pengguna Awal prototyping berupa model fisik kerja Tahap keempat sistem yang sudah sistem dan berfungsi sebagai versi awal dibuat dalam bentuk prototype di dari sistem. Metode Prototype adalah presentasikan pada klien untuk di teknik yang evaluasi dan klien akan memberikan untuk komentar pengembangan menggunakan sistem prototype menggambarkan sistem sehingga klien atau pemilik sistem mempunyai dan saran terhadap prototype yang telah dibuat. E. Memperbaiki Prototype gambaran jelas pada sistem yang akan Tahap ke-lima,di tahapan ini jika dibangun oleh tim pengembang. Adapun klien tidak mempunyai catatan revisi tahapan metode ini berupa: dari prototype yang dibuat maka tim A. Identifikasi Masalah bisa melanjutkan pada tahap jika klien Tahapan pertama dimulai dari selanjutnya,tetapi analisis kebutuhan.Tahapan ini mempunyai cattan untuk perbaikan didefinisikan sistem,maka tahap 4-5 akan terus dengan rinci. Prosesnya klien dan tim berulang sampai klien setuju dengan developer sistem yang akan dikembangkan. kebutuhan sistem akan bertemu untuk mendiskusikan detail sistem seperti apa yang diingkan user. Di tahapan ke-enam atau tahap B. Desain Cepat Tahap ke-dua yaitu F. Implentasi dan Pemiliharaan pembuatan terakhir ini,produk dibuat oleh para akan segera progemmer desain sederhana yang akan memberi berdasarkan prototype akhir,sistem gambaran singkat tentang sistem akan diuji dan diserahkan pada Jurnal INFOKOM | 6 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM klien,dan setelah itu tahap siswa,mengelola absensi,dan melihat rekap pemeliharaan agar sistem berjalan absensi. Siswa dapat melakukan absensi. dengan baik tanpa kendala. Sementara orang tua dapat melihat rekap absensi melalui aplikasi yang sudah login. 2. Activity Login HASIL DAN PEMBAHASAN Dalam tahapan awal proses desain,penulis memulai dengan membuat usecase dan activity. Berikutnya memulai proses desain menggunakan aplikasi Figma. dari halaman splash,login,dasbord,sampai terakhir halaman Dimulai profil,prototyping,memasukan logo,memasukan ikon,membuat text,membuat popup,hingga peletakan tombol yang akan di gunakan dalam tampilan awal aplikasi. A. Perancangan 1. Use Case Gambar 3. Activity Login Gambar 3 menjelaskan tentang alur login orang tua. Dimulai dengan orang tua membukan aplikasi,kemudian menampilkan form sistem login,selanjutnya orang tua mengisi form login yaitu Gambar 2. Use Case Diagram ini menggambarkan himpunan username use case dan aktor-aktor. Dari gambar 2 sistem menjelaskan dapat username dan password cocok sistem data akan menampilkan halaman dasboard mengregister bahwa abmin akun,input dan akan password,setelahnya mencocokan data,jika Jurnal INFOKOM | 7 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM tetapi jika usermane dan password tidak ke halaman login. Selanjutnya admin akan cocok sistem akan mengarahkan kembali membuka menu tambah siswa,mengisi ke form login. form setelah semuanya terisi admin akan 3. Activity Login mengirim data siswa ke sistem,lalu sistem akan menyimpan data,setelahnya daftar siswa akan muncul dan admin bisa logout. 4. Activity Absensi Gambar 5. Activity Absensi Gambar 5 menjelaskan tentang alur siswa melakukan absensi. Dimana siswa akan memindai kartu absensi absensi,selanjutnya ke sistem mesin akan mencocokan data jika cocok sistem akan mengelola absensi akan tetapi jika tidak Gambar 4. Activity Tambah siswa cocok siswa harus memindai kembali kartu Gambar 4 menjelaskan tentang alur tambah absensinya, dan terakhir sistem akan siswa oleh admin. Dimulai dari admin menampilkan absensi. membuka web admin,dilanjutkan dengan login jika sukses akan muncul halaman home admin akan tetapi jika salah kembali Jurnal INFOKOM | 8 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM 5. Activity Logout Gambar 7. Tampilan Awal Splash Screen Pada rancangan diatas terdapat Splash Screen yang di dalamnya ada teks “Selamat Datang”,logo aplikasi,dan tombol “Mulai Aplikasi”. Untuk memulai user di haruskan menekan tombol mulai untuk melanjutkan ke halaman berikutnya. Gambar 6. Activity Logout Gambar 6 menjelaskan tentang alur orang tua melakukan logout. Dimana orang tua menekan tombol logout lalu sistem menampilakan peringatan berupa pop up. Jika tidak akan tetap di dalam halaman terakhir atau jika ya sistem B. Gambar 8. Tampilan Halaman Login akan menampilkan halaman login. Pada rancangan diatas terdapat halaman Proses Desain Login yang berisi logo sekolah,text,form Dalam proses desain,penulis mulai nama pengguna dan password,dam tombol mendasain seluruh tampilan aplikasi login. User diharapkan untuk mengisi form yang akan dibuat menggunakan aplikasi untuk melakukan login ke system. Figma. Data yang telah dikumpulkan tentang apa saja yang harus ada pada aplikasi yang akan dibuat langung di terjemaahkan dalam bentuk desain dalam Figma. Hasil desain yang suah di buat sebagi berikut : Gambar 9. Tampilan Halaman Dashbord Jurnal INFOKOM | 9 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM Pada rancangan diatas terdapat halaman nama dan kelas siswa,dan infromasi Dashbord yang berisi nama sekolah,foto riwayat absensi siswa. profil dan nama orang tua/wali jika di tekan akan diarahkan ke halaman profil,informasi siswa,informasi absensi jika di tekan akan diarahkan ke halaman laporan,informasi pengumuman sekolah jika di tekan akan muncul pop up penguman yang lebih lengkap isinya,vidio untuk membantu Gambar 11. Tampilan Halaman Siswa – belajar siswa jika di tekan akan diarahkan Halaman Detail Siswa ke youtube,dan ada navbar yang berisi 5 Pada rancangan diatas terdapat dua desain tombol jika di tekan akan di arahkan ke rancangan halaman Siswa dan Detail Siswa. halaman yang kita pilih. Halaman siswa terdapat informasi siswa,tombol info jika di tekan akan mengarah ke halaman detail siswa,informasi rekap absensi untuk satu semester dengan cara user pilih semester dan pilih kelas. Halaman detail siswa terdapat tombol kembali jika di tekan akan Gambar 10. Tampilan Halaman Laporan mengarah ke halaman sebelumnya,foto kehadiran – Halaman Riwayat Absensi profil siswa,data diri siswa,data diri orang Pada rancangan diatas terdapat dua desain tua,dan tombol edit jika di tekan akan rancangan halaman Laporan Kehadiran dan halaman Riwayat Absensi. muncul pop up editing. Halaman infromasi terdapat infomasi tanggal,dan informasi absensi siswa jika di tekan salah satu siswa akan mengarah ke halaman riwayat absensi. Halaman riwayat absensi terdapat tombol kembali jika di tekan akan kembali ke halaman sebelumnya,informasi Gambar 12. Tampilan Halaman Informasi Pada rancangan diatas terdapat halaman Infromasi yang berisi vidio belajar jika di Jurnal INFOKOM | 10 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM tekan akan diarahkan ke youtube,dan halaman sebelumnya,nama pengumuman sekolah jika di tekan akan akun,email,nomor handphone dan tombol muncul pop up penguman secara detail. edit jika di tekan akan mengarah ke halaman editing. Gambar 13. Tampilan Halaman Profil Pada rancangan diatas terdapat halaman Gambar 15. Tampilan Halaman Ganti Kata Profil yang berisi profil orang tua dan ada Sandi dua menu yaitu menu akun dan kebijakan Pada rancangan diatas terdapat halaman aplikasi. lihat Ganti Kata Sandi yang berisi tombol profil,ubah kata sandi,dan daftar murid. kembali jika ditekan akan di arahkan ke Menu kebijakan aplikasi terdapat tentang halaman Menu akun terdapat sebelumnya,form kata sandi School Control Hub,kontak person dan lama,form kata sandi baru,form ulang kata keluar atau logout. Jika salah satunya di sandi,dan tombol lanjutkan jika di tekan tekan akan mengarah ke halaman yang kita akan muncul pop up konfirmasi iya atau tidak. pilih. Gambar 14. Tampilan Halaman Informasi Gambar 16. Tampilan Halaman Daftar Murid Akun Pada rancangan diatas terdapat halaman Pada rancangan diatas terdapat halaman Daftar Murid yang berisi tombol kembali Informasi Akun yang berisi tombol jika ditekan akan di arahkan ke halaman kembali jika ditekan akan di arahkan ke sebelumnya,informasi murid atau Jurnal INFOKOM | 11 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM siswa,dan tombol tambah murid jika di tekan akan mengarah ke halaman tambah murid. Gambar 19. Tampilan Halaman Kontak Person Pada rancangan diatas terdapat halaman Kontak person berisi informasi kontak Gambar 17. Tampilan Halaman Tambah Murid Pada rancangan diatas terdapat halaman Tambah Murid yang berisi form NIS,form nama,form kelas,form sekolah,alamat sekolah,dan media sosial sekolah,dan tombol kembali jika di tekan akan mengarah ke halaman sebelumnya. jurusan,tombol tambah jika di tekan akan otomatis daftar murid nambah,dan tomobil batal jika di tekan akan mengarah ke halaman daftar murid. Gambar 20. Tampilan Prototyping dalam Figma Dalam langkah terakhir mendesain penulis menjalankan prototype yang ada di aplikasi Gambar 18. Tampilan Halaman Tentang Pada rancangan diatas terdapat halaman Tentang berisi informasi aplikasi School Control Hub,dan tombol kembali jika di tekan akan sebelumnya. mengarah ke halaman Figma dengan menghubungkan seluruh tombol,halaman,dan menu yang sudah dirancang hingga dapat alur kerja yang sesuai dengan di harapkan. Dalam pengujian seluruh tombol dan fitur berjalan sesuai dengan yang diharapkan tanpa ada kendala. Jurnal INFOKOM | 12 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM C. Hasil Tampilan Menggunakan Smartphone Gambar 25. Tampilan Halaman Siswa – Halaman Detail Siswa Gambar 21. Tampilan Awal Splash Screen Gambar 22. Tampilan Halaman Login Gambar 26. Tampilan Halaman Informasi Gambar 23 Tampilan Halaman Dashbord Gambar 27. Tampilan Halaman Profil Gambar 28. Tampilan Halaman Informasi Gambar 24 Tampilan Halaman Laporan Akun Kehadiran – Halaman Riwayat Absensi Jurnal INFOKOM | 13 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM Gambar 29. Tampilan Halaman Ganti Kata Sandi Gambar 33. Tampilan Halaman Kontak Person D. Pengujian Desain Pada tahapan partitioning menganalisis pengujian equivalence dilakukan dengan semua tampilan desain aplikasi UI/UX School Control Hub. Jumlah tampilan ada 13 tampilan.setiap Gambar 30. Tampilan Halaman Daftar Murid tampilan diberikan kode,dimulai dari kode A sampai M. Dibawah ini merupan tabel pengujian halaman login dengan kode A. Tabel 1. Pengujian Login Skenari Hasil yang Hasil diharapka pengujia n n Userna Sistem Sesuai Vali me dan akan yang di d passwor menolak harapka Kod o e penguji an Gambar 31. Tampilan Halaman Tambah Murid A00 1 d tidak Stat us n diisi. Gambar 32. Tampilan Halaman Tentang A00 2 Mengisi Sistem Sesuai Vali usrnam akan yang di d e menolak harapka = 202320 n 24 dan passwor d Jurnal INFOKOM | 14 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM Skenari Kod o e penguji Hasil yang Hasil diharapka pengujia n n an dari kode A sampai kode M berdasarkan Stat us =(koson kategori sebagai berikut : Tabel 3. Pengujian Tampilan Desain Aplikasi No Status 1 Valid g) Jumlah Keterangan Kode 50 Semua kode Mengisi Sistem Sesuai Vali userna akan yang d me menolak dharapk hasil sesuai yang an di harapkan dan A00 =(koson 3 g) mendapatkan fungsi dan passwor d dengan baik. = 2 1234 Mengisi Sistem Sesuai Vali userna akan yang d menerima diharapk me berjalan = 3 Tidak Valid Defect Jumlah - 0 50 Pengujian 202320 askses A00 24 dan login dan Dari hasil pengujian yang telah dilakukan 4 passwor kemudian dengan pengujian perhitungan presentase d menampil berdasarkan status pengujian dari tabel 3 = 1234 an 0 kan diketahui dari 50 pengujian dengan total 50 halaman valid,0 tidak valid,dan 0 defect. Sehingga dasboard Tabel 2. Persentase Pengujian Login Status pengujian Valid Tidak Valid Defect dapat diperoleh presentase senilai 100% valid.0% tidak valid dan 0% defect. Jumlah Presentase pengujian (%) 4 4 100 0 0 0 Berdasarkan 0 0 0 dilakuan mengenai absensi siswa di Frekuensi Berdasarkan hasil dari tabel 2 dapat KESIMPULAN pembahasan yang telah sekolah yang masih berbentuk web,penulis disimpulkan bahwa pengujian pada kode A merancangan dan implementasi desain user dan user experience yang berisikan 5 pengujian mendapatkan interface presentase 100% valid. Berdasarkan hasil menggunakan metode prototype penulis semua pngujian tampilan aplikasi mulai memberikan kesimpulan aplikasi Figma Jurnal INFOKOM | 15 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM dapat mendasain tampilan aplikasi School [2] A. Pita Sari, S. Aisyah, A. Fauzi, N. Control Hub dengan UI yang menimalis Afifah Gustini, and M. Randa dan efektif,untuk mempermudah orang tua Syuhada, memantau kehadiran anak mereka di APLIKASI PORTAL UI/UX PADA sekolah dengan tampilan aplikasi yang SISWA SEKOLAH MENENGAH mudah dimengerti,hasil dari observasi ini KEJURUAN (SMK),” 2022. berupa prototype aplikasi School Control [3] H. M. Jogiyanto, “Analisis dan Hub yang kompatible dengan mobile desain device,rancangan desain UI/UX berupa Yogyakarta: Andi Offset, vol. 3, mockup 2005. yang selanjutnya diimplementasikan pada akan pembuatan [4] “PERANCANGAN sistem informasi,” W. Hidayat, A. B. Wandanaya, and sistem,dan dengan aplikasi ini proses R. Fadriansyah, “PERANCANGAN mentoring menjadi VIDEO praktis,efisien dan dapat di kembangkan MEDIA lebi lanjut menurut kebutuhan. Dan dengan INFORMASI DI SMK AVICENA hasil pengujian desain UI/UX Aplikasi RAJEG TANGERANG.” kehadiran siswa School Control Hub dengan equivalence [5] PROFILE SEBAGAI PROMOSI DAN B. Kurniawan and M. Romzi, psrtitioning menghasilkan 50 valid,0 tidak “Perancangan UI/UX valid,dan 0 defect dalam presentase 100% manajemen penelitian valid,0% tidak valid dan 0% defect. pengabdian kepada aplikasi dan masyarakat menggunakan aplikasi figma,” JSIM: DAFTAR PUSTAKA Jurnal Sistem Informasi Mahakarya, [1] vol. 5, no. 1, pp. 1–7, 2022. M. A. Muhyidin, M. A. Sulhan, and A. Sevtiana, “Perancangan Ui/Ux [6] S. A. S. Yudho Yudhanto, Panduan Aplikasi My Cic Layanan Informasi UI/UX Aplikasi Digital. Elex Media Akademik Komputindo, Menggunakan Mahasiswa Aplikasi Figma,” 2024. [Online]. Available: Jurnal Digit: Digital of Information https://books.google.co.id/books?id Technology, vol. 10, no. 2, pp. 208– =5zcVEQAAQBAJ 219, 2020. [7] J. Digital, Desain UI/UX dengan Figma dari Nol (Update 2023). in Jurnal INFOKOM | 16 Jurnal Informatika dan Komputer (INFOKOM) Volume 12 Nomor 2 Tahun 2024 E ISSN : 2722-4147 P ISSN : 2339-188X OJS : http://journal.piksi.ac.id/index.php/INFOKOM Desain Grafis. Jubilee [Online]. [8] Digital. Ilmiah Bidang Teknologi Informasi Available: dan Komunikasi, vol. 15, no. 1, pp. https://books.google.co.id/books?id 18–25, =SVJSEAAAQBAJ 10.35969/interkom.v15i1.64. 2020, doi: M. N. M. Al-Faruq, S. Nur’aini, and [11] Ginting, S., & Hadiana, A. (2020). M. H. Aufan, “PERANCANGAN Analisis Antarmuka dan Layanan UI/UX SEMARANG VIRTUAL pada Website Program Studi X TOURISM DENGAN FIGMA,” Menggunakan Rekayasa Kansei dan Walisongo Journal of Information Metode Kano. Jurnal E-Komtek Technology, vol. 4, no. 1, pp. 43–52, (Elektro-Komputer-Teknik), Aug. 48-61. 2022, doi: 10.21580/wjit.2022.4.1.12079. [9] Apr. 4(1), https://doi.org/10.37339/e- komtek.v4i1.233 R. W. Putra, Pengantar Desain [12] Nurjani, M. A., Mulyadi, I., & Komunikasi Visual dalam Taryanto, A. (2021). Sistem Penerapan. Andi Offset, 2021. Informasi Persediaan Barang [Online]. Menggunakan Available: Framework https://books.google.co.id/books?id Bootstrap dan Bahasa Pemrograman =yQwVEAAAQBAJ PHP MYSQL. Computer Based [10] S. Siswidiyanto, A. Munif, D. Information System Journal, 9(2), Wijayanti, and E. Haryadi, “Sistem 50–57. Informasi https://doi.org/10.33884/cbis.v9i2.4 Penyewaan Rumah Kontrakan Berbasis Web Dengan 453 Menggunakan Metode Prototype,” Jurnal Interkom: Jurnal Publikasi Jurnal INFOKOM | 17