## ANALISA PENGALAMAN PENGGUNA UNTUK PENGEMBANGAN UI/UX APLIKASI ABC MOBILE MENGGUNAKAN METODE USER CENTERED DESIGN

## Jilan Azzahra Salsabila, Anang Pramono
Teknik Informatika, Universitas 17 Agustus 1945 Surabaya Jalan Semolowaru No.45, Sukolilo Surabaya, Jawa Timur, Indonesia azzahrajilansalsabila@gmail. com anangpramana@untag-sby.ac.id

## ABSTRAK
Aplikasi  Mobile  Banking,  termasuk  aplikasi  ABC  Mobile,  telah  menjadi  pilihan  utama  bagi  banyak pelanggan  di  Indonesia,  dengan  jumlah  pengguna  yang  melampaui  27,2  juta  hingga  Mei  2023.  Namun, berdasarkan kuisioner System Usability Scale (SUS), rata-rata skor kepuasan pengguna hanya  mencapai 69,93 dari  35  responden,  menunjukkan  adanya  peluang  untuk  meningkatkan  kemudahan  penggunaan  dan  kepuasan pengguna. Penelitian ini bertujuan untuk meningkatkan tampilan dan pengalaman pengguna melalui pendekatan User  Centered  Design  (UCD)  dan  A/B  testing.  Tahapan  perancangan  dimulai  dengan  memahami  konteks pengguna,  mengidentifikasi  kebutuhan  pengguna,  merancang  solusi  desain,  dan  mengevaluasi  desain  terhadap kebutuhan  pengguna.  Setelah  perancangan,  pengujian  dilakukan  menggunakan  metode  A/B  testing  dan  SUS. Hasil  pengujian  menunjukkan  bahwa  desain  Purwarupa  A  dan  B  mayoritas  dipilih  oleh  responden,  dengan preferensi  signifikan  terhadap  Opsi  2.  Penilaian  SUS  pada  tahap  akhir  pengujian  menunjukkan  peningkatan signifikan dalam kualitas aplikasi, dengan skor rata-rata meningkat dari 69,93 pada tahap awal pengujian menjadi 88,57 pada tahap akhir pengujian. Kesimpulannya, perubahan tampilan UI/UX aplikasi ABC Mobile telah berhasil meningkatkan usability dan kepuasan pengguna.
Kata kunci :  Perancangan Ulang, ABC Mobile, System Usability Scale, A/B testing, User Centered Design

## 1. PENDAHULUAN
Aplikasi Mobile Banking dari  bank-bank terkemuka di Indonesia memungkinkan nasabah untuk melakukan  transaksi  perbankan  secara online ,  tanpa perlu kunjungan ke kantor bank fisik [1].
Dengan fungsionalitas yang mirip dengan ATM, nasabah  dapat  melakukan  pengecekan  rekening, mentransfer  dana  antar  rekening,  dan  membayar tagihan  bulanan  seperti  listrik  dan  telepon  melalui aplikasi Mobile Banking , yang menawarkan fungsionalitas serupa dengan ATM [2].
Penampilan  aplikasi mobile sangat  penting karena desain user interface adalah elemen kunci yang menentukan pengalaman pengguna [3].
Kualitas  UI  memainkan  peran  penting  dalam mempertahankan  pengguna  dan  menarik  pelanggan baru,  sementara user experience berkaitan  dengan kesan  dan  perasaan  pengguna  saat  menggunakan produk atau layanan. [4].
Berdasarkan  analisis  kuisioner System  Usability Scale  (SUS), skor  rata-rata  adalah  69,93  dari  35 responden.  Direktur  Jaringan  dan  Layanan  bank, Andrijanto,  melaporkan  bahwa  aplikasi  ABC Mobile telah digunakan oleh lebih dari 27,2 juta pengguna per 31 Mei 2023. Data ini mengindikasikan potensi untuk meningkatkan  kemudahan  penggunaan,  kepuasan pengguna,  dan  antarmuka  pengguna  pada  aplikasi ABC Mobile . Meskipun  penggunaan  aplikasi  ABC Mobile terus meningkat, ada tantangan besar terkait kepuasan pengguna dan efektivitas antarmuka. Beberapa bagian atau  fitur  UI/UX  mungkin  belum  sepenuhnya memuaskan pengguna. Oleh karena itu, ada kebutuhan
untuk meningkatkan elemen-elemen atau fitur tertentu agar lebih sesuai dengan preferensi pengguna. Dengan demikian,  penelitian  ini  bertujuan  untuk  merancang ulang aspek UI/UX dari aplikasi ABC Mobile dengan tujuan  meningkatkan  pengalaman  pengguna  dan memastikan kepuasan mereka.
Untuk  mencapai  tujuan  tersebut,  penelitian  ini memanfaatkan  pendekatan User Centered Design (UCD). UCD adalah suatu metode desain yang  fokus pada  kebutuhan  dan  preferensi  pengguna  untuk menciptakan produk yang memuaskan bagi penggunan [5].
Pendekatan  ini  memiliki  keunggulan  dalam fokusnya pada desain yang terkait dengan pemahaman yang mendalam tentang pengguna serta analisis yang menyeluruh  terhadap  karakteristik  dan  perilaku spesifik pengguna [6].
Pemilihan  pendekatan User Centered Design (UCD)  sebagai  metode  utama  dalam  melakukan redesign  aplikasi  ABC Mobile didasarkan  pada keutamaan  terhadap  kebutuhan  dan  profil  pengguna [7].  UCD  menempatkan  perhatian  pada  pengguna, memastikan desain yang optimal, melibatkan pengujian  pengguna  sejak  awal,  dan  menerapkan desain  interaktif  untuk  mencapai  tampilan  dan fungsionalitas dengan nilai usability yang tinggi [8].
2. TINJAUAN PUSTAKA Tinjauan pustaka dalam penelitian ini menguraikan konsep-konsep terkait desain antarmuka aplikasi perbankan mobile dan pengalaman pengguna, yang menjadi dasar teori penelitian.
2.1. Mobile Banking
Mobile banking adalah  layanan perbankan  yang dapat  diakses  melalui  jaringan  seluler  GSM  atau CDMA  menggunakan  layanan  data  dari  operator seperti  Telkomsel  dan  Indosat.  Dengan mobile banking, nasabah dapat melakukan transaksi perbankan  kapan  saja  dan  di  mana  saja  melalui smartphone tanpa harus mengunjungi bank atau ATM [9].
2.2. User Interface (UI) User Interface (UI) adalah elemen yang didesain untuk  menjadi  interaksi  melalui  layar  tampilan  pada perangkat  yang  sedang  digunakan  [10].  Untuk menciptakan UI yang efektif langkah awal melibatkan pembuatan wireframe , mockup , dan prototype [11].

