ANALISA DAN REDESIGN USER INTERFACE DAN USER

EXPERIENCE WEBSITE DENGAN

METODE DESIGN THINKING
(Studi Kasus : Website Kota Banjar)

Aan Abdul Rohman

Aan Abdul Rohman, Teknik Informatika, STMIK Bani Saleh Bekasi aanabdulrohman3@gmail.com

Abstrak
Website Kota Banjar merupakan sebuah media untuk menyampaikan informasi kepada seluruh
warga Kota Banjar maupun luar Kota Banjar. User Experience (UX) dapat didefinisikan sebagai
segala pengalaman yang dialami oleh pengguna saat berinteraksi dengan alat digital. User
Interface (UI) yaitu semua komponen system interaktif (software maupun hardware) yang
menyediakan informasi dan control kepada pengguna untuk menyelesaikan tugas tertentu dengan
system interaktif. Tampilan yang kurang interaktif dan minim nya informasi yang di sampaikan
tentunya bakalan menjadi sebuah pemasalahan. Untuk menghindari permasalahan tersebut salah
satu cara yang dapat dilakukan adalah dengan mendesain ulang website Kota Banjar dan
menambahkan fitur yang banyak di butuhkan oleh warga Kota Banjar. Salah satu metode desain
yang dapat digunakan untuk permasalahan ini adalah Design Thinking. Design Thinking digunakan
untuk mencari solusi yang paling efektif dan efisien untuk memecahkan suatu masalah yang
kompleks. Design Thinking dibagi menjadi lima tahap yaitu, Emphatize, Define, Idiate,
Prototype,dan Test. Hasil desain tersebut diharapkan dapat menjadikan inspirasi pagi pihak
pengelola website Kota Banjar.

Kata Kunci: Sistem Informasi Pengaduan Kekerasan, Prioritas Masalah, Pengambilan

Keputusan, Metode CARL, Web.

PENDAHULUAN

Pada saat ini website bukan hanya
sekedar sarana informasi saja, namun sebagai
wujud atau citra dari sebuah perusahaan atau
instansi tersebut. Namun pada saat ini banyak
sekali website yang belum mempunyai User
Interface (UI) dan User Experience (UX) yang
ramah terhadap pengguna, terutama pengguna
yang awam (pemula).
User experience adalah respon dan
persepsi pengguna sebagai bentuk reaksi dari
sebuah produk, jasa dan system. User
experience merupakan bentuk user dapat
merasakan kesenangan dan kepuasan dari
menggunakan sebuah produk, memegang atau
melihat produk tersebut, sedangkan UI dapat di
artikan tampilan untuk mempermudah kita
untuk berinteraksi dengan mesin. Contohnya
adalah pada saat kita akan mengambil uang di
mesin atm, disitu kita bisa melihat layar atm,
dan itu merupakan contoh dari UI. Sedangkan
contoh UX adalah langkah - langkah yang
berada di dalam mesin atm tersebut. User
Experience harus bisa memastikan apakah
langkah – langkah tersebut sudah mudah
digunakan pengguna dari semua kalangan atau
belum

1
 UI dan UX mempunyai peranan yang
