## UI/UX Design Of D'Paragon Employee Attendance System Using Thinking Design Method
Arial 11
Ade Miraldha Heradi 1) ; Iwan Ady Prabowo 2) ; Yovita Kinanti Kumarhadi 3) 1, 2, 3) Informatika, STMIK Sinar Nusantara Surakarta
1) ademiraldah@gmail.com; 2) iwanadyp@sinus.ac.id; 3) yovitakinan@sinus.ac.id ……. ……. 11

## ABSTRACT
The purpose of this thesis is to help D'Paragon company to make changes to the absence system that still uses finger print to the absence system model using a mobile application. The company has several employees who may not be able to be absent again at the central location because there are several tasks that must be carried out in several locations other than the central location. Therefore an online attendance system was created using a mobile-based attendance system. The author will design the UI/UX display of the attendance application to make it easier for developers to design applications, which can later be used for employee attendance. The research method used is the Design Thinking method. This method is known as a comprehensive thinking process that concentrates on creating solutions that begin with a process of empathy for a particular human-centered need. There are 5 stages in this method, namely Empathize, Define, Ideate, Prototype, and Testing.
Keywords : Attendence System, UI/UX Design, Design Thinking
I. PENDAHULUAN Teknologi yang berkembang sangat pesat, saat ini sudah masuk ke berbagai bidang.
Perkembangan tersebut membawa dampak yang besar di dalam berbagai aspek kehidupan contohnya dalam bidang perkantoran, salah satunya unutk kepentingan absensi yang sangat penting dalam mengetahui kehadiran karyawan dalam suatu perusahaan. Saat ini, ROYAL D’PARAGON LAND bergerak di bidang manajemen operator pengembangan kost eksklusif dengan brand D’PARAGON dan D’JURAGAN KAMAR, serta bergerak dibidang building kuliner dengan brand SATE KLATHAK PAK JEDE yang tersebar di 8 kota besar di Indonesia. Banyaknya lokasi cabang dan karyawan yang dimiliki D’PARAGON membutuhkan sistem absensi yang dapat dilakukan di berbagai lokasi, saat ini D’PARAGON belum memiliki sistem absensi, sehingga absensi yang digunakan di ROYAL D’PARAGON LAND masih secara manual melalui postingan instagram, rekap excel dan grup WhatsApp, sehingga dalam melakukan rekap absensi mengalami kesulitan karena harus mengumpulkan beberapa data dari beberapa sumber ( instagram, rekap excel dan grup WhatsApp ). Sehingga dengan adanya dengan adanya perancangan UI/UX untuk aplikasi absensi karyawan ROYAL D’PARAGON LAND menggunakan metode Design Thinking diharapkan nantinya karyawan dapat melakukan absen dengan handphone mereka
sendiri di berbagai lokasi dengan tampilan yang menarik, modern, dan dapat mudah digunakan dari segi Design User Interface

## II. TINJAUAN PUSTAKA
2.1 Absensi Absensi merupakan data-data yang mencatat jam kehadiran karyawan di suatu perusahaan yang disusun secara rapi agar mudah dicari dan digunakan sewaktu – waktu. Secara umum jenis-jenis absensi menurut cara penggunaannya dapat dikelompokkan menjadi dua[1], yaitu:
1. Absensi Manual, yang merupakan cara penulisan kehadiran dengan cara menggunakan pena berupa tanda tangan. 2. Absensi non manual, yang merupakan cara penulisan kehadiran dengan menggunakan alat yang terkomputerisasi, bisa menggunakan sistem Fingerprint, Almano, dan Mobile (Face Capture dan GPS).

