Perancangan User Interface Aplikasi Mobile Abdimas Dengan Metode Human Centered Design
Pungky Febi Arifianto 1 , Bayu Setiawan 2 , Fransisca Sherly Taju 3
1,2 Program Studi Desain Komunikasi Visual, Fakultas Arsitektur dan Desain, Universitas
Pembangunan Nasional “Veteran” Jawa Timur
3 Program Studi Desain Komunikasi Visual, Fakultas Seni Rupa dan Desain, Institut Seni Indonesia Yogyakarta
Email: sherly.taju@isi.ac.id

## ABSTRAK
Pandemi Covid-19 telah mengubah tatanan dunia, hal ini juga berbanding lurus dengan pemanfaatan teknologi dalam mempermudah akses dan memotong regulasi bertemunya orang (physical distancing). Dampak positif tersebut berbanding terbalik dengan aktivitas pengabdian masyarakat. Salah satu tri dharma perguruan tinggi ini memungkinkan untuk berinteraksi dalam kegiatannya. Dilain sisi, dosen sebagai penggerak pengabdian masyarakat susah mencari mitra yang sesuai dengan kompetensinya, sehingga pengabdian ini seringnya salah sasaran dan melenceng dari kegiatan yang sudah ditentukan. Perancangan user interface ini dibuat dengan harapan mampu menjadi penghubung antara mitra dan dosen sebagai pengabdi untuk bisa match dan memberikan kebermanfaatan yang sesuai. Penelitian ini menggunakan metode deep interview dan customer journey map dalam memetakan alur penggunanya. Selain itu perancangan ini juga akan menggunakan studi literatur mengenai permasalahan User Interface Design dan Pengabdian Masyarakat. Adapun keseluruhan proses ini menggunakan metode Human Centered Design yang kemudian dirangkum, diolah dan disintesiskan menjadi sebuah konsep user interface design sebagai sebuah metode penyelesaian masalah. Tampilan aplikasi akan menggunakan android system based. Konsep ini nantinya akan memperlihatkan bagaimana aplikasi mobile ini mampu menjadi pemecahan permasalahan yang terjadi di antara mitra dan pengabdi (dosen) sehingga dapat dijadikan keberlanjutan design interface yang berguna bagi masyarakat.
Kata-kata kunci : user interface design, pengabdian masyarakat, covid 19, human centered design

## ABSTRACT
The Covid-19 pandemic has brought about significant changes in the global landscape, which are closely intertwined with the utilization of technology to facilitate access and overcome regulatory barriers, particularly in relation to physical distancing measures. However, these positive impacts are inversely related to community engagement activities. One of the core duties of higher education institutions is to enable interactions within their community. On the other hand, faculty members, who play a pivotal role in community engagement, face challenges in finding suitable partners that align with their expertise, leading to misdirected efforts and deviations from predetermined goals. The development of a user interface design in this study aims to serve as a medium to connect partners and faculty members, fostering compatibility and delivering relevant benefits. Deep interviews and customer journey mapping methods are employed to map user workflows. Furthermore, the study incorporates a review of literature on User Interface Design and Community Engagement, utilizing a Human Centered Design approach to synthesize and refine concepts into an effective problem-solving methodology. The application interface will be implemented based on the Android system. Ultimately, the proposed concept aims to demonstrate how the mobile application can effectively address challenges between
partners and faculty members, thereby establishing a sustainable and valuable interface design solution for the community.
Keywords: user interface design, community service, covid 19, human centered desi

