PERANCANGAN DAN ANALISIS UI UX
MENGGUNAKAN METODE DESIGN
THINKING PADA WEBSITE UJI KOMITE
AKREDITASI NASIONAL (Uji-KAN) Kania Meliana Fityanti1.
I Gede Agung Sri Sidhimantra2 Manajemen Informatika.
Universitas Negeri Surabaya Kampus Ketintang.
Jalan Ketintang.
Surabaya 60231 21028@mhs.
2igdesidhimantra@unesa.
AbstrakAi Perkembangan pesat teknologi informasi dan komunikasi menjadi faktor penting dalam meningkatkan efisiensi layanan publik.
Unit Pelayanan Teknis Pengujian Sertifikasi Mutu Barang Lembaga Tembakau Surabaya (UPT PSMB-LT Surabay.
masih menghadapi proses layanan panjang, minim transparansi pelacakan status pengujian realtime, serta pengisian data manual yang rawan kesalahan.
Penelitian ini merancang antarmuka pengguna (UI) dan pengalaman pengguna (UX) pada website Uji-KAN menggunakan metode Design Thinking dengan lima tahapan:
empathize, define, ideate, prototype, dan test.
Evaluasi memakai System Usability Scale (SUS).
Single Ease Question (SEQ), dan validasi ahli.
Hasil menunjukkan skor SEQ 6,76 (Sangat Muda.
, skor SUS 95,5 (Grade A/Best Imaginabl.
, dan validasi ahli 96,92% (Sangat Vali.
Secara keseluruhan.
Uji-KAN memiliki usability sangat baik dan layak diimplementasikan.
Kata kunciAi UI/UX.
Design Thinking.
Komite Akreditasi Nasional.
System Usability Scale (SUS).
Single Ease Question
(SEQ)
AbstractAi The rapid advancement of information and communication technology plays a key role in improving public service efficiency and quality.
However, the Technical Service Unit for Product Quality Testing and Certification of the Tobacco Institute Surabaya (UPT PSMB-LT Surabay.
still faces lengthy procedures, limited real-time test status transparency, and manual data entry prone to errors.
This study designs the user interface (UI) and user experience (UX) of the Uji-KAN website using the Design Thinking method, covering empathize, define, ideate, prototype, and test.
Evaluation using the System Usability Scale (SUS).
Single Ease Question (SEQ), and expert validation showed strong results: an SEQ score of 76 (Very Eas.
, a SUS score of 95.
5 (Grade A Ae Best Imaginabl.
, and expert validation of 96.
92% (Highly Vali.
Overall.
Uji-KAN demonstrates excellent usability and strong implementation feasibility.
KeywordsAi UI/UX.
Design Thinking.
National Accreditation Committee.
System Usability Scale (SUS).
Single Ease Question (SEQ) PENDAHULUAN Seiring perkembangan secara pesat dalam bidang teknologi informasi dan komunikasi telah menjadi elemen penting dalam meningkatkan kinerja dan kualitas layanan Teknologi digital tidak hanya berfungsi sebagai sarana interaksi, tetapi juga mendukung penghematan biaya, peningkatan efisiensi, serta partisipasi masyarakat dalam pengawasan layanan publik.
Pelayanan publik sendiri merupakan upaya memenuhi kebutuhan masyarakat berdasarkan prosedur yang berlaku .
Pentingnya kualitas layanan menjadikan mutu produk sebagai aspek krusial, karena berkaitan dengan kepuasan konsumen dan integritas Sertifikasi menjadi mekanisme untuk memastikan standar mutu terpenuhi .
Standar mutu seperti SNI ISO/IEC 17025:2017 berperan besar dalam mendukung keberhasilan organisasi melalui proses yang lebih terstruktur dan terkontrol .
UPT
PSMB-LT Surabaya sebagai lembaga pengujian, sertifikasi, dan kalibrasi terus berupaya meningkatkan kualitas layanan melalui inovasi yang berfokus pada transparansi, akurasi, dan kecepatan hasil pengujian.
Data menunjukkan peningkatan jumlah pelanggan dari 1.
menjadi 190 .
, mencerminkan meningkatnya kebutuhan masyarakat terhadap layanan tersebut.
Selain itu, capaian Pendapatan Asli Daerah (PAD) sektor jasa laboratorium juga mengalami peningkatan signifikan, dari Rp1,26 miliar .
menjadi Rp1,65 miliar .
Tren ini menunjukkan potensi besar bagi institusi, namun peningkatan beban pelayanan juga menuntut perbaikan sistem.
Salah satu kendala yang masih dihadapi adalah proses input data pengujian yang masih dilakukan secara manual dan mengharuskan pelanggan datang ke laboratorium.
Untuk menjawab permasalahan tersebut, diperlukan penerapan sistem berbasis website yang memungkinkan pelanggan melakukan permohonan pengujian, memantau proses, hingga menerima sertifikat tanpa harus datang Pendekatan perancangan menggunakan metode Design Thinking dianggap tepat karena mampu menyelesaikan permasalahan kompleks dan berfokus pada kebutuhan pengguna .
Selain itu, metode pengujian seperti SUS dan SEQ dapat digunakan untuk mengukur tingkat kepuasan dan kemudahan penggunaan aplikasi.
Berdasarkan hal tersebut, penelitian ini bertujuan merancang aplikasi layanan sertifikasi dan pengujian mutu produk di UPT PSMB-LT Surabaya menggunakan Design Thinking.
Aplikasi yang dikembangkan diharapkan mampu meningkatkan efisiensi operasional, meminimalkan kesalahan input, serta meningkatkan kepuasan pelanggan dalam mengakses layanan pengujian mutu produk.
II.
METODE PENELITIAN
Tahapan penelitian berfokus dalam perancangan dan analisis UI/UX di UPT PSMB-LT Surabaya, sehingga tujuan awal penelitian ini dapat tercapai.
Metode Design Thinking Design Thinking adalah metode yang melibatkan proses berulang guna memahami keinginan pengguna dan menantang asumsi yang ada, dengan tujuan untuk mengidentifikasi strategi dan menemukan solusi alternatif .
Emphatize Pada tahap empathize, peneliti melakukan wawancara untuk memahami kebutuhan dan hambatan pengguna terkait UI/UX di UPT PSMB-LT Surabaya.
Proses ini dilakukan melalui dua metode utama.
Observasi Dengan mengamati bagaimana pengguna berinteraksi dengan sistem yang ada, peneliti dapat mengidentifikasi masalah pada UPT PSMB-LT Surabaya yang mungkin tidak terungkap melalui wawancara saja.
Wawancara Peneliti mengajukan pertanyaan terbuka yang pengalaman, dan masalah yang dihadapi pengguna terkait dengan antarmuka dan pengalaman pengguna (UI/UX) menggunakan in-depth .
Define Pada tahapan define, mengolah data-data yang dikumpulkan pada tahap sebelumnya dan mulai mengerucutkan permasalahan yang akan diselesaikan dengan sebuah solusi inovasi berikut .
User Persona User persona adalah representasi fiktif dari pengguna yang dibuat berdasarkan data yang dikumpulkan selama proses empathize.
Gambar.
1 Alur Metode Penelitian Berdasarkan Gambar 1 tahapan dilakukan dimulai dari tahapan studi literatur, metode Design Thinking meliputi Emphatize.
Define.
Ideate.
Prototype, dan Test.
Jika rancangan sesuai lanjut ke tahapan terakhir yaitu Kesimpulan dan Saran, apabila belum sesuai maka dilakukan perulangan ke tahap Ideate.
Studi Literatur Studi literatur dilakukan peneliti untuk mempelajari teori serta penelitian yang relevan dengan topik yang diangkat, yang dapat berasal dari berbagai sumber seperti jurnal, artikel, buku, laporan penelitian, dan internet.
Gambar.
2 User Persona Pak Abdi diperoleh melalui sesi brainstorming, kemudian mengelompokkannya berdasarkan hubungan alami yang ada .
Priority Matrix Dari 4 kuadran pada Gambar 5, peneliti mengambil 2 kuadran yang diprioritaskan yaitu pada kuadran "Yes.
Do It Now" karena dampaknya besar dan mudah dilakukan dan kuadran "Do Next" berisi tugas-tugas penting tapi butuh usaha lebih besar, jadi perlu perencanaan.
Gambar.
3 User Persona Pak Ronny Pada Gambar 2 merupakan tampilan user persona dari Pak Abdi sebagai representasi fiktif pegawai di UPT PSMB-LT Surabaya, dan Gambar 3 merupakan tampilan user persona dari Pak Ronny sebagai representasi fiktif pegawai Quality Control berisikan data diri, masalah yang dialami, goals, dan keinginan yang diharapkan.
User Journey Map User Journey Map merupakan visualisasi dari user experience saat berinteraksi dengan produk atau layanan dari awal hingga akhir.
Pada journey map, peneliti lebih fokus ke pelanggan karena target pengguna dari website Uji-KAN yaitu pelanggan pada Gambar 4.
Gambar.
5 Priority Matrix Task Flow Task Flow merupakan representasi grafis dari langkah-langkah atau tindakan yang diambil oleh pengguna dalam interaksi dengan suatu produk atau situs web .
Gambar.
4 User Journey Map Pak Ronny Ideate Tahap ideate adalah proses eksplorasi untuk menghasilkan ide solusi inovatif bagi website UjiKAN berdasarkan permasalahan yang telah diidentifikasi sebelumnya.
Affinity Mapping Affinity Mapping digunakan untuk mengorganisir sejumlah besar ide, pendapat, masalah, solusi, dan informasi lainnya yang bersifat verbal, yang Gambar.
6 Task Flow Login / Sign Up Berdasarkan Gambar 6 pada task flow login / sign up menunjukkan bahwa user harus login dan membuat akun terlebih dahulu untuk dapat melaukan merencanakan struktur dan hierarki situs web.
(Admi.
menunjukkan alur admin dari menerima permintaan hingga mengunggah sertifikat hasil uji.
Gambar.
9 Task Flow Master Data Admin Berdasarkan Gambar 9 pada task flow Master Data Admin menunjukkan bahwa admin bisa melakukan penambahan, edit, dan hapus data pada data user, pelanggan, maupun parameter uji.
Gambar.
7 Task Flow Beranda User Berdasarkan Gambar 7 pada task flow beranda user, menunjukkan bahwa user bisa mencari informasi untuk melakukan pendaftaran pengujian dan menghubungi bantuan apabila butuh bantuan.
Site Map Perancangan site map pada penelitian ini bertujuan untuk memberikan gambaran struktur dan hierarki halaman pada website Uji-KAN sehingga memudahkan dalam proses perencanaan navigasi Pada Gambar 10 dan 11 ditunjukkan hierarki site map yang dibagi ke dalam beberapa kategori sesuai kode warna.
Gambar.
10 Site Map User Gambar.
8 Task Flow Permintaan Pengujian User & Task Flow Daftar Proses Pengujian Berdasarkan Gambar 8, task flow permintaan pengujian menggambarkan alur pengguna dari pengisian data produk hingga menerima sertifikat dan laporan.
Dan task flow Daftar Proses Pengujian Gambar.
11 Site Map Admin Dengan rancangan hierarki yang terstruktur, pengguna dapat mudah memahami jalannya proses layanan pengujian, sementara administrator memperoleh panduan jelas dalam mengelola data serta memproses permohonan pengujian.
HASIL DAN PEMBAHASAN
Prototype Tahapan prototype merupakan tahapan ke empat dalam metode design thinking, dengan rancangan sebagai berikut.
Wireframe Pada tahap ini menyusun gambaran awal atau sketsa menggunakan figma yang menampilkan penempatan elemen-elemen dasar seperti teks, gambar, dan tombol, berfungsi sebagai rencana tata letak untuk produk Uji-KAN.
Design System Peneliti menggunakan font Inter karena mudah dibaca serta memberi kesan modern dan professional.
Font Inter juga dipilih karena sesuai kebutuhan tampilan web dan telah disetujui pihak Uji-KAN sebagai bagian dari identitas visual lembaga.
Warna utama biru dipilih untuk menggambarkan kepercayaan, stabilitas, dan profesionalisme, sekaligus memperkuat identitas visual sistem.
Kombinasi biru dengan gradasi dan warna sekunder membantu membangun hierarki visual dan membedakan fungsi elemen antarmuka.
Gambar.
14 Konsep Logo Uji-KAN Logo Uji-KAN merupakan gabungan dari dua hal penting yaitu lab (Erlenmeye.
dan daun, berikut A Lab (Erlenmeye.
: Melambangkan ilmu pengetahuan, penelitian, dan ketelitian.
Artinya.
Uji-KAN bekerja dengan akurat dan terpercaya seperti di laboratorium.
A Daun: Melambangkan alam, menunjukkan UjiKAN juga peduli pada lingkungan dan kualitas High-Fidelity Design High-Fidelity Design adalah tingkatan prototyping yang masuk skala medium.
Dimana pengguna prototyping sudah dapat melihat visual antarmuka lebih jelas .
High-Fidelity Design Pelanggan Berikut adalah rancangan High-Fidelity Design pada bagian pelanggan:
Gambar.
12 Typography dan Colors Uji-KAN Adapun design system keseluruhan untuk website Uji-KAN yang berisi kumpulan komponen-komponen design UI dengan rancangan sebagai berikut pada Gambar.
Gambar.
13 Design System Uji-KAN Gambar.
15 Halaman Sign In Gambar.
16 Halaman Sign Up Gambar.
21 Halaman Pembayaran Gambar.
22 Halaman Laporan Hasil Uji Gambar.
17 Halaman Beranda Gambar.
23 Halaman Tracking Pengajuan Gambar.
18 Halaman Tentang Kami High-Fidelity Design Admin Berikut adalah rancangan High-Fidelity Design pada bagian admin:
Gambar.
19 Halaman Akun Gambar.
24 Halaman Dashboard Admin Gambar.
20 Halaman Tambah Pengujian Baru Gambar.
25 Halaman Daftar Proses Gambar.
26 Halaman Data User Gambar.
29 Halaman Parameter Uji Gambar.
27 Halaman Data Pelanggan Gambar.
30 Halaman Laporan Pengaduan Testing Pada fase terakhir ini, peneliti mengamati user ketika menggunakan rancangan solusi dari yang telah dibuat.
fase ini pun bisa mendapatkan feedback dari user terkait hal yang perlu dihapus atau perlu dipertahankan lalu ditingkatkan kedepannya.
System Usability Scale (SUS) SUS mencakup berbagai aspek dari usability sistem, seperti kebutuhan akan dukungan, pelatihan, dan kompleksitas, serta memiliki tingkat validitas yang tinggi dalam mengukur usability.
Peneliti membuat kuesioner untuk pengujian metode SUS, lalu hasil responden akan dihitung menggunakan perhitungan skor kuesioner SUS.
TABEL 1
DATA JABATAN KUESIONER SUS
Jabatan Analis Laboratorium Ka.
Seksi Pelayanan Teknis Jasa Penilaian Kesesuaian dan Kalibrasi Gambar.
28 Halaman Detail Proses Lanjutan Jumlah Orang Ka.
Seksi Pengembangan Jasa Penilaian Kesesuaian dan Kalibrasi Penguji Mutu Barang Keahlian Ahli Muda Penguji Mutu Barang Keahlian Ahli Pertama Pengadministrasi Pengujian Pengadministrasi Perkantoran Dengan hasil tersebut diperoleh nilai validasi 92%, kriteria sangat valid, dan keterangan sangat baik atau tidak perlu revisi.
Pada Tabel 1 merupakan rincian perhitungan SUS dari jumlah 10 responden yang mengisi kuesioner untuk testing Design UI/UX Website Uji-KAN.
TABEL 2
TOTAL HASIL NILAI SUS
No.
Jumlah .
er-oran.
Nilai (Jumlah*2,.
Nilai SUS Single Ease Question (SEQ) Pada tahapan ini, peneliti akan memberikan tugas spesisfik kepada responden untuk mencoba rancangan prototype menggunakan Maze.
Setelah selesai mencoba rancangan prototype, responden diminta untuk mengisi survei yang berisi pertanyaan tunggal mengenai persepsi mereka terhadap tampilan Dengan menggunakan SEQ, peneliti dapat memperoleh data kualitatif yang lebih mendalam mengenai user experience dan mengidentifikasi area yang mungkin memerlukan perbaikan .
Hasil menggunakan skala likert 1-7, dengan data berikut :
Cara menentukan nilai SUS berdasarkan Tabel 2 .
A Skor SUS didapatkan dengan menjumlah seluruh skor jawaban kemudian dikalikan 2,5.
SUS Score = {(Q1-.
-Q.
(Q3-.
-Q.
(Q5-.
(Q7-.
-Q.
(Q9-.
-Q.
} * 2.
A Menentukan nilai rata-rata I= yeo Gambar.
32 Skor Tugas 1 Oc yeo yyeye = yye, ye yea yaya Gambar.
33 Skor Tugas 2 Gambar.
31 Penilaian Kuesioner SUS Kesimpulan skor rata-rata dari perhitungan berdasakan Gambar 31 menggunakan SUS didapat nilai akhir yaitu 95,5 dengan Grade A, penerimaan design di level Acceptable lalu dapat dikatakan Best Imaginable dipenggunaan prototype.
Dari hasil SUS tersebut, menunjukkan bahwa pengguna menilai desain website mudah dipahami dan dioperasikan tanpa mengalami hambatan berarti.
Instrumen Validasi Ahli Peneliti melakukan uji validitas ke ahli UI/UX dengan memberikan angket yang berisi 13 pertanyaan menggunakan penilaian skala likert.
Berikut hasil penilaian angket validitas ahli:
ycAyeOyesyeCyeO ycyeCyesyeOyeIyeCyeiyeO = ycu 100% = 96.
Gambar.
34 Skor Tugas 3 Dari hasil uji coba dengan prototype, didapatkan hasil survei dari pelanggan yang dihitung menggunakan metode SEQ sebagai berikut :
TABEL 3
HASIL SKOR SEQ
Tugas R1
R10
TABEL 4
TOTAL NILAI SEQ
Tugas Tugas 1 Tugas 2 Tugas 3 Rata-rata .
er-tuga.
Nilai SEQ
6,76
Setelah didapatkan hasil rata-rata SEQ, didapatkan hasil peringkat presentil seperti pada Gambar 35.
Gambar.
35 Penilaian Kuesinoer SEQ Kesimpulan skor rata-rata dari perhitungan Gambar 35 menggunakan metode SEQ didapat ratarata sebesar 6,76 berada di kategori Sangat Mudah, menunjukkan bahwa fitur yang diuji coba sudah sangat mudah untuk digunakan dan sesuai ekspetasi Selain itu, juga dapat dikembangkan dengan mengintegrasikan layanan payment gateway seperti Midtrans atau Xendit agar proses pembayaran menjadi lebih mudah, aman, serta memberikan kenyamanan yang lebih baik bagi pelanggan.
REFERENSI
IV.
KESIMPULAN
Kesimpulan Berdasarkan hasil penelitian dan pembahasan dalam Perancangan dan Analisis UI UX Menggunakan Metode Design Thinking Pada Website Uji Komite Akreditasi Nasional (Uji-KAN), maka dapat ditarik kesimpulan sebagai berikut:
Penerapan metode Design Thinking membuat proses perancangan berjalan lebih terarah dan berulang, sehingga desain akhir menjawab kebutuhan pengguna serta meningkatkan kepuasan mereka.
Berdasarkan hasil validasi ahli dan pengujian pengguna, aplikasi Uji-KAN dinilai sangat layak dengan nilai Validasi 96,92%, skor SEQ 6,76 (Sangat Muda.
, dan SUS 95,5 (Grade A/Best Imaginabl.
Hal ini menunjukkan antarmuka Uji-KAN mudah dipahami, efisien, dan siap digunakan tanpa perlu revisi besar.
Saran