## 2.2 User Interface (UI)
Antarmuka pengguna atau disebut juga User Interface atau yang bahasa Indonesianya antarmuka pengguna adalah aspek pengguna dari sistem pencarian informasi, sehingga penting untuk melakukan proses pencarian informasi user interface, selain itu dapat juga digunakan untuk membantu kebutuhan informasi. Antarmuka pengguna atau user interface (UI) merupakan istilah yang digunakan untuk menggambarkan bagaimana
pengguna berinteraksi dengan website atau aplikasi.[2]
2.3 User Experience (UX) User Experience adalah pengalaman pengguna dalam proses interaksi dengan aplikasi atau perangkat lunak untuk memberikan kemudahan bagi pengguna. Pengalaman tersebut dapat dilihat dari mudahnya dalam menggunakan produk digital tersebut. Serta, mampu untuk memaksimalkan segala aspek mulai dari fitur, desain, dan konten yang dapat membantu pengguna untuk mencapai tujuan saat berinteraksi dengan aplikasi.[3]
2.4 Design Thinking
Design Thinking merupakan sebuah pendekatan dalam membuat suatu pengalaman yang menyangkut dampak emosional, estetika, serta interaksi yang berorientasi terhadap nilai sosial[4]
Lima tahapan dalam Design Thinking[5], yaitu:
 Emphatize Untuk memahami pengguna dalam konteks tujuan produk yang digunakan. Pada tahapan ini, untuk memahami masalah yang dirasakan oleh user dengan melakukan observasi dan wawancara terlebih dahulu.
 Define mengolah menjadi ide-ide agar menyelesaikan permasalahan. Ide yang didapatkan tidak hanya sebatas kebutuhan yang diperlukan tetapi juga kebutuhan yamg belum terpenuhi untuk keperluan absensi karyawan  Ideate Mengembangkan dan mendefinisikan masalah dan ide menjadi sebuah solusi pada tahap ini diperlukan sebuah metode dalam pemilihan ide yang telah ada yaitu dengan menggunakan brainstorming.
 Prototype Membuat hasil fisik dari solusi dan ide yang telah didapatkan, pada tahap ini membuat userflow dan wireframe kerangka produk.
 Test Melakukan wawancara dan melakukan percobaan kepada pengguna untuk mengetahui tingkat kepuasan pengguna.

## III. METODE PENELITIAN
3.1 Sumber Data Yang dimaksud dengan sumber data dalam penelitian adalah subyek dari mana data dapat diperoleh. Dalam penelitian ini penulis menggunakan dua sumber data yaitu :
a. Data Primer Data primer data yang diperoleh secara langsung dari instansi yang menjadi objek penelitian. Data primer diperoleh berdasarkan sumber yang berkaitan secara langsung di Royal D’Paragon Land.
b. Data Sekunder Data sekunder data yang diperoleh dari buku dan jurnal yang mendukung penelitian. Data yang diperoleh dari media pustaka tentang teori-teori perancangan UI/UX dan metode yang digunakan yaitu metode Design Thinking.
3.2 Teknik Pengumpulan Data Metode Pengumpulan Data dalam penelitian ini dilakukan guna memperoleh data-data untuk dianalisa dan diolah, sehingga memperoleh data yang tepat dan akurat guna kesempurnaan sistem yang akan dibuat. Dalam proses pengumpulan data ada tiga cara yang dilakukan dalam penelitian ini , yaitu : a. Observasi Metode observasi yaitu dengan mengamati secara langsung proses absensi melalui website karyawan Royal D’Paragon Land.
b. Wawancara Metode wawancara yaitu dengan menanyakan langsung terhadap karyawan Royal D’Paragon Land. c. Studi Pustaka Studi pustaka adalah tahapan dalam mencari sumber data yang akan mendukung penelitian dan untuk mengetahui sampai mana ilmu yang berhubungan dengan penelitian telah berkembang. Pustaka terdapat kesimpulan yang pernah dibuat pada jurnal yang berkaitan dengan penelitian, situs internet dalam pengambilan data, dan lain-lain.

## 3.3 Alur Penelitian

