Cerdika: Jurnal Ilmiah Indonesia, 6 .
Juli 2026 p-ISSN: 2774-6291 e-ISSN: 2774-6534 Available online at http://cerdika.
id/index.
php/cerdika/index Penerapan Metode Design Thinking dalam Pengembangan Sistem Presensi Digital Siswa di SMP Plus Babussalam Muhammad Naufal*.
Taufik Rahmat Kurniawan.
Rinanda Febriani Universitas Muhammadiyah Bandung.
Indonesia Email: muhaammaad.
naaufaal@gmail.
com*, taurahkur@umbandung.
rinanda@umbandung.
Keywords:
Attendance.
Design Thinking.
Development.
Students.
System Kata Kunci:
Design Thinking.
Pengembangan.
Presensi.
Sistem.
Siswa Abstract The manual attendance system based on paper records has various serious obstacles, such as long recording time, susceptibility to human input errors, lack of transparency, and potential data manipulation by irresponsible This study aims to develop a web-based digital attendance system using the design thinking method at SMP Plus Babussalam.
The digital attendance system is a technology-based platform that enables automatic and integrated attendance recording.
The method used in this study is design thinking, a user-focused problem-solving method consisting of five stages, namely empathize, define, ideate, prototype, and test.
Testing using the System Usability Scale (SUS) produced an average score of 80.
75 and was included in the "Excellent" category, where the web application has a very high level of usability.
This study resulted in a website-based student attendance information system web application for SMP Plus Babussalam (Siplus Babussala.
that is easy to use, responsive to user needs, and meets good quality standards.
The results of the study using the design thinking method on the student attendance information system of SMP Plus Babussalam can be concluded that.
Abstrak Sistem presensi manual berbasis catatan kertas memiliki berbagai kendala serius, seperti waktu pencatatan yang lama, rentan terhadap kesalahan input manusia, kurangnya transparansi, serta potensi manipulasi data oleh pihak yang tidak bertanggung jawab.
Penelitian ini bertujuan mengembangkan sistem presensi digital berbasis web menggunakan metode design thinking di SMP Plus Babussalam.
Sistem presensi digital merupakan platform berbasis teknologi yang memungkinkan pencatatan kehadiran secara otomatis dan terintegrasi.
Metode yang digunakan dalam penelitian ini adalah design thinking, yaitu metode pemecahan masalah yang berfokus pada pengguna yang terdiri dari lima tahap, yaitu empathize, define, ideate, prototype, dan test.
Pengujian menggunakan System Usability Scale (SUS) menghasilkan skor rata-rata 80,75 dan masuk dalam kategori "Excellent", dimana aplikasi web memiliki tingkat kegunaan yang sangat tinggi.
Penelitian ini menghasilkan aplikasi web sistem infromasi presensi siswa SMP Plus Babussalam (Siplus Babussala.
berbasis website yang mudah digunakan, responsif terhadap kebutuhan pengguna, dan memenuhi standar kualitas yang baik.
Hasil penelitian dengan metode design thinking pada sistem infromasi presensi siswa SMP Plus Babussalam dapat disimpulkan PENDAHULUAN Era digital dewasa ini telah memicu transformasi mendalam di berbagai sektor, khususnya pendidikan (Aji et al.
, 2023.
Ghazy et al.
, 2025.
Judijanto et al.
, 2025.
Murniyati.
Nugroho & Tambunan, 2025.
Pramudia, 2025.
Prihatin & Sutangsa, 2.
Digitalisasi pengelolaan administrasi pendidikan membawa keuntungan substansial yang secara esensial merevolusi cara lembaga pendidikan menjalankan rutinitas operasional harian mereka (Ahyani & Dhuhani, 2.
Salah satu komponen vital yang mendesak untuk didigitalisasi adalah mekanisme pencatatan kehadiran atau presensi siswa.
Kehadiran siswa merupakan elemen fundamental dalam menilai tingkat kedisiplinan serta partisipasi aktif mereka dalam proses pembelajaran (Arsyad et al.
, 2025.
Holis et al.
, 2025.
Izzah & Magfiroh, 2025.
Kasingku & Lotulung, 2024.
Mursid et al.
, 2025.
Simanjuntak et al.
, 2.
Selain itu, informasi kehadiran yang akurat dan andal menjadi fondasi utama bagi sekolah dalam pengambilan keputusan baik akademik maupun administratif (Gunawan et al.
, 2.
Sistem presensi digital merupakan platform berbasis teknologi yang memungkinkan pencatatan kehadiran secara otomatis dan terintegrasi, memanfaatkan inovasi seperti kode respons cepat (QR cod.
untuk verifikasi cepat melalui perangkat seluler (Gunawan et al.
Pendekatan ini tidak hanya meningkatkan efisiensi pencatatan, tetapi juga meminimalkan kesalahan serta menyediakan data real-time yang dapat diakses kapan saja (Maulana et al.
, 2025.
Putri, 2.
Namun, hingga kini banyak sekolah, termasuk SMP Plus Babussalam, masih mengandalkan sistem presensi manual berbasis catatan kertas.
Metode konvensional tersebut menghadapi berbagai kendala serius, seperti waktu pencatatan yang lama, kerentanan terhadap kesalahan input manusia, kurangnya transparansi, serta potensi manipulasi data oleh pihak tidak bertanggung jawab.
Di SMP Plus Babussalam yang berada di bawah naungan Pondok Pesantren Al-QurAoan Babussalam di Desa Ciburial.
Bandung, pengelolaan presensi siswa masih dilakukan secara manual.
Hal ini berdampak pada lamanya proses pencatatan presensi, meningkatnya risiko kehilangan data, serta rendahnya akurasi dalam pemantauan kehadiran siswa.
Kondisi tersebut menjadikan SMP Plus Babussalam sebagai objek penelitian yang tepat untuk mengatasi tantangan transformasi digital di lingkungan pendidikan menengah (Mahdalena et al.
, 2025.
Takim et al.
, 2.
Metode design thinking merupakan pendekatan pemecahan masalah yang berpusat pada pengguna, terdiri dari lima tahapan utama: empathize .
emahami empat.
, define .
erumuskan masala.
, ideate .
enghasilkan id.
, prototype .
embuat prototip.
, dan test .
(Fajrina & Postha, 2.
Pendekatan ini mengintegrasikan pemahaman mendalam terhadap kebutuhan pengguna dengan kemampuan teknologi serta tujuan bisnis untuk melahirkan solusi inovatif dan intuitif.
Keunikan penelitian ini terletak pada penerapan komprehensif metodologi Design Thinking secara lengkapAitermasuk kelima tahapan yaitu empati, definisi, ideasi, prototipe, dan pengujianAidalam mengembangkan sistem absensi siswa di SMP Plus Babussalam, dikombinasikan dengan pengujian kegunaan yang ketat menggunakan System Usability Scale (SUS).
Berbeda dengan penelitian sebelumnya yang seringkali hanya fokus pada proses pengembangan atau pengujian kegunaan secara terpisah, penelitian ini mengintegrasikan kedua aspek tersebut ke dalam pendekatan terpadu.
Penelitian oleh Nurpajrina dan Budiman .
tentang penerapan User-Centered Design pada sistem absensi GPS di Polres Garut menemukan bahwa evaluasi SUS menghasilkan skor rata-rata 82,5, yang dikategorikan sebagai Sangat Baik, menunjukkan efektivitas pendekatan berpusat pada pengguna dalam menyelaraskan desain sistem dengan kebutuhan pengguna yang sebenarnya.
Penelitian ini juga berkontribusi dengan menyediakan dokumentasi rinci dari seluruh proses desain dan pengembangan, termasuk wireframe, mockup, dan prototipe, yang dapat berfungsi sebagai referensi untuk proyek serupa.
Dalam pengembangan sistem presensi digital, terdapat beberapa metode yang umum digunakan, seperti lean UX, agile development, dan design thinking.
Lean UX berfokus pada pengembangan cepat melalui perbaikan berulang dan kolaborasi tim untuk meningkatkan pengalaman pengguna, sedangkan agile development menekankan fleksibilitas dan kemampuan beradaptasi terhadap perubahan kebutuhan melalui siklus pengembangan yang Meskipun keduanya memiliki kelebihan dalam kecepatan dan adaptasi pengembangan, lean UX masih memiliki keterbatasan dalam memahami kebutuhan pengguna secara mendalam, sementara agile development cenderung lebih berorientasi pada pengembangan fitur teknis dibandingkan pengalaman pengguna secara menyeluruh.
Oleh karena itu, design thinking dipilih dalam penelitian ini karena mampu memberikan pemahaman yang lebih mendalam terhadap kebutuhan pengguna melalui pendekatan empati, prototipe, dan pengujian langsung sehingga menghasilkan sistem yang lebih relevan dan user-friendly.
Meskipun design thinking memerlukan waktu implementasi dan sumber daya yang lebih besar, metode ini dinilai paling sesuai untuk pengembangan sistem presensi digital di SMP Plus Babussalam.
Untuk mengoptimalkan penerapannya, penelitian ini mengombinasikan input presensi melalui antarmuka web oleh guru mata pelajaran dan penggunaan QR code untuk presensi kedatangan serta kepulangan siswa oleh guru piket.
Pendekatan tersebut mampu meningkatkan fleksibilitas, akurasi, dan kemudahan penggunaan tanpa membutuhkan perangkat keras yang mahal.
Dengan demikian, penelitian ini bertujuan mengembangkan sistem presensi digital berbasis web yang dapat meningkatkan efisiensi dan akurasi pengelolaan kehadiran siswa, mengurangi beban administrasi sekolah, serta mendukung pemantauan kehadiran secara real-time dan pengambilan keputusan berbasis data yang lebih akurat dan transparan.
METODE
Analisis Kebutuhan Pengguna Berdasarkan hasil wawancara dengan kepala sekolah dan guru mata pelajaran di SMP Plus Babussalam, diketahui bahwa sistem presensi manual yang digunakan masih menimbulkan berbagai kendala, baik dalam pencatatan maupun penyimpanan data.
Proses perhitungan kehadiran membutuhkan waktu yang lama karena dilakukan secara manual, serta berisiko mengalami kehilangan dan penyalahgunaan data.
Oleh karena itu, diperlukan sistem presensi digital yang praktis dan aman, yang dapat digunakan oleh guru mata pelajaran dan guru piket guna meminimalkan kesalahan dalam pencatatan kehadiran.
Implementasi Design Thinking Implementasi metode Design Thinking pada penelitian ini terdiri dari tiga tahapan utama, yaitu empathize, define, dan ideate.
Pada tahap empathize dilakukan pengumpulan data melalui observasi dan wawancara langsung dengan pengguna untuk memahami kebutuhan, pengalaman, serta permasalahan yang dihadapi dalam proses presensi siswa.
Hasil pengumpulan data kemudian dituangkan dalam bentuk empathy map dan user persona agar diperoleh gambaran yang lebih jelas mengenai perspektif pengguna, baik dari pihak kepala sekolah maupun guru.
Selanjutnya pada tahap define dilakukan identifikasi dan perumusan masalah melalui pain point, affinity diagram, point of view statement, serta how might we question untuk menentukan fokus utama pengembangan sistem berdasarkan kebutuhan nyata Tahap ideate digunakan untuk menghasilkan berbagai solusi melalui penyusunan solution ideate, prioritization idea, dan crazy 8Aos.
Prioritas pengembangan sistem ditentukan berdasarkan nilai manfaat dan tingkat usaha yang dibutuhkan, sehingga fitur utama seperti presensi berbasis digital, pengelolaan data kehadiran, verifikasi akses pengguna, serta integrasi QR code menjadi fokus utama pengembangan.
Selain itu, teknik crazy 8Aos digunakan untuk membuat sketsa wireframe awal secara cepat sebelum dikembangkan menjadi prototype Dengan penerapan Design Thinking, proses pengembangan sistem presensi digital menjadi lebih terarah, berpusat pada kebutuhan pengguna, dan mampu menghasilkan solusi yang efektif serta mudah digunakan dalam lingkungan sekolah.
Kebutuhan Fungsional Kebutuhan fungsional merupakan kebutuhan yang berisi proses-proses yang nantinya dapat dilakukan dan informasi apa yang akan dihasilkan oleh sistem (Nurkholis et al.
, 2.
Berikut adalah kebutuhan fungsional pada sistem informasi presensi siswa di SMP Plus Babussalam.
Tabel 1.
Kebutuhan Fungsional User Piket Guru Admin Kemampuan Fungsional Piket dapat melakukan login ke sistem informasi presensi Piket dapat melakukan verifikasi kehadiran siswa saat masuk dan pulang sekolah.
Piket dapat melihat riwayat kehadiran siswa.
Piket memperbarui informasi pribadi dalam sistem.
Piket dapat melakukan logout dari sistem informasi presensi.
Guru dapat melakukan login ke sistem informasi presensi.
Guru memperbarui informasi pribadi dalam sistem.
Guru dapat melakukan verifikasi kehadiran siswa Guru dapat mengelola data presensi Guru dapat melihat data kehadiran siswa secara real-time.
Guru dapat melakukan logout dari sistem informasi presensi Admin dapat melakukan login ke sistem informasi presensi Admin dapat menambah, mengedit, atau menghapus data pengguna .
etugas piket dan gur.
Admin dapat menambah, mengedit, atau menghapus data siswa.
Admin dapat mengatur hak akses pada setiap pengguna dalam sistem presensi.
Kebutuhan Non-Fungsional Kebutuhan non-fungsional berkaitan dengan aspek kualitas sistem, seperti performa dan Berikut adalah beberapa kebutuhan non-fungsional pada sistem informasi presensi Tabel 2.
Kebutuhan Non-Fungsional Aspek Performa Keamanan Kemampuan Non-Fungsional Sistem dapat memproses data presensi siswa dalam waktu kurang dari 2 detik.
Sistem responsif dapat diakses melalui berbagai perangkat.
Sistem dapat menampilkan antarmuka yang ramah pengguna agar mudah digunakan oleh piket, guru, dan admin.
Sistem dapat melakukan enkripsi data dan autentikasi pengguna untuk mencegah akses tidak sah.
Sistem dapat mengatur hak akses petugas piket, guru, dan admin.
Sistem dapat menerapkan session timeout yang otomatis mengeluarkan pengguna setelah periode waktu tidak aktif.
Permasalahan utama dalam sistem presensi manual yaitu ketidakefektifan pencatatan kehadiran, kemungkinan kecurangan, serta kesulitan dalam pengelolaan data oleh piket, guru, maupun admin.
Solusi dari permasalahan tersebut adalah sistem informasi presensi siswa yang dikembangkan berdasarkan analisis kebutuhan yang telah dipaparkan di atas.
Fitur-fitur seperti input presensi otomatis, verifikasi kehadiran yang valid, serta pengelolaan data secara terstruktur menjadi bagian penting dalam sistem presensi ini.
Dengan demikian, solusi yang diberikan oleh sistem ini mampu meningkatkan fungsionalitas dalam pencatatan kehadiran siswa dan responsif terhadap perangkat pengguna.
Analisis Kebutuhan Sistem Pengembangan sistem informasi presensi digital membutuhkan beberapa spesifikasi perangkat keras sebagai berikut.
Processor minimal kecepatan 2.
00 GHz atau lebih tinggi seperti IntelA CoreE i3 Gen 5 ke atas atau prosesor lain yang setara.
RAM (Random Access Memor.
minimal kapasitas 4 GB VGA (Video Graphic Adapto.
dengan resolusi 1024x768 atau lebih tinggi seperti IntelA UHD Graphics.
SSD (Solid-state Driv.
minimal kapasitas 256 GB Pengembangan sistem informasi presensi digital juga membutuhkan beberapa spesifikasi perangkat lunak sebagai berikut.
Figma versi 24.
Sistem Manajemen Basis Data (SMBD): MySQL dan phpMyAdmin Editor atau Integrated Development Environment (IDE) berupa Visual Studio Code versi 1.
Sistem Operasi Windows 11/10 64-bit XAMPP versi 8.
Google Chrome versi 133.
Bahasa pemrograman JavaScript dan Framework ReactJS Dengan spesifikasi kebutuhan sistem di atas, diharapkan dapat menghasilkan sebuah sistem sederhana namun mudah digunakan dengan fungsionalitas yang tepat terhadap target pengguna yang telah ditentukan.
Perancangan Sistem Perancangan sistem pada penelitian ini dijelaskan menggunakan Unified Modeling Language (UML), yaitu bahasa standar pemodelan visual yang digunakan untuk menggambarkan struktur dan alur kerja sistem perangkat lunak.
UML berfungsi sebagai blueprint untuk membantu memahami serta merancang sistem informasi presensi siswa yang akan dikembangkan di SMP Plus Babussalam.
Perancangan sistem meliputi user flow, use case diagram, activity diagram, dan sequence diagram.
User flow menggambarkan alur penggunaan sistem oleh guru piket, guru mata pelajaran, dan admin mulai dari proses login, pengelolaan presensi siswa, pengelolaan profil, hingga logout.
Use case diagram menunjukkan hubungan antara aktor dengan sistem, di mana guru, petugas piket, dan admin memiliki hak akses berbeda dalam mengelola data presensi dan informasi pengguna.
Activity diagram menjelaskan alur aktivitas sistem seperti proses login, pengelolaan data pribadi, pengelolaan presensi, serta CRUD data pengguna, siswa, mata pelajaran, dan jadwal.
Sementara itu, sequence diagram menggambarkan urutan interaksi antara pengguna, antarmuka sistem, dan basis data secara terstruktur dalam proses pengelolaan presensi oleh guru piket, guru mata pelajaran, maupun Secara keseluruhan, rancangan sistem ini dibuat untuk mendukung proses presensi digital yang lebih cepat, terstruktur, efisien, dan mudah digunakan oleh seluruh pengguna Test Hasil rancangan dari prototype yang sudah dibuat, proses validasi dan pengujian sangat penting untuk mendapatkan feedback dari orang-orang yang menggunakannya.
Di tahap test ini, kita ingin tahu sejauh mana ide atau produk kita berhasil memenuhi kebutuhan pengguna.
Kita akan belajar banyak dari pengalaman pengguna untuk membuat ide atau produk kita lebih Dalam penelitian ini, untuk menilai seberapa mudah aplikasi web kita digunakan penghitungan menggunnakan metode System Usability Scale pada prototype yang sudah sangat mirip dengan final product.
Kuesioner System Usability Scale (SUS) dalam penelitian ini digunakan untuk mengukur tingkat usability atau kemudahan penggunaan sistem informasi presensi SIPLUS Babussalam berdasarkan persepsi pengguna.
Pertanyaan pada kuesioner mencakup berbagai aspek, seperti kemudahan penggunaan sistem, tingkat kerumitan, konsistensi fitur, kebutuhan bantuan teknis, kemudahan dipahami oleh pengguna lain, hingga hambatan yang dirasakan saat menggunakan sistem.
Penilaian dilakukan menggunakan skala Likert dari sangat tidak setuju hingga sangat setuju.
Pengujian ini tidak hanya bertujuan untuk mengetahui bagian desain yang perlu diperbaiki, tetapi juga untuk mengidentifikasi peluang pengembangan fitur serta memahami pengalaman dan preferensi pengguna terhadap sistem.
Dengan demikian, evaluasi usability dilakukan untuk memastikan bahwa solusi yang dikembangkan benar-benar mudah, nyaman, dan efektif digunakan oleh pengguna dalam menyelesaikan aktivitas presensi digital pada aplikasi SIPLUS Babussalam.
HASIL DAN PEMBAHASAN
Setelah menyelesaikan tahap idea teuntuk menemukan solusi, langkah selanjutnya dalam proses prototype dimulai dengan membuat wireframe atau low-fidelity dari desain baru aplikasi yang akan dikembangkan hingga menjadi tampilan high-fidelity dan akan diuji pada tahap selanjutnya, yaitu testing.
Wireframe Dalam proses perancangan antarmuka aplikasi web Siplus Babussalam, langkah awal yang dilakukan adalah penyusunan wireframe.
Wireframe berfungsi sebagai kerangka struktural sederhana yang menggambarkan tata letak elemen, alur navigasi, serta organisasi konten secara garis besar tanpa melibatkan detail visual yang rumit, sehingga memungkinkan tim desain untuk fokus pada fungsionalitas dan pengalaman pengguna terlebih dahulu.
Gambar 1.
Wireframe Siplus Babussalam Gambar 1 menyajikan rancangan wireframe Sistem Informasi Presensi Siplus Babussalam.
Penomoran pada rancangan tersebut merujuk pada berbagai halaman utama, yaitu nomor 1 untuk laman masuk, nomor 2 untuk beranda piket, nomor 3 untuk pemindaian presensi kedatangan dan kepulangan berbasis kode QR, nomor 4 untuk daftar kelas, nomor 5 untuk daftar guru atau daftar pertemuan, nomor 6 untuk presensi mata pelajaran, nomor 7 untuk pencarian presensi mata pelajaran serta presensi pemindaian, nomor 8 untuk beranda guru, dan nomor 9 untuk profil pengguna.
High Fidelity Design (Mocku.
Setelah menyusun wireframe, tahap selanjutnya adalah pembuatan mockup.
Mockup berfungsi sebagai representasi visual yang lebih realistis dan mendekati tampilan akhir suatu Halaman Login Gambar 1.
Halaman Login Siplus Babussalam Gambar 2 menampilkan antarmuka masuk Sistem Informasi Presensi Siplus Babussalam yang digunakan oleh Admin.
Guru Mata Pelajaran, dan Guru Piket untuk mengakses sistem melalui kolom nama pengguna dan kata sandi.
Halaman ini dilengkapi logo dan nama aplikasi sebagai identitas sistem, tombol login untuk memvalidasi kredensial, serta gambar latar aktivitas Babussalam sebagai elemen visual pendukung.
Secara keseluruhan, tampilan dirancang sederhana, informatif, dan mudah dipahami guna memudahkan proses autentikasi Halaman Dashboard Gambar 2.
Halaman Dashboard Guru Piket Siplus Babussalam Gambar 3 menampilkan antarmuka dashboard Guru Piket pada Sistem Informasi Presensi Siplus Babussalam yang berfungsi untuk mengelola presensi harian.
Dashboard ini memuat menu navigasi seperti Profil.
Cari Presensi.
Kontak.
Informasi, dan Logout, serta menampilkan identitas pengguna, tanggal, dan jam digital secara waktu nyata.
Selain itu, tersedia fitur utama berupa Scan Presensi untuk memindai kode QR dan Presensi Mata Pelajaran untuk mencatat kehadiran siswa sesuai kegiatan pembelajaran.
Secara keseluruhan, tampilan dirancang sederhana, informatif, dan efisien guna mendukung tugas guru piket dalam pengelolaan presensi.
Halaman Navigasi Profil Gambar 4.
Navigasi Profil Guru Piket.
Guru Mata Pelajaran dan Admin Siplus Babussalam Gambar 4 menampilkan antarmuka Profil Pengguna pada Sistem Informasi Presensi Siplus Babussalam yang digunakan oleh Guru Piket dan Guru Mata Pelajaran untuk melihat serta mengelola data pribadi dan akademik.
Antarmuka ini memuat informasi diri seperti nama, jenis kelamin, tempat dan tanggal lahir, agama.
NIK, nomor telepon, dan alamat, serta dilengkapi fitur Ubah Data Diri dan Ubah Kata Sandi untuk memperbarui akun dan keamanan.
Selain itu, tersedia data akademik seperti nomor induk, jabatan atau mata pelajaran, serta riwayat pendidikan.
Secara keseluruhan, halaman profil dirancang agar pengguna dapat mengelola informasi secara mandiri sehingga data dalam sistem tetap akurat dan terkini.
Kontak Gambar 5.
Navigasi Kontak Siplus Babussalam Gambar 5 memperlihatkan antarmuka Kontak pada Sistem Informasi Presensi Siplus Babussalam.
Antarmuka ini berfungsi sebagai saluran komunikasi antara pengguna dan pengelola sistem.
Pada bagian atas tersedia tombol Kembali untuk kembali ke laman sebelumnya, sementara bagian utama menyediakan formulir Kritik dan Saran yang mencakup kolom Nama.
Surel.
Subjek, serta Pesan.
Formulir tersebut memungkinkan pengguna menyampaikan masukan, pertanyaan, atau keluhan terkait sistem, yang kemudian dapat dikirim melalui tombol Kirim.
Di bagian bawah terdapat informasi Kontak Kami yang memuat alamat, surel, dan nomor telepon resmi Siplus Babussalam guna memudahkan penghubungan langsung dengan pengelola bila diperlukan.
Secara keseluruhan, antarmuka ini dirancang untuk mendukung komunikasi dua arah, sehingga kualitas layanan dan sistem dapat terus ditingkatkan.
Informasi Gambar 6.
Navigasi Informasi Siplus Babussalam Gambar 6 memperlihatkan antarmuka Informasi pada Sistem Informasi Presensi Siplus Babussalam.
Antarmuka ini menyajikan berbagai informasi krusial terkait kegiatan akademik.
Pada bagian atas tersedia tombol Kembali untuk kembali ke laman sebelumnya, sementara bagian utama menampilkan Kalender Akademik yang memuat daftar kegiatan berdasarkan bulan dan tahun, seperti jadwal ujian, proses belajar mengajar, serta agenda penting lainnya.
Kalender tersebut disusun secara terstruktur guna memudahkan pengguna dalam memahami jadwal yang berlaku.
Secara keseluruhan, antarmuka ini dirancang untuk memberikan akses yang jelas dan praktis terhadap informasi akademik, sehingga pengguna dapat mengikuti setiap kegiatan terjadwal di lingkungan Siplus Babussalam.
Scan Presensi (Guru Pike.
Gambar 7.
Navigasi Scan Presensi Siplus Babussalam Gambar 7 memperlihatkan antarmuka Presensi Scan pada Sistem Informasi Presensi Siplus Babussalam, yang difungsikan oleh Guru Piket untuk mencatat kehadiran siswa melalui pemindaian kode QR.
Pada bagian atas tersedia tombol Kembali untuk kembali ke laman sebelumnya, sementara bagian utama menampilkan ikon kode QR serta tombol Buka Kamera guna memulai proses pemindaian.
Setelah kode QR siswa dipindai, sistem secara otomatis melengkapi kolom Nomor Induk Siswa.
Nama Siswa, dan Kelas, disertai kolom Waktu yang mencatat waktu secara langsung serta pilihan Jenis Presensi untuk status datang atau pulang.
Jika kode QR hilang atau rusak, data dapat diinput secara manual menggunakan NISN.
Setelah data terverifikasi.
Guru Piket dapat menekan tombol Simpan untuk merekam presensi ke dalam sistem.
Secara keseluruhan, antarmuka ini dirancang untuk mempercepat dan menyederhanakan pencatatan kehadiran siswa dengan akurasi tinggi melalui teknologi pemindaian QR.
Cari Presensi (Guru Pike.
Gambar 8.
Navigasi Presensi Mapel Gambar 9.
Navigasi Presensi Scan Siplus Siplus Babussalam Babussalam Gambar 8 dan 9 memperlihatkan antarmuka Cari Presensi pada Sistem Informasi Presensi Siplus Babussalam, yang difungsikan oleh Guru Piket untuk mencari data kehadiran siswa berdasarkan mata pelajaran.
Pada bagian atas tersedia tombol Kembali untuk kembali ke laman sebelumnya serta tab Presensi Mapel dan Presensi Scan sebagai pilihan metode Bagian utama menyediakan formulir pencarian dengan kolom Tanggal sebagai field wajib untuk acuan utama, sementara kolom Nama Siswa.
Mata Pelajaran, dan Kelas bersifat opsional guna menyaring hasil sesuai kebutuhan.
Setelah mengisi kriteria, pengguna dapat menekan tombol Cari untuk menampilkan data presensi yang sesuai.
Secara keseluruhan, antarmuka ini dirancang untuk memudahkan Guru Piket dalam menelusuri dan memantau kehadiran siswa secara cepat, akurat, dan terstruktur berdasarkan tanggal serta parameter pendukung lainnya.
Daftar Guru (Guru Pike.
Gambar 10.
Navigasi Daftar Guru Siplus Babussalam Gambar 10 memperlihatkan antarmuka Daftar Guru pada Sistem Informasi Presensi Siplus Babussalam, yang hanya dapat diakses oleh Guru Piket.
Antarmuka ini menyajikan daftar guru berdasarkan kelas, misalnya Kelas 7A, dalam tabel yang mencantumkan nama guru beserta mata pelajaran yang diampu, dilengkapi tombol Presensi pada setiap baris untuk mencatat kehadiran.
Secara keseluruhan, tampilan ini dirancang secara sederhana dan terstruktur guna memudahkan Guru Piket dalam memantau serta melakukan pencatatan presensi secara cepat dan efisien.
Daftar Kelas (Guru Piket dan Guru Mape.
Gambar 11.
Navigasi Daftar Kelas Siplus Babussalam Gambar 11 memperlihatkan antarmuka Daftar Kelas pada Sistem Informasi Presensi Siplus Babussalam, yang dapat diakses oleh Guru Mata Pelajaran serta Guru Piket.
Pada bagian atas terdapat header berwarna hijau yang memuat logo dan nama sistem AuSiplus BabussalamAy, disertai menu AuDaftar KelasAy di sisi kanan serta tombol Kembali di bawahnya.
Bagian utama menyajikan serangkaian kartu kelas, seperti 7A, 7B, 7C, 7D, 7E, 7F, dan kelas lainnya, yang mencantumkan tahun ajaran/semester serta jumlah siswa, dilengkapi tombol AuLihat DetailAy pada setiap kartu untuk mengakses informasi lebih rinci.
Presensi Siswa (Guru Piket dan Guru Mape.
Gambar 12.
Navigasi Presensi Siswa Siplus Babussalam Gambar 12 memperlihatkan antarmuka Form Presensi Siswa pada Sistem Informasi Presensi Siplus Babussalam, yang dapat diakses oleh Guru Mata Pelajaran serta Guru Piket.
Pada bagian atas terdapat header berwarna hijau yang memuat logo dan nama sistem AuSiplus BabussalamAy beserta keterangan halaman Form Presensi di sisi kanan.
Bagian utama menyajikan tabel Presensi Siswa yang berisi daftar siswa dalam satu kelas, dengan kolom No.
Siswa.
Hadir.
Izin.
Sakit, dan Alfa, di mana setiap siswa dilengkapi tombol radio untuk menentukan status kehadiran, didukung petunjuk warna .
ijau untuk Hadir, biru untuk Izin, kuning untuk Sakit, dan merah untuk Alf.
Di bagian bawah tersedia tombol Reset untuk mengatur ulang pilihan serta tombol Simpan untuk merekam data kehadiran.
Antarmuka ini dirancang untuk memperlancar pencatatan presensi siswa secara cepat, akurat, dan terstruktur.
Daftar Pertemuan (Guru Piket dan Guru Mape.
Gambar 13.
Navigasi Daftar Pertemuan Siplus Babussalam Gambar 13 memperlihatkan antarmuka Daftar Pertemuan pada Sistem Informasi Presensi Siplus Babussalam, yang dapat diakses oleh Guru Piket serta Guru Mata Pelajaran.
Pada bagian atas terdapat header berwarna hijau yang memuat identitas sistem beserta menu AuDaftar PertemuanAy, disertai tombol Kembali di bawahnya untuk kembali ke laman Bagian utama menyajikan daftar pertemuan untuk Kelas 7A dalam bentuk tabel yang mencantumkan nomor pertemuan beserta tanggal pelaksanaan, dengan tombol AuLihatAy di sisi kanan setiap baris untuk mengakses rincian presensi.
Tersedia pula tombol AuTambah PresensiAy guna menambahkan data kehadiran baru sesuai pertemuan yang sedang berlangsung.
Secara keseluruhan, antarmuka ini berfungsi sebagai fasilitas navigasi dan pengelolaan data pertemuan serta presensi siswa, sehingga Guru Piket maupun Guru Mata Pelajaran dapat memantau, melihat, dan mencatat kehadiran siswa sesuai kelas dan jadwal yang ditetapkan.
Lihat Presensi (Guru Piket dan Guru Mape.
Gambar 14.
Navigasi Lihat Presensi Siplus Babussalam Gambar 14 memperlihatkan antarmuka Lihat Presensi pada Sistem Informasi Presensi Siplus Babussalam, yang dapat diakses oleh Guru Piket serta Guru Mata Pelajaran.
Pada bagian atas terdapat header berwarna hijau yang memuat identitas sistem beserta menu AuLihat PresensiAy, disertai tombol Kembali di bawahnya untuk kembali ke laman sebelumnya.
Bagian utama menyajikan tabel Presensi Siswa yang berisi daftar kehadiran siswa pada suatu pertemuan, dengan kolom NIS.
Nama Siswa.
Mata Pelajaran, dan Status.
Kolom Status dilengkapi ikon serta warna penanda untuk Hadir (H).
Izin (I).
Sakit (S), dan Alpa (A), serta tombol AuUbahAy guna mengedit data presensi bila diperlukan.
Secara keseluruhan, antarmuka ini berfungsi untuk memantau dan mengevaluasi kehadiran siswa, sehingga Guru Piket maupun Guru Mata Pelajaran dapat melihat serta memperbarui data sesuai kewenangan dan kebutuhan pembelajaran.
Ubah Password (Admi.
Gambar 15.
Navigasi Ubah Password Siplus Babussalam Gambar 15 memperlihatkan antarmuka Ubah Kata Sandi pada Sistem Informasi Presensi Siplus Babussalam, yang hanya dapat diakses oleh Admin.
Pada bagian atas terdapat header berwarna hijau yang memuat identitas sistem beserta menu AuForm PasswordAy, disertai tombol Kembali di bawahnya untuk kembali ke laman sebelumnya.
Bagian utama menyajikan formulir Ubah Kata Sandi dengan dua kolom masukan, yaitu Nama Pengguna dan Kata Sandi Baru, yang memungkinkan Admin memasukkan kredensial akun yang akan diperbarui serta kata sandi baru.
Di bagian bawah formulir tersedia tombol AuSimpanAy guna merekam perubahan yang Secara keseluruhan, antarmuka ini berfungsi sebagai fasilitas pengelolaan keamanan akun, sehingga Admin dapat memperbarui atau mengatur ulang kata sandi pengguna untuk menjaga kerahasiaan dan kelancaran akses sistem Siplus Babussalam.
Hak Akses Pengguna (Admi.
Gambar 16.
Navigasi Hak Akses Pengguna Siplus Babussalam Gambar 16 memperlihatkan antarmuka Pengaturan Hak Akses Pengguna pada Sistem Informasi Presensi Siplus Babussalam, yang hanya dapat diakses oleh Admin.
Pada bagian atas terdapat header berwarna hijau yang memuat identitas sistem beserta menu AuHak Akses PenggunaAy, disertai tombol Kembali di bawahnya untuk kembali ke laman sebelumnya.
Bagian utama menyajikan dua pilihan peran pengguna dalam bentuk tombol atau kartu, yaitu Guru Mata Pelajaran dan Guru Piket, masing-masing dilengkapi ikon yang menggambarkan tugas Antarmuka ini berfungsi sebagai fasilitas pengelolaan hak akses, di mana Admin dapat menetapkan dan mengatur peran pengguna sesuai tanggung jawabnya.
Dengan fitur tersebut, sistem mampu membatasi akses serta fungsi yang tersedia bagi setiap jenis pengguna, sehingga keamanan dan pengendalian data dalam Siplus Babussalam tetap terjaga secara optimal.
Data Siswa (Admi.
Gambar 17.
Navigasi Data Siswa Siplus Babussalam Gambar 17 memperlihatkan antarmuka Data Siswa pada Sistem Informasi Presensi Siplus Babussalam, yang hanya dapat diakses oleh Admin.
Pada bagian atas terdapat header berwarna hijau yang memuat identitas sistem beserta menu AuData SiswaAy, disertai tombol Kembali di bawahnya untuk kembali ke laman sebelumnya.
Bagian utama menyajikan tabel Data Siswa dengan kolom No.
Nomor Induk.
Nama Siswa.
Kelas.
Kelas Gabungan, dan Aksi, yang menampilkan seluruh data siswa terdaftar dalam sistem.
Di atas tabel tersedia tombol AuTambah DataAy untuk menambahkan entri siswa baru serta AuHapus Semua DataAy untuk menghapus seluruh data sekaligus, sementara kolom Aksi dilengkapi ikon edit dan hapus individual.
Secara keseluruhan, antarmuka ini berfungsi sebagai pusat pengelolaan data siswa, sehingga Admin dapat menambah, mengubah, atau menghapus informasi guna menjaga akurasi dan kebaruan data dalam sistem Siplus Babussalam.
Data Guru (Admi.
Gambar 18.
Navigasi Data Guru Siplus Babussalam Gambar 18 menampilkan tampilan Data Guru pada Sistem Informasi Presensi Siplus Babussalam yang hanya dapat diakses oleh Administrator.
Bilah atas berwarna hijau memuat identitas sistem serta menu AuData GuruAy, dilengkapi tombol Kembali untuk kembali ke halaman sebelumnya.
Bagian utama menyajikan tabel yang mencakup kolom No.
Nomor Induk.
Nama Guru.
Mata Pelajaran, dan Aksi, sehingga seluruh rekaman guru terdaftar tersaji secara lengkap.
Di atas tabel terdapat tombol AuTambah DataAy untuk memasukkan rekaman guru baru serta AuHapus Semua DataAy untuk mengosongkan seluruh rekaman sekaligus, sedangkan kolom Aksi menyediakan ikon pengeditan dan penghapusan per rekaman.
Secara keseluruhan, tampilan ini berperan sebagai pusat pengelolaan data guru, memungkinkan Administrator menambah, memperbarui, atau menghapus informasi demi menjaga ketepatan, keakuratan, dan kemutakhiran data dalam sistem Siplus Babussalam.
Data Mata Pelajaran (Admi.
Gambar 19.
Navigasi Data Mata Pelajaran Siplus Babussalam Gambar 19 menampilkan tampilan Data Mata Pelajaran pada Sistem Informasi Presensi SIPLUS Babussalam yang hanya dapat diakses oleh Administrator.
Bilah atas berwarna hijau memuat identitas sistem serta menu AuData Mata PelajaranAy, dilengkapi tombol Kembali untuk kembali ke halaman sebelumnya.
Bagian utama menyajikan tabel yang mencakup kolom No.
Kode.
Mata Pelajaran.
Deskripsi, dan Aksi, sehingga seluruh rekaman mata pelajaran terdaftar tersaji secara lengkap.
Di atas tabel terdapat tombol AuTambah DataAy untuk memasukkan rekaman mata pelajaran baru serta AuHapus Semua DataAy untuk mengosongkan seluruh rekaman sekaligus, sedangkan kolom Aksi menyediakan ikon pengeditan dan penghapusan per rekaman.
Secara keseluruhan, tampilan ini menjadi pusat pengelolaan data mata pelajaran, memungkinkan Administrator menambah, memperbarui, atau menghapus informasi guna memastikan data dalam sistem SIPLUS Babussalam tetap terstruktur, valid, dan sesuai dengan kebutuhan pengelolaan akademik.
Data Presensi (Admi.
Gambar 20.
Navigasi Data Presensi Siplus Babussalam Gambar 20 menampilkan tampilan Navigasi Data Presensi pada Sistem Informasi Presensi Siplus Babussalam yang hanya dapat diakses oleh Administrator.
Bilah atas berwarna hijau memuat identitas sistem serta menu AuDaftar PertemuanAy, dilengkapi tombol Kembali untuk kembali ke halaman sebelumnya.
Bagian utama menyajikan daftar pertemuan Kelas 7A dalam bentuk tabel, di mana setiap baris mencantumkan nomor pertemuan beserta tanggal pelaksanaannya, serta kolom Aksi yang berisi ikon untuk mengakses atau mengelola rekaman presensi pada pertemuan tersebut.
Secara keseluruhan, tampilan ini berfungsi sebagai pintu navigasi utama bagi Administrator dalam memantau dan mengatur data presensi berdasarkan pertemuan yang telah Melalui fasilitas ini.
Administrator dapat melakukan pengawasan, pengelolaan, dan pengendalian rekaman kehadiran siswa secara terstruktur dan sistematis dalam sistem Siplus Babussalam.
Prototype Tahap selanjutnya adalah pengembangan prototype.
Prototype merupakan representasi interaktif dari desain aplikasi yang memungkinkan simulasi navigasi dan interaksi pengguna secara nyata, sehingga dapat diuji coba seolah-olah aplikasi sudah berjalan.
Prototype ini telah disusun berdasarkan mockup sebelumnya dengan menambahkan fungsi klik, transisi antarhalaman, serta alur pengguna yang lengkap.
Gambar berikut menampilkan prototype aplikasi web Siplus Babussalam yang telah dikembangkan.
Gambar 21.
Prototype Siplus Babussalam Pengujian System Usability Scale Dalam analisis pengujian menggunakan System Usability Seale (SUS).
metode ini digunakan untuk menilai sejauh mana aplikasi web yang dikembangkan telah memenuhi kebutuhan penggunanya.
Pengujian ini dilakukan melalui Google Form yang kemudian disebarkan kepada para responden yang terdiri dari kepala sekolah dan guru SMP Plus Babussalam.
Sebanyak 10 responden telah berpartisipasi dalam pengujian tersebut, dan jumlah ini dianggap memenuhi untuk melakukan evaluasi efektivitas berdasarkan panduan (Huda et , 2.
Pada merupakan hasil yang diperoleh dari para responden.
Tabel 3.
Nilai Kuisioner dari Responden
Responden
Q10
Skor
R10
Setelah mendapatkan nilai kuisioner dari responden, dilakukan penghitungan skor SUS dengan pedoman dan rumus tertentu yang digunakan.
Rumus ini disusun dengan langkahlangkah berikut.
Skor SUS= ((Q1-.
-Q.
(Q3-.
-Q.
(Q5-.
-Q.
(Q7- .
-Q.
(Q.
-Q.
) x 2,5.
Keterangan:
Untuk pernyataan dengan nomor ganjil (Q1.
Q3.
Q5.
Q7.
, nilai respon dikurangi Untuk pernyataan dengan nomor genap (Q2.
Q4.
Q6.
Q8.
nilai 5 dikurangi dengan nilai respon.
Terakhir, jumlahkan hasil dari langkah 1 dan 2, lalu kalikan dengan 2,5 untuk mengubah rentang nilai menjadi 0 hingga 100.
Tabel 4.
Hasil Pengujian SUS Responden Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 Skor Skor y 2.
R10
Jumlah Setelah menghitung total skor dari tabel di atas, hasilnya dibagi dengan jumlah responden untuk mendapatkan skor akhir.
Berikut adalah rata-rata skor sus dari aplikasi web yang telah Jumlah Hasil SUS Nilai rata Oe rata = = 80.
Jumlah Responden Gambar 22.
SUS Score Pada gambar 22 menunjukkan klasifikasi metrik kepuasan pengguna yang terbagi ke dalam lima gradasi huruf pada rentang skor 0Ae100 untuk merepresentasikan kualitas produk secara komprehensif.
Grade A (Ou 80.
mengukuhkan performa prima dengan tingkat akseptasi tertinggi, sedangkan Grade B .
1 Ae 77.
menandakan kualitas yang melampaui standar Sebaliknya.
Grade C .
Ae .
mempresentasikan nilai ambang median, yang diikuti oleh Grade D .
7 Ae 62.
sebagai indikator performa di bawah ekspektasi, hingga Grade F (< .
yang mengidentifikasi kategori kegagalan fungsi atau rendahnya kepuasan pengguna (Kesuma, 2.
Secara struktural.
Diagram ini membagi hasil menjadi tiga zona utama: Not Acceptable.
Marginal, dan Acceptable, dilengkapi deskripsi kualitatif dari Worst Imaginable hingga Best Imaginable.
System Usability Scale tidak dapat mengidentifikasi masalah spesifik, namun berguna untuk menilai apakah sistem sudah layak digunakan.
Hasil Pengujian Setelah memperoleh hasil pengujian System Usability Scale pada aplikasi web sistem infromasi presensi siswa dengan jumlah hasil skor sebesar 807.
5, langkah selanjutnya adalah melakukan interpretasi berdasarkan kategori persentase.
Dengan nilai rata-rata 80.
75, hasil tersebut termasuk dalam kategori sebagai berikut.
Deceptability range yang didapat dari nilai rata-rata 80.
75, aplikasi web sistem infromasi presensi siswa berada dalam rentang yang sangat diterima.
Nilai ini menunjukkan bahwa aplikasi web dianggap sangat baik oleh pengguna dalam hal kegunaan dan kepuasan secara Grade scale yang didapat dianggap sebagai kategori A atau very good, yang menandakan kualitas kegunaan yang sangat tinggi.
Ini berarti aplikasi web telah mendapatkan penilaian yang sangat positif dari pengguna dan menunjukkan performa yang sangat baik.
Dalam Adjective rating, nilai ini dikategorikan sebagai "Excellent".
Ini mengindikasikan bahwa pengguna merasa aplikasi web ini sangat memenuhi ekspektasi mereka dalam hal penggunaan dan fungsionalitas.
Secara keseluruhan, hasil ini mencerminkan tingkat kepuasan yang sangat tinggi dan penerimaan yang luar biasa terhadap aplikasi web sistem infromasi presensi siswa.
KESIMPULAN
Hasil penelitian dengan metode design thinking pada sistem infromasi presensi siswa SMP Plus Babussalam dapat disimpulkan bahwa.
Penelitian ini telah berhasil untuk membuat aplikasi web sistem infromasi presensi siswa SMP Plus Babussalam berbasis website dengan metode Design Thinking untuk membuat aplikasi web yang user-friendly.
Hasil dari penerapan metode ini melalui lima tahapan .
mpathize, define, ideate.
prototype, dan tes.
berhasil menciptakan aplikasi web yang sesuai dengan kebutuhan pengguna, khususnya guru SMP Plus Babussalam.
Pengujian menggunakan System Usability Scale (SUS) menghasilkan skor ratarata 80,75, yang masuk dalam kategori "Excellent" dan menunjukkan bahwa aplikasi web memiliki tingkat kegunaan yang sangat tinggi.
Ini mencerminkan tingkat kepuasan yang luar biasa dari para pengguna terhadap fitur-fitur yang dibuat, seperti presensi scan datang/pulang, presensi mata pelajaran dan hak akses pengguna.
Secara keseluruhan, penelitian ini berhasil mencapai tujuannya, yaitu menghasilkan aplikasi web sistem infromasi presensi siswa SMP Plus Babussalam (Siplus Babussala.
berbasis website yang mudah digunakan, responsif terhadap kebutuhan pengguna, dan memenuhi standar kualitas yang baik.
REFERENSI