sangat penting bagi kenyamanan user saat
berkunjung ke sebuah website. Jika user tidak
nyaman maka akan memberikan kesan yang
kurang bagus terhadap perusahaan atau instansi
tersebut.
Metode Design Thinking merupakan
metode kolaborasi yang mengumpulkan
banyak ide dari disiplin ilmu untuk
memperoleh sebuah solusi. Design Thinking
tidak hanya berfokus terhadap pada apa yang di
lihat dan di rasakan, namun juga berfokus pada
pengalaman pengguna (user). Design Thinking
digunakan untuk mencari solusi yang paling
efektif dan efisien untuk memecahkan suatu
masalah yang kompleks. Design Thinking
dibagi menjadi lima tahap yaitu, Emphatize,
Define, Idiate, Prototype, dan Test.
Website Kota Banjar merupakan sarana
informasi yang di dalamnya terdapat beberapa
kategori informasi, salah satunya informasi
covid, anggaran daerah, serta informasi dinas –
dinas yang ada di Kota Banjar. Jika merujuk
pada website Daerah Istimewa Yogyakarta
disana terdapat sangat banyak menu pelayanan
ataupun informasi warga, yang belum terdapat
di website Kota Banjar. Contohnya adalah
menu aduan, perizinan, kecamatan dan
kelurahan, cctv, lowongan kerja, dan lain - lain.
Menu – menu tersebut seharusnya sudah
menjadi standar informasi di setiap kota. Selain
itu tampilan website Kota Banjar juga sudah
tidak sesaui dengan trend saat ini dan ada
beberapa tulisan yang tidak konsisten.
Kondisi diatas harusnya sangatlah bisa
untuk diperbaiki agar tampilannya dapat
terlihat rapih dan nyaman untuk digunakan.
Metode Design Thinking sangatlah cocok
digunakan dalam me-redesign website Kota
Banjar, karena Design Thinking mempunyai
2
empati terhadap permasalahan dan masalah
yang berpusat pada manusia.
METODE PENELITIAN
Metode Penelitian ini menggunakan
metode Design THinking, Metode Design
Thinking ini merupakan langkah penting dalam
menganalisa UI dan UX website Kota Banjar.
Karena langkah ini sangat mempengaruhi
perancangan yang dibuat beserta
implementasinya. Kesalahan dan kurangnya
tahap ini dapat mengakibatkan kesalahan pada
perancangan warefame yang akan dibuat,
sehingga Analisa tidak dapat diiplementasikan
seperti yang diinginkan. Design Thinking
dibagi menjadi lima tahap yaitu, Emphatize,
Define, Idiate, Prototype,dan Test
HASIL DAN PEMBAHASAN
A. Web Usability Evaluation Tool
Pada tahap ini penulis menyebarkan
kuisioner Web Usability Evolution Tool
dengan jumlah sampel sebanyak 100 orang, di
dalam 100 orang tersebut terdapat karyawan
swasta, pegawai negri, mahasiswa, dan warga
Kota Banjar. Web Usability Evaluation Tool
digunakan untuk mengukur tingkat usability
pada sebuah website, sehingga dalam
melakukan penelitian lebih terfokus pada
website seperti apa yang diinginkan oleh user.
Tabulasi data ditunjukan pada table di bawah
ini.
Tabel 1 Nilai pertanyaan
Value Keterangan
0,0 Sangat Tidak Setuju
0,25 Tidak Setuju
0,5 Netral
0,75 Setuju
1 Sangat Setuju
Content, Organization, and Readability
X1 = Apakah kamu setuju dengan tampilan
website Kota Banjar saat ini?
X3 = Apakah website Kota Banjar sudah
memberikan informasi yang kamu butuhkan?
X4 = Apakah website Kota Banjar
memerlukan menu informasi tambahan?
X5 = Apakah website Kota Banjar sudah user
friendly?
X6 = Apakah website Kota Banjar perlu menu
informasi wisata?
X7 = Apakah website Kota Banjar perlu menu
informasi covid?
X8 = Apakah website Kota Banjar perlu menu
informasi kecamatan dan kelurahan?
X9 = Apakah webste Kota Banjar memerlukan
menu lowongan kerja?
X10 = Apakah website Kota Banjar
memerlukan fitur perizinan?
X11 = Apakah website Kota Banjar perlu
menu cctv?
X12 = Apakah website Kota Banjar perlu
menu informasi berita?
X13 = Apakah website Kota Banjar perlu
menu keterbukaan informasi?
X14 = Apakah website Kota Banjar perlu
menu peraturan perundangan?
X15 = Apakah website Kota Banjar perlu
menu transportasi?
X17 = Apakah website Kota Banjar butuh
menu kontak instansi?
Navigations and Link
X16 = Button harus dirubah menggunakan
Bahasa Indonesia agar X18 = terlihat
konsisten? Posisi menu pada website mudah
dicari saat ditelusuri
3
Design User Interface
X2 = Apakah kamu setuju website Kota
Banjar di redesign ulang?
X19 = Design tampilan website monoton dan
bosan untuk dilihat
X20 = Tampilan website cukup menggunakan
satu – dua warna saja
X21 = Menu “Kontak Instansi” sebaiknya
dibuat lebih menonjol
Performance and Effectiveness
X22 = Website dapat diakses kapanpun
X23 = Menu yang dipilih membutuhkan
loading time kurang dari 5 detik.
Tabel 1 Tabel tabulasi
1) Penentuan Acuan Standar Accessibility
(Kemudahan)
Tabel 2 Tabel standar acuan penilaian
Accessibility
Point Deskripsi
1 Dibutuhkannya Cara
Penanganan
2 Dibutuhkannya Metode
Penanganan
3 Adanya Petunjuk Teknis
4 Adanya Petunjuk Pelaksanaan
5 Adanya Teknologi dalam
Penanganan
6 Adanya Sarana dan Prasarana
 7 Adanya Kebijakan dan