## 2.3. User Experience (UX)
Menurut  standar  internasional User Experience (UX) adalah persepsi dan tanggapan individu terhadap produk,  sistem,  atau  layanan  yang  digunakan  [12]. Untuk  mengukur  user  experience  produk,  ada beberapa  kategori  penilaian.  Pertama,  evaluasi perbaikan  berkelanjutan  pada  pengalaman  pengguna dari  versi  terbaru  produk.  Kedua,  perbandingan langsung  dengan  pesaing  di  pasar.  Selanjutnya, pengujian  untuk  menilai  apakah  produk  memenuhi standar  pengalaman  pengguna  yang  diinginkan. Terakhir,  menentukan  area  mana  yang  memerlukan perbaikan lebih lanjut [13].

## 2.4. Redesign
Redesign  UI adalah  proses  untuk  memperbaiki desain  yang  sudah  ada  dengan  tujuan  meningkatkan performa aplikasi dan pengalaman pengguna [4].

## 2.5. User Centered Desugn (UCD)
User Centered Design (UCD) adalah pendekatan pengembangan  sistem  interaktif  yang  berfokus  pada penyediaan pengalaman pengguna yang baik [14].

## Gambar 1. Alur Metode UCD
Tahapan User Centered Design terdiri dari empat bagian.  Pertama,  " Understand  Context  of  Use " mengumpulkan  informasi  mendalam  tentang  calon pengguna.  Kedua,  " Specify  User  Requirements " mengidentifikasi  kebutuhan  pengguna  yang  relevan dengan bisnis. Ketiga, " Design Solution " mengembangkan solusi berdasarkan kebutuhan pengguna,  mulai  dari  konsep  hingga  desain  final. Terakhir, " Evaluate Against Requirements " melibatkan  pengguna  untuk  mengevaluasi  setiap proses aplikasi. [15].
2.6. A/B Testing A/B Testing adalah metode membandingkan dua produk,  layanan,  atau  fitur  untuk  menentukan  yang lebih efektif [16]. Metode ini digunakan untuk menguji berbagai aspek desain seperti warna, teks, gambar, tata letak, dan elemen lainnya, dengan tujuan meningkatkan kinerja aplikasi.
Gambar 2. Tahap pengujian A/B Testing Tahapan pengujian A/B Testing dimulai dengan “ Determine Conversion Improve” yaitu mengidentifikasi  parameter  konversi  yang  perlu ditingkatkan,  seperti  pengisian  formulir  atau  proses pembelian.  Kemudian  “ Hypothesize  Change” ,  yaitu merumuskan hipotesis berdasarkan studi literatur dan pemahaman tentang pengguna untuk mengembangkan variasi  desain  A  dan  B.  Selanjutnya  “ Identify  the Variables  and  Create  Variation ”,  dimana  elemen- elemen yang akan diubah diidentifikasi, dan variasi A dan  B  dibuat  untuk  menguji  dampaknya  terhadap konversi. “ Run Experiment ” atau pengujian dilakukan dengan membandingkan versi kontrol (A) dan variasi (B) pada dua kelompok pengguna untuk mengumpulkan data hasil konversi. Terakhir “ Measure  Result ”  yaitu  melakukan  pengukuran  dan analisis data untuk mengevaluasi kinerja kedua versi, serta  menilai  dampak  perubahan  terhadap  konversi, dengan menggunakan analisis statistik untuk mendukung pengambilan keputusan terkait desain.

## 2.7. System Usability Scale (SUS)
System  Usability  Scale  (SUS) adalah  alat pengujian  usability  yang  dikembangkan  oleh  Brooke pada 1986. SUS terdiri dari sepuluh pertanyaan dengan skala  lima  pilihan  jawaban,  dari  sangat  tidak  setuju hingga  sangat  setuju,  dengan  skala  penilaian  dari  0 hingga 10 [17].
Table 1. Pertanyaan SUS
No Pertanyaan
1 Saya berfikir akan menggunakan sistem ini lagi.
2 Saya merasa sistem ini rumit.
3 Saya merasa sistem ini mudah digunakan.
4 Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakn sistem ini.
5 Saya merasa fitur-fitur sistem ini berjalan dengan semestinya
6 Saya merasa ada banyak hal yang tidak konsisten (tidak serasi pada sistem ini).
No Pertanyaan
7 Saya merasa orang lain akan memahami cara menggunakan sistem ini dengan cepat.
No Pertanyaan 8 Saya merasa sistem ini membingungkan.
9 Saya merasa tidak ada hambatan dalam menggunakan sistem ini.
10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini.
Berikut  adalah  ketentuan  skor  SUS  dari System Usability Scale (SUS) berdasarkan kuartil, nilai huruf, kata sifat, dan penerimaan skor secara umum.
Gambar 3. Skor Penilaian SUS