## Pendahuluan
Pandemi covid 19 telah membawa perubahan besar dalam tatanan dunia. Kemunculan virus ini berawal dari Wuhan dan berkembang cepat ke berbagai belahan dunia termasuk di Indonesia. Seiring dengan rekomendasi dari Organisasi Kesehatan Dunia (WHO), pemerintah Indonesia menetapkan status masa darurat nasional terkait covid 19 pada tanggal 14 maret 2020. Salah satu dalam keputusan tersebut adalah physical distancing yang merupakan upaya pengaturan jaga jarak bagi kegiatan di luar ruangan maupun di dalam ruangan. Peraturan ini mengikat diseluruh aspek kegiatan masyarakat (Undang-undang, 2020). Peraturan pemerintah nomor 21 tahun 2020 terkait penanganan covid 19 dengan melakukan pembatasan sosial berskala besar (PSBB) pada ayat 4 menjelaskan bahwa kegiatan sekolah diliburkan, namun tetap dilaksanakan karena menjadi hak mendasar bagi warga negara. Peraturan ini mendorong kegiatan belajar mengajar secara daring dilakukan, tak terkecuali perguruan tinggi (pemerintah RI, 2020). Sebagai upaya mitigasi percepatan penanganan covid 19 yang dilakukan oleh pemerintah, maka perguruan tinggi dituntut untuk mengembangkan proses pembelajaran full daring yang memanfaatkan berbagai platform digital yang menggunakan akses jaringan internet. Disini dibutuhkan kecakapan stakeholder didalamnya, terutama dosen sebagai komponen penting dalam suatu sistem di perguruan tinggi dalam penguasaan dan penerapan teknologi. Perubahan pola ini yang menjadikan kebiasaan baru yang menjadikan percepatan teknologi ini semakin massif.
Dosen sebagai roda penggerak di dalam sistem bukan saja memiliki peran besar sebagai pendidik yang bertanggung jawab dalam mewujudkan tujuan Pendidikan nasional, namun juga sebagai ilmuwan yang mentransformasikan, mengembangkan dan menyebarluaskan IPTEK melalui pendidikan, penelitian dan pengabdian masyarakat sesuai dengan Amanah undang-undang no 12 tahun 2012 pada ayat yang pertama. Dalam menjalankan Amanah tersebut, dosen memiliki kewajiban yang harus dipenuhi dan terukur dengan membuat laporan kinerja dosen dengan minimal 12 sks dan maksimal 16 sks. Tuntutan tersebut sangat sulit dipenuhi dalam situasi yang tidak menentu dan serba tidak pasti. Kegiatan pengabdian masyarakat yang didominasi kegiatan penyuluhan, sosialisasi dan pengarahan-pengarahan sulit untuk dilakukan secara langsung karena melibatkan masyarakat secara langsung. Keadaan ini yang membuat dosen kesulitan mentransformasi keilmuan kepada masyarakat dan memenuhi Amanah undang-undang dalam melaksanakan tridharma perguruan tinggi.
Sebagai upaya menghadapi permasalahan tersebut, penulis memanfaatkan keadaan yang sulit ini untuk mencari sebuah peluang yang dimanfaatkan dengan melihat kemampuan penulis dalam bidang pemanfaatan teknologi. Kemampuan (ability) merupakan kapasitas
seorang individu dalam melakukan sebuah tugas. Menurut Stephen P Robbin dalam penelitiannya, mengungkapkan bahwa kemampuan merupakan kecakapan dalam menguasai suatu keahlian yang dapat digunakan dalam mengerjakan berbagai tugas dalam mengerjakan suatu pekerjaan (Robbins, 2008). Saat ini teknologi memiliki peranan penting dalam meningkatkan kualitas Pendidikan, salah satunya dimanfaatkan penulis untuk menjalankan pengabdian masyarakat. Dilain sisi, keilmuan penulis pada bidang desain komunikasi visual dapat dijadikan landasan perancangan user interface yang dimanfaatkan untuk memahami pengalaman pengguna dalam pemanfaatan teknologi informasi. Dapat dikatakan bahwa elemen komunikasi visual dalam pemanfaatan teknologi informasi ini memiliki peranan penting dalam memahami kebutuhan penggunanya ketika diaplikasikan.
Dari pemaparan permasalahan diatas, penulis memanfaatkan kemampuannya untuk membuat aplikasi penghubung antara dosen sebagai pengabdi dan masyarakat sebagai mitra pengabdi. Aplikasi yang akan dirancang berbasis mobile dan menggunakan platform android. Aplikasi ini bernama “Abdimas” yang merupakan akronim dari Pengabdian Kepada Masyarakat. Pemanfaatan teknologi berbasis aplikasi ini dipilih dikarenakan berdasarkan Digital Data Indonesia tahun 2020, sebanyak 338,2 juta masyarakat Indonesia menggunakan smartphone untuk kegiatan penunjang aktifitas harian. Peneliti membatasi penulisan ini pada tampilan layar berupa user interface sesuai dengan keilmuan peneliti. User interface merupakan komponen utama yang tidak dapat dipisahkan dari sebuah aplikasi. User interface merupakan tampilan grafis yang berhubungan langsung dengan pengguna (Shneiderman & Plaisant., 2005) . Komponen user interface terdiri dari tulisan, gambar, petunjuk dan tombol yang memungkinkan pengguna dapat berinteraksi dengan perangkat lunak (Sharp et al., n.d.) . Hal inilah yang membuat user interface memiliki peran penting sebagai penghubung interaksi aplikasi dengan pengguna sehingga dapat dengan mudah digunakan.

