(UX Case Study) Re-design Mobile Banking BCA

Main Design Overall

Haloo, pertama saya ucapkan terimakasih untuk yg sudah menyempatkan waktu untuk membaca ini.

Pertama kenapa mengambil case study ini ? karena bermula dari salah satu rekan kelompok yg mengalami kesulitan dalam penggunaan apps m-BCA. Dari 6 orang dalam kelompok memiliki pandangan masing masing mengenai problem yg dialami.

Emhpaty (User interview)

Timeline

Pada tahap awal didapatkan beberapa masalah dari masing masing individu dalam kelompok, ada beberapa fokus permasalahan. Lalu untuk melakukan validasi dari opini, mencari user dan dilakukan interview dengan pertanyaan yg sudah di diskusikan sebelumnya.

Undraw ilustration

Define

(User Persona, Affinity Diagram, Competitive Analyze and HMW)

1. User Persona

User 1 (Ilustratation by openpeeps)

“Tidak bisa download transaksi > 1 bulan”

- User 1

User 2 (Ilustratation by openpeeps)

“Tampilannya perlu ada penambahan dan pengelompokan fitur — fitur baru dan update”

- User 2

B. Affinity Diagram

Affinity Diagram

Pada Affinity diagram ini didapatkan beberapa garis besar yg bisa menjadi fokus dalam perbaikan.

C. HMW

Dari user problem yg diambil disini adalah “Proses transfer dengan rekening baru yg ribet serta halaman mutasi” didaptkan HMW yaitu :

“Bagaimana jika kita redesign proses pada m-transfer dengan perbaikan pada tampilan serta user flow sehingga kebutuhan user untuk bisa transfer dengan efektif, efisien dan aman terpenuhi”

Ideate (Competitive Analyze)

Untuk competitive analyse disini ada beberapa brand yg digunakan untuk perbandingan, antara lain:

1. BRI Mobile
2. BNI Mobile
3. Mandiri Mobile
4. OCBC
5. Jenius

Dalam competitive analyse ada beberapa fokus sebagai benchmarking yaitu Registrasi, Homepage, QR Code, Keamanan kode akses, cardless, bukti transfer dan mutasi rekening.

C. Result

Dipilih beberapa fokus problem, dari hasil diskusi didapatkan beberapa point yg menjadi fokus utama dalam project ini.

1. Memperbaiki UI apps
2. Memperbaiki UX Transfer
3. Memudahkan user ketika menyimpan bukti transfer
4. Halaman mutasi

Design

(Design System, Wireframe, Lo-fi, Hi-fi, User Flow)

A. Design System

Grey and Blue Logo of BCA

Font Style

Color Style

Shadow Style

B. Wireframe

Wireframe

B. Lo-fi

Lo-fi Version

Pada Lo-fi ini beberapa fitur dan layout yg sudah menggambarkan sedikit banyak dari tampilan yg asli. Untuk button dan Logo juga saya tambahkan pada versi Lo-fi ini.

C. Hi-fi

Hi-fi Version

Lalu masuk kepada Hi-fi, yg dimana pada versi ini saya lebih banyak memainkan warna dan juga ada sedikit perubahan seperti tata letak ataupun ukuran button yg lebih besar dari versi lo-fi.

Pada tahap Hi-fi ini sebisa mungkin memperhatikan hal yg kecil, seperti ukuran rounded, warna, tata letak, dll.

D. User Flow

User Flow With Miro

Iteration

(UT, and Final Design)

A. Usability Testing

Pada tahapan Usability Testing ini saya mendapatkan 5 pengguna m-BCA yg bersedia untuk menjadi user. Dalam prosesnya ada beberapa user yg merasa kesulitan ketika mengikuti arahan / skenario yg sudah ditentukan.

Login Page

Homepage

m-Transfer Page

Mutasi Page

Mutasi Page

Saatnya melakukan iterasi dari hasil Usability Testing. Dari hasil tersebut ada feedback yg diberikan oleh user. Saya mengambil beberapa feedback dari user, yaitu :

1. Penentuan lokasi Mutasi yg kurang tepat
2. Penempatan logo yg kurang tepat
3. Warna terlalu datar, perlu adanya gradasi
4. Informasi uang masuk & keluar yang perlu diperbaiki pada halaman mutasi
5. History transfer pada halaman m-transfer

Final Design

Splash screen, Login Page and Homepage

m-Transfer and Mutasi Page

Akhir kata saya ucapkan terimakasih untuk para pembaca dan juga dipersilahkan memberikan masukan dan kritiknya untuk artikel ini.

“Setiap orang mempunya jatah gagal, maka habiskan jatah gagal mu ketika muda”

- Dahlan Iskan

Jika anda ingin mencoba prototype ini, jangan sungkan berkunjung dan merasakan keseruannya disini.