## 3. METODE PENELITIAN
Gambar 4. Tahapan Penelitian
Berikut  adalah  penjelasan  tentang  langkah- langkah  pelaksanaan  dalam  proses  penelitian  dan perancangan penelitian yang dilakukan.

## 3.1. Tinjauan Pustaka
Dalam  tahap  ini,  berbagai  sumber  referensi seperti  jurnal  ilmiah,  artikel,  buku,  dan  dokumentasi
terkait  akan  dianalisis  secara  mendalam  untuk memahami  desain  UI/UX,  aplikasi  perbankan  ABC Mobile, dan teknologinya.

## 3.2. Understand Context of Use
Tahap  ini  melibatkan  pengamatan  perilaku pengguna  untuk  memahami  karakteristik  mereka, dengan  data  yang  diperoleh  dari  kuesioner  dan observasi, kemudian disusun dalam " Affinity Diagram ".
a. Menentukan Calon Pengguna Calon  pengguna  ditentukan  melaui  karakteristik berikut. Table 2. Ketentuan Calon Pengguna Kriteria Keterangan Demografik Laki – Laki atau Perempuan dengan usia 18 sampai dengan 50 tahun keatas Geografis Tinggal di Pulau Jawa dan Luar Pulau Jawa Psikografis Pengguna internet dan perangkat bergerak Perilaku Pengguna aktif aplikasi ABC Mobile b. Observasi Observasi dilakukan dengan mengamati permasalahan experience pengguna di Playstore .
Gambar 5. Review Playstore 3.3. Specify User Requirement Pada tahap ini, kebutuhan pengguna diidentifikasi  berdasarkan  data  dan  informasi  dari kuesioner untuk memperbaiki aplikasi ABC Mobile . Table 3. Daftar Pertanyaan Redesign Kategori Pertanyaan Kebiasaan User Ketika Menggunakan ABC Mobile Apakah anda seorang pengguna aplikasi ABC Mobile ?
Berapa lama anda menggunakan aplikasi ABC Mobile ? Selain ABC Mobile apakah kamu menggunakan Mobile Banking lain? Tujuan dan haparan User ketika menggunakan aplikasi ABC Mobile Untuk keperluan apa saja kamu menggunakan aplikasi ABC Mobile ? Saat Menggunakan aplikasi ABC
Mobile , fitur apa saja yang sangat membantu kamu?
Apakah kamu pernah memiliki kendala saat menggunakan ABC Mobile ?
Jika ada, coba jelaskan, kendala seperti apa yang dialami?
Menurut kamu fitur apa saja yang membuat kamu merasa terganggu? Apa harapan kamu saat menggunakan ABC Mobile untuk kedepannya
Kategori Pertanyaan Jika Anda diberi kesempatan untuk memperbaiki desain aplikasi ABC Mobile berdasarkan pengalaman Anda, apa yang ingin Anda ubah atau perbaiki dari kesalahan yang pernah Anda alami saat menggunakan aplikasi tersebut? Jika ada, coba jelaskan, kendala seperti apa yang dialami? Menurut kamu fitur apa saja yang membuat kamu merasa terganggu?
Setelah  mendapatkan  hasil  kuesioner,  langkah selanjutnya  adalah  menganalisis  respon  pengguna untuk  mengidentifikasi  kebutuhan  dan  keluhan mereka. Kebutuhan pengguna meliputi keinginan dan kebutuhan  yang  terungkap,  sementara  keluhan pengguna  mencakup  masalah  atau  kesulitan  yang mereka alami saat menggunakan aplikasi.
Table 4. Daftar Kebutuhan dan Keluhan Pengguna
No Kebutuhan Pengguna
1 Menambahkan foto profil pengguna dan kemampuan untuk mengganti foto profil melalui pengaturan aplikasi
2 Menambahkan fitur pilih tema, seperti tema terang dan gelap, pada pengaturan aplikasi
3 Tampilan catatan keuangan pada bagian laporan perlu diperbaiki agar mudah dipahami pengguna.
4 Menambahkan opsi login menggunakan fingerprint dan face ID di halaman login
5 Menyederhanakan tampilan catatan keuangan dan promo di beranda aplikasi serta meningkatkan akurasi catatan keuangan
6 Menambahkan opsi pembatalan transaksi untuk memperbaiki kesalahan seperti kesalahan pada nomor rekening atau sejenisnya.
7 Memperbaiki halaman input PIN dengan menambahkan tombol konfirmasi untuk pengecekan kembali nomor rekening
8 Tombol navigasi memiliki warna yang terlalu pudar, tampilan yang terlalu sederhana dan tombolnya terlalu kecil.
9 Fitur pada daftar penerima transfer kurang menarik
10 Saat mengirim uang, notifikasi atau pemberitahuan di aplikasi tidak muncul dan tidak tercatat di catatan keuangan pengeluaran.
11 Sistem keamanan lemah
12 Proses transaksi sering tertunda
13 Aplikasi tidak bisa digunakan saat kehabisan pulsa data dan mendadak ada keperluan mendesak
14 Saldo berkurang tetapi keterangan transfer masih dalam proses
15 Saat username terblokir
16 Fitur sidik jari yang menghilang dari aplikasi
17 Memungkinkan aplikasi diakses tidak hanya menggunakan pulsa data, tetapi juga pulsa biasa
18 Saat jaringan jelek atau kurang bagus transaksi yang dilakukan akan langsung dibatalkan atau tiba
- tiba keluar dari aplikasi
19 Terkadang tidak bisa masuk ke aplikasi di saat jaringan bagus
No Kebutuhan Pengguna 20 Kendala Jaringan sehingga tidak dapat login atau masuk ke aplikasi
21 Catatan keuangan terkadang tidak akurat 22 Saat melakukan transfer, bagian input PIN seharusnya tidak langsung memproses transaksi secara otomatis. Sebaiknya, terdapat pilihan konfirmasi terlebih dahulu untuk memastikan apakah pengirim yakin ingin melanjutkan transaksi.
23 terkadang saat dibutuhkan aplikasinya tidak bisa digunakan
Pada tahap ini, dilakukan pemetaan masukan dari pengguna  untuk  mengidentifikasi  kekurangan  dan kebutuhan  dalam  aplikasi  ABC Mobile . Affinity diagram disusun berdasarkan tanggapan dari kuesioner yang disebarkan melalui Google Form serta hasil observasi.
Gambar 6. Affinity Diagram

