Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
PERANCANGAN USER INTERFACE (UI) & USER EXPERIENCE
(UX) APLIKASI AuSI PRESENSIAy BERBASIS MOBILE
MENGGUNAKAN METODE DESIGN THINKING
Joycelyn Tabita Tanod1.
Hario Jati Setyadi2.
Vina Zahrotun Kamila3 joytabita@gmail.
com, 2hario.
setyadi@unmul.
id, 3vinakamila@gmail.
1,2,3
Program Studi Sistem Informasi.
FakultasTeknik.
Universitas Mulawarman Abstrak Program Studi Sistem Informasi Universitas Mulawarman melakukan presensi pada setiap mata kuliah yang menggunakan SIPLO.
Terdapat beberapa kendala yang dirasakan ketika menggunakan SIPLO.
Hal ini dibuktikan dengan wawancara yang dilakukan dengan beberapa mahasiswa dan dosen prodi Sistem Informasi yang menggunakan SIPLO.
Penelitian ini bertujuan untuk merancang aplikasi 'SI Presensi' berbasis mobile dengan menggunakan metode Design Thinking, yang terdiri dari lima tahapan: Empathize.
Define.
Ideate.
Prototype, dan Test.
Data yang digunakan dalam penelitian ini diperoleh melalui wawancara dengan pengguna potensial dan analisis kompetitor.
Hasil penelitian menunjukkan bahwa rancangan aplikasi yang dihasilkan mampu memenuhi kebutuhan pengguna serta menyelesaikan masalah yang dihadapi terkait presensi.
Validitas desain ini didukung oleh hasil skor SUS (System Usability Scal.
rata-rata sebesar 79,4, yang dikategorikan sebagai "Baik".
Temuan ini juga menegaskan bahwa metode Design Thinking efektif dalam menciptakan solusi desain yang sesuai dengan kebutuhan pengguna.
Oleh karena itu, penelitian ini memberikan kontribusi penting dalam pengembangan aplikasi mobile khususnya di bidang sistem informasi akademik.
Kata kunci: Design Thinking.
SI Presensi.
Mobile.
User interface.
User experience.
System Usability Scale (SUS).
Abstract The Information Systems Program at Mulawarman University conducts attendance for each course using SIPLO.
The researchers encountered several issues while using SIPLO.
This was evidenced by interviews conducted with several students and lecturers from the Information Systems program who use SIPLO.
This study aims to design a -based application called 'SI Presensi' using the Design Thinking method, which consists of five stages: Empathize.
Define.
Ideate.
Prototype, and Test.
The data used in this research were obtained through interviews with potential users and competitor analysis.
The results show that the application design produced meets user needs and resolves the issues they faced regarding The validity of this design is supported by an average SUS (System Usability Scal.
score of 4, which is categorized as "good.
" These findings also confirm that the Design Thinking method is effective in creating design solutions that align with user needs.
Therefore, this research provides a significant contribution to the development of applications, particularly in the field of academic information Keywords: Design Thinking.
SI Presensi.
Mobile.
User Interface.
User Experience.
System Usability Scale (SUS).
Pendahuluan Presensi adalah proses penilaian kehadiran terhadap individu pada lembaga, organisasi, atau instansi Kehadiran merupakan salah satu indikator penting bagi sebuah instansi karena memiliki dampak yang signifikan dalam berbagai konteks, terutama di lingkungan kerja dan pendidikan.
Presensi dilakukan dengan tujuan utama untuk mengetahui dan menyampaikan kondisi kehadiran tenaga kerja dengan akurat.
Namun, ada beberapa masalah yang terjadi pada proses presensi, seperti kehadiran palsu .
anipulasi presens.
, ketidakakuratan data, keterbatasan teknologi, kerumitan administrasi, serta privasi dan keamanan data .
http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Mahasiswa Sistem Informasi Universitas Mulawarman dalam melakukan presensi mata kuliah sudah menerapkan penggunaan presensi online.
Sistem yang digunakan untuk proses presensi setiap mata kuliah adalah dengan menggunakan website SIPLO (Sistem Informasi Terpadu Layanan Profi.
Proses presensi dilakukan oleh dosen yang menginput mata kuliah dan mengisi keterangan materi yang akan diberikan pada hari mata kuliah tersebut berlangsung.
Setelah itu, dosen akan memberikan QR code kepada mahasiswa, sehingga dosen pun juga akan terhitung hadir mengajar pada pertemuan mata kuliah.
Selanjutnya masing-masing mahasiswa melakukan scan dan status mahasiswa dinyatakan hadir dalam data mata kuliah yang berlangsung.
Selain melakukan presensi.
SIPLO juga menyediakan berbagai macam fitur informasi yang membantu mahasiswa, seperti proses pengerjaan skripsi, proses praktik kerja lapangan, template laporan, dan fitur lainnya.
Terdapat beberapa kelemahan dalam melakukan presensi menggunakan website tersebut, untuk memperkuat opini dari kelemahan tersebut penulis melakukan pengambilan data menggunakan kuesioner Zoho Form.
Berdasarkan hasil responden kuesioner dari 8 mahasiswa program studi Sistem Informasi pengguna fitur presensi di SIPLO, didapatkan informasi bahwa kendala terbanyak yang dialami responden saat melakukan presensi diantaranya adalah kesulitan membuka kamera tambahan saat melakukan scan QR Code, khusus-nya pengguna Smartphone Android, karena harus menginstall aplikasi kamera khusus untuk melakukan scan barcode serta adanya kebutuhan untuk melakukan login berulang-ulang sebelum dapat mengakses profil SIPLO dan melakukan presensi.
Kesulitan semacam ini bisa mengganggu kelancaran dan efisiensi proses berlangsungnya mata kuliah, serta menciptakan hambatan dalam melakukan presensi yang seharusnya merupakan bagian penting dari tindakan pengawasan kehadiran mahasiswa.
Penulis ingin melakukan perancangan aplikasi presensi dengan menggunakan salah satu metode yaitu Design Thinking dalam penelitian ini.
Design Thinking merupakan metode inovatif yang digunakan untuk memecahkan masalah dan merancang solusi yang fokus pada kebutuhan pengguna.
Metode ini juga digunakan dalam pengembangan produk, layanan, atau pengalaman pengguna.
Penulis memutuskan untuk menggunakan metode Design Thinking agar aplikasi yang dirancang sesuai dengan kebutuhan mahasiswa dan dosen program studi Sistem Informasi serta menemukan solusi untuk masalah yang dialami.
Berdasarkan permasalahan pada latar belakang, penelitian ini mengangkat judul AuPerancangan User Interface dan User Experience Aplikasi PresensiAy berbasis mobile dengan menggunakan metode Design Thinking.
Tujuannya adalah untuk merancang desain yang sesuai dengan kebutuhan pengguna.
Aplikasi 'SI Presensi' diharapkan juga dapat mengatasi masalah yang telah dirasakan oleh pengguna sebelumnya karena akan dilengkapi dengan fitur fitur yang diperlukan, dan menjadikannya sebagai solusi yang dapat menangani permasalahan yang dihadapi oleh pengguna.
Metode Penelitian Perancangan user interface dan user experience AuSI PRESENSIAy menggunakan metode design Design thinking merupakan suatu proses yang digunakan untuk mengidentifikasi kebutuhan masyarakat dan menciptakan solusi inovatif guna memenuhi kebutuhan tersebut .
Metode ini memungkinkan pengulangan langkah dan proses untuk pengembangan hingga mencapai solusi dan desain yang sesuai.
Kelebihan dari pendekatan design thinking terletak pada kemampuannya untuk menghasilkan berbagai ide inovatif pada tahapan inspirasi, ide, dan implementasi dalam setiap siklusnya, yang dapat diulangi lebih dari sekali.
Ini terjadi saat pengembangan berbagai ide baru dan eksplorasi solusi baru sedang Metode ini memungkinkan pengulangan langkah dan proses untuk pengembangan hingga mencapai solusi dan desain yang sesuai.
Metode design thinking terdiri dari lima tahap proses dalam mencapai tujuan .
User Interface (UI) atau desain antarmuka pengguna adalah aspek yang berinteraksi dengan pengguna sebagai bagian integral dari pengalaman pengguna.
User Interface tidak hanya berkaitan dengan estetika warna dan bentuk, melainkan lebih kepada penyediaan alat yang tepat bagi pengguna untuk mencapai tujuan .
User Experience atau yang disingkat UX adalah persepsi dan respons yang timbul dari penggunaan atau antisipasi penggunaan suatu produk, sistem, atau aplikasi .
Proses design thinking terdiri dari empathize, define, ideate, prototype dan testing.
Dari seluruh tahapan tersebut maka dapat dilakukan penarikan kesimpulan perancangan aplikasi AoSI PresensiAo yang telah Berikut alur tahapan penelitian yang dapat dilihat pada Gambar 1.
http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Gambar 1.
Tahapan Penelitian Emphatize Tahapan "empathize" dalam desain adalah tahap di mana para designer berusaha untuk memahami pengguna, tujuan, kebutuhan, serta pengalaman para pengguna.
Pengumpulan data yang dilakukan dalam tahap "empathize" melibatkan berbagai metode dan riset untuk memahami pengguna secara lebih Beberapa teknik pengumpulan data yang digunakan dalam tahapan ini adalah Wawancara dan Competitor Analyze .
Define Define merupakan tahapan ketiga dari lima tahap proses design thinking.
Pada tahap ini, peneliti merumuskan masalah yang akan diselesaikan dengan lebih tepat dan mendalam untuk menemukan solusi inovatif untuk masalah atau tantangan yang dihadapi.
Terdapat 2 langkah penting yang bisa membantu dalam tahapan define yaitu menentukan Pain point dan How Might We .
Ideate Tahapan perancangan proses dalam Design Thinking atau tahap "Ideate" adalah tahap yang dilakukan bertujuan menghasilkan sebanyak mungkin ide kreatif untuk perancangan aplikasi yang akan Tahapan Ideate dapat menawarkan solusi inovatif untuk masalah yang telah dirumuskan pada tahap "Define" sebelumnya.
Dalam tahap Ideate, langkah yang akan dilakukan adalah menentukan Solution Idea.
Prioritizing Idea dan membuat Userflow .
http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Prototype Pada tahap Prototype ini akan dirancang komponen-komponen apa saja yang terdapat dalam perancangan user interface dan alur yang menggambarkan bagaimana pengguna berinteraksi dengan aplikasi yang akan dirancang agar sesuai dengan apa yang pengguna butuhkan.
Aplikasi Figma akan dimanfaatkan sebagai tools untuk pembuatan prototype .
Testing Tahap akhir dari proses design thinking yaitu usability testing yang merupakan proses pengujian pada aplikasi untuk menilai seberapa layak aplikasi tersebut.
Tahap ini dilakukan dengan tujuan agar sesuai dengan harapan persona.
Metode testing yang digunakan dalam penelitian ini adalah System Usability Scale atau SUS .
Hasil dan Pembahasan Empathize Wawancara Pada proses ini dilakukan wawancara dengan melibatkan 10 orang yang terdiri dari 8 mahasiswa dan 2 dosen dari Universitas Mulawarman program studi Sistem Informasi.
Wawancara kepada mahasiswa dilakukan menggunakan Zoho Form yang memuat sejumlah pertanyaan tentang pengalaman mahasiswa dalam menggunakan fitur presensi pada SIPLO.
Competitor Analyze Competitor analyze ini dilakukan dengan menganilisis kekuatan .
dan kelemahan .
dari aplikasi yang serupa dengan aplikasi AoSI PresensiAo yang akan dirancang.
Aplikasi pesaing yang dianalisis pada penelitian ini adalah Google Classrom untuk aplikasi pada bidang e-learning dan SIPLO sebagai aplikasi khusus bagian presensi.
Define Pain Point Data yang didapatkan dari proses empathize disusun dalam bentuk pain point.
Pain point dalam tahapan ini adalah masalah atau kesulitan spesifik yang dialami oleh pengguna saat melakukan presensi menggunakan SIPLO.
Permasalahan yang dirasakan adalah sebagai berikut:
Mahasiswa Kesulitan melakukan login berulang Membutuhkan kamera tambahan untuk melakukan scan Jika tidak hadir tidak bisa memberikan keterangan Tampilan pada mobile masih terpotong Waktu presensi yang terbatas Jaringan yang terganggu menyebabkan terlambat saat masuk ke website SIPLO Dosen Kesulitan jika jaringan tidak mendukung Kesulitan membuka QR Code pada tampilan mobile Tidak bisa menginput kelas Icon tidak relate dengan aplikasi presensi Membutuhkan waktu yang lama menunggu semua mahasiswa melakukan presensi Belum bisa menambahkan detail materi di setiap pertemuan How-Might We Berdasarkan masalah yang dirasakan oleh responden terhadap pain point, "How might we" yang ditetapkan adalah AuBagaimana membuat aplikasi mobile presensi online yang mudah digunakan dan fungsi fitur yang mendukung untuk kegiatan perkuliahanAy.
http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Ideate Solution Idea Berikut adalah solusi yang dihasilkan berdasarkan How Might-We yang telah ditentukan:
Mahasiswa Fitur kamera scan langsung dari aplikasi Fitur menambahkan keterangan izin / tidak hadir kuliah Membuat aplikasi dalam tampilan mobile Fitur kalender untuk memudahkan pengguna melihat jadwal kuliah Fitur melihat rekap presensi Fitur notifikasi untuk mengingatkan melakukan presensi Fitur notifikasi pemberitahuan dosen telah memulai kelas Menyimpan info tentang mata kuliah yang berlangsung .
ateri, catatan, dan pertemua.
Optimalkan fitur search untuk mencari kelas dan nama dosen Dosen Fitur kalender sebagai pengingat kelas yang akan berlangsung Fitur melihat keterangan izin / tidak hadir mahasiswa pada mata kuliah Membuat aplikasi dalam tampilan mobile Fitur melihat rekap performa mahasiswa dan dosen Fitur melihat rekap presensi Fitur notifikasi mahasiswa telah melakukan presensi Fitur notifikasi aktivitas mahasiswa Menyimpan arsip tentang mata kuliah yang berlangsung .
ateri, catatan, dan pertemua.
Optimalkan fitur search untuk mencari kelas dan nama dosen Prioritizing Idea Berikut adalah prioritizing idea yang sudah disusun berdasarkan tahapan sebelumnya:
Gambar 2.
Prioritizing Idea 3 User Flow Proses user flow pada penelitian ini mejelaskan proses aplikasi yang dirancang untuk role mahasiswa dalam melakukan proses presensi.
Adapun User Flow yang telah dirancang terlihat pada Gambar 3:
http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Gambar 3.
User Flow Prototype Wireframe Langkah ini dilakukan pembuatan Wireframe untuk beberapa halaman utama dalam aplikasi AoSI PresensiAo.
Berikut Wireframe yang sudah di rancang yang ditunjukkan pada Gambar 4:
Gambar 4.
Wireframe http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Design System Design System dibuat untuk mempermudah proses perancangan desain.
Dalam penelitian ini akan dibuat Design System yang mencakup elemen-elemen seperti colors, typography, buttons, text fields, dan Colors Gambar 5.
Colors Typhography Gambar 6.
Typography http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Button Gambar 7.
Button Text Field Gambar 8.
Text Field Icon Gambar 9.
Icon http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Mockup Mockup adalah desain antarmuka yang lebih mendetail serta dilengkapi dengan elemen visual seperti gambar, ikon, dan warna.
Mockup ini dibuat berdasarkan Wireframe yang sudah dirancang Adapun Mockup yang telah dibuat dalam penelitian ini dapat dilihat pada Gambar 10:
Gambar 10.
Mockup 4 Prototype Setelah Mockup selesai dirancang, tahapan berikutnya adalah membuat prototype yang digunakan dalam proses pengujian.
Dalam penelitian ini penulis menggunakan device Iphone 14 Pro dengan ukuran 393 x 852.
Gambar 11.
Prototype http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Testing 1 Usability Testing Usability testing pada penelitian ini dilakukan dengan menggunakan aplikasi maze.
Tautan maze yang berisi 7 task diberikan kepada 26 responden yang terdiri dari 22 mahasiswa dan 4 dosen Universitas Mulawarman.
Task yang diuji kepada responden pada proses usability testing adalah sebagai berikut:
Mahasiswa Melakukan Login Melakukan Presensi dengan Status Hadir Melakukan Presensi dengan Status Izin Melihat Daftar Kelas dan Menambah Kelas Baru Melihat Rekap Presensi dan Data Dosen Melihat Notifikasi dan Riwayat Presensi Mengedit Biodata dan Melakukan Logout Dosen Melakukan Login Memulai Kelas dan Membuka Presensi Melihat Detail Presensi Mahasiswa Mengedit Jadwal Kelas Melihat Kelas Saya dan Melihat Notifikasi Melihat Performa Presensi Mengedit Biodata dan Melakukan Logout Berdasarkan hasil usability testing yang sudah dilakukan, 26 responden berhasil menyelesaikan 7 task pada role masing-masing dan mendapatkan presentase keseluruhan 92% pada mahasiswa dan 82% pada 2 System Usability Scale Perhitungan skor SUS selanjutnya dilakukan dengan membuat kuesioner dengan 10 pertanyaan yang harus dijawab oleh responden menggunakan skala likert.
SUS merupakan kuesioner yang dapat digunakan untuk mengukur usability sistem komputer menurut sudut pandang subyektif pengguna .
Kuesioner ini diberikan menggunakan tautan google form kepada 26 responden setelah mereka melakukan usability testing pada maze.
Gambar 12 adalah total responden yang terdiri dari 22 mahasiswa dan 4 dosen program studi Sistem Informasi Universitas Mulawarman.
Gambar 12.
Responden Kuesioner http://e-jurnal.
id/simkom Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Hasil Pengujian kuesioner usability testing telah dilakukan dengan memberikan 10 pertanyaan kepada 26 orang responden.
Hasil skor usability testing tersebut disajikan pada Tabel 1.
Tabel 1.
Jawaban Kuesioner SUS
Responden
R10
R11
R12
R13
R14
R15
R16
R17
R18
R19
R20
R21
R22
R23
R24
R25
R26
P10
Hasil pengujian pada Tabel 1 kemudian dihitung menggunakan aturan system usability scale untuk perhitungan skor pertanyaan genap dan ganjil pada kuesioner.
Hasil perhitungan kuesioner disajikan pada Tabel 2 di bawah ini:
Tabel 2.
Hasil Perhitungan Kuesioner SUS Responden http://e-jurnal.
id/simkom P10 Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Responden
P10
R10
R11
R12
R13
R14
R15
R16
R17
R18
R19
R20
R21
R22
R23
R24
R25
R26
Setelah dilakukan perhitungan skor untuk setiap jawaban genap dan ganjil dari setiap responden, semua hasil perhitungan tersebut dijumlahkan untuk masing-masing responden.
Untuk mendapatkan Skor SUS, total dari seluruh jawaban responden tersebut kemudian dikalikan dengan faktor 2,5.
Tabel 3.
Hasil Skor Rata-rata SUS
Responden
R10
R11
R12
R13
R14
R15
R16
R17
R18
http://e-jurnal.
id/simkom Jumlah Skor SUS Jurnal Sistem Informasi dan Sistem Komputer.
Vol.
No.
Juli 2025 ISSN: 2715-906X (Onlin.
51717/simkom.
Responden
Jumlah R19
R20
R21
R22
R23
R24
R25
R26
Rata-rata yuycu ycuI = ycu Skor SUS Berdasarkan hasil perhitungan skor rata-rata dari kuesioner dengan perhitungan rumus .
SUS aplikasi SI Presensi diperoleh hasil nilai skor rata-rata 79,4.
Kesimpulan dan Saran Kesimpulan Berdasarkan hasil penelitian yang telah dilakukan, dapat disimpulkan bahwa penelitian ini berhasil melakukan perancangan User Interface dan User Experience aplikasi mobile AoSI PresensiAo dengan menggunakan metode Design Thinking.
Pengujian pada aplikasi AoSI PresensiAo mendapatkan skor akhir 79,4.
Skor ini merupakan tingkat kepuasan pengguna yang menunjukkan bahwa rancangan akhir aplikasi AoSI PresensiAo termasuk grade B yang berarti cukup memenuhi kebutuhan pengguna dan menyelesaikan masalah pengguna terkait kegiatan presensi online.
Penerapan metode design thinking pada penelitian ini mampu menghasilkan desain yang sesuai dengan kebutuhan dan menyelesaikan permasalahan pengguna.
Saran Berdasarkan hasil penelitian yang telah dilakukan terdapat beberapa saran yang dapat digunakan untuk penelitian selanjutnya, yaitu:
Meningkatkan desain dan fokus pada aksesibilitas dan memastikan desain aplikasi dapat digunakan dengan mudah oleh semua mahasiswa dan dosen program studi sistem informasi, termasuk yang memiliki kebutuhan khusus atau kriteria khusus.
Mengimplementasikan fitur-fitur aksesibilitas seperti teks alternatif untuk gambar, kontras warna yang cukup, dan navigasi yang bisa digunakan dengan keyboard.
Pengembangan desain UI/UX berikutnya diharapkan melibatkan pengguna dalam proses pengembangan dan menggunakan metode yang berbeda dengan penelitian ini seperti lean ux, ucd dan lain-lain.
Sehingga dapat menjadi perbandingan dengan metode design thinking yang digunakan pada penelitian ini.
Daftar Pustaka