fbpx

MOBILE BANKING SYARIAH MANDIRI APP REDESIGN - UI/UX CASE STUDY

Jenis :

MOBILE APP UI DESIGN

Teknik :

-

Software :

FIGMA

Kategori Kelas :

UI/UX DESIGN

Mulya Sakti, UI/UX Designer.

---

Deskripsi Karya :


Hello para reader!!

Di artikel medium pertama saya kali ini,saya akan menjabarkan hasil studi kasus saya tentang user interface dan user experience dari Mobile Banking Mandiri Syariah.

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..

unsplash-image

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 :

1-w9HjrdrrtiHEoI71rQ_9_A

Mutasi rekening aplikasi Mandiri Syariah.

1-iO_NTVkASAbe5HZ67glVZg

Halaman transfer aplikasi Mandiri Syariah.

1-cunOr6zrwHUswic2Mai_0w

Masalah privasi aplikasi Mandiri Syariah.

1-gaFnseTEkDJID-O6wPxOZQ

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 .

1-WUKNlSeTeMneTIMUVzMUTw

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.

1-TJZpDAdRSwa_oWVOa-JqXQ

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) :

Food-Recipes-Mobile-App-1960
1-HYqkZo_gFo3HtuKKMGHy7g

Dashboard/Home.

1-SeYA6IYtVPqBJO5iizETRA

Hamburger Menu.

1-Uw7TyqhkO761FJy5o2qBJA

Menu Pembayaran.

1-iaShejckCjA3Mb6foV4MwQ

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.

Follow kami di Instagram, Facebook, dan Youtube.

Logo_Full_1_white

© 2018 - 2020, Pixel Ninja Indonesia. All Rights Reserved.