## 3.4. Design Solution
Pada  langkah  ini,  dilakukan  proses redesign aplikasi  ABC Mobile dengan  mempertimbangkan solusi  untuk  masalah  dan  kebutuhan  dari  periode sebelumnya.  Proses  desain  meliputi  pembuatan flowchart, wireframe , mockup , dan prototype .
3.5. Flowchart Sistem
a. Flowchart Sistem Register
Gambar 7. Flowchart Register
b. Flowchart Sistem Login
Gambar 8. Flowchart Login
c. Flowchart Sistem Catatan Keuangan
Gambar 9. Flowchart Catatan Keuangan
d. Flowchart Sistem Transaksi
e. Flowchart Sistem Promo
Gambar 11. Flowchart Promo f. Flowchart Sistem Akun (Profil dan Tema)
Gambar 12. Flowchart Akun

## 3.6. Wireframe
Dalam  pengembangan  desain  ulang  UI/UX aplikasi  ABC Mobile ,  wireframe  dapat  memberikan gambaran awal tentang tata letak fitur – fitur penting, sebagai berikut:
Gambar 13. Wireframe Aplikasi ABC Mobile

## 3.7. Evalute Against Requirements
Pada tahap ini, peneliti akan menguji desain yang dibuat  menggunakan  metode System  Usability  Scale (SUS) dan A/B  testing untuk  membandingkan  desain awal dengan desain setelah proses redesign . Pengujian dilakukan  dua  kali  untuk  mengidentifikasi  masalah dalam  aplikasi  ABC Mobile dari  berbagai  perspektif pengguna, sehingga memungkinkan evaluasi menyeluruh  terhadap  pengalaman  pengguna  dan faktor-faktor yang memengaruhinya.

## 4. HASIL DAN PEMBAHASAN
Sebelum  menerbitkan  prototipe  desain  dari Figma  untuk  pengujian  menggunakan  Maze.co, langkah awalnya adalah menentukan tugas yang akan diuji.

## 4.1. Desain  Purwarupa  Aplikasi  ABC  Mobile Tahap 1
Desain ini dibuat berdasarkan masukan pengguna sebelum  diuji  dalam affinity diagram .  Aplikasi  ABC Mobile  mengalami  perubahan  signifikan  pada beberapa fitur kunci, termasuk penambahan opsi login menggunakan Fingerprint atau Face ID pada Gambar 14,  memberikan  fleksibilitas  tambahan  kepada pengguna.
Gambar 14. Desain Purwarupa Login Tahap 1
Di  Gambar  15,  desain  purwarupa  halaman beranda ditingkatkan dengan menambahkan fitur foto profil  pengguna,  catatan  keuangan,  dan  promo  yang disajikan  melalui  tombol switch ,  serta  melakukan penyesuaian pada tampilan tombol navigasi.
Gambar 15. Desain Purwarupa Beranda Tahap 1
Pada  Gambar  16,  desain  purwarupa  halaman transfer mengalami perubahan dengan tampilan input PIN  yang  disesuaikan  dan  penambahan  pesan konfirmasi sebelum pengguna memasukkan PIN.
Gambar 16. Desain Purwarupa Transfer tahap 1
Gambar  17  menampilkan  desain  purwarupa halaman  akun  pengguna  dengan  penambahan  fitur pengaturan profil dan tema.
Gambar 17. Desain Akun Pengguna Tahap 1
Gambar  18,  menampulkan  tampilan  rancangan awal  dari  halaman  akun  pengguna,  yang  memuat
berbagai  pilihan  kolom.  Pengguna  diberi  opsi  untuk memilih  menu  tertentu,  misalnya  menu  profil  atau tema, yang akan membawa mereka ke halaman terkait, seperti yang ditampilkan di sebelah kanan gambar.
Gambar 18. Desain Purwarupa Tambah Profil Tahap 1
Desain  prototipe  tema  ini  dibuat  berdasarkan masukan  dan  saran  dari  pengguna  yang  dianalisis melalui  affinity  diagram.  Untuk  mengubah  tema, pengguna  dapat  memilih  opsi  "Tema"  pada  halaman profil dan tema, lalu memilih antara tema terang atau tema gelap, seperti yang ditunjukkan pada Gambar 19.
Gambar 19. Desain Purwarupa Ubah Tema Tahap 1
4.2. Hasil Pengujian A/B Testing
a. Determine Conversion to Improve
Pada  tahap  ini,  data  dikumpulkan  melalui kuesioner Google Form untuk mendapatkan feedback dari  35  pengguna  setelah  mereka  menguji  desain prototipe interaktif menggunakan Maze.co.