Peraturan Pemerintah
8 Apakah merupakan Prioritas
Daerah/Nasional
9 Masalah yang diatasi
Mudah/Tidak
10 Besar/Kecilnya Suatu Masalah

Point Deskripsi
2) Penentuan Acuan Standar Readiness 1 Pengaruh kriteria 1 dengan
(Kesiapan) lainnya
2 Keuntungan sosial karena
Tabel 3 Tabel standar acuan penilaian Readiness selesainya masalah
3 Rasa prihatin masyarakat
Point Deskripsi terhadap masalah
1 Motivasi Tenaga Kerja 4 Akibat yang ditimbulkan dari
masalah
2 Kemampuan Tenaga Kerja
5 Kesadaran masyarakat terhadap
3 Keahlian Tenaga Kerja pentingnya masalah tersebut
6 Adanya dukungan
4 Kesiapan Sasaran politis/masyarakat
7 Kenaikan besarnya masalah
5 Kesiapan Tenaga Pelaksana
8 Apakah mengenai anak-anak atau
6 Apakah masyarakat dapat perempuan
menerima program yang diberikan 9 Masalah yang meningkatkan
status kesehatan
7 Apakah masyarakat 10 Mempunyai dampak besar
menginginkan/membutuhkan terhadap kematian
program tersebut
8 Apakah program dapat a. Berikan skor atau nilai untuk setiap
diimplementasi sesuai dengan masalah berdasarkan kriteria CARL (C x
ketentuan hukum dan peraturan A x R x L).
yang berlaku Pemberian skor ini bertujuan untuk
9 Masalah kesehatan yang paling mempermudah tahap penentuan prioritas,
rentan untuk intervensi dikarenakan pada tahap ini setiap masalah
akan diberikan penilaian berdasarkan tabel
10 Masalah yang belum pernah acuan yang sudah ditentukan sebelumnya.
disentuh/diintervensi 1) Penganiayaan Merugikan Orang Lain
Penganiayaan yang merugikan orang
lain masuk ke dalam Tingkatan Penganiayaan
3) Penentuan Acuan Standar Leverage
Biasa, di mana Korban mendapatkan luka
(Pengungkit)
ringan ataupun merugikan kegiatan sehari-
Tabel 4 Tabel standar acuan penilaian Leverage harinya, seperti bekerja, belajar, dan
melakukan aktivitas lainnya. Penganiayaan ini
mendapat ancaman pidana paling lama 2 tahun

4
 8 bulan, dengan denda sebanyak 4.500 rupiah.
