UX Case Study : Re-design BNI Mobile

Hello 👋, perkenalkan saya seorang UI/UX Designer di Telkom Indonesia DDS di divisi Telkom Partner Network (TPN), nama saya Fitri Eka Cahyanti. Disini saya akan melakukan redesign terhadap BNI mobile banking, proses yang saya lalui mulai dari observasi hingga validasi.

Salah satu bank di Indonesia yang memiliki aplikasi mobile banking adalah bank BNI. BNI Mobile banking ini memiliki banyak fitur seperti cek saldo, cek riwayat transaksi, transfer. Sebagai salah satu penggunanya saya sering menggunakan BNI mobile banking untuk kegiatan seperti transfer atau sekedar top up gopay. Menurut pengalaman saya, saya terkadang mengalami beberapa masalah saat menggunakan BNI mobile banking seperti ke bingungan saat melakukan transaksi atau sekedar ingin mengecek riwayat transaksi, namun saya seringkali merasa kebingungan mencari letak fitur, padahal saya sering menggunakan aplikasi ini, akhirnya saya mencoba satu-persatu menu untuk menemukan fitur yang ingin saya tuju.

Dari pengalaman yang saya alami, saya kemudian menjadi penasaran . Apakah orang lain yang menggunakan aplikasi BNI mobile banking juga mengalami masalah seperti yang saya alami sebelumnya. Kemudian saya melakukan observasi dengan kuisoner yang saya bagikan secara online.

Dari hasil kuisoner saya mendapatkan 15 responden, dimana 9 responden saya berprofesi mahasiswa/pelajar, 4 responden adalah seorang karyawan dan 2 responden lainnya tidak bekerja.

User juga menggunakan BNI mobile sekitar 3–5 kali setiap hari. Mereka menginstall BNI mobile karna dapat mempermudah untuk tidak pergi ke ATM. Namun beberapa responsen ternyata juga mengalami masalah saat melakukan transaksi seperti yang saya alami, hal ini kemudian mendorong saya untuk melakukan redesign pada aplikasi ini. Berikut proses redesign yang saya lakukan :

1. Observe

Dari proses redesign ini saya akan melakukan redesign dari mulai login hingga melakukan transfer dan masuk ke halaman riwayat transaksi.

• Problem Assumption

Asumsi ini berdasarkan masalah yang saya temui saat menggunakan BNI mobile, masalah-masalah tersebut dapat berupa :

1. Font terlalu kecil

Banyak font yang memiliki ukuran terlalu kecil misal pada font saldo, saya terkadang merasa bingung letak dari saldo karna bentuk font terlalu kecil dan terhalang oleh promo.

2. Kebingungan mencari letak fitur

Walaupun saya sering menggunakan BNI mobile namun terkadang saya merasa bingung mencari letak fitur riwayat transaksi pada menu BNI mobile, sehingga terkadang saya harus membuka menu satu-persatu untuk menemukan menu riwayat transaksi ini. Setelah beberapa kali percobaan saya baru menemukan letak dari riwayat transaksi ini ternyata berada di dalam menu rekening saya. Hal ini membuat saya terlalu banyak effort untuk mencari menu sehingga menghabiskan cukup banyak waktu.

3. Riwayat Transaksi terlalu membingungkan

Saya sering melakukan transaksi namun terkadang saya bingung membaca riwayat transaksi, saya terkadang bingung membaca informasi tentang kemana saya melakukan transfer dan untuk siapa, karena tidak terdapat informasi tujuan bank transfer.

4. Lupa memasukan Password Transaksi

Karena terkadang kolom untuk memasukan password transaksi tidak terlihat saya sering menekan tombol untuk melanjutkan ketahap selanjutnya namun ternyata saya lupa untuk memasukan password transaksi, bahkan saya pernah hingga 3x dan harus mengganti password transaksi saya, hal ini juga pernah terjadi kepada teman saya yang baru menggunakan BNI mobile.

• Persona

Pada hal ini saya menggunakan persona user yang sering menggunakan BNI mobile.

• User Interview

Untuk memvalidasi masalah yang telah saya temukan, saya melakukan validasi dengan cara membagikan survey online kepada 15 orang peserta. Menurut saya 15 peserta sudah lebih dari cukup.

“ Elaborate usability tests are a waste of resources. The best results come from testing no more than 5 users and running as many small tests as you can afford ” — Jakob Nielsen

Dalam survey tersebut saya memberikan 20 point pertanyaan kepada user terkait dengan permasalahan yang telah saya kembangkan. Berikut permasalan yang user kemukakan dalam survey ketika menggunakan aplikasi BNI mobile :

1. User sering menggunakan BNI mobile untuk kegiatan seperti transfer, top up, tap cash,pembayaran atau bahkan hanya sekedar melakukan pengecekan mutasi pada hari itu.
2. Tampilan terlalu kaku
3. User sering kebingunan mencari fitur
4. User kesulitan melihat saldo dan nomor rekening pada halaman home
5. User sering lupa batasan transfer maksimal setiap harinya
6. User merasa kebingungan membaca riwayat transaksi
7. Sering lupa atau salah memasukan password transaksi,