## Table 5 Feedback Setelah Uji Tahap 1
No

## Feedback Pengguna
1 Fitur promo dipindiahkan ke bagian bawah catatan keuangan dibandingkan disamping.
2 Warna tampilan catatan keuangan di tema gelap di samakan dengan warna pada tema terang.
3 Tampilan pada halaman konfirmasi di ubah karena masih sama dengan yang lama, yang membedakan hanya tambahan foto profil pengguna.
4 Ukuran teks pada halaman tambah penerima baru terlalu kecil dan susah di tekan.
5 Tampilan akun diperbaiki lagi desainnya agar menarik.
6
Lebih bagus jika halaman penambahan profil pengguna bisa di klik langsung pada profil untuk melihat atau menambahkan profil pengguna seperti yang ada pada WhatsApp, hal ini akan mempermudah pengguna.
7 Pada tampilan transaksi di tema gelap, ukuran dan ketebalan angka nya dibuat lebih besar dan
warnanya dibedakan dengan yang lain.
b. Hypothesieze Change
Pada tahap ini, desain antarmuka pengguna akan diperbaiki berdasarkan analisis feedback sebelumnya, yang  menghasilkan perubahan dari purwarupa desain A menjadi desain B.
c. Identify the Variables and Create Variation Pada  tahap  ini,  desain  direvisi  berdasarkan umpan balik pengguna dari pengujian Tahap 2 (Desain B).  Pengujian  menggunakan  Maze.co  dan  Google Form dengan skenario pengujian tertentu.
Table 6 Skenario Pengujian TASK DESKRIPSI PENGUJIAN Task 1 Login degan fingerprint dan face id. Task 2 Halaman Promo dan Catatan Keuangan.
Task 3 Menambahkan foto profil pengguna.
Task 4 Mengubah Tema Aplikasi dari Terang ke Gelap. Task 5 Melakukan Transaksi/Transfer. Task 6 Periksa daftar penerima yang telah tersimpan. d. Run Experiment
Pengujian prototype menggunakan  Maze.co mencatat  interaksi  peserta  dan  menghitung  setiap gerakan  untuk  mengevaluasi  kinerja.  Dilakukan  dua kali  untuk  membandingkan  kecepatan  penyelesaian perintah pengguna sebelum dan setelah perubahan.
1) Hasil  Akhir  Pengujian  Efisiensi  Tahap  1  dan Tahap 2
Table 7 Hasil Uji Efisiensi Tahap 1 dan 2 Uji T1 T2 T3 T4 T5 T6 Taha p 1 71,4 % 57,1 % 62,8 % 57,1 % 40% 62,8 % Taha p 2 82,8 % 82,8 % 74,3 % 62,8 % 71,4 % 85,7 %
Berdasarkan  hasil  tabel,  terjadi  peningkatan signifikan dalam persentase pengguna yang menyelesaikan  tugas  lebih  cepat  antara  Uji  Tahap  1 dan  Uji  Tahap  2.  Task  1  meningkat  dari  71,4% menjadi 82,8%, Task 2 dari 57,1% menjadi 82,8%, dan Task  3  dari  62,8%  menjadi  74,3%,  menunjukkan bahwa  pengguna  dapat  login  lebih  cepat  dan menyelesaikan  tugas  dengan  lebih  mudah  di  tahap kedua. Task 4 meningkat dari 57,1% menjadi 62,8%, Task  5  dari  40%  menjadi  71,4%,  dan  Task  6  dari 62,8% menjadi 85,7%, menunjukkan perbaikan besar dalam antarmuka dan pemahaman pengguna.
2) Hasil Akhir Penilaian System Usability Scale Table 8 Hasil Akhir SystemUsability Scale Sebelum Uji Tahap 1 Tahap 2 69,93 80,71 88,57
Pada  penilaian System  Usability  Scale  (SUS) sebelum aplikasi didesain ulang, skor rata-rata adalah 69,93  dengan  nilai  C,  menunjukkan  kualitas  " Good " dan  tingkat  penerimaan  "Marginal."  Setelah  aplikasi diredesain  berdasarkan  masukan  pengguna  dan  diuji pada  tahap  pertama,  skor  meningkat  menjadi  80,71 dengan nilai B, menunjukkan kualitas " Excellent " dan tingkat penerimaan " Acceptable ." Terjadi peningkatan sebesar 10,78 poin dari tahap sebelumnya. Pada tahap akhir pengujian, setelah perbaikan desain berdasarkan umpan  balik  dari  tahap  pertama,  skor  rata-rata mencapai 88,57 dengan nilai A, menunjukkan kualitas " Best Imaginable " dan tingkat penerimaan " Acceptable ."  Terjadi  peningkatan  signifikan  sebesar 7,86 poin dari tahap pertama.
e. Measure Result
Pada  tahap  ini  dilakukan uji  A/B  Testing untuk membandingkan dua versi desain visual aplikasi ABC Mobile setelah redesign menggunakan  Google  Form untuk menyebarkan kuesioner perbandingan.
Table 9 Hasil Uji Desain Purwarupa No Opsi Persentase Pilihan Responden 1 Opsi 1 3 8,6% Opsi 2 32 91,4% 2 Opsi 1 0 0 Opsi 2 35 100% 3 Opsi 1 1 2,9% Opsi 2 34 97,1% 4 Opsi 1 1 2,9% Opsi 2 34 97,1% 5 Opsi 1 0 0 Opsi 2 35 100% 6 Opsi 1 0 0 Opsi 2 35 100% 7 Opsi 1 0 0 Opsi 2 35 100% 8 Opsi 1 13 37,1% Opsi 2 22 62,9% 9 Opsi 1 0 0 Opsi 2 35 100% Tahap terakhir adalah evaluasi desain menggunakan  metode A/B  Testing dan System Usability Scale pada 35 pengguna aktif aplikasi ABC Mobile ,  yang  menunjukkan  peningkatan  signifikan dalam skor kegunaan aplikasi. Detail hasil desain akhir purwarupa  aplikasi  ABC Mobile dapat  ditemukan  di sub bab 4.3.

