Study case: Redesign Banking App
Memudahkan kebutuhan utama user ketika menggunakan aplikasi perbankan
Sebelum saya mulai mengerjakan, langkah pertama yang saya lakukan adalah “Langkah 0: Mencerna Segala Informasi Yang Ada Dalam PDF”. Jadi, after memutar-mutar PDF beberapa kali, mengulang-ngulang membaca takut ada yang terlewat atau salah paham, saya mencoba mencatat poin-poin penting dari PDF dengan menggunakan bahasa saya sendiri.
Then, setelah saya anggap paham atas pekerjaannya, saya mulai membagi langkah-langkah (dibaca: rencana) untuk mengerjakaan test tersebut. Saya membaginya dalam 7 langkah, yaitu:
- Mencari Kebutuhan Pengguna (User Research)
- Menentukan Scope
- Mendesain Information Architecture
- Wireframing
- Mockuping
- Simulasi
- Menulis Dokumentasi
Dan yang sekarang sedang saya lakuin ini, tepat, langkah terakhir — #7. Menulis Dokumentasi.
Ini dia cara saya melahirkan solusi desain untuk ‘Bank Sendiri’, here we goo..
1. Mencari Kebutuhan Pengguna
Saya mencoba mengingat-ngingat, memilah-milah 5 orang yang saya kenal untuk dijadikan narasumber. Saya memilih 5 orang dari berbagai kalangan. Ada yang atasan Startup Unicorn, ada yang kerja di Bank, ada Mahasiswa, ada Ibu Rumah Tangga dan ada Guru yang tinggal di lingkungan rural.
Ask: Kenapa hanya 5 orang?
Jawab: According to metode Design Sprint nya Jake Knapp, dan metode risetnya Nielsen Norman. 5 adalah angka ajaib *Setidaknya untuk riset dan testing
Karena dari informasi PDF yang saya baca hanya ditugaskan untuk memilih 2 use case saja. Singkat cerita, kepada 5 orang tersebut saya hanya bertanya tentang “Apa 2 hal yang paling diinginkan dari Banking App?” atau “Apa 2 fitur paling penting dari sebuah Banking App?”. Alasan saya lebih memilih menanyakann Needs ketimbang Pains adalah karena sudah ada banyak aplikasi tentang Bank. Bank-bank besar yang sudah banyak nasabahnya sudah mempunyai aplikasinya masing-masing. Karena itu, saya beranggapan pain-pain besarnya sudah teratasi, oleh si aplikasi Bank besar tadi. Kalaupun saya memaksakan menanyakan pains, saya beranggapan para narsum saya pasti hanya akan menyampai pain-pain kecilnya saja (printil-printil), nanti jadinya saya hanya ngedesain hal-hal yang kecil aja dong. Jadi, keputusan saya bulat untuk menanyakan 2 Needs terbesar dari sebuah Banking App. Gitu ceritanya..
Dari hasil riset saya ini, saya memvisualisasikannya dalam bentuk mini Persona, ini dia:
Karena ketika tanya-tanya (dibaca: wawancara) saya tidak meminta izin untuk menampilkan foto narsum di Persona, maka saya mencoba mencari gambar gratis dari pexels.com. Xie-xie Pexels!
Dari proses User Research ini saya menyimpulkan 2 hal yang paling diinginkan dari user dari sebuah Banking App adalah:
- Transfer
- Cek riwayat
2. Menentukan Scope
Untuk mengisi konten apa aja yang harus ditambahkan pada fitur Transfer dan Riwayat ini, saya mencoba mencari inspirasi dengan mempelajari aplikasi Jenius, aplikasi Bank BRI, dan aplikasi Bank Mandiri. Saya mencatat semua fitur-fiturnya, mencoba merangkai flownya. Merenung for a while, saya mulai mencatat poin demi poin fitur dan konten apa aja yang mau dimasukkan ke aplikasi yang akan saya buat dengan mempertimbangkan kebutuhan user. Mencoba meningkatkan fitur yang sudah ada, meng-create sebuah fitur atau konten baru. Dan, ya, ini dia konten-konten yang akan dimasukkan ke dalam halaman Beranda, fitur Transfer dan fitur Riwayat dalam aplikasi Banking App yang akan dibuat:
A. Halaman Beranda
- Gambar kartu debit atau kartu kredit yang dimiliki pengguna
- Saldo aktif
- Nama pemilik rekening
- Nomor rekening
- Konten Transfer ke orang-orang terdekat
- Konten Riwayat
- Konten e-Wallet
B. Fitur Transfer
- Kontak favorit
- Bank Tujuan
- Nomor rekening tujuan
- Periksa nomor rekening
- Nominal Transfer
- Saldo
- Catatan
- Konfirmasi data transfer
- Konfirmasi Password
C. Fitur Riwayat
- Cari
- Filter
- Informasi jumlah data
- Tombol Download data
- Tanggal transaksi
- Nama transaksi
- Saldo awal
- Saldo akhir
- Total uang masuk
- Total uang keluar
Terakhir pada step ini, saya menentukan Metrics untuk pengembangan aplikasi ini. Metrics tersebut adalah Completion Rate dan Task Time.
3. Mendesain Information Architecture
A. User melakukan transfer uang
B. User melihat riwayat transaksi
Saya bingung ngejelasin use case dan flow nya gimana. Saya harap mereka bisa ngejelasin diri mereka masing-masing.
Ps: Saya menerima koreksi atau mungkin pertanyaan kalau ada yang kurang jelas dari use case dan flow yang saya buat.
4. Wireframing
Setelah diputuskan fitur dan konten apa aja yang akan dimasukkan ke dalam aplikasi. Saya mulai mencoba mencorat-coret, sketching dan mendesain wireframe.
Setelah itu, saya mencoba mendesain wireframe dengan lebih baik bersama partner andalan saya — Laptop. Hasilnya terlihat dibawah ini:
5. Mockuping
Wireframe sudah ada. Saatnya bagi saya mengubahnya kedalam bentuk Hi-Fi. Sambil menunjukkan desain mockupnya, mari kita bedah satu per satu Mockup aplikasi Bank Sendiri ini.
Halaman Beranda
- Bagian header, menunjukan data rekening user. Dengan informasi gambar kartu rekening yang user miliki, saldo aktif, nama user dan nomor rekening user. Disediakan juga button Hamburger untuk membuka navbar.
- Bagian transfer, menampilkan 3 rekomendasi orang yang paling sering di transfer oleh user. Ada tombol “>” untuk memudahkan user memasuki halaman transfer.
- Bagian riwayat, memudahkan user untuk melihat 3 transaksi terakhir. Tombol “>” digunakan untuk masuk ke halaman riwayat.
- Bagian e-Wallet, memudahkan user untuk mengisi saldo e-Wallet entah itu e-Money yang dikeluarkan pihak Bank Sendiri, atau e-Wallet dari pihak ketiga seperti Gopay, Ovo atau Dana.
Navigation Bar
- Bagian ini menampilkan informasi data user seperti nama yang terdaftar di rekening, nomor rekening. Ada juga teks button “Lihat profil” untuk masuk ke halaman Profil. Mengklik di seluruh bagian ini juga akan membawa user ke halaman profil.
- Menu utama, bagian ini menampilkan layanan-layanan utama yang disediakan pihak Bank. Terdapat beberapa menu yang ketika di klik akan membawa user ke halaman menu yang bersangkutan. Misalnya menu Transfer untuk mentransfer uang, menu e-Wallet untuk memanage dompet digital, menu Pembayaran untuk membayar tagihan atau membeli kuota internet, menu Riwayat untuk melihat riwayat transaksi yang sudah dilakukan.
- Menu tambahan, digunakan menampilkan layanan lain selain layanan utama dari Bank. Misalnya ada menu Orang Terdekat untuk mengatur kontak rekening orang-orang terdekat, menu Notifikasi untuk melihat info-info terbaru dari bank seperti newsletter, promo dan lain sebagainya, menu Bantuan apabila user menemukan masalah atau kebingungan terhadap sesuatu, dan ada menu Pengaturan untuk masuk ke halaman Pengaturan.
- Button Keluar apabila user ingin Log Out dari aplikasi.
Halaman Transfer
- Daftar rekening orang-orang terdekat yang sudah di save. Enak kan jadinya lebih mudah, ga usah input bank dan nomor rekening tujuan lagi kalau udah di save.
- Bagian ini digunakan apabila user akan mentransfer uang ke rekening baru atau ke rekening yang tidak tersimpan di daftar rekening orang-orang terdekat. Disini user menginput Bank tujuan, dan nomor rekening tujuan. Lalu, user wajib menekan tombol “Cek” untuk memvalidasi nomor rekening yang dituju.
- Data rekening tujuan, di bagian ini sistem akan menampilkan nama dari pemilik rekening yang dituju yang sebelumnya telah diinputkan oleh user. Ada tombol “+” juga apabila user ingin menambahkan data rekening tersebut ke daftar rekening orang-orang terdekat. Data rekening tujuan ini baru akan muncul apabila user sudah menginputkan data rekening yang dituju dan menekan tombol “Cek”.
- Tombol Lanjut, tombol lanjut baru akan enable statusnya apabila user sudah menekan tombol “Cek” yang ada pada bagian 3. Itupun, kalau data bank dan nomor rekening yang dituju sudah benar. Digunakan untuk masuk ke halaman selanjutnya.
Halaman Masukan Nominal
- Bagian ini digunakan untuk menginputkan nominal uang yang akan di transfer.
- Bagian catatan digunakan untuk keterangan atau pesan yang ditujukan kepada penerima. Misalnya: uang makan, uang transport, dan lainnya. Ini sifatnya opsional, jadi boleh diisi dan engga pun juga gapapa.
- Tombol “Lanjut” digunakan untuk melanjutkan proses transfer.
Halaman Konfirmasi
- Bagian ini dilakukan untuk mengkonfirmasi ulang data transfer yang dilakukan. Ada data yang perlu di cek ulang seperti dari rekening, rekening tujuang nominal transfer dan catatan.
- User wajib memasukan password aplikasi untuk proses verifikasi dan validasi.
- Tombol Kirim ini adalah langkah terakhir untuk proses transfer uang. Apabila password yang dimasukan benar, maka akan masuk ke halaman berhasil. Namun, kalau password yang dimasukan salah maka user akan diberitahu melalui suatu pop-up dan harus menginputkan kembali password yang benar.
Halaman Berhasil
- Bagian ini menampilkan informasi kalau transfer berhasil dilakukan.
- Tombol Lihat Struk digunakan untuk masuk ke halaman tampilan struk dari transfer yang baru saja dilakukan.
- Apabila tombol Selesai ditekan, maka user akan kembali ke halaman Beranda.
Halaman Riwayat
- Header, menampilkan data Saldo akhir, saldo awal, total uang masuk, total uang keluar.
- Keterangan waktu, masih dalam bagian Header sebenernya. Hanya, bagian ini lebih spesifik memberitahu user tentang rentang waktu yang digunakan untuk menampilkan data-data transaksi.
- Info jumlah transaksi, menampilkan jumlah data transaksi yang terjadi.
- Button Download, digunakan apabila ingin mendownload data-data riwayat transaksi.
- Bulan, informasi bulan dan tahun dari data transaksi yang akan dimunculkan.
- Data riwayat transaksi, menampilkan data-data riwayat transaksi yang pernah dilakukan. Didalamnya menampilkan informasi seperti Nama transaksi, waktu transaksi dalam tanggal bulan dan tahun, nominal transaksi, dan tipe transaksi (uang masuk atau uang keluar).
- Button Cari, digunakan apabila user ingin menampilkan riwayat transaksi berdasarkan kata kunci tertentu.
- Button Filter, digunakan apabila user ingin menampilkan riwayat transaksi berdasarkan filter tertentu seperti rentang waktu, atau jenis transaksi yang dilakukan.
Halaman Filter Transaksi
- Digunakan untuk memfilter data riwayat transaksi berdasarkan nama transaksinya. Misalnya: Transfer, Tagihan, Bunga, Admin, dan nama transaksi lainnya. Bisa dikombinasikan juga untuk lebih dari 1 nama transaksi.
- Digunakan untuk memfilter data riwayat transaksi berdasarkan rentang waktu transaksinya. Defaultnya adalah “Bulan ini”. Tapi bisa diubah juga berdasarkan rentang tanggal (selama itu tidak lebih dari 3 bulan ke belakang), 1 bulan yang lalu, bulan yang lalu dan atau 3 bulan yang lalu.
- Button Terapkan, digunakan untuk menerapkan filter yang sudah diatur. Dan setelah itu, maka akan kembali ke halaman riwayat dengan menampilkan data riwayat transaksi yang terlah difilter.
Kurang lebih, itu lah mockup-mockup yang telah didesain, khususnya untuk fitur Transfer dan Riwayat di aplikasi Bank Sendiri.
All assets
6. Simulasi
Bagian ini harusnya diisi dengan testing, tapi ga kebetulan saya lagi ada di kampung orang di Bekasi yang mana tidak mudah untuk menemukan 5 orang untuk dijadikan tester. Jadi, saya ingin mengganti proses testingnya dengan simulasi dengan menampilkan user flow.
Simulasi: Seorang user ingin mentransfer uang sebesar Rp. 100.000 kepada seorang teman baru dengan nomor rekening tujuannya adalah 1145 55 12345 789, Bank ABC a.n Pablo Picasso.
Ini dia user flow nya:
Ketika mengerjakan ini, saya menikmati setiap proses nya. Lelah? Iya, sakit punggung juga iya. But, woww, saya merasakan energi yang mengalir di tangan, ide-ide terbersit melayang di dalam dan di atas kepala, dan hati yang ikut senang. Lebay. Jujur, itulah yang saya rasakan. Menyenangkan.
Kalau saya dikasih kesempatan, saya juga ingin membawa perasaan ini ketika mengerjakan tugas-tugas di Kumparan. Ingin banget sihh. Aslina. Menikmati kerja di Kumparan.
I hope.
Salam,
Adit
(Kebetulan lagi di Bekasi, 4 Feb 2019, 16:45)
