Mendesain ulang m-banking bank daerah agar transaksi harian terasa secepat bank nasional.
Case study mandiri: dari wawancara pengguna, design system, sampai tool usability test yang saya rancang sendiri.
Role
UI/UX Designer · Self-initiated
Timeline
Agu–Okt 2026
Tools
FigJam, Paper, Claude Code, VS Code, Supabase
Status
Prototype interaktif + usability test putaran 1 (selesai, 13 peserta)
Konsep desain independen untuk portofolio. Tidak berafiliasi dengan Bank Kalbar dan bukan aplikasi resmi.
01 — Kenapa project ini
Dari tiga nasabah Bank Kalbar yang saya wawancarai, polanya sama: aplikasinya dibuka untuk mengecek saldo, lalu uangnya dipindahkan ke bank lain. M-Banking Bank Kalbar menjadi tempat uang masuk, bukan tempat mengelola uang.
Saya ingin tahu kenapa, dan apakah desain bisa mengubahnya. Project ini saya kerjakan sendiri dari awal sampai akhir: wawancara pengguna, sintesis riset, design system, prototype interaktif untuk lima flow utama, sampai menyiapkan usability test dengan tool yang saya rancang sendiri.
Tujuannya dua
Mempersingkat transaksi yang paling sering dilakukan: cek saldo, QRIS, dan transfer.
Membuat aplikasi terasa modern dan tepercaya, setara bank nasional.
02 — Masalah: apa kata pengguna
“Karena saya Gen Z, hal-hal kecil seperti tampilan dan user flow bisa memengaruhi kepercayaan saya.” — P1
Saya mewawancarai tiga nasabah Bank Kalbar secara semi-terstruktur dengan 23 pertanyaan dalam lima bagian: kebiasaan, ekspektasi, pain point, kepercayaan, dan prioritas. Jawabannya saya pecah menjadi catatan satu ide, lalu saya kelompokkan dengan affinity mapping menjadi sembilan tema. Nama narasumber saya ganti dengan kode P1–P3.
Empat temuan paling menentukan arah desain:
1. Bank transit (3/3 narasumber). Ketiganya memakai Bank Kalbar berdampingan dengan bank lain. Tidak ada notifikasi uang masuk, jadi aplikasi dibuka hanya untuk mengecek saldo. Setelah itu, uangnya dipindahkan ke bank utama mereka.
2. Fitur yang hilang memaksa pengguna pindah bank (3/3 meminta QRIS Tampil). Dua dari tiga narasumber pernah batal bertransaksi karena tidak ada tarik tunai tanpa kartu. P3 bercerita: ketika kartu ATM-nya tertinggal, ia harus mentransfer uangnya ke BCA dulu supaya bisa tarik tunai di ATM BCA.
3. Alur panjang dan tampilan jadul mengikis kepercayaan (2/3). “Terlalu banyak tulisan, user flow panjang, tidak ada shortcut.” Bagi P1 dan P3, tampilan bukan sekadar estetika, tapi sinyal apakah aplikasi ini bisa dipercaya. P2 punya pandangan berbeda: kelengkapan fitur dan kecepatan lebih penting daripada desain. Karena itu, perbaikan visual harus berjalan bersama alur yang lebih singkat, bukan menggantikannya.
Keluhan ini terlihat jelas di aplikasi lama. Untuk membayar tagihan PLN, pengguna harus melewati Menu Utama → Transaksi Finansial → Bayar → PLN: tiga tap sebelum bisa mulai mengisi tagihan. Saldo juga tidak tampil di Menu Utama, dan separuh layarnya dibiarkan kosong.
4. Saat ada masalah, aplikasi diam. Setiap narasumber punya satu cerita kendala. Ada server maintenance jam 10 malam tanpa penjelasan, transfer gagal padahal saldo sudah terpotong (P2 akhirnya datang ke kantor cabang), dan bukti transaksi QRIS yang sulit dipahami dalam sekali lihat.
Yang tidak saya duga: ketiga narasumber merasa aplikasinya aman. Masalahnya bukan keamanan, melainkan kejelasan dan kelengkapan.
Tangkapan layar dari halaman Bank Kalbar Mobile di Google Play Store.
Affinity map, Tema 1 dan Tema 3. Warna catatan menunjukkan narasumber: P1 kuning, P2 hijau, P3 pink.
Persona
Raka (nama samaran, disusun terutama dari P3). Tenaga honorer sekaligus pemilik UMKM di Kalimantan Barat. Gajinya masuk ke Bank Kalbar, tapi ia memakai BCA sebagai bank utama karena di sana ada QRIS Tampil dan tarik tunai tanpa kartu.
“Saya akan semakin percaya dengan aplikasi ini jika aplikasi ini melengkapi fitur dan tampilan yang lebih baik.”
Keterbatasan riset
Tiga narasumber cukup untuk riset eksploratif, tapi belum cukup untuk generalisasi. Karena itu, temuan ini saya perlakukan sebagai hipotesis yang diuji lewat usability test yang dirancang untuk 15 peserta (lihat bagian 07).
03 — Dari temuan ke arah desain
Sebelum mendesain satu layar pun, saya mengubah setiap tema menjadi pertanyaan How Might We:
Bagaimana membuat cek saldo dan memindahkan uang selesai secepat mungkin dari Beranda?
Bagaimana menghadirkan QRIS Tampil dan Cardless yang mudah ditemukan, supaya pengguna tidak butuh bank lain?
Bagaimana membuat transaksi sederhana tercapai dalam 1–2 tap dari Beranda?
Bagaimana membuat aplikasi terasa modern dan tepercaya, setara bank nasional?
Bagaimana memastikan pengguna selalu tahu status transaksinya, termasuk saat gagal atau maintenance?
Prioritas & design brief
Menentukan prioritas
Setiap masalah saya petakan di matriks dua sumbu: seberapa besar pengaruhnya terhadap kepuasan pengguna, dan terhadap keberhasilan menyelesaikan transaksi. Hasilnya, tiga fokus utama: fitur yang hilang (QRIS Tampil dan Cardless), alur yang lebih singkat, dan tampilan yang lebih tepercaya.
Design brief
Prioritas itu saya tulis menjadi design brief:
6 state yang wajib dirancang: Default, Sukses, Gagal, Maintenance, Memproses, dan Kosong. Bukan hanya happy path, karena temuan ke-4 justru terjadi di luar happy path.
5 DO / 5 DON’T. Contoh DO: fitur yang paling sering dipakai harus bisa dicapai dalam 1–2 tap dari Beranda. Contoh DON’T: jangan menambah layar untuk transaksi sederhana seperti cek saldo atau QRIS.
Arah visual
Saya menganalisis layar utama Revolut untuk memahami bagaimana sebuah aplikasi finansial membuat saldo terasa sebagai fokus. Ada lima prinsip yang saya ambil: satu angka besar sebagai titik fokus, gradasi vertikal, permukaan glass, sudut membulat, dan warna yang minim. Prinsip-prinsip itu saya terapkan dengan identitas Bank Kalbar. Seluruh palet, ikon, dan komponennya saya bangun sendiri.
Dengan arah yang jelas, tantangan berikutnya adalah menjaga ratusan keputusan desain tetap konsisten, dan di sinilah saya mencoba cara kerja yang berbeda.
04 — Cara kerja: desain bersama AI
Saya mengerjakan project ini dengan tiga hal yang saling terhubung: Paper sebagai canvas desain, Claude Code di VS Code sebagai partner eksekusi, dan satu file teks bernama design.md.
Tantangan terbesar bekerja dengan AI adalah ingatannya. Setiap sesi baru dimulai dari nol. Kalau keputusan desain hanya tersimpan di percakapan, sesi berikutnya bisa mengubah warna, spacing, atau pola yang sudah disepakati. Jadi saya membalik caranya: semua keputusan ditulis ke design.md, dan design.md menjadi satu-satunya sumber kebenaran.
Ritual di setiap sesi
Awal sesi: Claude membaca design.md sebelum menyentuh desain apa pun.
Selama sesi: kami mendesain langsung di canvas Paper lewat MCP, sehingga Claude bisa membaca dan menulis frame.
Akhir sesi: keputusan hari itu dicatat ke design.md dengan struktur 10 bagian: warna, tipografi, spacing, radius, komponen, penamaan, ikon, DO/DON’T, dan contoh instruksi.
Hasilnya, design.md tumbuh menjadi hampir 3.000 baris, dengan puluhan keputusan yang dicatat beserta tanggalnya, misalnya “timer tidak boleh merah” (29 September).
AI mengeksekusi, saya memutuskan
Setiap keputusan yang diambil Claude sendiri ditandai “perlu dicek”, dan baru masuk design.md setelah saya setujui. Contohnya di eksplorasi motion: Claude memakai merah untuk state PIN salah, padahal design.md membatasi pemakaian merah. Keputusan itu ditahan sampai saya yang memutuskan.
Dari canvas ke prototype
Frame dari Paper diekspor menjadi HTML dan dirakit menjadi prototype interaktif: 113 frame, semua flow utama bisa diklik, dalam light dan dark mode. Untuk transisi antar layar, saya membuat motion lab, yaitu panel untuk membandingkan tiga preset (“Cepat & minimal”, “Rekomendasi Banking”, “Ekspresif”) secara berdampingan, lengkap dengan slow motion dan mode reduce motion, sebelum memilih versi final.
Yang tidak mulus
Paper, prototype, dan design.md tidak sinkron otomatis. Setiap perubahan di Paper harus diekspor ulang, dan detail kecil bisa hilang di jalan. Contohnya, spasi pada sapaan “Halo, Raka” hilang saat ekspor ke prototype.
Batas panggilan MCP di Paper versi gratis beberapa kali menghentikan sesi di tengah jalan.
AI cenderung “merapikan” hal yang sengaja dibuat apa adanya, seperti posisi 8 stop gradient Beranda. Karena itu, aturan seperti “jangan ubah jumlah dan posisi stop” ditulis eksplisit di design.md.
Disiplin mencatat yang sama inilah yang membentuk design system-nya.
Motion lab dalam mode Compare: preset final (A) dan preset Ekspresif (B) berjalan berdampingan.
05 — Design system
Design system ini tidak dirancang lengkap di awal lalu diterapkan. Ia tumbuh dari keputusan di setiap layar, dan dicatat begitu keputusan itu disepakati.
Fondasi
Warna dengan aturan pakai. Gradient identitas 8 stop hanya dipakai di zona hijau atas (Beranda, Rewards, Voucher Saya). Empat aksen punya peran yang tegas: hijau #00A651 untuk aksi maju dan sukses, biru FAB sebagai satu-satunya aksen biru untuk QRIS, dan merah hanya untuk 4 kasus (badge notifikasi, aksi destruktif, transaksi gagal, error form).
Tipografi dengan skala tetap. Plus Jakarta Sans untuk semua teks UI, dengan aturan “jangan membuat ukuran baru di luar skala tanpa alasan”. Tai Heritage Pro dipakai khusus untuk wordmark BANK KALBAR.
Tidak ada sudut tajam. Lima radius dengan peran masing-masing: 10 (opsi dropdown), 16 (input), 20 (card), 24 (sheet dan dialog), dan pill.
Light dan dark mode
Desain awal dibuat dalam dark mode (lihat versi 29 September). Light mode kemudian ditambahkan sebagai tema kedua (2 Oktober), lalu dijadikan tampilan default prototype (7 Oktober).
Saya menjadikan light mode sebagai tampilan default karena tampilan terang lebih mudah diterima oleh pengguna dari berbagai usia, dari 18 hingga 58 tahun. Bagi yang lebih menyukai tampilan yang elegan, dark mode tetap tersedia lewat toggle Mode Gelap di menu Akun. Kuncinya adalah satu tabel token tema (latar, surface, teks, ikon, dan seterusnya) dari dark ke light, sehingga layar baru otomatis mengikuti tema. Shadow hanya dipakai di light mode.
Komponen & aturan
Lebih dari 70 bagian komponen dan pola layar terdokumentasi di design.md, ditambah satu aturan state (hover, active, disabled) yang berlaku untuk semuanya. Prinsipnya: pakai ulang dulu sebelum membuat yang baru. Card pembayaran, misalnya, dipakai ulang di semua layar transaksional, dan struk untuk jenis transaksi baru memakai layout Struk Digital yang sama.
Aturan yang lahir dari detail
design.md memuat lebih dari 150 aturan DO/DON’T. Beberapa di antaranya:
QR dummy harus benar-benar bisa dipindai, dan diverifikasi dengan decoder setiap kali ukurannya berubah.
Skeleton loading harus setinggi konten aslinya, supaya tidak ada lompatan layout.
Copy tanpa kata bertanda hubung: “dipindai”, bukan “di-scan”.
Kontras teks di banner dihitung dengan script, minimal 4,5:1.
06 — Solusi: flow utama
Lima flow ini dipilih karena menjawab langsung temuan riset, dan kelimanya yang kemudian diuji di usability test. Ditambah satu konsep, notifikasi uang masuk (6.6), yang belum ikut diuji.
Kesan pertama: Splash Screen
Sebelum Login, aplikasi dibuka dengan latar putih dominan, kabut hijau-biru Bank Kalbar yang lembut di belakang logo, logo lengkap sesuai logo resmi (mark, “BANK KALBAR”, dan nama PT), serta nomor versi di bawah. Ini menjawab temuan ke-3: tampilan adalah sinyal kepercayaan, dan sinyal itu dimulai dari layar pertama. Warnanya sengaja dibuat tidak kontras supaya terasa tenang, bukan ramai.
6.1 Scan QRIS
Masalah: “Membuka fitur QRIS seharusnya bisa dipersingkat” (P1), dan bukti transaksi QRIS sulit dipahami dalam sekali lihat (P3).
Satu tombol QRIS di tengah navbar, bisa dijangkau dari Beranda, Riwayat, Rewards, dan Akun. Satu tap langsung membuka kamera.
“Metode QRIS Lainnya” di bagian bawah layar Scan menjadi satu pintu untuk semua fitur QRIS. Bentuknya chip yang bisa digeser, dipilih dari 5 eksplorasi layout.
Layar “atur” dan layar “cek ulang” dipisah. Pembayaran QRIS untuk mengatur nominal dan sumber dana, lalu Detail Pembayaran untuk memeriksa ulang sebelum PIN.
Struk dengan hierarki yang jelas: status dan nominal besar di atas, rincian penting dalam satu card, dan detail teknis disembunyikan di balik “Tampilkan Detail”.
6.2 QRIS Bayar (QRIS Tampil)
Masalah: ketiga narasumber meminta QRIS Tampil. “Sekarang sudah serba QRIS” (P3).
Masuk lewat pintu yang sama, yaitu chip “QRIS Bayar” di layar Scan, supaya pengguna tidak perlu mencari menu baru.
Catatan keamanan sebelum QR muncul: pastikan nominal di kasir sudah benar, QR hanya berlaku 1 menit untuk 1 kali transaksi, dan jangan membagikan tangkapan layar QR.
QR berlaku 1 menit dengan timer yang terlihat. Saat kedaluwarsa, QR diburamkan dan tombol “Perbarui QR” muncul di atasnya. Timer selalu hitam dan tidak pernah merah, sesuai keputusan untuk membatasi pemakaian merah.
6.3 Transfer
Masalah: transfer adalah salah satu transaksi yang paling sering dilakukan (P1, P3), tapi menu seperti “Nama Favorit” membingungkan (P1).
Tiga jenis transfer dalam tiga card yang jelas: Rekening Bank Kalbar, Bank Lain, dan Virtual Account, masing-masing dengan keterangan satu baris.
Rekening Tersimpan dan Riwayat Transfer di satu layar, lengkap dengan kolom pencarian. Penerima yang sudah pernah dikirimi bisa dipilih langsung tanpa mengetik ulang nomor.
Informasi seperlunya. Di daftar rekening sesama Bank Kalbar hanya ditampilkan nomor rekening, karena banknya sudah pasti sama.
6.4 Cardless
Masalah: dua dari tiga narasumber pernah batal bertransaksi karena tidak ada tarik tunai tanpa kartu. P3 bahkan harus mentransfer uangnya ke BCA dulu supaya bisa tarik tunai.
Shortcut Cardless langsung di Beranda, dengan dua pilihan: Setor Tunai dan Tarik Tunai.
Nominal cepat dalam bentuk tile, dengan ikon jumlah lembar uang yang mengikuti nominalnya. Kalau nominalnya tidak ada, tersedia “Tulis Nominal” dengan petunjuk kelipatan Rp50.000.
Layar kode transaksi yang lengkap: kode besar, nomor HP, batas waktu, dan langkah-langkah di ATM, supaya pengguna tahu persis apa yang harus dilakukan berikutnya.
6.5 Rewards
Masalah: dua dari tiga narasumber tertarik dengan reward untuk tagihan rutin. Ini masih hipotesis, karena konsep reward diperkenalkan oleh pertanyaan wawancara, dan satu narasumber tidak membutuhkannya.
Tab Rewards di navbar, dengan angka poin besar dan masa berlakunya (“Berlaku hingga 31 Des 2026”) langsung di atas.
Katalog voucher per kategori dengan gambar, tanpa tingkatan member atau progress bar, supaya tetap sederhana.
Alur tukar sampai pakai dalam satu jalur: Detail Voucher → Tukar Sekarang → PIN → Berhasil → kode voucher yang tinggal ditunjukkan ke kasir.
6.6 Notifikasi uang masuk (konsep)
Masalah: ketiga narasumber tahu uang sudah masuk hanya dengan membuka aplikasi dan mengecek saldo (temuan ke-1). Halaman Notifikasi di menu Akun sudah menyediakan toggle untuk transaksi, tapi notifikasinya sendiri belum dirancang.
Layar kunci tidak menampilkan isi. Yang tampil hanya “Ada notifikasi baru untukmu”, supaya nominal dan rekening tidak terbaca oleh orang lain yang melihat layar HP.
Detail lengkap setelah HP dibuka: nominal, pengirim, dan rekening tujuan dalam satu notifikasi. Pengguna tahu uangnya sudah masuk tanpa membuka aplikasi.
Status: konsep, belum diuji. Akan menjadi salah satu tugas di usability test putaran 2.
6.7 Motion
Transisi final dipilih lewat motion lab (lihat bagian 04) dan dipakai di semua flow. Beberapa di antaranya:
Navbar → Scan QRIS: lingkaran warna tombol QRIS “tumbuh” menjadi layar Scan (container transform, 200 ms).
Masukkan PIN muncul sebagai sheet dari bawah (260 ms). Kalau PIN salah, indikatornya bergetar (420 ms).
Hasil transaksi: layar Memproses, lalu tanda centang yang “tergambar” saat berhasil, atau ikon silang dengan getaran halus saat gagal.
Sebelum dan sesudah
Aplikasi lama tidak mengizinkan tangkapan layar, jadi pembandingnya saya ambil dari halaman aplikasi di Google Play Store. Halaman itu hanya memuat layar login dan menu, sehingga perbandingan langsung tersedia untuk dua layar. Untuk flow QRIS, Transfer, Cardless, dan Rewards, pembandingnya adalah temuan riset di bagian 02, bukan screenshot.
07 — Validasi: usability test
Riset di bagian 02 hanya melibatkan tiga narasumber, jadi semua keputusan di bagian 06 masih berupa hipotesis. Sebelum desain difinalkan, saya ingin tahu satu hal: bisakah orang lain menyelesaikan lima transaksi utama ini tanpa bantuan?
Rancangan tes
Metode: unmoderated. Peserta mengerjakan sendiri lewat link, di HP, tablet, atau PC, sekitar 15–20 menit.
Peserta: target 15 orang dalam tiga kelompok, masing-masing 5 orang: pengguna m-banking Bank Kalbar (K1), pengguna m-banking bank lain (K2), dan nasabah Bank Kalbar yang belum memakai m-banking (K3b). Ketiganya menjawab pertanyaan berbeda: apakah desain baru lebih mudah dari yang lama, apakah polanya sesuai dengan aplikasi lain, dan seberapa mudah aplikasi dipelajari dari nol.
Screener otomatis: jawaban di halaman awal langsung menentukan kelompok peserta. Desainer, developer, orang yang bekerja di produk digital, karyawan Bank Kalbar, dan siapa pun yang pernah melihat prototype ini tidak diikutkan.
Lima tugas tanpa nama menu
Urutan tugas diacak untuk setiap peserta, dan semuanya dimulai dari Beranda. Skenarionya sengaja tidak menyebut nama menu, supaya yang diuji adalah kemampuan peserta menemukan jalannya sendiri. Contohnya tugas Cardless:
“Kamu ingin mengambil uang Rp250.000 di ATM Bank Kalbar, tapi kartu ATM-mu tertinggal di rumah. Siapkan penarikan tunai lewat aplikasi.”
Nominal Rp250.000 sengaja tidak tersedia di tile nominal, sehingga peserta harus menemukan “Tulis Nominal” sendiri. Memilih tile lain dihitung gagal karena datanya salah.
Setiap keputusan desain punya pertanyaannya sendiri
Satu tombol QRIS di tengah navbar → apakah tap pertama peserta di Beranda langsung ke tombol yang benar?
QR berlaku 1 menit, dengan timer → “Berapa lama QR tadi berlaku?” (pilihan ganda)
Langkah di ATM pada layar kode transaksi → “Setelah ini, apa yang harus kamu lakukan di ATM?” (terbuka)
Riwayat transfer dengan kolom pencarian → berapa peserta yang memilih card di riwayat, dan berapa yang mengetik nomor rekening manual?
Layar konfirmasi sebelum PIN → “Seberapa yakin kamu bahwa uangnya terkirim ke orang yang benar?” (skala 1–7)
Poin dan masa berlakunya di Rewards → “Sampai kapan poinmu berlaku?” (pilihan ganda)
Yang diukur
Status setiap tugas dihitung otomatis dalam empat kategori: berhasil langsung, berhasil tidak langsung (sempat menyimpang atau kembali), gagal karena data salah, dan gagal karena menyerah. Di balik layar, tool mencatat waktu pengerjaan, tap pertama, jumlah tap dibandingkan jalur optimal, misclick beserta posisinya, tombol kembali, dan urutan layar yang dilalui. Setelah setiap tugas, peserta memberi skor kemudahan 1–7. Di akhir sesi, mereka mengisi UMUX-Lite: dua pertanyaan yang tetap menghasilkan skor standar, dipilih daripada SUS yang berisi sepuluh pertanyaan.
Sejak awal saya juga menetapkan kapan sebuah tugas dianggap bermasalah: total berhasil di bawah 80%, median skor kemudahan di bawah 5, tap pertama benar di bawah 70%, atau jawaban pemahaman benar di bawah 70%.
Tool yang saya rancang sendiri
Prototype saya bukan file Figma, melainkan HTML di dalam codebase. Untuk menguji prototype HTML di Maze, saya perlu upgrade plan. Jadi saya mencoba jalan lain: saya bertanya ke Claude apakah ia bisa membuat tool usability test sendiri, dan ternyata bisa.
Saya menulis test plan lengkap, mulai dari tugas, aturan status, metrik, sampai tampilan report, lalu Claude Code membangun tool-nya berdasarkan dokumen itu. Prototype yang dipakai sama dengan bagian 06, ditambah lapisan khusus tes: field input yang benar-benar bisa diketik (nominal, nomor rekening, PIN), validasi nominal, dan data yang mengikuti pilihan peserta sampai ke struk. Hasil setiap sesi tersimpan di Supabase, dan report per tugas, per kelompok, dan per peserta dibuat otomatis, termasuk export CSV.
Keuntungan yang tidak saya rencanakan: karena tool-nya dibuat khusus, metriknya bisa persis mengikuti pertanyaan riset saya, bukan metrik bawaan sebuah platform.
Etika dan privasi
Peserta hanya dikenali lewat kode (K1-P1, K2-P3, dan seterusnya). Nama, nomor HP, dan nomor rekening tidak dikumpulkan.
Angka PIN tidak pernah disimpan atau dikirim. Yang tercatat hanya jumlah ketikan dan apakah PIN-nya benar.
Halaman pembuka dan label yang tampil sepanjang tes mengingatkan bahwa ini prototype, bukan aplikasi resmi, dan peserta diminta memakai PIN 123456.
Link tes tidak diindeks mesin pencari, hanya dibagikan ke kenalan, dan dimatikan setelah tes selesai.
Hasil
Dari 17 orang yang memulai tes, 13 menyelesaikannya: 6 pengguna Bank Kalbar (K1), 5 pengguna bank lain (K2), dan 2 calon pengguna (K3b). Empat sesi lainnya, semuanya di HP, berhenti karena bug pemuatan prototype di iPhone Safari dan tidak dihitung.
Dari 65 percobaan tugas, 64 berhasil. Satu-satunya kegagalan terjadi di QRIS Bayar. Skor UMUX-Lite keseluruhan 96,2 dari 100.
Per tugas
Scan QRIS: 100% berhasil (11 langsung) · tap pertama benar 77% · waktu standar 43 dtk
QRIS Bayar: 92% berhasil (9 langsung, 1 menyerah) · tap pertama benar 77% · 29 dtk
Cardless: 100% berhasil (10 langsung) · tap pertama benar 92% · 34 dtk
Transfer: 100% berhasil (9 langsung) · tap pertama benar 100% · 37 dtk
Rewards: 100% berhasil (4 langsung) · tap pertama benar 46% · 24 dtk
Hanya Rewards yang terkena penanda masalah: tap pertama benar di bawah 70%.
Jawaban untuk setiap keputusan desain
Satu tombol QRIS di tengah navbar: 10 dari 13 peserta langsung menekannya di tugas Scan QRIS.
QR berlaku 1 menit: 11 dari 13 menjawab benar.
Langkah di ATM: 6 dari 13 menyebut langkah yang spesifik (menu tanpa kartu atau memasukkan kode). Sisanya menjawab umum, misalnya “ambil uang”.
Riwayat transfer: 13 dari 13 memilih card penerima di riwayat. Tidak ada yang mengetik nomor rekening manual.
Layar konfirmasi sebelum PIN: semua peserta memberi skor yakin 7 dari 7.
Masa berlaku poin: 13 dari 13 menjawab benar.
Di akhir sesi, keenam peserta K1 menilai desain baru lebih mudah dari aplikasi Bank Kalbar yang mereka pakai sekarang. Empat dari lima peserta K2 menilainya sama saja dengan aplikasi bank lain yang biasa mereka pakai, yang saya baca sebagai tanda polanya sudah sesuai ekspektasi. Kedua peserta K3b memberi nilai 4 dan 5 (dari 5) untuk kemungkinan mengaktifkan m-banking. Semua peserta mengartikan “Cardless” sebagai “tanpa kartu”.
Tiga temuan terpenting
Pengguna mencari “Poin”, bukan “Rewards”. Semua peserta berhasil menukar voucher, tapi hanya 4 yang langsung. Enam peserta lebih dulu membuka Riwayat, dan beberapa tersesat di Voucher Saya karena di sana sudah ada voucher Lokale yang aktif. Tanpa diminta, tiga peserta menulis usulan yang sama di akhir sesi: ganti nama menunya.
“tulisan rewards membingungkan, seharusnya diubah jadi poin” (K1-P5)
Pilihan QRIS Bayar terlewat atau tertukar. Chip QRIS Bayar ada di layar Scan, berdampingan dengan Transfer QRIS. Satu peserta tidak menemukannya dan menyerah setelah lima menit; ia sempat membuka Transfer QRIS dan mencoba mengisi nominal di sana. Masalah ini paling terasa di K1 (tap pertama benar 4 dari 6), sementara semua peserta K2 langsung menemukannya. Pertanyaan setelah tugas Scan QRIS menunjukkan hal yang sama: hanya 2 dari 13 peserta yang bisa menyebut isi sheet “Metode QRIS Lainnya”.
“susah mencari dimana qr nya” (K1-P3)
“Bank Lain” sempat dikira jalur yang benar. Empat peserta membuka Transfer Antar Bank lebih dulu sebelum kembali ke Rekening Bank Kalbar. Semuanya pulih dengan cepat, jadi tingkat keparahannya rendah.
“tidak ada yang membingungkan, hanya belum terbiasa” (K2-P4)
Perubahan setelah tes
Tiga perubahan saya ambil langsung dari temuan di atas. Temuan ketiga (“Bank Lain”) berdampak rendah, jadi sengaja tidak saya ubah.
“Rewards” → “Poinku” di tab navbar, judul halaman, dan shortcut di Login.
“QRIS Bayar” → “Tampilkan QR” di chip layar Scan, supaya labelnya menyebut tindakan, bukan nama fitur.
Tombol hijau #00A651 → #0A7A42 (74 tombol). Label putih naik dari 3,2 : 1 ke 5,4 : 1, lolos WCAG AA. Badge sukses tetap #00A651, karena ikon status cukup memenuhi 3 : 1.
Perubahan ini belum diuji ulang. Itu tugas putaran 2.
Keterbatasan
Peserta K3b hanya 2 orang, di bawah target. Calon pengguna ternyata paling sulit direkrut, jadi temuan dari K3b saya perlakukan sebagai indikasi, bukan kesimpulan.
Prototype dirancang untuk HP, tapi 11 dari 13 peserta mengerjakannya di laptop karena bug di iPhone. Sebagian memakai laptop saya, dan saya meninggalkan ruangan selama sesi berlangsung. Waktu dan jumlah misclick bisa berbeda di HP sungguhan.
Skor kemudahan dan UMUX-Lite hampir semuanya maksimal. Peserta direkrut dari jaringan pribadi, jadi kemungkinan ada kecenderungan menilai baik. Karena itu saya lebih berpegang pada data perilaku: jalur, tap pertama, dan waktu.
Versi tes diperbarui pada 28 Okt 2026 pukul 15.27 WIB (nama di prototype, spasi sapaan, tombol “Coba lagi” yang tampil kosong). Perubahannya kosmetik dan tidak memengaruhi tugas.
Untuk putaran 2
Menguji ulang “Poinku” dan “Tampilkan QR”. Kalau tap pertama di Poinku masih rendah, langkah berikutnya menampilkan jumlah poin lebih dekat ke Beranda dan mengurangi bobot visual kartu Voucher Saya.
Memperbaiki bug di iPhone, supaya peserta bisa mengerjakan tes di HP mereka sendiri.
Menambahkan tugas notifikasi uang masuk (6.6).
08 — Refleksi
Yang dipercepat AI
Bagian yang paling terasa cepat adalah pekerjaan berulang: menyusun flow hi-fi dari komponen yang sudah ada. Setelah design system dan design.md siap, membangun layar baru tidak lagi dimulai dari nol, cukup menyusun ulang komponen yang aturannya sudah jelas. Dari sana, lima flow utama tersusun menjadi 113 frame.
Yang tetap menjadi keputusan saya
Keputusan yang paling menentukan karakter aplikasi tidak saya serahkan ke AI: tema, warna, font, serta interaksi mikro maupun makro. AI bisa menawarkan pilihan, misalnya tiga preset di motion lab, tapi saya yang memilih. Saya juga yang membatasi warna merah, dan saya yang menjadikan light mode sebagai tampilan default.
Cara kerja yang saya ikuti
Alur kerja ini saya susun mengikuti buku Agentic UI Design Workflow dari HaloDesigner, dengan design.md sebagai satu sumber kebenaran.
Yang akan saya lakukan lebih awal
Data contoh langsung memakai nama samaran sejak awal. Nama asli salah satu narasumber sempat ikut tampil di prototype usability test, karena Paper, prototype, dan design.md tidak sinkron otomatis. Penggantian nama di Paper tidak ikut terbawa ke prototype tes. Masalah ini saya perbaiki di tengah tes, tapi seharusnya tidak pernah terjadi.
Cek kontras dan aksesibilitas sejak membuat design system, bukan setelah layar jadi. Label putih di atas hijau tombol utama ternyata hanya mencapai 3,2 : 1, dan baru saya perbaiki setelah tes.
Yang masih terbuka
Notifikasi uang masuk. Ketiga narasumber membuka aplikasi hanya untuk mengecek apakah uang sudah masuk. Jawabannya sudah dirancang sebagai konsep (6.6), tapi belum diuji. Ini akan menjadi salah satu tugas di tes putaran 2.
Berikutnya: menguji ulang perbaikan di putaran 2, dan mendesain state yang belum ada.