Lalu user juga memberikan feedback berupa :

1. User tidak dapat menambahkan rekening ke daftar rekening favorit tanpa melakukan transaksi terlebih dahulu

2. Define

Berdasarkan observasi yang dilakukan, berikut kesulitan yang dialami user pada saat menggunakan aplikasi ini.

#Pain Problem 1 : Dari 15 user sebanyak 11 user sering lupa memasukan password transaksi di halaman konfirmasi transfer, user sering kali lupa memasukan password transaksi karena kolom password transaksi kurang terlihat, sehingga user sering mengabaikan dan mengklik tombol lanjutkan. Padahal jika sudah mencapai 3 kali salah atau kosong maka password transaksi akan otomatis terblokir dan user harus menggantinya dengan yang baru. Selain itu user mengalami kesulitan karena icon mata di kolom password transaksi tidak ada bedanya pada saat menampilkan atau menyembunyikan password.

#Pain Problem 2 : Dari 15 user sebanyak 11 user merasa kebingungan membaca riwayat transaksi pada halaman riwayat transaksi, pada transaksi BNI mobile hanya terdapat kode keluar masuk uang dimana kode tersebut berupa D (Debit) yang berarti uang masuk dan K (Kredit) yang berarti uang keluar. User juga merasa kebingunan ketika ingin mengetahui tujuan bank karena tidak terdapat informasi mengenai tujuan bank pada riwayat transaksi.

# Pain Problem 3 : Dari 15 user sebanyak 10 user memiliki masalah kebingungan mencari fitur di halaman home, walaupun user sering mengunakan BNI mobile namun tetap saja user terkadang masih merasa kebingungan dan lupa letak fitur yang ingin dipilih, padahal user selalu menggunakan fitur yang sama pada saat mengakses BNI mobile ini.

# Pain Problem 4 : Dari 15 user sebanyak 9 user kesulitan melihat saldo dan nomor rekening di halaman home. Hal ini disebabkan karena ukuran font yang terlalu kecil (ukuran font 12px) pada informasi saldo dan nomor rekening (10px), ditambah lagi informasi tersebut diletakan dibawah poster promo. Sehingga informasi saldo dan nomor rekening kurang dapat dilihat dengan jelas oleh user.

#Pain Problem 5 : Dari 15 user sebanyak 8 user lupa batasan transfer maksimal setiap harinya, BNI memiliki 3 tipe kartu diantaranya yaitu silver. gold dan platinum. Setiap tipe kartu memiliki batasan transfer yang berbeda setiap harinya. User sering kali lupa mengenai batasan maximal transfer setiap harinya. Sehingga user membutuhkan effort lebih untuk mengingat-ngingat tipe kartu yang digunakan.

#Pain Problem 6 : Dari 15 user sebanyak 8 user tidak dapat menambahkan rekening ke daftar rekening favorit tanpa melakukan transaksi terlebih dahulu, pada tampilan BNI mobile saat ini user diminta untuk melakukan transaksi terlebih dahulu sebelum menambahkannya pada daftar favorit rekening, hal ini membuat effort berlebih, dimana terkadang user bisa saja menyimpan terlebih dahulu nomor rekening teman/sodara/rekan kerja hanya untuk digunakan ketika pada situasi mendesak dan terburu-buru.

3. Ideate

Dari masalah yang sudah didefinisikan diatas, saya mendapat beberapa solusi dari saya dan juga user.

Halaman Home (Pain Problem 3,4,5)

# Pain Problem 3 : Dari 15 user sebanyak 10 user kebingungan mencari fitur di halaman home

# Pain Problem 4 : Dari 15 user sebanyak 9 user kesulitan melihat saldo dan nomor rekening di halaman home

#Pain Problem 5: Dari 15 user sebanyak 8 user lupa batasan transfer maksimal

Halaman konfirmasi transfer (Pain Problem 1)

#Pain Problem 1 : Dari 15 user sebanyak 11 user sering lupa memasukan password transaksi di halaman konfirmasi transfer

My DBS

Jenius

Halaman Riwayat Transaksi (Pain Problem 2)

#Pain Problem 2 : Dari 15 user sebanyak 11 user merasa kebingungan membaca riwayat transaksi pada halaman riwayat transaks

Halaman Transfer (Pain Problem 6)

#Paint Problem 6 : Dari 15 user sebanyak 8 user tidak dapat menambahkan rekening ke daftar rekening favorit tanpa melakukan transaksi terlebih dahulu,

Halaman Login (improve)

Halaman Status Transaksi (improve)

4 . Prototyping

Untuk memberikan gambaran kepada user tentang solusi yang telah dimerubah solusi saya menjadi sebaut tampilan mockup yang dapat lebih mudah untuk dipahami user. Berikut mockupnya