Untuk pemberian skoring Capability
(Kemampuan) diberikan nilai 5, untuk
Accessibility (Kemudahan) diberikan nilai 9,
untuk Readiness (Kesiapan) diberikan nilai 4,
dan untuk Leverage (Pengungkit) diberikan
nilai 4. Perhitungan metode CARL = (5 x 9 x 4
x 4) = 720, total prioritas 10.
2) Penganiayaan Mengakibatkan Luka Berat
Penganiayaan yang mengakibatkan
luka berat ini masuk kedalam Tingkatan
Penganiayaan Biasa, korban yang mengalami
penganiayaan ini bisa mendapat luka serius
bahkan mengalami kecacatan fisik bahkan
mental. Pelaku yang melakukan akan mendapat
ancaman pidana 5 tahun penjara. Untuk skoring
Capability (Kemampuan) diberikan nilai 6,
untuk Accessibility (Kemudahan) diberikan
nilai 7, untuk Readiness (Kesiapan) diberikan
nilai 5, dan untuk Leverage (Pengungkit)
diberikan nilai 5. Perhitungan metode CARL =
(6 x 7 x 5 x 5) = 1050, total prioritas 8.
3) Penganiayaan Mengakibatkan Kematian
Penganiayaan ini mengakibatkan
korbannya mengalami kematian masuk ke
dalam penganiayaan biasa, pelaku yang
melakukan ini akan diancam pidana 7 tahun
penjara. Untuk skoring Capability
(Kemampuan) diberikan nilai 7, untuk
Accessibility (Kemudahan) diberikan nilai 6,
untuk Readiness (Kesiapan) diberikan nilai 8,
dan untuk Leverage (Pengungkit) diberikan
nilai 7. Perhitungan metode CARL = (7 x 6 x 8
x 7) = 2352, total prioritas 7.
4) Penganiayaan yang Tidak Menimbulkan
Penyakit
Penganiayaan yang tidak menimbulkan
penyakit masuk kedalam tingkatan
penganiayaan ringan, di mana korban tidak
merasakan luka dalam bentuk penyakit dan
tidak menghalangi kegiatan seseorang.
Ancaman dalam penganiayaan ini adalah
ancaman pidana selama 3 bulan, dan dengan
paling banyak 4.500 rupiah. Untuk skoring
Capability (Kemampuan) diberikan nilai 1,
untuk Accessibility (Kemudahan) diberikan
5
nilai 4, untuk Readiness (Kesiapan) diberikan
nilai 3, dan untuk Leverage (Pengungkit)
diberikan nilai 1. Perhitungan metode CARL =
(1 x 4 x 3 x 1) = 12, total prioritas 11.
5) Penganiayaan dengan Rencana
Penganiayaan ini dilakukan dengan
adanya rencana lebih dahulu, di mana pelaku
tidak langsung melakukan penganiayaan,
melainkan melakukannya dalam jangka
waktu tertentu yang telah ditentukan. Dalam
kasus ini, pelaku yang melakukan
penganiayaan berencana ini diancam dengan
pidana 4 tahun penjara. Untuk skoring
Capability (Kemampuan) diberikan nilai 5,
untuk Accessibility (Kemudahan) diberikan
nilai 5, untuk Readiness (Kesiapan)
diberikan nilai 6, dan untuk Leverage
(Pengungkit) diberikan nilai 6. Perhitungan
metode CARL = (5 x 5 x 6 x 6) = 900, total
prioritas 9.
6) Penganiayaan dengan Rencana
Mengakibatkan Luka Berat
Penganiayaan ini dilakukan dengan
rencana lebih dahulu juga, namun pada
penganiayaan ini korban mengalami luka
berat, sehingga mengganggu kegiatan serta
kesehatan dari korban. Pada penganiayaan
ini pelaku diancam dengan pidana 7 tahun
penjara. Untuk skoring Capability
(Kemampuan) diberikan nilai 7, untuk
Accessibility (Kemudahan) diberikan nilai 7,
untuk Readiness (Kesiapan) diberikan nilai
8, dan untuk Leverage (Pengungkit)
diberikan nilai 7. Perhitungan metode
CARL = (7 x 7 x 8 x 7) = 2744, total prioritas
6.
7) Penganiayaan dengan Rencana
Mengakibatkan Kematian
Penganiayaan dengan rencana dalam
kasus ini mengakibatkan kematian kepada
korban. Pelaku yang melakukan
penganiayaan ini mendapat ancaman pidana
9 tahun penjara. Untuk skoring Capability
(Kemampuan) diberikan nilai 7, untuk
 Accessibility (Kemudahan) diberikan nilai 8,11) Penganiayaan Berat Berencana Mengakibatkan