## Metode Penelitian
Dalam penulisan ini, penulis menggunakan Human Centered Design sebagai sebuah metode pemecahan masalah. Human Centered Design (HDC) merupakan sebuah metode perancangan yang dibuat untuk membantu menyelesaikan permasalahan desain dengan menempatkan pengguna (user/manusia) sebagai pemangku kepentingan (IDEO.org, 2015) . Pendekatan ini sangat berfokus terhadap aktivitas-aktivitas user terkait dengan pemanfaatan teknologi dan sumber daya sebuah perusahaan(Begnum, 2015) Adapun aktivitas dan proses penggunaan HDC memiliki empat tahapan utama yang bisa dilihat pada gambar 1.
Gambar 1. Proses dalam Human Centered Design Sumber: SAITO & OGAWA, 1994
Adapun setiap proses tersebut memiliki tujuan yang dapat dijabarkan sebagai berikut :

## a. Understanding and specify of context use
Dalam tahapan proses yang pertama ini, memiliki tujuan dalam memahami konteks pengguna. Untuk memahami konteks pengguna diperlukan pengumpulan informasi dengan melakukan observasi secara langsung, wawancara, kuesioner dan analisis dokumen. Dengan melakukan tahapan awal ini, desainer dapat merancang solusi yang lebih relevan dan efektif. Informasi terkait kelompok pengguna yang dianalisis akan mengoptimalkan pengalaman pengguna dalam menggunakan produk rancangan desainer.
Adapun observasi secara langsung akan dilakukan ketika melakukan wawancara dengan calon pengguna. Wawancara melibatkan stakeholder terkait dengan pembuatan user interface sebagai calon pengguna. Adapun calon pengguna yang terlibat sebagai responden terdiri dari 6 dosen yang terdiri dari 4 dosen biasa, 1 kepala lppm, dan 1 wakil rektor bidang pengabdian masyarakat dan Kerjasama. Sedangkan 4 responden lainnya terdiri dari 2 pedagang makanan di salah satu sentra wisata kuliner, dan 2 orang yang bergerak di bidang jasa pelayanan. Adapun daftar pertanyaan yang diajukan sebagai kepada responden bisa dilihat pada tabel 1.

## Tabel 1 . Pertanyaan

## No. Pertanyaan
1. Apakah anda kesulitan mencari mitra pengabdian masyarakat?
2. Apa yang membuat Anda kesulitan?
3. Apakah pihak kampus memberikan/mencarikan mitra yang sesuai dengan kompetensi Anda?
4. Dari mana Anda mendapatkan mitra yang sesuai dengan kebutuhan kompetensi yang Anda miliki?
5. Pernahkah Anda merasakan mendapatkan mitra yang meminta bantuan diluar kompetensi Anda, dan tidak sesuai dengan harapan mereka?
6. Jika iya, Bagaimana Anda menjelaskan mengenai hal tersebut?
7. Apakah sulit menemukan mitra yang sesuai dengan kebutuhan dan menghasilkan solusi bersama?
8. Apakah jarak juga mempengaruhi hal tersebut?
9. Apakah perlu adanya aplikasi yang memudahkan Anda untuk mendapatkan mitra yang sesuai dengan kebutuhan dan kesepakatan?
10. Apakah desain aplikasi tersebut nantinya menjadi penting ketika akan Anda gunakan?

## Sumber: Pungky Febi Arifianto

## b. Specifying the user requirements
Pada proses kedua ini, bertujuan untuk mengidentifikasi kebutuhan pengguna baik dalam bentuk kebutuhan fungsional maupun non-fungsional, serta menentukan persyaratan pengguna sebagai landasan dalam pengembangan desain solusi yang responsif. Dengan melakukan analisis mendalam terhadap kebutuhan pengguna, seperti keinginan, preferensi, dan harapan mereka, serta memperhatikan aspek-aspek non-fungsional seperti keamanan, keandalan, dan usabilitas , tahap ini memastikan bahwa solusi yang dihasilkan dapat memenuhi kebutuhan pengguna dengan baik dan memberikan pengalaman yang optimal. Persyaratan pengguna yang diidentifikasi dalam tahap ini juga menjadi acuan bagi tim desain dalam mengembangkan konsep, fitur, dan fungsi produk atau layanan yang sesuai dengan kebutuhan pengguna yang diinginkan.
Tabel 2. Spesifikasi kebutuhan pengguna Kebutuhan Spesifikasi Menu Beranda Fungsi menu beranda berisi berbagai macam informasi yang berisi fitur-fitur utama yang ada dalam aplikasi Menu Pencarian Mitra dan Pengabdi Fungsi ini memiliki peran utama dalam melakukan menemukan para mitra dan pengabdi agar terhubung Menu Favorit Fungsi ini berguna untuk menyimpan mitra/pengabdi yang sesuai dengan kebutuhan keduanya Menu Pencarian Proyek Fungsi ini untuk menampilkan proyek yang sedang berjalan di antara mitra dan pengabdi dan implementasinya sebagai inspirasi. Menu Kampus Pilihan dan mitra pilihan Fungsi menu ini menampilkan afiliasi kampus para pengabdi dan profil mitra. Stori mitra dan pengabdi Fungsi ini menampilkan cerita para mitra dan pengabdi dalam rentang kegiatan dalam sebuah projek Menu Notifikasi Fungsi ini untuk melihat timeline kegiatan antara mitra dan pengabdi, sehingga perencanaan tidak terlewat Menu Profil Fungsi menu ini untuk menampilkan personal diri dan pengalaman abdimas yang telah dikerjakan. Sumber: Pungky Febi Arifianto

