Perancangan Antarmuka Pengguna Aplikasi Absensi Kerja Berbasis Mobile Dengan Metode Design Thinking: Studi Kasus PT QLCom Solusi Bisnis Zesyca Dwi Anjarsari1.
Dodik Arwin Dermawan2.
Ari Kurniawan3 Program Studi Manajemen Informatika.
Universitas Negeri Surabaya Jl.
Ketintang.
Ketintang.
Kec.
Gayungan.
Surabaya.
Jawa Timur 21010@mhs.
dodikdermawan@unesa.
arikurniawan@unesa.
AbstrakAi Proses absensi di PT QLCOM Solusi Bisnis saat ini masih menggunakan fingerprint yang mengharuskan kehadiran secara fisik sehingga menyusahkan bagi karyawan yang melakukan dinas luar ataupun WFH.
Selain itu, pengajuan cuti dan lembur dilakukan melalui sistem terpisah serta pengelolaan data karyawan diinputkan dengan cara manual.
Pada penelitian ini bertujuan untuk merancang antarmuka aplikasi absensi mobile yang fleksibel, dan berfokus pada kebutuhan user dengan metode Design Thinking.
Tahapan penelitian meliputi analisis masalah.
Perumusan How Might We (HMW), pencarian ide solusi, serta pengujian prototipe menggunakan metode System Usability Scale (SUS).
Hasilnya berupa prototipe aplikasi absensi mobile yang memiliki fitur utama pencatatan kehadiran berbasis lokasi, pengajuan cuti dan lembur yang terintegrasi, notifikasi otomatis, serta pengelolaan data pribadi oleh karyawan.
Pada uji coba kenyamanan dan efisiensi dalam proses absensi maupun administrasi personal lainnya.
Prototype dirancang menggunakan Figma yang memungkinkan kolaborasi secara daring dan real-time.
Kata kunciAi Design Thinking.
Antarmuka Pengguna.
Absensi Mobile.
Figma.
Usability Testing Abstract Ai The attendance process at PT QLCOM Solusi Bisnis currently still uses a fingerprint system that requires physical presence, which is inconvenient for employees working remotely or on external assignments.
Additionally, leave and overtime requests are handled through separate systems, and employee data is entered manually.
This study aims to design a flexible mobile attendance application interface that focuses on user needs using the Design Thinking method.
The research stages include problem analysis, formulation of How Might We (HMW) questions, idea generation, and prototype testing using the System Usability Scale (SUS) method.
The result is a mobile attendance application prototype featuring location-based attendance tracking, integrated leave and overtime requests, automated notifications, and self-managed personal data by Testing showed that the application improves comfort and efficiency in attendance and other personal administrative processes.
The prototype was designed using Figma, which enables real-time and online collaboration.
Keywords Ai Design Thinking.
User Interface.
Mobile Attendance.
Figma.
Usability Testing PENDAHULUAN Teknologi merupakan seuatu perangkat yang dipakai untuk mengelola data, mencari sebuah informasi, dan masih banyak lagi.
Dengan berkembangnya teknologi yang semakin pesat mendorong kemajuan system komputasi yang mengintegrasikan pengendalian secara jarak jauh .
untuk memudahkan manusia dalam berbagai kebutuhan dalam segala kondisi .
Absensi adalah salah satu kebutuhan penting didalam sebuah perusahaan untuk pengelolaan kepegawaian yang berfungsi untuk mencatat kehadiran, keterlambatan, dan izin karyawan.
Di era digitalisasi seperti saat ini, kebutuhan terhadap sistem absensi yang fleksibel dan berkembangnya pola kerja yang tidak lagi terbatas pada kehadiran fisik di kantor, seperti dinas luar atau work from home (WFH).
Dengan adanya system absensi maka pekerjaan pada perusahaan akan berjalan dengan lancer dan terstruktur, selain itu seiring dengan fleksibilitas pengguna smartphone yang tinggi maka akan lebih efektif untuk menunjang aktivitas pekerjaan salah satunya yaitu absensi .
PT QLCOM Solusi Bisnis adalah perusahaan yang berfokus pada pengembangan perangkat lunak untuk solusi bisnis berbasis web dan aplikasi, dengan jangkauan nasional dan berkantor pusat di Surabaya yang saat ini masih menggunakan sistem absensi berbasis fingerprint dan mengharuskan karyawan hadir secara fisik di kantor.
Hal ini menimbulkan beberapa kendala, terutama bagi karyawan yang bekerja di luar lokasi kantor atau memiliki mobilitas tinggi.
Selain itu, untuk pengajuan cuti dan lembur masih dilakukan melalui sistem web yang terpisah, serta pengelolaan data karyawan dilakukan secara manual oleh bagian HRIS, yang berpotensi menimbulkan keterlambatan dan ketidakefisienan dalam proses Pada semua aplikasi mobile memiliki desain antarmuka (UI) dan juga pengalaman pengguna (UX) oleh karena itu elemen ini sangat penting dan berpengaruh pada keefisienan system yang dapat memudahkan user untuk menjalankan sebuah system aplikasi.
Jika tampilan pada aplikasi kurang menarik maka user merasa tidak nyaman dan suulit untuk memahami aplikasi.
Untuk mengatasi permasalahan tersebut, dibutuhkan solusi digital yang terintegrasi, praktis, dan user-friendly.
Pada penelitian ini bertujuan untuk membuat rancangan antarmuka (UI) system absensi berbasis mobile yang fleksibel, dengan mengedepankan kebutuhan dan pengalaman pengguna melalui pendekatan Design Thinking.
Metode ini memungkinkan perancangan yang berfokus pada pengguna melalui tahapan empathize, define, ideate, prototipe, dan testing.
Dengan perancangan aplikasi absensi ini, diharapkan proses absensi dilakukan dengan lebih mudah digunakan kapan saja dan dapat diakses dimana saja melalui smartphone masing-masing.
Selain itu proses, pengajuan cuti dan lembur, serta pengelolaan data karyawan dapat dilakukan secara lebih efisien, terpusat, dan mendukung produktivitas kerja dalam berbagai II.
TINJAUAN PUSTAKA
Design Thinking adalah sebuah metode yang memiliki focus pada objek dalam menggunakan alat desain guna mengintegrasikan kebutuhan demi keberhasilan sebuah proyek .
Dengan metode ini mampu memecahkan masalah yang ada dan memudahkan pengguna dalam menggunakan prototype yang sudah dibuat serta menghasilan pengalaman yang baik .
Usability Testing Usability Testing merupakan sebuah cara untuk menguji sebuah aplikasi melalui pengalaman pengguna (UX) yang melibatkan pengguna untuk menguji dan berinteraksi dengan aplikasi atau system untuk mengukur kegunaan dan kemudahannya .
System Usability Scale (SUS) SUS merupakan suatu metode yang digunakan untuk pengujian system yang bisa menjadi factor pertimbangan untuk menilai apakah sebuah system layak dan bisa digunakan dengan mudah.
Pada metode ini menggunakan kuesioner sebagai sarana untuk mengumpulkan data dengan memberikan 10 pertanyaan kepada responden .
METODE PENELITIAN
Tahapan Penelitian Dalam bagian ini menjelaskan mengenai detail dari metodologi penelitian yang terdiri atas beebrapa tahapan yaitu pengumpulan data, tahap desain yang menerapkan metode Design Thinking dan testing.
Antarmuka Pengguna (UI) Desain antarmuka pengguna (UI) merupakan elemen visual dari suatu produk digital seperti website dan aplikasi mobile.
Desain UI merupakan hal penting bagi sebuah system dikarenakan antarmuka adalah sarana utama yang dipakai pengguna dalam berinteraksi dengan produk digital secara langsung.
Oleh karena itu UI harus dirancang dengan baik untuk memastikan kemudahan pengguna dalam menavigasi produk digital.
User Experience (UX) User Experience (UX) adalah bagaimana seseorang merasakan pengalaman dari penggunaan suatu produk tertentu .
User Experience merupakan salah satu elemen penting dalam pembuatan sebuah aplikasi yang berfokus pada preferensi, emosi, dan tanggapan fisik pengguna setelah menggunakan suatu produk .
Absensi Mobile Absensi merupakan sebuah proses pencatatan kehadiran atau tidaknya seseorang dalam suatu tempat atau kegiatan .
Dengan adanya Smartphone sebagai perangkat teknologi, maka dapat mempermudah dalam melakukan absensi berbasis mobile yang praktis untuk digunakan .
Design Thinking Gambar 1 Flowchart Penelitian Dalam proses pengumpulan data, penulis menerapkan beberapa metode.
Pertama, penulis melakukan observasi, yaitu pengamatan langsung terhadap aktivitas di PT QLCOM Solusi Bisnis yang berlokasi di Kecamatan Rungkut.
Surabaya.
Untuk mendapatkan data secara langsung dalam perusahaan.
Kedua wawancara secara langsung kepada pengguna mengenai permasalahan yang sedangg dialami untuk mendapatkan informasi yang Ketiga Emphaty Map yang memetakan permasalahan dalam memahami pengguna dengan cara memvisualisasikan apa yang mereka pikirkan dan lakukan .
Keempat studi literatur yang bertujuan mengumpulkan berbagai informasi dan mempelajari jurnal sebagai referensi pemecahan masalah.
Tahapan Desain Pada penlitian ini menerapkan metode design thinking yang mengutamakan kebutuhan dan berkolaborasi secara langsung dengan pengguna untuk mengatasi suatu Tujuan dalam metode ini adalah menciptakan sebuah desain system yang efektif, inovatif, dan Dalam Design Thinking terdapat beberapa tahapan mencakup empathize, define, ideate, prototype dan testing.
Pada setiap proses berperan penting untuk tahap selanjutnya sehingga dilakukan dengan urutan yang terstruktur yang akan ditunjukkan pada gambar dibawah.
apakah aplikasi mudah untuk digunakan serta dimengerti oleh user.
Pada pengujian ini menggunakan kuesioner dengan 10 pertanyaan dan memiliki system penilaian tersendiri.
TABEL 1
DAFTAR PERTANYAAN SUS
Gambar 2 Tahapan Metode Design Thinkinng Tahapan Empathize merupakan tahapan awal pada design thinking yang digunakan untuk mengidentifikasi permasalahan yang dihadapi .
Pada tahap ini penulis melakukan pemahaman mengenai permasalahan dan mencari informasi kepada pengguna terkait system dalam proses absensi, pengajuan cuti, lembur dan penglolaan data pribadi oleh karyawan.
Hasil dari tahap ini yaitu pain point pengguna terhadap Tahapan Define merupakan proses untuk menyaring inti dari permasalahan yang diperoleh dari proses sebelumnya.
Pada tahapan define ini memiliki tujuan yaitu melihat apa saja keperluan utama dari user dan menyusun masalah yang terfokus sehingga dapat memberikan solusi yang Tahapan Ideate dilakukan dengan cara brainstorming ide kreatif yang bertujuan untuk menghasilkan solusi dengan mempertimbangkan aspek kenyamanan, kemudahan navigasi, dan transparansi system .
Pada tahap ini penulis menyusun mind mapping, crazy 8Aos dan sketsa Tahapan prototype dikembangkan menggunakan Figma yang menggambarkan tampilan dan alur interaksi pengguna pada aplikasi.
Tahapan testing dilaksanakan dengan menguji hasil prototype kepada karyawan menggunakan usability testing untuk mengukur sejauh mana aplikasi dapat dipahami oleh pengguna mencakup alur aplikasi, navigasi, serta kenyamanan antarmuka pengguna selain itu juga memakai pengujian SUS untuk mengevaluasi Pertanyaan Apakah aplikasi terasa mudah untuk Menurut saya semua orang mudah dalam mengoperasikan aplikasi ini Apakah alur absen masuk/keluar terlihat jelas atau sederhana? Apakah tombol/menu yang anda cari mudah ditemukan? Apakah anda mudah memahami navigasi pada aplikasi? Apakah tampilan aplikasi nyaman Apakah aplikasi dapat menampilkan halaman dengan cepat saat tombol Apakah anda bisa menemukan fitur seperti riwayat absen, pengajuan cuti dan lembur dengan mudah? Apakah anda dapat mengingat tombol menu dan fitur pada aplikasi? Apakah anda mudah untuk mengingat icon yang mewakili setiap fitur? Skor Dengan pertanyaan diatas responden akan menjawab dengan skala likert skala 1-5 dengan jawaban setuju atau tidak setuju .
TABEL 2
SKALA PENILAIAN SUS
Pertanyaan Sangat Tidak Setuju (STS) Tidak Setuju (TS) Ragu (RG) Setuju (S) Sangat Setuju (SS) Skor Rumus untuk menghitung skor yang diperoleh dari SUS ada seperti dibawah ini:
Keterangan:
: Skor rata-rata Oc : Jumlah skor SUS N : Jumlah responden IV.
HASIL DAN PEMBAHASAN
Pada bab ini akan membahas hasil dari perancangan antarmuka pengguna aplikasi absensi menggunakan pendekatan Design Thinking.
Dengan metode ini dihasilkan sebuah aplikasi yang telah dirancang dengan baik sehingga dapat memudahkan karyawan PT QLCom Solusi Bisnis dalam melakukan proses absensi, pengajuan lembur dan cuti, serta pengelolaan data karyawan secara Dengan mengadopsi pendekatan Design Thinking maka penelitian ini mengasilkan prototype desain melalui lima tahap.
Empathize Pada tahap empathize peneliti melakukan pengumpulan data melalui wawancara secara langsung dengan karyawan yang selanjutnya disusun menggunakan permasalahan dengan baik seperti gambar dibawah.
Gambar 3 Problem Statement Setelah mengidentifikasi permasalahan yang ada, selanjutnya memetakan beberapa informasi menggunakan empathy map seperti gambar dibawah ini.
yang dinilai kurang fleksibel kehadiran fisik Karyawan harus absensi di kantor terlebih dahulu jika akan melakukan tugas dinas ataupun meeting client.
Pengajuan cuti aplikasi berbasis website yang terpisah dengan Pengajuan lembur masih aplikasi berbasis website dan resiko lupa jam lembur Pengelolaan data karyawan masih manual oleh petugas HR pada perusahaan Terkadang karyawan lupa masuk/pulang berbasis mobile yang dapat diinstal di smartphone masing-masing dengan verifikasi lokasi dan waktu sehingga mudah untuk digunakan secara fleksibel.
Absensi mobile yang bisa dilakukan didalam ataupun diluar area kantor.
sistem pengajuan cuti bisa melalui aplikasi sehingga data tersimpan dengan aman serta proses pengajuan lebih cepat dan mudah dalam satu System pengajuan dan pencatatan jam lembur bisa melalui aplikasi sehingga dapat dinputkan kapan saja tanpa membuka laptop/komputer terdapat fitur untuk menginputkan data dimana karyawan bisa mengisi/memperbarui data pribadinya langsung dari Sistem notifikasi dan pengingat absen di jam masuk dan pulang kerja untuk meminimalisir lupa Dibawah merupakan scenario kebutuhan pengguna berdasarkan masalah dan solusi yang telah diperoleh penulis yang terangkum pada table 2.
Gambar 4 Empathy Map Berdasarkan empathy map, ditemukan beberapa fitur dengan tingkat kepentingan yang berbeda, mulai dari yang paling mendesak seperti halaman dashboard, absensi, dan pengajuan cuti, hingga fitur-fitur dengan prioritas lebih Define Tahapan Define merupakan proses kedua setelah empathize yang memiliki tujuan untuk menganalisis permasalahan secara spesifik berdasarkan tahap Berdasarkan analisis diperoleh How Might We (HMW) yang menjadi dasar dalam pengembangan ide solusi yang terdapat pada table 1.
TABEL 4
STUDI KEBUTUHAN PENGGUNA
Hak Akses
HRD
Karyawan Karyawan WFH
TABEL 3
PAIN POINTS DAN HOW MIGHT WE
Pain Points Proses absensi How Might We/Gain Points Membuat aplikasi absensi Skenario Login Mengelola data karyawan Mengelola absensi Menerima pengajuan cuti Menerima pengjuan lembur Menccetak laporan Melakukan login Melakukan pengajuan cuti Melakukan pengajuan Melihat riwayat absensi, cuti dan lembur Melihat profil Melakukan absensi dari lokasi manapun Karyawan melakukan dinas Melakukan absensi yang dapat diakses di perangkat C Ideate Proses ini bertujuan untuk mengembangkan ide yang didapat dari permasalahan tahap sebelumnya.
Dari proses ini memiliki beberapa hasil yaitu crazy 8Aos dan sketsa awal/Low Fidelity Wireframe.
Crazy 8Aos merupakan sketsa awal dalam desain yang bertujuan untuk mengeksplorasi alternatif tampilan antarmuka dalam waktu singkat untuk halaman utama seperti dashboard, halaman absensi, input cuti dan lembur, serta profil.
Halaman Home Tampilan utama yang ditunjukkan setelah pengguna berhasil masuk kedalam aplikasi.
Halaman ini dirancang agar informatif dan mudah dipahami, dengan menampilkan ringkasan data dan akses cepat ke berbagai fitur penting yang dibutuhkan karyawan sehari-hari.
Elemen yang terdapat di halaman home antara lain: Informasi Kehadiran dan Cuti, menu navigasi ringkas, riwayat absensi, lembur, cuti, pemesanan makan, informasi ulang tahun karyawan, dan pengumuman Desain halaman Home ini dibuat agar fungsional, informatif, dan ramah Dengan menyatukan informasi penting dan menu utama dalam satu halaman, aplikasi ini mempermudah karyawan untuk mendapatkan informasi yang dibutuhkan secara cepat tanpa perlu navigasi berulang.
Gambar 5 Crazy 8's Prototype Setelah melewati beberapa tahapan diatas maka selanjutnya dalam proses prototype ini dimulai dengan pembuatan wireframe yang akan lebih dikembangkan sampai membentuk antarmuka high fidelity yang kemudian akan dlakukan uji coba di tahap selanjutnya.
C Halaman Login Merupakan antarmuka awal aplikasi tempat pengguna menginputkan username serta password yang diperoleh dari perusahaan untuk bisa masuk kedalam sistem.
Gambar 6 Halaman Login Gambar 7 Halaman Dashboard Halaman Absensi Halaman Absensi merupakan fitur utama dalam aplikasi yang digunakan oleh karyawan untuk melakukan pencatatan kehadiran secara mandiri melalui perangkat Halaman ini dirancang dengan antarmuka yang sederhana, jelas, dan informatif agar mudah digunakan di berbagai situasi, baik saat berada di kantor maupun bekerja di luar.
Fitur utama pada halaman absensi antara lain: maps lokasi yang menampilkan lokasi pengguna secara realtime menggunakan integrasi GPS.
Informasi tanggal dan jam saat ini ditampilkan secara otomatis dan yang terakhir status kehadiran onsite atau outside.
Dengan desain halaman absensi yang integratif dan kontekstual, aplikasi ini mampu menggantikan sistem fingerprint dengan cara yang lebih fleksibel dan efisien, serta mendukung pola kerja hybrid seperti Work From Home (WFH) atau dinas luar kantor.
Halaman Pengajuan Lembur merupakan fitur karyawan dalam mengajukan permohonan lembur secara mandiri melalui aplikasi.
Fitur ini bertujuan menggantikan proses manual yang sebelumnya dilakukan melalui sistem terpisah berbasis web, serta meminimalkan risiko lupa mencatat jam lembur.
Formulir pengajuan lembur berisi:PIC, tipe lembur, alasan, tanggal, jam mulai dan selesai, dan keterangan tambahan.
Fitur Pengajuan Lembur dalam aplikasi ini dirancang agar lebih efisien, transparan, dan mudah diakses kapan pun dibutuhkan oleh karyawan.
Dengan formulir yang terstruktur, proses pengajuan dapat dilakukan dengan cepat, serta memudahkan pihak manajemen dalam proses persetujuan dan dokumentasi lembur.
Gambar 8 Halaman Absensi Halaman Profil Halaman Profil merupakan bagian dari aplikasi yang menampilkan dan mengelola data pribadi karyawan secara mandiri.
Halaman ini dirancang untuk memberikan akses mudah kepada karyawan dalam melihat serta memperbarui informasi pribadinya tanpa perlu melalui HR secara langsung.
Fitur utama pada halaman profil antara lain:
biodata pribadi, riwayat pendidikan, data keluarga, dan pengalaman kerja.
Dengan adanya halaman profil sebagai sistem pengelolaan data karyawan .
elf-service HRIS) administratif dan menjaga data tetap terbarui secara efisien.
Gambar 10 Halaman Pengajuan Lembur Halaman Pengajuan Cuti Halaman Pengajuan Cuti merupakan fitur karyawan mengajukan cuti secara mandiri dan praktis melalui perangkat mobile.
Fitur ini hadir untuk menggantikan sistem pengajuan cuti berbasis web yang terpisah dari sistem absensi, sehingga seluruh proses administratif dapat terintegrasi dalam satu Pada formulir pengisian terdapat inputan tipe cuti, alasan, tanggal mulai dan berakhir, bukti/surat dokter .
, dan Dengan Pengajuan Cuti ini, proses permohonan menjadi lebih efisien, transparan, dan terdokumentasi dengan baik.
Sistem juga mendukung monitoring cuti yang sudah diambil serta status persetujuan, sehingga memudahkan koordinasi antara karyawan, atasan, dan HRD.
Gambar 9 Halaman Profil Halaman pengajuan lembur pada kuesioner untuk tolak ukur dari perancangan desain yang telah dilaksanakan.
Hasil dari pengujian kepada responden didapatkan hasil dari data SUS yang dapat dilihat pada tabel dibawah.
TABEL 5
DATA KUESIONER SUS
Responden
R1 R2 R3 R4 R5 R6 R7 R8
P10
Kemudian semua data responden yang telah didapatkan akan dikonversi dalam rumus perhitungan pada tabel dibawah.
Pertanyaan Gambar 11 Halaman Riwayat Cuti Riwayat Absensi Halaman Riwayat Absensi berfungsi untuk menampilkan rekapan kehadiran karyawan dalam kurun waktu tertentu.
Halaman ini memudahkan karyawan untuk memantau histori absensi secara mandiri, serta memastikan data kehadiran tercatat dengan akurat dan transparan.
Di halaman ini berisi pemilihan bulan dan tahun, informasi tanggal dan status kehadiran, dan detail riwayat Halaman Riwayat Absensi ini tidak hanya berfungsi sebagai arsip kehadiran, tetapi juga menjadi alat bantu untuk validasi data saat terjadi ketidaksesuaian atau pertanyaan terkait kehadiran.
Dengan desain yang ringkas dan intuitif, fitur ini mendukung transparansi dan efisiensi dalam manajemen kehadiran karyawan.
Gambar 12 Halaman Riwayat Absensi Testing Ini merupakan tahap terakhir dari metode Design Thinking yaitu testing .
Pada penelitian ini dilakukan pengujian dengan System Usability Scale
(SUS) yang memiliki 10 pertanyaan yang terdapat TABEL 6
HASIL RUMUS PERHITUNGAN SUS
Responden Total Skor Skor SUS Rata-Rata Responden Hasil dari data yang diperoleh menunjukkan skor 82,1 maka dapat disimpulkan bahwa desain yang telah dikerjakan mendapat rating A yaitu Excellent yang berarti desain antarmuka pengguna telah memenuhi harapan pengguna dalam hal kemudahan, efisiensi, dan kenyamanan penggunaan.
Dengan demikian, hasil prototipe aplikasi dinilai sangat baik dan juga layak digunakan serta dikembangkan lebih lanjut.
KESIMPULAN
Kesimpulan Penelitian ini telah menghasilkan rancangan prototipe aplikasi absensi kerja berbasis mobile menggunakan pendekatan Design Thinking yang berfokus pada kebutuhan pengguna.
Melalui lima proses Design Thinking yaitu Empathize.
Define.
Ideate.
Prototype, dan Testing dihasilkan desain antarmuka aplikasi yang mencakup fitur-fitur utama seperti absensi berbasis lokasi, pengajuan cuti dan lembur terintegrasi, pengelolaan data pribadi, hingga notifikasi otomatis.
Hasil pengujian usability menggunakan metode System Usability Scale (SUS) menyatakan skor yang diperoleh sebesar 82,1, yang berarti nilai aplikasi dalam kategori Excellent.
Hal ini menandakan desain yang dikembangkan dapat meningkatkan kenyamanan, efisiensi, serta mendukung mobilitas karyawan dalam proses administrasi kehadiran.
Saran Untuk pengembangan selanjutnya, disarankan penelitian menggunakan metode lain yang bisa perancangan aplikasi serupa.
Untuk pengembangan selanjutnya, diharapkan menambahkan fitur reminder untuk absensi masuk dan pulang.
REFERENSI