## 4.3. Perbandingan  Desain  Purwarupa  Awal  dan Akhir Aplikasi ABC Mobile
Berikut  adalah  perbandingan  desain  purwarupa interaktif  sebelum  dan  setelah  proses redesign yang telah melalui dua tahap pengujian.
a. Desain Purwarupa Halaman Login Setelah  proses redesign ,  terjadi  perubahan  pada tampilan  halaman  login  dengan  penambahan  tombol menu untuk memilih login menggunakan face ID atau fingerprint , seperti yang ditunjukkan pada Gambar 20.

## SEBELUM SETELAH
Gambar 20. Perbandingan Sebelum dan Seteleh Redesign Halaman Login
b. Desain Purwarupa Halaman Beranda
Setelah redesign ,  halaman  beranda  mengalami perubahan pada tampilan ringkasan catatan keuangan, appbar,  dan  navigasi  bar.  Perbandingan  tampilan halaman  beranda  sebelum dan setelah redesign dapat dilihat pada Gambar 21.

## SEBELUM SETELAH
Gambar 21. Perbandingan Sebelum dan Setelah Redesign Halaman Beranda
c. Desain Purwarupa Halaman Catatan Keuangan Desain  tampilan  pada  catatan  keuangan  telah diperbarui,  mencakup  bagian  pengeluaran,  laporan, dan  pemasukan.  Di  bagian  laporan  Gambar  22, tampilannya mirip dengan ringkasan catatan keuangan di beranda aplikasi setelah redesign . Tujuannya adalah untuk  mempermudah  akses  dan  analisis  pengguna terhadap  tren  keuangan  dalam  periode  yang  lebih lama.

## SEBELUM SETELAH
Gambar 22. Perbandingan Sebelum dan Setelah

## Redesign Halaman Laporan Keuangan
SEBELUM

## SETELAH
Gambar 23. Perbandingan Sebelum dan Setelah Redesign Halaman Pemasukan dan Pengeluaran
Sebelum redesign ,  catatan  keuangan  untuk pengeluaran  dan  pemasukan  terlihat  dipisahkan  oleh garis,  yang  membuatnya  kurang  menarik  dan  sulit dibedakan.  Setelah redesign ,  catatan  ini  diperbarui dengan  memisahkan  setiap  entri  menggunakan  kotak atau kontainer, seperti yang terlihat pada bagian kanan gambar.
d. Desain Purwarupa Halaman Transafer
Desain  tampilan  pada  halaman  transfer  telah diperbarui, mencakup bagian daftar tersimpan, tambah penerima  baru,  daftar  bank,  input  nominal  transaksi, bagian  konfirmasi,  dan  halaman  input  PIN.  Setelah redesign ,  Gambar  24  menunjukkan  perubahan  pada daftar  transfer  terakhir  dan  daftar  tersimpan. Sebelumnya,  daftar  transfer  terakhir  memisahkan informasi  penerima  dalam  kotak  terpisah  dengan singkatan nama dalam lingkaran, serta menu titik-tiga yang  membingungkan.  Daftar  tersimpan  memiliki tampilan serupa, namun lebih sederhana.
Setelah  perancangan  ulang,  informasi  penerima ditampilkan  dalam  satu  kotak  yang  lebih  rapi  dan mudah  dibaca,  dengan  singkatan  nama  yang  lebih kontras. Profil pengguna kini diposisikan di atas foto, dengan  nama  dan  nomor  rekening  di  bawah  foto. Daftar  tersimpan  menggunakan  kotak  dengan  opsi "pilih" untuk memilih penerima transaksi. Menu titik- tiga  diperbarui  untuk  akses  langsung  ke  edit,  hapus, dan tandai sebagai favorit, meningkatkan kemudahan pengguna.

## SEBELUM SETELAH
Gambar 24. Perbandingan Sebelum dan Setelah

## Redesign Halaman Daftar Tersimpan

## SEBELUM SETELAH
Gambar 25. Perbandingan Sebelum dan Setelah Redesign Halaman Tambah Penerima Baru
Gambar  25  menunjukkan  desain  halaman penerima sebelum redesign dengan teks dan ikon yang terlalu  kecil,  sulit  dibaca  dan  ditekan.  Setelah menganalisis masukan pengguna, ukuran teks dan ikon diperbesar pada hasil redesign yang dapat dilihat pada Gambar 25.

## SEBELUM SETELAH

## Gambar 26. Perbandingan Sebelum dan Setelah
Redesign Halaman Daftar Bank
Gambar 26 di sebelah kiri menunjukkan tampilan awal halaman daftar bank, dengan garis pemisah yang sulit untuk diklik oleh pengguna dalam memilih bank. Dalam  perancangan  ulang,  setiap  nama  bank dipisahkan  dalam  kotak  tersendiri,  memungkinkan pengguna  untuk  langsung  mengkliknya,  seperti  yang terlihat pada gambar di sebelah kanan.