## Gambar 1 Alur Penelitian
Adapun penjelasan pada alur penelitian diatas yaitu: 1. Identifikasi masalah merupakan langkah awal pada penelitian ini untuk mencari tahu permasalahan apa yang ada dalam absensi karyawan Royal D’Paragon Land sehingga dapat menjadi patokan dalam langkah selanjutnya dalam penelitian ini.
2. Perumusan masalah pada penelitian ini berguna untuk membuat jalannya penelitian menjadi lebih terarah dan bisa menjadi acuan tujuan penelitian ini.
3. Studi literatur pada penelitian ini berguna untuk dasar landasan teori dan metode yang akan digunakan pada proses pengolahan data, yang mana berfungsi sebagai acuan pada penelitian ini agar lebih memperkuat hipotesis serta analisis yang dilakukan. Studi literatur yang digunakan berasal dari penelitian terdahulu, jurnal, artikel – artikel yang berbentuk informasi dan mendukung penelitian ini.
4. Metode yang digunakan dalam penelitian ini adalah Design Thinking. Metode ini membutuhkan data yang berasal dari pihak Royal D’Paaragon Land.
- Tahap Emphatize bertujuan untuk memahami pengguna dalam konteks tujuan produk yang digunakan.
- Tahap Define yaitu dimana setelah mendapatkan data hasil wawancara maka kemudian diolah menjadi ide-ide agar menyelesaikan permasalahan. - Tahap Ideate bertujuan mengembangkan dan mendefinisikan masalah dan ide menjadi sebuah solusi pada tahap ini diperlukan sebuah metode dalam pemilihan ide yang telah ada yaitu dengan menggunakan brainstorming.
- Tahap Prototype merupakan tahapan untuk membuat hasil fisik dari solusi dan ide yang telah didapatkan.
- Tahap Test peneliti melakukan wawancara dan melakukan percobaan kepada pengguna untuk mengetahui tingkat kepuasan pengguna.
5. Analisis dan pembahasan diperoleh dari hasil pembahasan dan pengolahan data yang telah dilakukan. 6. Kesimpulan dan saran dimana peneliti menjelaskan kesimpulan-kesimpulan yang didapatkan berdasarkan rumusan masalah sebelumnya. Setelah kesimpulan didapatkan maka peneliti memberikan saran.

## IV. HASIL DAN PEMBAHASAN
4.1 Empathize Tahap empathize dilakukan untuk mengetahui permasalahan dan kebutuhan dalam perancangan aplikasi Absensi Tujuan dari perancangan apliksi absensi adalah menghasilkam sebauh aplikasi berbasis mobile yang nyman digunakan oleh pengguna (user friendly). Beberapa hal yang dilakukan pada fase empatize yaitu sebagai berikut: 1. Observasi Pada tahap ini penulis mengamati proses absensi yang dilakukan oleh para karyawan lokasi yang ada di Royal D’Paragon Land. Terdapat beberapa kesulitan yang dialami oleh beberapa karyawan yang kesulitan dalam merekap absensi manual melalui foto grup WhatsApp.
2. Wawancara Setelah mengamati secara langsung kepada karyawan yang ada di Royal D’Paragon Land apa kesulitan yang dirasakan
saat melakukan absensi secara manual melalui foto grup WhatsApp.
4.2 Define
Tabel 1 menampilkan tahap define, hasil yang didapat dalam proses observasi dan wawancara kemudain dideprosefinisikan secara lebih jelas agar dapat fokus pada inti dari permasalahan. Tabel 1. Pendefinisian Masalah Problem Insight Responden ingin melakukan absensi yang mudah Absensi yang dilakukan sebelumnya memakan banyak waktu Responden ingin dapat mudah melakukan dan melihat rekap absensi Sistem absensi lama membuat kesulitan saat akan melakukan ataupun melihat rekap absensi Responden ingin mudah melakukan pengajuan izin Sistem absensi yang lama dalam pengajuan izin prosesnya terlalu berbelit-belit sehingga membutuhkan banyak waktu Responden ingin mudah melakukan pengajuan cuti Sistem absensi yang lama dalam pengajuan cuti prosesnya terlalu berbelit-belit sehingga membutuhkan banyak waktu Responden ingin mudah melakukan pengajuan lembur Sistem absensi yang lama dalam pengajuan lembur prosesnya terlalu berbelit-belit sehingga membutuhkan banyak waktu Responden ingin mudah melakukan pengajuan libur Sistem absensi yang lama dalam pengajuan libur prosesnya terlalu berbelit-belit sehingga membutuhkan banyak waktu 4.3 Ideate Pada tahap ideate dilakukan proses melalui brainstorming yang bertujuan mendapatkan ide-ide penyelesaian masalah yang ada. Yang mana brainstorming merupakan salah satu cara yang dilakukan untuk mengumpulkan gagasan atau ide untuk mencari solusi dari masalah tertentu

