Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM PERANCANGAN USER INTERFACE DAN USER EXPERIENCE
APLIKASI BERBASIS MOBILE KLINIK KECANTIKAN
MENGGUNAKAN METODE DESIGN THINKING
(STUDI KASUS : KLINIK KATIA DERMA)
Shifa Silfiana, 2Imam Maruf Nugroho, 3Yudhi Raymond Ramadhan 1,2,3 Program Studi Teknik Informatika
1,2,3
Sekolah Tinggi Teknologi Wastukancana E-mail: 1 shifasilfiana07@wastukancana.
id, 2 imam.
ma@wastukancana.
yudhi@wastukancana.
ABSTRACT
The design of the User Interface and User Experience is very influential for user comfort, so accurate analysis is needed according to user needs.
The Katia Derma Clinic is a clinic that is devoted to the treatment of facial skin health care and releases skincare products which are currently planning to create a mobile-based application.
With the planning of making the application, the user interface and user experience will be designed first using the Design Thinking method.
Testing the results of the design in this study was carried out using the User Experience Questionnaire (UEQ) testing Based on the test method used to test the design results in this study, positive results were obtained for all scales, namely the Attractiveness scale with a mean value 028.
Efficiency with a mean value of 2.
075 and Dependability with a mean value of 725 included in the Excellent category, while the Perspicuity scale with a mean value 825.
Stimulation with a mean value of 1.
525 and Novelty with a mean value of 225 are included in the Good category.
Keywords : Design Thinking.
User Interface.
User Experience.
User Experience Questionnaire ABSTRAK Perancangan User Interface dan User Experience sangat berpengaruh bagi kenyamanan pengguna, sehingga diperlukan analisis yang akurat sesuai dengan kebutuhan pengguna.
Klinik Katia Derma merupakan klinik yang dikhususkan untuk treatment perawatan kesehatan kulit wajah dan mengeluarkan produk skincare yang saat ini berencana membuat sebuah aplikasi berbasis mobile.
Dengan perencaan pembuatan aplikasi tersebut akan dilakukan perancangan user interface dan user experience terlebih dahulu dengan menggunakan metode Design Thinking.
Pengujian hasil perancangan pada penelitian ini dilakukan dengan menggunakan metode pengujian User Experience Questionnaire (UEQ).
Berdasarkan metode pengujian yang digunakan untuk menguji hasil perancangan pada penelitian ini, didapatkan hasil positif untuk seluruh skala, yakni pada skala Daya Tarik (Attractivenes.
dengan nilai mean 2.
Efisiensi (Efficienc.
dengan nilai mean 2.
075 dan Ketepatan (Dependabilit.
dengan nilai mean 1.
termasuk ke dalam kategori Excellent (Bagus Sekal.
, sedangkan skala Kejelasan Jurnal INFOKOM | 96
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM (Perspicuit.
dengan nilai mean 1.
Stimulasi (Stimulatio.
dengan nilai mean 1.
dan Kebaruan (Novelt.
dengan nilai mean 1.
225 termasuk ke dalam kategori Good (Bagu.
Kata Kunci : Design Thinking.
User Interface.
User Experience.
User Experience Questionnair interface atau antarmuka adalah apa PENDAHULUAN Semakin kebutuhan teknologi saat ini berdampak yang dilihat saat menggunakan program .
Klinik pada seluruh aktivitas manusia untuk Seiring dengan kemajuan teknologi, semakin meningkat setiap tahunnya.
Perkembangan pengguna smartphone yang semakin pesat ini, salah satunya dipengaruhi oleh banyaknya fitur dan aplikasi pada smartphone.
Pada saat ini sebuah organisasi atau perusahaan, memanfaatkan aplikasi sebagai media promosi serta pelayanan dan penyajian bersama untuk meningkatkan efisiensi dan efektifitas dalam proses bisnis .
User Derma berlokasi di Jl.
Raya Bendul Kabupaten Purwakarta merupakan klinik yang dikhususkan untuk treatment perawatan mengeluarkan produk skincare untuk berbagai jenis kulit wajah.
Pada saat ini Klinik Katia Derma melakukan promosi hanya menggunakan brosur dengan sekitaran kecamatan Sukatani dan juga WhatsApp, pelayanan administrasi di Kinik Katia Derma juga masih berjalan secara Metode promosi tersebut dirasa kurang efektif karena hanya menyajikan experience adalah dua bagian penting informasi yang singkat dan hanya yang tidak dapat dipisahkan dalam menjangkau kontak yang tersimpan kerangka berpikir perencangan aplikasi .
User experience adalah apa yang persaingan pada saat ini, mengharuskan dirasakan pengguna saat menggunakan Klinik
meningkatkan media promosi dan juga Katia
Katia
Derma
Ketatnya Jurnal INFOKOM | 97
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM pemasaran untuk menjadi daya tarik Ideate.
Prototype dan Testing .
yang masyarakat guna meningkatkan jumlah pelanggan dan pengguna produk permasalahan secara efektif, dilkukan Oleh karena itu.
Klinik Katia Derma berencana membuat sebuah mengkaji permasalah secara berulang- ulang untuk mencari strategi alternatif diharapkan dapat meningkatkan daya pemecahan masalah, sehingga dapat tarik dan meningkatkan pelayanan.
Berdasarkan penelitian terdahulu, interface dan user experience .
terdapat penelitian yang menghasilkan perancangan desain user interface dan user experience aplikasi berbasis mobile KAJIAN PUSTAKA yang diharapkan dapat membantu dalam Perancangan Desain meningkatkan daya tarik dan pelayanan mendefinisikan proses menggunakan dalam berbisnis .
Oleh karena itu berbagai teknik dan prinsip dengan tujuan cukup mendefinisikan perangkat, erancangan user interface dan user memungkinkan realisasi fisiknya .
terorganisasinya bentuk media promosi User Interface User dan pelayanan di Klinik Katia Derma merupakan komponen yang tidak dapat yang menarik dan mudah dipahami oleh Tujuannya adalah untuk memfasilitasi Untuk membuat perancangan user interface dan user experience Katia menghubungkan aplikasi dan pengguna.
Derma Interface aplikasi dapat mempengaruhi metode Design Thinking.
Proses yang kenyamanan dan dapat mengetahui terjadi pada metode Design Thinking aplikasi ini.
Interface yang baik dapat dalamnya, yaitu empathize.
Define, memberikan pengalaman koneksi yang Jurnal INFOKOM | 98
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM programnya mudah dipahami pengguna .
survei yang diberikan kepada pengguna User Experience Menurut definisi ISO 9241-210 user experience didefinisikan sebagai tanggapan seseorang saat menggunakan suatu produk, sistem, atau layanan.
UEQ
pengalaman pengguna .
METODE / ANALISIS
PERANCANGAN
Metode Survei pengalaman pengguna menilai yang digunakan seberapa puas dan nyaman seseorang penelitian ini yaitu metode Design dengan program suatu produk.
Thinking.
Dalam proses pengembangan Design Thinking ini dilakukan secara terstruktur dan Pendekatan design thinking ini komprehensif yang menekankan pada pengembangan solusi yang berpusat pada manusia yang dimulai dengan empati terhadap kebutuhan tertentu dan terus berinovasi berdasarkan kebutuhan Metode design thinking Gambar 1.
Tahapan Design Thinking adalah proses iteratif yang berusaha untuk memahami pengguna, menantang asumsi, dan mengkaji secara berulang masalah yang ada untuk mencari solusi dan strategi alternatif .
User Experience Questionnaire User Experience Questionnaire (UEQ) adalah metode perhitungan yang digunakan untuk mengukur pengalaman pengguna terhadap suatu sistem atau Dalam metode Design Thinking ini ada 5 tahapan sebagai berikut :
Empethize Empathize merupakan tahapan awal aplikasi, yaitu tahap pengumpulan data permasalahan yang ada di Klinik Katia Derma.
Pada tahap ini akan dilakukan Jurnal INFOKOM | 99
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM Klinik Katia Derma, perancangan antarmuka berdasarkan ide kemudian hasil dari wawancara akan solusi ke dalam bentuk rancangan dirangkum ke dalam empathy map.
Define memvisualisasikan ide-ide yang telah Permasalahan Pada pembuatan antarmuka didapatkan dari hasil wawancara pada ini dibuat menjadi prototype aplikasi tahap empathize yang dilakukan kepada agar dapat dijalankan seperti aplikasi pelanggan Klinik Katia Derma.
Pada pada umumnya dan tentunya dengan tahap define ini peneliti mendefinisikan permasalahan untuk mendapatkan sudut antarmuka ini peneliti menggunakan pandang pengguna untuk dijadikan tools figma.
landasan dalam perancangan interface aplikasi dengan membuat user persona Dalam Testing Pada tahapan testing ini merupakan dan how might we.
tahap pegujian desain antarmuka yang Ideate Selanjutnya tahapan ketiga yaitu kebutuhan pengguna.
Dalam melakukan tahapan Ideate, di tahapan Ideate ini testing ini, metode yang digunakan merupakan proses mengumpulkan ide yaitu User Experience Questionnaire.
Tahap ini diawali dengan memberikan sesuai dengan masalah yang sudah kuesioner kepada staff dan pelanggan didapatkan pada tahap empathize dan Klinik Katia Derma, responden diminta define, yaitu ide-ide untuk fitur-fitur untuk menjalankan prototype tampilan yang akan dibuat, serta kebutuhan dan aplikasi Katia Derma terlebih dahulu, kemudian responden dapat mengisi kuesioner yang terdapat 26 .
ua puluh dengan dibuat ke dalam mind mapping, user flow dan wireframing.
kemudian menilai dengan skala 1 Prototype sampai dengan 7.
Pertanyaan tersebut Selanjunya tahapan keempat yaitu Prototype.
UEQ
Jurnal INFOKOM | 100
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM Indonesia Derm.
? dimengerti oleh responden.
HASIL DAN PEMBAHASAN
Apa yang anda harapkan aplikasi Katia Derma yang Empethize Tahap akan dibuat? Tampilan seperti apa yang anda sukai dalam sebuah kebutuhan dalam perancangan user interface dan user experience aplikasi Katia Derma.
inginkan jika aplikasi Klinik berjumlah 5 orang yaitu pelanggan Klinik Katia Derma Katia Derma pada ini sudah Berikut pertanyaan yang akan dilontarkan kepada 5 narasumber :
Fitur apa saja yang anda Apa yang kamu tidak sukai pada sebuah aplikasi? Tabel 1.
Pertanyaan Wawancara Berdasarkan Pertanyaan Berapa lama anda melakukan merangkumnya dengan menggunakan perawatan di Klinik Katia Empathy Map yang terdiri dari empat Derma? elemen untuk memetakan tanggapan didapatkan dari wawancara peneliti dari responden, empathy map ini dibuat Apakah Katia Derma? pelanggan Klinik Katia Derma.
Berikut adalah emphaty map dari salah satu Masalah bertujuan untuk mengetahui kebutuhan .
elama narasumber yang dibuat berdasarkan hasil wawancara :
perawatan di Klinik Katia
Jurnal INFOKOM | 101
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM Gambar 2.
Empathy Map Define Gambar 3.
User Persona Pada tahap define ini peneliti Berdasarkan user persona yang mendapatkan sudut pandang pengguna permasalahan tersebut ke dalam bentuk perancangan interface aplikasi dengan how might we.
How might we dibuat membuat user persona dan how might masalah dari sudut pandang target User persona digunakan untuk penentuan pernyataan pengguna aplikasi yaitu owner dan Klinik Katia Derma, kemudian dibuat dalam bentuk poin- pelanggan Klinik Katia Derma sebagai poin kalimat yang mengarah pada target pengguna aplikasi yang berisikan permasalahan-permasalahan yang telah profil, permasalahan, keinginan dan didapat pada tahap sebelumnya.
Informasi diperoleh untuk mengetahui persona pengguna didapat melalui wawancara yang sudah dilakukan pada tahap Berikut user persona dari salah satu responden :
Gambar 4.
How Might We Jurnal INFOKOM | 102
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM Ideate Pada Ideate merumuskan perancangan solusi dari hasil permasalahan yang didapat pada Perancangan solusi ini nantinya akan Gambar 6.
User Flow dituangkan dalam tahap perancangan interface, dengan mencatat seluruh ide- Wireframe merupakan gambaran ide yang dianggap keseluruhan dari ide kerangka desain atau juga disebut Prototype aplikasi yang akan dibuat, dirancang untuk menggambarkan tata dalam tahap Prototype.
Proses low-fidelity, letak konten yang akan ditampilkan pada prototype.
mind mapping.
Mind Mapping ini dibuat agar dalam pengerjaan interface aplikasi fokus dalam alur yang sudah Gambar 5.
Mind Mapping Gambar 7.
Wireframe Setelah membuat alur keseluruhan dari prototype aplikasi, peneliti mulai menyusun alur berdasarkan jenis fitur Prototype Pada tahap ini, peneliti membuat yang dapat dilakukan oleh pengguna mockup serta prototype sesuai dengan dalam bentuk user flow.
ide solusi berdasarkan kebutuhan dan Jurnal INFOKOM | 103
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM masalah pengguna untuk mendapatkan Questionnaire (UEQ) untuk pengujian tampilan menarik dan sederhana.
perancangan aplikasi Katia Derma dari 30 .
iga pulu.
Berikut hasil Tabel 2.
UEQ Skala (Mean dan Varianc.
Skala Mean Varience Kejelasan Efisiensi Ketepatan Stimulasi Kebaruan Daya Tarik Gambar 8.
Prototype Testing Pada tahap ini peneliti melakukan pengujian prototype yang telah dibuat pada tahap prototype dengan melakukan kuesioner yang diberikan kepada 30 .
iga Tabel Tahapan pengujian ini diawali dengan responden perhitungan Mean atau hasil rata-rata dari semua tanggapan responden yang prototype yang telah dibuat.
Setelah masing-masing skala dan Variance selanjutnya responden menjawab 26 variasi sebaran data untuk masing- Experience masing skala pada UEQ yakni skala menilai dengan Daya Tarik (Attractivenes.
Kejelasan User Questionnaire dan (Perspicuit.
, skala 1 sampai dengan 7.
Setelah data kuesioner terkumpul.
Efisiensi (Efficienc.
Ketepatan (Dependabilit.
Stimulasi (Stimulatio.
dan Kebaruan (Novelt.
User
Experience Dari yang dihitung Jurnal INFOKOM | 104
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM .
engan penanda panah ke atas warna
KESIMPULAN
Seperti yang dikutip dari Schrepp 2019, nilai rata-rata impresi dari user dengan rentang nilai antara 0,8 dan 0,8 merupakan nilai evaluasi Pada perancangan user interface dan user experience aplikasi berbasis mobile di Klinik Katia Derma dengan menggunakan metode Design Thinking ini menghasilkan rancangan tampilan berupa Prototype aplikasi mobile Katia dengan konsultasi, reservasi, pembelian produk skincare dan lainnya.
Hasil pengujian dengan menggunakan metode User Experience Questionnaire (UEQ) Gambar 9.
Grafik Benchmark Gambar .
olak menunjukkan kategori setiap skala dari aplikasi Katia Derma yaitu skala Daya Tarik (Attractivenes.
, (Efficienc.
Ketepatan (Dependabilit.
termasuk ke dalam kategori Excellent (Bagus Sekal.
, untuk skala kejelasan (Perspicuit.
Stimulasi (Stimulatio.
dan kebaruan (Novelt.
termasuk ke dalam kategori Good (Bagu.
Derma mendapatkan hasil Katia positif .
pada setiap skalanya, yakni skala Daya Tarik (Attractivenes.
dengan nilai mean 2.
Efisiensi (Efficienc.
dengan nilai mean 2.
dan Ketepatan (Dependabilit.
dengan nilai mean 1.
725 termasuk ke dalam Excellent (Bagus Sekal.
, sedangkan skala Kejelasan (Perspicuit.
dengan nilai mean 1.
Stimulasi (Stimulatio.
dengan nilai mean 1.
dan Kebaruan (Novelt.
dengan nilai 225 termasuk ke dalam kategori Good (Bagu.
Jurnal INFOKOM | 105
Jurnal Informatika dan Komputer (INFOKOM) Volume 11 Nomor 1 Tahun 2023
E ISSN : 2722-4147 P ISSN : 2339-188X
OJS : http://journal.
id/index.
php/INFOKOM DAFTAR PUSTAKA