## c. Producing Design Solutions
Tahap producing design solutions merupakan fase penting dalam proses pengembangan desain, dengan tujuan utama untuk menciptakan solusi desain yang memenuhi pengalaman pengguna yang optimal. Dalam penelitian ini, rancangan solusi desain akan mengintegrasikan berbagai elemen, termasuk konteks penggunaan yang telah diidentifikasi, hasil evaluasi awal, serta prinsip desain dan usability. Dengan mempertimbangkan faktor-faktor tersebut, rancangan solusi yang dihasilkan akan diarahkan untuk memberikan pengalaman pengguna yang baik, memenuhi kebutuhan pengguna, dan mengoptimalkan usability produk atau layanan yang dirancang.

## d. Evaluating the design
Tahap evaluating the design dalam proses desain memiliki tujuan untuk memvalidasi kebutuhan pengguna yang telah diidentifikasi. Evaluasi dilakukan melalui berbagai
metode, seperti pemodelan tugas, simulasi, atau Focus Group Discussion (FGD). Dalam penelitian ini, dilakukan FGD antara stakeholder dan pengguna/pelanggan sebagai metode evaluasi. Melalui FGD, stakeholder dan pengguna/pelanggan dapat berdiskusi dan memberikan masukan yang berharga terkait desain solusi yang telah dikembangkan. Hal ini memungkinkan tim desain untuk memperoleh pemahaman yang lebih mendalam tentang kebutuhan dan harapan pengguna, serta mengidentifikasi aspek-aspek yang perlu diperbaiki atau disempurnakan dalam rancangan solusi desain.

## Isi/Hasil dan Pembahasan

## Understanding and specify of context use
Dari uraian metodologi yang telah dilakukan dengan melakukan wawancara kepada stakeholder didapatkan kondisi bahwa para stakeholder menginginkan pembuatan sistem informasi yang memudahkan untuk pencarian mitra dan pengabdi yang sesuai dengan kebutuhan masing-masing stakeholder . Hal ini dilakukan juga melihat mengenai demografi para pengguna, kebutuhan akan spesifikasi kompetensi untuk dapat memecahkan permasalahan mitra. Demografi ini berkaitan dengan jarak tempuh antara mitra dan pengabdi (dosen) atau sebaliknya. Hal ini dikarenakan efektivitas kegiatan dan memaksimalkan sumber daya yang ada. Dilain sisi kebutuhan para stakeholder juga dilihat dari tujuan dan keinginan pengguna yang dapat dilihat pada tabel 3.
Tabel 3. Hasil wawancara tujuan dan keinginan pengguna
Hasil Responden Hasil responden Tujuan Pengguna Dosen 1&2 Melakukan pencarian mitra yang kebutuhannya sesuai kompetensi dosen Dosen 3&4 Melakukan pencarian mitra terdekat dengan area kampus Kepala LPPM Adanya pemantauan abdimas supaya lebih terkontrol Warek bidang penelitian dan PKM Problem finding dan problem solving harus link & match, gimmick permasalahan, laporan terkait hasil abdimas Pedagang makanan Pencarian pengabdi yang mau membantu mengembangkan usaha dan dekat took Mitra jasa Melihat profil pengabdi dan kompetensi sesuai dengan harapan kami Keinginan Pengguna Dosen 1&2 a. Aplikasi mobile berbasis android yang mudah digunakan dengan user interface yang familiar dengan warna biru sebagai dasarnya b. memiliki fitur favorit, timeline dan tombol penghubung mitra
Dosen 3&4 a. user interface yang memiliki warna netral dan gampang digunakan b. fitur pencarian yang mudah dengan penambahan kegiatan mitra dan pengabdi Kepala LPPM Adanya fitur kontrak sebelum terhubung dengan mitra Warek bidang penelitian dan PKM Menu timeline dan hasil luaran Pedagang makanan Mudah dan menarik Warna yang familiar kayak facebook Mitra jasa mudah digunakan