## Gambar 2. Hasil Brainstorming

## 4.4 Prototype
1. If- Then Digunakan untuk menjelaskan kondisi dimana suatu ekspesi akan dikerjakan apabila kondisinya terpenuhi, jika tidak terpenuhi maka akan dilewati sehingga melakukan tindakan berikutnya.

## Gambar 3. Bagan If-Then
2. User Flow User flow yang dirancang oleh penulis digunakan untuk menunjukkan langkah- langkah yang dilakukan pengguna untuk menyelesaikan tugas atau mencapai tujuannya.

##  User flow Login
Gambar 4. User flow login
 User flow Absensi
Gambar 5. User flow Absensi
 User flow Izin
Gambar 6. User flow Izin
 User flow Cuti

## Gambar 7. User flow Cuti
 User flow Ajukan Libur
Gambar 8. User flow Ajukan Libur
 User flow Ajukan Lembur
Gambar 9. User Ajukan Lembur
 User flow Menu Rekap
Gambar 10. User flow menu rekap
 User flow Melakukan Logout

## Gambar 11. User flow logout
3. Wireframe Perancangan wireframe high-fidelity yang dilakukan berdasarkan hasil yang didapat dalam proses empathize hingga proses define. Wireframe yang dirancang nantinya akan digunakan sebagai dasar pembuatan prototype yang akan diujikan kepada responden nantinya pada tahap pengujian. Tabel 1. Wireframe Wireframe Low- fidelity High- fidelity Wireframe login Wireframe lupa password Wireframe atur ulang password
Wireframe Low- fidelity High- fidelity Wireframe kode verifikasi Wireframe dashboard Wireframe aktivitas Wireframe notifikasi Wireframe titik gps absensi
Wireframe ambil foto
Wireframe foto ulang Wireframe Low- fidelity High- fidelity Wireframe menu absensi Wireframe data izin Wireframe detail data izin Wireframe from pengajuanizin Wireframe approval Wireframe data lembur Wireframe titik gps lembur
Wireframe Low- fidelity High- fidelity Wireframe ambil gambar lembur Wireframe detail data lembur Wireframe detail gambar Wireframe data cuti Wireframe pengajuan cuti Wireframe
detail data cuti Wireframe jam kerja Wireframe Low- fidelity High- fidelity Wireframe data pengajuan libur Wireframe detail data pengajuan libur Wireframe form pengajuan libur Wireframe menu rekap
Wireframe data
absensi
Wireframe profil
Wireframe edit profil