Disclaimer : “nomor rekening,saldo serta informasi penting lainya sudah diedit dengan data dummy”

Halaman Home

Perubahan :

• Perubahan menu berdasarkan menu yang sering digunakan user dan dapat dirubah sesuai dengan keinginan user.
• Penambahan tipe kartu untuk membantu user mengingat tipe kartu dan batasan maksimal setiap harinya
• informasi mengenai transaksi terakhir yang telah dilakukan

Halaman Transfer

Perubahan :

• Penambahan informasi mengenai saldo dan nomor rekening
• Penambahan fitur tambah kan rekening tanpa harus melakukan transaksi terlebih dahulu
• Perubahan warna text button lanjut menjadi hitam agar memiliki contrast ratio yang lebih baik. Untuk nilai contrast ratio text berwarna putih pada button sebesar 2.97, jika warna hitam sebesar 7.06.

Halaman Konfirmasi Password Transaksi

Perubahan :

• Penambahan informasi bahwa saldo sekarang
• Perubahan kolom memasukan password transaksi menjadi pop up untuk mencegah user lupa memasukan password transaksi
• memberikan pembeda ketika icon mata aktif dan tidak

Halaman Riwayat Transaksi

Perubahan :

• Memberikan opsi jangka waktu transaksi
• Memberikan kategori transaksi seperti sesama BNI, antar bank, pembayaran, dll
• Perubahan kode D (Debit) menjadi “+” pada awal nominal saldo untuk memberikan informasi saldo masuk
• Perubahan kode K (Kredit) menjadi “-” pada awal nominal saldo untuk memberikan informasi saldo keluar
• Penambahan informasi jumlah transaksi yang telah dilakukan berdasarkan jangka waktu yang telah dipilih sehingga user dapat memfilter jangka waktu transaksi yang diinginkan.

Login

Perubahan :

• Perubahan icon mata saat aktif dan tidak
• Menambahan FAQ pada halaman home untuk memeprmudah user apabila memiliki kebingungan seputar aplikasi

Status transaksi

Perubahan :

• Pengelompokan informasi mengenai penerima dan pengirim
• Perubahan warna text button lanjut menjadi hitam agar memiliki contrast ratio yang lebih baik. Untuk nilai contrast ratio text berwarna putih pada button sebesar 2.97, jika warna hitam sebesar 7.06.

5 . Validation

Untuk memvalidasi design dan solusi yang saya berikan, saya melakukan usability testing kepada 5 user yang sesuai dengan persona. Saya meminta mereka untuk mencoba dari login hingga melakukan transfer. Berikut hasilnya

• 5 dari 5 user dapat memahami informasi riwayat transaksi
• 5 dari 5 user merasa terbantu dengan adanya fitur tambahkan nomor rekening favorit tanpa melakukan transaksi
• 5 dari 5 user menyukai tampilan baru lebih menarik dari sebelumnya
• 4 dari 5 user dapat menyelesaikan hingga tahapan transfer selesai
• 4 dari 5 user merasa tertolong dengan tampilan saat memasukan password transaksi dibuat pop up
• 3 dari 5 user merasa mendapatkan informasi yang lebih tepat

Berikut feedback yang diberikan user dari redesign yang sudah dilakukan :

“Bagus nih, Aku jadi kebantu gak perlu ke home lagi kalau buat liat saldo aku berapa pas transfer” — Andina

“Akhirnya aku bisa gak sering-sering ganti password transaksi, ribet soalnya euy … suka kelupaan masukinnya” — Bagus

“Fitur bagus nih, jadi aku bisa add no rekening temen aku buat jaga-jaga kalau nanti aku mau transfer jadi gak perlu deh susah-susah ngechat dia buat minta nomor rekeningnya, soalnya pada slowrespon hahaha” — Dhini

Kesimpulan

Aplikasi BNI mobile banking memang sudah cukup bagus, namun terdapat beberapa hal dalam UX yang perlu untuk diperbaiki lagi. Saya telah mencoba untuk melakukan perbaikan terhadap UX pada aplikasi ini, saya senang melihat feedback dari user, hampir 90% user menyukai solusi yang telah saya berikan. Dari redesign ini saya mendapatkan beberapa pengalaman seperti lebih memperhatikan penggunaan warna agar mendapatkan nilai contrast ratio cukup bagus sehingga tingkat readability lebih baik dari sebelumnya, saya juga dapat mengembangkan design thinking yang telah saya pelajari sebelumnya, lalu dalam hal validasi lebih baik untuk menggunakan prototype sehingga user dapat merasakan experience dalam menggunakan aplikasi tersebut.

Terimakasih sudah meluangkan waktu untuk membaca artikel saya. Kamu bisa langsung memberikan masukan atau pertanyaan kepada saya pada kolom komentar.

linkedln : www.linkedin.com/in/fitri-eka-c

Dribbbel : https://dribbble.com/fitriekac