## SEBELUM SETELAH
Gambar 27. Perbandingan Sebelum dan Setelah Redesign Halaman Input Nominal Transaksi
Gambar  27  menunjukkan  perubahan  signifikan dalam  tampilan  aplikasi  sebelum  dan  setelah perancangan ulang, termasuk penyesuaian warna latar belakang dan pengelompokan kategori untuk meningkatkan  daya  tarik  visual  dan  pengalaman pengguna berdasarkan umpan balik pengguna.
Gambar  28  menampilkan  perubahan  pada Gambar  28  menunjukkan  perubahan  pada  halaman konfirmasi  sebelum  dan  setelah  perancangan  ulang. Sebelumnya dianggap kurang menarik, namun setelah mendapat  umpan  balik  pengguna,  tampilannya diperbarui dengan pesan konfirmasi untuk memeriksa kembali  data  transaksi  sebelum  melanjutkan  atau membatalkan  transaksi.  Perubahan  ini  meningkatkan kepastian,  keamanan,  dan  kenyamanan  penggunaan aplikasi.

## SEBELUM SETELAH
Gambar 28. Perbandingan Sebelum dan Setelah Redesign Halaman Konfimrasi
Gambar  29  menunjukkan  perubahan  pada halaman  input  PIN  sebelum  dan  setelah  diredesain. Perubahan  meliputi  penambahan  tombol  teks  "Lihat PIN" untuk verifikasi sebelum melanjutkan, pemindahan fitur edit PIN ke app bar, dan penambahan tombol  "Lanjutkan"  untuk  memeriksa  kembali sebelum transaksi.

## SEBELUM SETELAH
Gambar 29. Perbandingan Sebelum dan Setelah Redesign Halaman Input PIN
e. Desain Purwarupa Halaman Akun
Desain halaman akun telah diperbarui, termasuk halaman profil, tema, lihat profil, ubah profil, dan ubah tema.

## DESAIN A DESAIN B
Gambar 30. Perbandingan Desain A dan B Halaman Akun
Pada  Gambar  30,  bagian  kiri  menunjukkan tampilan  halaman  akun  sebelum  redesign,  yang kemudian  diperbarui  berdasarkan  feedback  dari pengguna  pada  pengujian  tahap  1  karena  dianggap kurang  menarik  dan  mirip  dengan  tampilan  awal aplikasi.  Perubahan  ini  terlihat  pada  Gambar  bagian kanan.

## DESAIN A DESAIN B
Gambar 30. Perbandingan Desain A dan B Halaman Profil dan Tema
Gambar  31  membandingkan  desain  profil  dan tema  sebelum  (kiri)  dan  setelah  (kanan)  pengujian. Kuesioner  menunjukkan  preferensi  yang  lebih  tinggi terhadap desain B, dengan jumlah kesalahan klik yang lebih  sedikit,  menunjukkan  bahwa  desain  B  lebih disukai dan lebih efisien digunakan oleh pengguna.

## DESAIN A DESAIN B
Gamar 31. Perbandingan Desain A dan B Halaman Lihat Profil
Gambar 32. Desain Purwarupa Halaman Ubah Profil
Gambar 32 menampilkan Desain B pada halaman ubah  profil  tanpa  perubahan  dari  versi  sebelumnya. Respons positif dari pengguna menunjukkan kesesuaian dengan prinsip pengembangan berkelanjutan untuk meningkatkan pengalaman mereka. Sedangkan halaman ubah tema pada Gambar 33  dikembangkan  berdasarkan  masukan  pengguna sebelum uji tahap 1, untuk meningkatkan pengalaman pengguna dan menyesuaikan aplikasi dengan preferensi individu.
Gambar 33. Desain Purwarupa Setelah Redesign Halaman Ubah Tema
f. Desain Purwarupa Tema Gelap Gambar  34  Berikut  menampilkan  beberapa desain untuk tema gelap aplikasi.
Gambar 34. Desain Purwarupa Tema Gelap Aplikasi ABC Mobile

## 5. KESIMPULAN DAN SARAN
Penelitian  ini  bertujuan  untuk  menciptakan desain  UI/UX  yang  memenuhi  kebutuhan  pengguna dengan  menggunakan  metode User Centered Design. Analisis  kebutuhan  dan  masukan  dari  35  pengguna aktif digunakan dalam pengembangan desain purwarupa  interaktif  mobile  banking  ABC  Mobile, dengan fokus pada kinerja, keamanan, dan keandalan. Evaluasi  menunjukkan  peningkatan  signifikan  dalam kualitas  desain,  dari  skor  awal  80,78  menjadi  89,43 setelah implementasi perbaikan. Uji efisiensi aplikasi menunjukkan  instruksi  yang  jelas  dan  kemudahan pemahaman  informasi  oleh  pengguna.  Perbaruan berkelanjutan  pada  desain  UI/UX  diperlukan  dengan mempertimbangkan umpan balik pengguna dan tujuan bisnis.  Evaluasi  rutin  menggunakan  metrik  relevan untuk  memastikan  keberhasilan  dan  kepuasan pengguna, serta pembaruan alat pengujian pengalaman pengguna  untuk  hasil  pengujian  yang  akurat. Pemantauan tren teknologi dan praktik terbaik dalam industri  desain  UI/UX  menjadi  kunci  untuk meningkatkan aplikasi secara keseluruhan.

## DAFTAR PUSTAKA
[1]  L.  Marselina,  I.  Kaniawulan,  and  H.  D. Singasatia, “ANALISIS KESUKSESAN