## Sumber: Pungky Febi Arifianto

## Specifying the user requirements
Dari penjelasan tujuan dan keinginan pengguna yang telah dikumpulkan kemudian dapat dijelaskan secara secara spesifik keinginan pengguna sebagai berikut:
a. Pengguna dapat membuat akun yang dapat masuk sebagai mitra maupun pengabdi atau dosen
b. Pengguna dapat langsung masuk tanpa membuat akun, namun hanya bisa melihat fitur umum yang ada di beranda
c. Pengguna dapat melakukan pencarian mitra setelah menetapkan keinginan spesifikasi kompetensi yang diinginkan
d. Pengguna dapat melihat mitra ataupun pengabdi melalui profil dan kegiatan yang pernah dilakukan oleh keduanya
e. Pengguna dapat berinteraksi dengan mudah
f. Pengguna dapat menemukan kegiatan PKM dengan mudah
g. Pengguna dapat menetapkan kompetensi untuk memudahkan pencarian keduanya
h. Pengguna dapat menggunakan satu tombol pencarian super yang bisa menemukan mitra dalam satu kali klik
i. Memiliki fitur kontrak yang bisa di custom antar keduanya
j. Memiliki timeline kegiatan dan laporan luaran PKM
k. Warna yang digunakan didominasi dengan warna netral dan familiar (warna biru)
l. Desain aplikasi yang mudah digunakan berbasis mobile
Spesifikasi kebutuhan pengguna yang telah dijabarkan menghasilkan gambaran akan penggunaan aplikasi yang diinginkan oleh para pengguna. Sebelum dibuatkan solusi desain, maka dapat dibuatkan arsitektur informasi aplikasi untuk mengetahui alur pengguna.
Gambar 2. User flow Aplikasi Abdimas Sumber: Pungky Febi Arifianto

## Design Solutions

## a. Teknis Aplikasi Mobile
Aplikasi mobile ini akan didesain menggunakan platform android dengan viewport 360 x 800 dengan skema warna RGB, resolusi 72 dpi.