## 4.5 Test
1. Sketches Pada tahap ini penulis menguji terhadap 1 responden pengujian sketsa awal yang digunakan untuk mengidentifikasi kelemahan pada desain yang akan mempengaruhi pengalaman pengguna dengan low- fidelity .
Tabel 3. Pengujian Sketches
Halaman Sketsa Low- fidelity Hasil Halaman Login Sesuai Halaman Absensi Sesuai Halaman Izin Sesuai Halaman Lembur
Sesuai
Halaman Cuti Sesuai Halaman Ajukan Libur Sesuai Halaman Menu Rekap Sesuai Halaman Sketsa Low- fidelity Hasil Halaman Menu Profil Sesuai
2. Wireframe Pada tahap ini penulis menguji terhadap 1 responden, wireframes adalah representasi dari tata letak desain dan sebagian besar hanya berfokus pada tata letak konten, menguji antara wireframe low-fidelity dan wireframe high-fidelity . Tabel 4. Pengujian wireframe Halaman Low- fidelity High- fidelity Hasil Halaman Login Sesuai Halaman Absensi Sesuai Halaman Izin Sesuai Halaman Lembur Sesuai
Halaman Low- fidelity High- fidelity Hasil Halaman Cuti Sesuai Halaman Ajukan Libur Sesuai Halaman Menu Rekap
Sesuai Halaman Menu Profil Sesuai 3. Prototype Pada tahap ini peneliti melakukan wawancara dan melakukan percobaan kepada reponden untuk mengetahui tingkat kepuasan pengguna. Tahap ini digunakan unutk memvalidasi solusi desasin yang sudah dibuat. Pengujian Usability Testing melibatkan 5 responden untuk setiap skenario. Hasil pengujian, menampilkan hasil pengujian desain dengan skenario pengguna. Diperoleh hasil bahwa 5 responden berhasil melakukan pengujian.

## Gambar 12. Hasil Pengujian Prototype
V. PENUTUP Berdasarkan perancangan dan pengujan yang Berdasarkan perancangan dan pengujian yang dilakukan menggunakan metode Design Thinking dalam penelitian ini dapat disimpulkan yaitu: 1. Setelah dilakukan proses design dan pengujian terhadap responden, didapatkan hasil bahwa desain aplikasi yang baru telah memenuhi kebutuhan pengguna untuk keperluan absensi. 2. Berdasarkan pengujian maka dapat disimpulkan bahwa rekomendasi desain UI/UX aplikasi Absensi yang dibangun sudah baik dan sudah bisa dibangun di aplikasi utuh. Saran yang diberikan untuk menyampurnakan dan mengembangkan penelitian selanjutnya adalah : 1. Dapat memaksimalkan penggunaan aplikasi supaya fungsi aplikasi Absensi yang telah dibuat nantinya dapat bermanfaat bagi perusahaan.
2. Disiplin dalam memanfaatkan fitur-fitur yang terdapat dalam aplikasi jika sudah jadi aplikasi nantinya.

## DAFTAR PUSTAKA
[1] E. B. Setiawan and B. Kurniawan, “Perancangan Sistem Absensi Kehadiran Perkuliahan Dengan Menggunakan Radio Frequency Identification (RFId),” J. CorelT , vol. 1, no. 2, pp. 44–49, 2015, doi: 10.35889/progresif.v17i1.573. [2] Nuranti, “Berkenalan dengan User Interface : Pengertian, Komponen, - Nemolab,” Nemolab , 2021. https://nemolab.id/berkenalan-dengan- user-interface-pengertian-komponen-
hingga-prinsip/ (accessed Nov. 11, 2022).
[3] M. R. Adani, “User Experience (UX): Definisi, Tujuan,
Model, Dan
Penerapan,” Sekawan Media , 2020. https://www.sekawanmedia.co.id/blog/p engertian-user-experience/ (accessed Nov. 22, 2022). [4] A. H. Fauzi and I. Sukoco, “Konsep Design Thinking Pada Lembaga Bimbingan Belajar Smartnesia Educa,”
Organum J. Saintifik Manaj. dan Akunt. , vol. 2, no. 1, pp. 37–45, 2019, doi: 10.35138/organum.v2i1.50.
[5] H. Plattner, “An introduction to Design Thinking,” Iinstitute Des. Stanford , p. 6,
2010.