MOBILE BANKING SYARIAH MANDIRI APP REDESIGN - UI/UX CASE STUDY
Jenis :
MOBILE APP UI DESIGN
Teknik :
-
Software :
FIGMA
Kategori Kelas :
UI/UX DESIGN
GOALS
a. Menciptakan design user interface aplikasi yang lebih user-friendly.
b. Memudahkan user m-banking mandiri syariah dalam menggunakan aplikasinya.
c. Memberikan solusi dari beragam masalah yang dikeluhkan user m-banking mandiri syariah.
Selanjutnya saya akan bahas secara rinci dan mendetail tiap tahapan, mulai dari user research sampai hasil re-design aplikasinya.
Enjoyy..
RESEARCH
Di tahap pertama ini, saya melakukan riset mengenai tampilan serta pengalaman pengguna dalam memakai mobile banking mandiri syariah agar nantinya solusi yang saya hasilkan bisa memecahkan masalah yang terdapat di aplikasi mandiri syariah secara optimal.
Untuk risetnya saya mengumpulkan problem user dari ulasan di playstore dan membuat dua buah kuesioner berbeda dalam bentuk google form, yang satu lebih bagaimana pengalaman mereka di saat menggunakan aplikasi m-banking mandiri syariah dan kuesioner lainnya berupa penilaian serta tanggapan partisipan mengenai beberapa tampilan m-banking Mandiri Syariah.
Ini lampiran screenshot dari ulasan aplikasi Mandiri Syariah di Play Store :
Mutasi rekening aplikasi Mandiri Syariah.
Halaman transfer aplikasi Mandiri Syariah.
Masalah privasi aplikasi Mandiri Syariah.
Masalah UX aplikasi Mandiri Syariah/
Jika dibuatkan rangkuman masalahnya dalam bentuk poin-poin, maka akan seperti ini (sudah termasuk dari kuesioner survei) :
Aspek User Experience :
a. Tidak bisa menghapus nomor rekening yang pernah ditransfer,karena sangat mengganggu pengguna bila menumpuk di history transfer.
b. Saat masuk pertama kali ke aplikasi,tidak ada halaman login dengan kata sandi atau sidik jari. User merasa kurang aman dan nyaman. Baru muncul disaat mengklik suatu fitur.
c. Setelah masuk ke beberapa halaman menu dari suatu fitur,setelah diklik tombol back malah kembali ke halaman dashboard.
Aspek User Interface :
a. Tampilan dan visual hierarchy halaman daftar mutasi sangat berantakan,juga tidak ada white space,harusnya bisa dibuat model tabel agar rapih dan bisa diurutkan per tanggal dan bulan.
b. Icon tombol terlihat berbeda style, jadi tidak konsisten (dalam ketebalan outline, dan lainnya). tombol QR dan message diatas kelihatan tidak nyambung dengan style sehingga terlihat terpaksa digabung. Dan tombol scan di bawah terlihat tidak nyambung dengan tombol lainnya karena berwarna biru.
c. Stoke kuning di sekitaran tombol fitur tidak cocok dipadu padankan dengan tombol fitur yang semuanya berwarna abu abu dan icon yang hijau.
d. Halaman dari hamburger icon menu sangat buruk shingga berkesan terlalu menumpuk,terdapat kemungkinan untuk sulit dipelajari bagi yang agak gaptek.
e. Tampilan opsi jenis pembayaran di halaman pembayaran terlalu kaku dan menumpuk ,menyusahkan orang yang gaptek.
RUMUSAN MASALAH
Agar pemberian solusi dalam bentuk mockup nantinya dari masalah di tahap riset lebih mudah, berikut pengidentifikasian masalah dalam bentuk pertanyaan dan juga pernyataan.
a. Bagaimana membuat visual halaman daftar mutasi yang mudah dimengerti juga memiliki white space yang cukup dan visual hierarchy di halaman daftar mutasi bisa teratur sehingga bisa menghemat user cognitive load?
b. Bagaimana cara membuat style tiap button di halaman dashboard lebih konsisten sehingga lebih nyaman saat dilihat dan bisa mudah dikenali sebagai button.
c. Bagaimana mengatur tata letak daftar pilihan menu dari fitur pembayaran yang lega antar pilihan dan membuat visualnya menjadi lebih user-friendly.
d. User bisa menghapus history transfer (nomor rekening) yang tidak lagi dibutuhkan agar tampilan menu transfer tetap simple.
e. Bagaimana mengatur tata letak daftar menu dari hamburger icon sehingga tidak terlalu menumpuk dan lebih user friendly.
f. Penginputan kata sandi diletakan di awal peluncuran aplikasi agar privasi pengguna lebih terjaga.
TASK FLOW
Berikut step yang biasanya dilewati user saat melakukan suatu tugas di aplikasi, saya ambil contoh dalam situasi user ingin melihat informasi saldo yang terbaru.
Masalah :
Dapat dilihat dari flownya bahwa aplikasi ini bisa langsung dibuka tanpa memasukan kata sandi di awal launch app.
Ada user yang mengeluhkan tentang ini dan dia merasa kurang nyaman dan agak khawatir bila flownya seperti ini (walau nantinya juga diminta passwordnya sebelum task selesai).
Apalagi jika dalam menyelesaikan suatu tugas, apabila ditahap-tahap akhir user salah menginputkan pin, entah kenapa sistem langsung kembali ke dashboard app bukannya mengulangi penginputan pin banking nya.
Sumpah deh ini bikin kzl banget .
Task flow mandiri syariah.
Solusinya :
Terkait permasalahan yang sudah dijelaskan sebelumnya, maka solusi yang bisa saya berikan yakni dalam bentuk task flow. Sekali mendayung dua pulau terlampaui hehe.
Task flow mandiri syariah.
HIGH FIDELITY
DESIGN
Tahap selanjutnya yakni mengkonversi rumusan masalah ke bentuk design UI nya. Saya melewati tahap pembuatan wireframe karena biar lebih cepat dan ringkas saja, hehe, dan juga konsep aplikasinya sudah cukup jelas. Sehingga saya hanya perlu membuat beberapa tampilan aplikasi sesuai rumusan masalah yang sudah dituliskan di tahap kedua.
Awalnya kita perlu menentukan guideline desain seperti menentukan tipe font, icon dan warna yang digunakan agar nantinya dalam tahap desain mockup bisa lebih konsisten elemen-elemen yang ada didalamnya. Setelah menentukan guideline desain, barulah setelahnya saya membuat design UI nya.
Berikut hasil re-design UI aplikasi Mandiri Syariah yang menurut saya lebih user-friendly (dibuat dengan tools Figma) :
Dashboard/Home.
Hamburger Menu.
Menu Pembayaran.
Daftar Mutasi.
Disini adalah tempat yang cocok buat kamu belajar Graphic Design, UI/UX Design, Video Editing, 3D Design, dan Motion Graphic.
Cukup sekali bayar, kamu bisa akses materi selamanya.
© 2018 - 2020, Pixel Ninja Indonesia. All Rights Reserved.