## b. Wireframe
Penggunakan wireframe ini digunakan sebagai pedoman dalam melakukan perancangan user interface aplikasi.
Gambar 3. Wireframe aplikasi Abdimas Sumber: Pungky Febi Arifianto
c. Warna
Warna dasar menggunakan kombinasi abu-abu dan biru. Kombinasi dark grey dan light grey merupakan warna netral yang memiliki sifat simple. Sedangkan warna biru melambangkan sifat profesionalisme dan familiar layaknya warna facebook dan linkedin .
Gambar 4. Skema warna aplikasi Abdimas
Sumber: Pungky Febi Arifianto
d. Font Font Inter dipilih berdasarkan pertimbangan keterbacaan yang baik, bahkan pada ukuran yang terkecil sekalipun. Pemilihan ini didasarkan pada keunggulan font tersebut dalam mempertahankan kejelasan huruf dan memastikan pengguna dapat dengan mudah membaca teks. Selain itu, pemilihan jenis font san-serif juga dilakukan untuk mencerminkan kesan modern dan minimalis dengan tampilan font yang tidak memiliki dekorasi berlebihan, memberikan kesan yang sederhana namun tetap elegan dan profesional.
Gambar 5. Font Inter Reguler & Semi Bold Sumber: google font
e. Logo
Desain logo aplikasi yang telah dibuat sebelumnya menjadi acuan dalam mengembangkan desain antarmuka (UI) pada tahap perancangan ini. Konsep logo tersebut memberikan pedoman visual yang konsisten dan menggambarkan identitas aplikasi. Dalam merancang UI, elemen-elemen desain seperti warna, pola, dan bentuk pada logo dapat digunakan sebagai inspirasi untuk menciptakan konsistensi visual antara logo dan tampilan antarmuka aplikasi secara keseluruhan. Hal ini penting agar aplikasi memiliki tampilan yang terpadu dan mudah dikenali oleh pengguna.
Gambar 6. Logo aplikasi Abdimas Sumber: Pungky Febi Arifianto
f. Ikon
Ikon sistem pada aplikasi ini dirancang secara khusus sebagai representasi visual dari fungsi, perintah, dan informasi tertentu dalam antarmuka sistem. Desain ikon sistem mengikuti prinsip Google Material Design yang menggabungkan studi eksisting dan konsep aplikasi. Salah satu karakteristik yang ditonjolkan dalam desain ikon adalah penggunaan bentuk yang diambil dari logo aplikasi. Hal ini menciptakan keselarasan desain antara ikon sistem dan logo aplikasi, dilain sisi hal tersebut akan menghasilkan konsistensi visual yang kohesif dalam keseluruhan tampilan aplikasi.
Gambar 7. Ikon-ikon dalam aplikasi Abdimas Sumber: Pungky Febi Arifianto
g. Elemen Grafis Pendukung
Dalam elemen grafis pendukung dalam user interface ini salah satunya adalah banner. Dalam gambar banner yang terlihat mencolok adalah adanya logo Abdimas dengan dominasi warna putih diatas tulisan pendukung sebagai sebuah informasi. Penggunaan ini digunakan untuk memberikan keselarasan desain pada UI dan memberikan konsistensi visual agar temanya tetap mengacu pada branding dan logonya.
Gambar 8. Elemen grafis pendukung aplikasi Abdimas Sumber: Pungky Febi Arifianto
h. Desain User Interface Berdasarkan penggambaran user flow yang dilanjutkan dalam pembuatan wireframe maka dibuat prototyping desain yang mengarah pada fungsi desain komunikasi visual mulai dari pemanfaatan warna, bentuk, font , ikon, logo dan elemen grafis pendukung untuk selanjutnya menjadi satu kesatuan aplikasi. Penggunaan dominasi warna biru mengarah pada visual branding yang didasarkan atas pembuatan logo. Hal ini akan meningkatkan konsistensi dalam identitas visual, dilain sisi juga akan memperkuat positioning aplikasi. Secara keseluruhan penggunaan warna biru digunakan untuk mempermudah pengenalan jenis aplikasi pencarian mitra layaknya Linkedin dan Facebook bagi pengguna baru. Tampilan pertama dalam aplikasi Abdimas akan memunculkan splash screen berupa logogram abdimas sekitar 1 detik yang kemudian mengarah kepada tampilan lanjutan mengenai sekilas jargon berupa kelebihan dari aplikasi Abdimas sekitar 1 detik yang kemudian baru mengarah kepada welcome screen . Pada tampilan welcome screen ini para pengguna dihadapkan kepada 4 tombol yakni Cari Proyek Abdimas, Cari Pengabdi, Daftar atau Skip.
Gambar 9. Halaman splash dan welcome screen Sumber: Pungky Febi Arifianto
Pada gambar 10, halaman pendaftaran pengabdi akan muncul jenis PKM yang akan dijadikan fokus pengabdi. Selanjutnya pengabdi juga akan mengisi kompetensi atau peminatan sesuai dengan keilmuan pengabdi. Kelengkapan data juga akan diisikan oleh pengabdi, hal ini berkaitan dengan kampus atau afiliasi para pengabdi dalam hal ini dosen.
Gambar 10. Halaman pendaftaran sesuai kompetensi dan peminatan Sumber: Pungky Febi Arifianto
Pada halaman pendaftaran mitra juga sama, sehingga hal ini nantinya akan berperan dalam link dan match antara mitra dan pengabdi. Sesuai dengan jenis pengabdian dan kompetensi
dosen. Hal ini nantinya juga disesuaikan dengan alamat dari kedua belah pihak untuk menentukan jarak tempuh.
Gambar 11. Halaman pendaftaran sesuai jenis pengabdian dan kompetensi Sumber: Pungky Febi Arifianto
Pada gambar 12 ini menampilkan beranda dari aplikasi Abdimas. Dalam beranda ini nanti akan terdapat 3 sub bagian yakni, Abdimas-mu, Para Pengabdi, dan Proyek. Masing-masing akan menampilkan para mitra pilihan, kampus pilihan, pengabdi pilihan, pengabdi terbanyak, proyek inspiratif, dan kategori proyek. Hal ini memudahkan para stakeholder dalam menjelajah aplikasi Abdimas dalam navigasinya.
Gambar 12. Halaman beranda utama, abdimas, pengabdi, proyek. Sumber: Pungky Febi Arifianto
Gambar 13 akan menampilkan halaman favorit di mana nantinya mitra yang sudah sesuai akan dimasukkan dalam pilihan untuk direview dan dilakukan link & match antar stakeholder . Adapun untuk notifikasi nantinya akan berisi timeline proyek yang sedang dikerjakan, kolaborator antar mitra ataupun hubungan mitra dengan kampus.
Gambar 13. Halaman favorit dan notifikasi Sumber: Pungky Febi Arifianto
Gambar 14 menampilkan halaman pencarian proyek oleh mitra maupun pengabdi pada menu lanjutan pada beranda. Baik dalam beranda mitra Abdimas maupun Para Pengabdi. Hal ini nantinya akan memperlihatkan profil para stakeholder beserta detail di dalamnya, termasuk afiliasi, ataupun kompetensi.
Gambar 14. Halaman pencarian proyek oleh mitra dan pengabdi (dosen) Sumber: Pungky Febi Arifianto
Pada gambar 15 ini menampilkan profil mitra. Dalam halaman ini akan menampilkan kebutuhan yang diinginkan oleh mitra dan menampilkan beberapa kolaborator mitra yang telah bekerjasama dengan mitra tersebut. Sehingga rekam jejak Kerjasama nanti akan bisa terlihat oleh stakeholder.
Gambar 15. Halaman profil mitra Sumber: Pungky Febi Arifianto
Pada halaman profil pengabdi digambar 16 ini juga kurang lebih sama dengan profil Mitra. Menampilkan secara detail keahlian yang dimiliki dan rekam jejak Kerjasama yang telah dibuat oleh beberapa mitra dan kolaborator dengan pengabdi dengan afiliasi yang berbeda.
Gambar 16. Halaman profil pengabdi Sumber: Pungky Febi Arifianto
Halaman ini merupakan fitur utama dari aplikasi Abdimas. Pada halaman link & Match ini, para stakeholder hanya butuh 1 kali klik untuk bisa menemukan Mitra yang sesuai ataupun pengabdi yang sesuai dengan kebutuhannya. Hal ini dapat dilakukan apabila para mitra dan pengabdi melakukan pendaftaran terlebih dahulu dan mengisi query sesuai dengan tahapan pendaftaran. Identifikasinya berasal dari jenis PKM, kesesuaian bidang dan lokasi demografi para stakeholder. Dengan menggunakan fitur ini maka para stakeholder dapat menemukan dengan mudah para mitra dan pengabdi dengan satu kali klik. Nantinya sebelum terhubung aplikasi akan memberikan review kesamaan bidang dan bisa melakukan tahap selanjutnya dengan melakukan kontrak Kerjasama pada gambar 18.
Gambar 17. Halaman link & match Sumber: Pungky Febi Arifianto
Gambar 18. Kontrak link & match
Sumber: Pungky Febi Arifianto
Fitur lain yang mengadaptasi dari aplikasi sejenisnya adalah penggunaan story. Pada gambar 19, story ini nantinya bisa lebih mendekatkan kepada stakeholder yang telah mendaftar. Hal ini nantinya akan menjadi sarana informasi, edukasi dan persuasi bagi mitra maupun pengabdi untuk bisa saling berbagi sesuai dengan kebutuhan dan kompetensinya masing-masing. Dilain sisi hal ini juga dapat dijadikan sebuah catatan rekognisi bagi masing-masing peran dalam mengembangkan keahlian dan usahanya.
Gambar 19. Story dari mitra maupun pengabdi Sumber: Pungky Febi Arifianto