## APLIKASI BRIMO DENGAN PENDEKATAN
MODEL  DELONE  AND  MCLEAN,” Jurnal Informatika, Teknologi dan Sains , vol. 4, no. 3, 2022, doi: 10.51401/jinteks.v4i3.1951.
[2]  D.  Andini  and  J.  N.  Utamajaya,  “Analisis Kepuasan Pengguna Terhadap Layanan Aplikasi Brimo  Menggunakan  Mobile  Service  Quality dengan  Metode  CSI,” KLIK:  Kajian  Ilmiah Informatika dan Komputer , vol. 3, no. 4, 2023.
[3]  U.  U.  Sufandi,  D.  Trihapningsari,  and  W. Mellysa,  “Peluang  Penelitian  UI/UX  pada Pengembangan  Aplikasi  Mobile:  Systematic Literature Review,” Techno.Com , vol. 21, no. 3, 2022, doi: 10.33633/tc.v21i3.6059.
[4]  I.  Tresna  Lestari,  D.  Permata  Sari,  and  R. Andrian,  “Redesign  User  Interface  Aplikasi Ipusnas  Berdasarkan  User  Experience  dengan
Metode Design Thinking,” Jurnal Ilmiah Betrik , vol. 13, no. 2, 2022.
[5]  M.  Ikhsan  and  P.  Sukmasetya,  “Perancangan User  Interface  Aplikasi  Central  Islam  Berbasis Mobile  Application  dengan  Metode  User Centered  Design  (UCD),” Seri  Prosiding Seminar … , 2020.
[6]  A.  Wijaya,  Randi  Trio  Ardiansyah,  Yovi apridiansyah,  and  Diana,  “IMPLEMENTASI METODE USER CENTERED DESIGN (UCD) PADA PERANCANGAN APLIKASI
KOPERASI  SIMPAN  PINJAM  BERBASIS ANDROID,” JSAI  (Journal  Scientific  and Applied  Informatics) ,  vol.  6,  no.  2,  2023,  doi: 10.36085/jsai.v6i2.5083.
[7]  B.  H.  Pakarti  and  A.  Prapanca,  “Perancangan Ulang  User  Inteface  (UI)  Dan  User  Experience (UX)  Website  Perzela  Dengan  Metode  User Centered  Design  (UCD),” Journal  of  Emerging Information … , vol. 04, no. 04, 2023.
[8]  I.  S.  Yatana  Saputri,  M.  Fadhli,  and  I.  Surya, “Penerapan  Metode  UCD  (User  Centered Design)  Pada  E-Commerce  Putri  Intan  Shop Berbasis  Web,” Jurnal  Nasional  Teknologi  dan Sistem  Informasi ,  vol.  3,  no.  2,  2017,  doi: 10.25077/teknosi.v3i2.2017.269-278.
[9]  “Pengaruh  Layanan  Mobile  Banking  terhadap Kepuasan Nasabah PT. Bank Muamalat Indonesia,  Tbk  Kantor  Cabang  Stabat,” AGHNIYA: Jurnal Ekonomi Islam , vol. 5, no. 2, 2023, doi: 10.30596/aghniya.v5i2.17586.
[10]  R. N. Isnaidin, D. G. Arikesa, R. I. Nasution, and Moch. F. Hidayat, “Penggunaan User Interface ( UI  )  Aplikasi  Google  Classroom  Pada  Siswa Tingkat  SMP  di  Denpasar  Selatan,” Semiinar Nasional Desain , vol. 1, pp. 1–7, 2021, [Online]. Available: https://eproceeding.isi- dps.ac.id/index.php/sandi-dkv/article/view/125
[11]  M.  N.  A.  Nugroho  and  A.  Pramono, “Perancangan  UI/UX  Aplikasi  Monitoring Tanaman  Secara  Mandiri  Berbasis  Mobile Dengan  Metode  User  Centered,” Prosiding Senakama , vol. 1, no. 1, 2022.
[12]  S. L. Ramadhan, “Perancangan User Experience Aplikasi Pengajuan E-KTP menggunakan Metode  UCD  pada  Kelurahan  Tanah  Baru,” JATISI  (Jurnal  Teknik  Informatika  dan  Sistem Informasi) , vol. 8, no. 1, 2021, doi: 10.35957/jatisi.v8i1.633.
[13]  R. Yuwono, A. Wibowo, S. H. Wijoyo, and R. I. Rokhmawati,  “Analisis  Pengalaman  Pengguna Pada  Aplikasi  Mobile  Banking  di  Indonesia Dengan  Menggunakan  Usability  a  dan  User Experience  Questionnaire  (UEQ)  (Studi  pada JakOne  Mobile  dan  BCA  Mobile),” Jurnal Pengembangan  Teknologi  Informasi  dan  Ilmu Komputer , vol. 3, no. 6, 2019.
[14]  C. D. Farinango, J. S. Benavides, J. D. Cerón, D. M. López, and R. E. Álvarez, “Human-centered design  of  a  personal  health  record  system  for metabolic  syndrome  management  based  on  the ISO  9241-210:2010  standard,” J  Multidiscip Healthc , vol. 11, 2018,
doi:
10.2147/JMDH.S150976.
[15]  A.  Shanardi  Wijaya,  “User  Centered  Design  – School of Information Systems,” binus.
[16]  C. Shi, X. Wang, S. Luo, H. Zhu, J. Ye, and R. Song,  “Dynamic  Causal  Effects  Evaluation  in A/B  Testing  with  a  Reinforcement  Learning Framework,” J  Am  Stat  Assoc ,  2022,  doi: 10.1080/01621459.2022.2027776.
[17]E.  Susilo,  “Cara  Menggunakan  System Usability Scale (SUS) Pada Evaluasi Usability,” Jurnal  Pengembangan Teknologi Informasi  dan Ilmu Komputer , vol. 10, no. 10, 2019.