untuk Readiness (Kesiapan) diberikan nilai Kematian
7, dan untuk Leverage (Pengungkit) Penganiayaan Berat Berencana yang
diberikan nilai 10. Perhitungan metode mengakibatkan Kematian masuk kedalam
CARL = (7 x 8 x 7 x 10) = 3920, total Tingkatan Penganiayaan Berat Berencana, di
prioritas 4. mana Pelaku yang melakukannya akan dijerat
8) Penganiayaan dengan Sengaja Mengakibatkan 15 Tahun Penjara. Untuk pemberian skoring
Luka Berat Capability (Kemampuan) diberikan nilai 9,
Penganiayaan dengan sengaja melukai untuk Accessibility (Kemudahan) diberikan
orang lain, kesengajaan yang menyebabkan nilai 10, untuk Readiness (Kesiapan) diberikan
luka yang membahayakan nyawa korban, yang nilai 10, dan untuk Leverage (Pengungkit)
menyebabkan kerusakan pada badan, maupun diberikan nilai 10. Perhitungan metode CARL
luka serius. Penganiayan dengan sengaja ini = (9 x 10 x 10 x 10) = 9000, total prioritas 1.
diancam pidana 8 tahun penjara. Untuk skoring
Capability (Kemampuan) diberikan nilai 6, B. Hasil Analisis
untuk Accessibility (Kemudahan) diberikan
nilai 7, untuk Readiness (Kesiapan) diberikan Menentukan prioritas berdasarkan hasil
nilai 8, dan untuk Leverage (Pengungkit) ranking. Urutkan pemecahan masalah menurut
diberikan nilai 9. Perhitungan metode CARL = priotitasnya berdasarkan hasil yang diperoleh
(6 x 7 x 8 x 9) = 3024, total prioritas 5. pada langkah pertama.
9) Penganiayaan dengan Sengaja Mengakibatkan
Kematian
Penganiayaan dengan sengaja
mengakibatkan kematian masuk kedalam
tingkat penganiayaan berat, pelaku yang
melakukan penganiayaan ini akan diancam
dengan pidana 10 tahun penjara. Untuk skoring
Capability (Kemampuan) diberikan nilai 7,
untuk Accessibility (Kemudahan) diberikan
nilai 8, untuk Readiness (Kesiapan) diberikan
nilai 8, dan untuk Leverage (Pengungkit)
diberikan nilai 10. Perhitungan metode CARL
= (7 x 8 x 8 x 10) = 4480, total prioritas 3.
10) Penganiayaan Berat Berencana Mengakibatkan
Luka Berat
Penganiayaan berat ini dilakukan
dengan rencana terlebih dahulu, yang
mengakibatkan korban mengalami luka berat.
Pelaku yang melakukan ini akan diancam
dengan pidana 12 tahun penjara. Untuk skoring Gambar 2 Tabel total dan hasil prioritas
Capability (Kemampuan) diberikan nilai 7,
untuk Accessibility (Kemudahan) diberikan Berdasarkan hasil perhitungan analisis
nilai 8, untuk Readiness (Kesiapan) diberikan dari jenis kekerasan fisik menggunakan
nilai 9, dan untuk Leverage (Pengungkit) metode CARL didapatkan prioritas utama
diberikan nilai 9. Perhitungan metode CARL = pada masalah kekerasan fisik yaitu
(7 x 8 x 9 x 9) = 4536, total prioritas 2. Penganiayaan Berat Berencana
Mengakibatkan Kematian dengan total poin

6
 sebesar 9000. Di mana perhitungan untuk