## Evaluating the Design
Pada tahapan evaluasi ini dilakukan dengan melakukan pengujian yang melibatkan para Dosen, Kepala LPPM, Warek bidang Kerjasama dan Pengabdian Masyarakat serta para Mitra Pedagang dan Penyedia Jasa. Evaluasi ini menggunakan Focus Group Discussion (FGD). Kegiatan evaluasi ini menghasilkan poin sebagai berikut:
1. Pada tahap pertama seharusnya langsung diberikan pilihan untuk mendaftar. Tanpa adanya pencarian mitra diawal. Hal ini bertujuan untuk menentukan peran user. Sehingga bisa fokus menjelajah sesuai dengan akun pendaftarannya sebagai salah satu stakeholder antara mitra atau pengabdi.
2. Penggunaan spacing dan familiaritas icon untuk user belum baik, diperlukan studi lagi mengenai penggunaannya dalam aplikasi.
3. Ukuran card agak diperbesar karena terlalu kecil untuk area sentuh.
4. Visual hirarki dengan judul diatasnya dan dibawahnya kurang baik, alangkah baiknya diperbaiki dengan menambahkan garis tipis sebagai pembeda ruang.
5. Penggunaan lupa password lebih diperhatikan dengan mempertimbangkan aspek user experience nya bagi pengguna. Lupa password umumnya ditempatkan dibawah field password. Familiaritas diperlukan agar pengguna tidak membingungkan pengguna.
6. Review kontrak seharusnya dilakukan verifikasi antar dua stakeholder , tidak harus saat itu juga.
Saran bagi antarmuka yang sudah dikembangkan ini sudah mengakomodasi kebutuhan pengguna, namun harus diperhatikan detail user interface sehingga user experience akan mengikuti. Dengan demikian dibutuhkan perbaikan di bagian user experience dengan memberikan usability scale untuk mengukur efektivitas penggunaan melalui perancangan user interface yang telah dibuat.

## Kesimpulan dan Saran
Berdasarkan pada hasil dari Perancangan User Interface Aplikasi Mobile ABDIMAS sebagai Penghubung Antara Mitra dan Pengabdi (Dosen) dalam Pengabdian Masyarakat telah menghasilkan:
1. Aplikasi Abdimas yang telah dirancang bertujuan untuk menjembatani dosen dalam bidang Pengabdian Kepada Masyarakat (PKM) dengan Mitra supaya lebih mudah, terfokus pada permasalahan dan tepat sasaran.
2. Penggunaan metode Human Centered Design (HDC) menghasilkan fitur one click system yakni link & match . Hanya menggunakan satu tombol, maka pengabdi (dalam hal ini dosen) mampu mendapatkan mitra yang sesuai dengan bidang keilmuan dan kompetensi yang dibutuhkan, begitu juga sebaliknya.
3. Evaluasi perlu dilakukan lebih mendalam dengan menggunakan usability scale dalam mengukur efektivitas penggunaan dalam perancangan user interface ini agar kedepannya dapat diaplikasikan untuk mempermudah kegiatan PKM.

## Ucapan Terima Kasih
Penulis ingin mengucapkan terimakasih kepada segenap stakeholder yang berkenan untuk melakukan wawancara secara intensif demi tercapainya perancangan aplikasi Abdimas ini. Penulis juga mengucapkan terimakasih sebesar-besarnya kepada PKKM (Program Kompetisi Kampus Merdeka) yang telah mendanai publikasi artikel dan honorarium penulis sehingga paper ini dapat publish . Serta berbagai pihak yang berkontribusi dalam penulisan
jurnal perancangan ini, khususnya rekan-rekan dosen DKV UPN “Veteran” Jawa Timur atas semangatnya.

## Daftar Pustaka

## Artikel Jurnal
Begnum, M. (2015). Comparing User-Centered Practices in Agile Versus Non-Agile Development. Nokobit 2015 , November 2015 . http://ojs.bibsys.no/index.php/Nokobit/article/view/270
SAITO, S., & OGAWA, K. (1994). Ergonomics of human-system interaction. The Japanese Journal of Ergonomics , 30 (1), 1–1. https://doi.org/10.5100/jje.30.1

## Buku
Robbins, Stephen P.; Judge, Timothy A.; Diana Angelica; Ria Cahyani; Abdul Rosyid; Organizational behavior. (2008). Perilaku organisasi = Organizational behavior / Stephen P. Robbins, Timothy A. Judge ; penerjemah Diana Angelica, Ria Cahyani, Abdul Rosyid. Jakarta :: Penerbit Salemba Empat,.
Sharp, H., Rogers, Y., & Preece, J. (n.d.). INTERACTION DESIGN beyond human-computer interaction (4th ed.). John Wiley & Sons, Inc.
Shneiderman, B., & Plaisant., C. (2005). DESIGNING THE USER INTERFACE (4th ed.). Pearson Education, Inc.

## Webtografi
IDEO.org. (2015). The Field Guide to Human-Centered Design . IDEO.org.
Undang-Undang Republik Indonesia Nomor 12 Tahun 2012 Tentang Pendidikan Tinggi. (2012). Retrieved 4 6, 2022, from Portal Mahkamah Konstitusi. https://portal.mahkamahkonstitusi.go.id/eLaw/mg58ufsc89hrsg/1f32ffaa83
Pemerintah RI (2020). Peraturan Pemerintah Republik Indonesia Nomor 21 Tahun 2020 Tentang Pembatasan Sosial Berskala Besar Dalam Rangka Percepatan Penanganan Coronavirus Disease 2019 (Covid-19).
We Are Social & Hootsuite, (2020) “Digital Data Indonesia 2020,” Data Reportal, pp. 1-97.