Capability kasus ini mendapat 9 poin,
Accessibility mendapat 10 poin, Readiness
mendapat 10 poin, dan untuk Leverage
mendapat 10 poin.
KESIMPULAN DAN SARAN
A. Kesimpulan
1. Aplikasi SIANAKCERDAS berbasis
website dapat mempermudah pengelolaan
kegiatan maupun membantu pemantauan
pengaduan DPPPA Kota Bekasi agar bisa
berjalan dengan rutin dan terstruktur.
2. Aplikasi website yang dibuat dapat menjadi
sarana pertukaran informasi/data secara
realtime dan online antara Pengguna
(Pelapor dan Pelopor) dengan admin
DPPPA Kota Bekasi.
3. Aplikasi ini dapat menjadi alat bantu yang
dapat mempermudah DPPPA Kota Bekasi
melakukan pengambilan keputusan dalam
memprioritaskan serangkaian masalah
yang akan diselesaikan terlebih dahulu
serta teknik untuk menghasilkan nilai
prioritas.
4. Hasil kesimpulan dari penelitian ini adalah
sebagai berikut (a) Prioritas I dengan point
4.608 (C=9, A=8, R=8, L=8), (b) Prioritas
II dengan point 4.906 (C=8, A=8, R=8,
L=8) dan (c) Prioritas III dengan point
2.352 (C=8, A=6, R=7, L=7).
B. Saran
1. Berdasarkan Mengembangkan aplikasi
dengan berbasis mobile untuk
mempermudah dalam mengaksesnya.
2. Standar acuan penilaian CARL lebih
dispesifikasikan agar mendapatkan hasil
yang akurat.
3. Mengembangkan aplikasi dengan beberapa
metode pengambilan keputusan lainnya
untuk menambah pengetahuan.
7
DAFTAR PUSTAKA
[1] Erna Susanti, Erfanti Fatkhiyah, Endang
Efendi. (2019).Pengembangan UI/UX
Pada Aplikasi M-Voting Menggunakan
Metode Design Thinking
[2] Ardy Setiawan (2019). Rancang Bangun
Aplikasi Manajemen Klien pada Paris
(Parking Information System). Retrieved
from
http://repository.dinamika.ac.id/id/eprint/
1746/
[3] Gonzales, Robbie. (2017). “Figma Ingin
Desainer Berkolaborasi Dengan Gaya
Google-Dokumen”
[4] Vallendito, Barly. (2020). Pemodelan
User Interface dan User Experience
Menggunakan Design Thinking
[5] R. Arif Yudarmawan, A.A.Kompiang
Oka Sudana, Dewa Made Sri Arsa.
(2020). Perancangan User Interface dan
User Experience SIMRS pada Bagian
Layanan. Jurnal Ilmiah dan Komputer,
Vol 1.
[6] Genisshada Nabila, Stephanie, Sri
Wahyuni. (2022). Penerapan UI/UX
Dengan Metode Design Thinking Pada
Aplikasi Jaya Indah Perkasa
[7] Anita Putri Novitasari, Herman Tolleuci,
Hanifah Muslimah Az-Zahra. (2019).
Evaluasi dan Perancangan User Interface
untuk Meningkatkan User Experience
 Menggunakan Metode Human-Centered
Design dan Heuristic Evalution Pada
Aplikasi Ezypos. Jurnal Pengembangan
Teknologi Informasi dan Ilmu Komputer.
Vol 3, 1733-1740.

[8] Dwinawan Hariwijaya. (2017). Apa

Fungsi UI Design? Apa Fungsung UI
Design di kehidupan kita? dan kapan kita
menggunakannya.
https://www.dwinawan.com/basic-
introduction

[9] Kelley, D., & Brown, T. (2018). An

introduction to Design Thinking Institute
of Design at Standford.
doi:https://doi.org/10.1027/2151-
2604/a000142

[10 Tasya Junita Maulani, Suprapto, Andi

] Reza Perdana Kusuma. (2021). Evaluasi
User Experience (UEQ) (Studi Kasus:
Website Superprof.co.id dan
Zonaprivat.com).Jurnal Pengembangan
Teknologi Informasi dan Ilmu Komputer,
vol. 5. 2639-2645.