Anjeli Sapitri1 , Muhamad Wahyu Saputra2, Mesy Aniza Putri3 , Yoyon Efendi4, Dwi
Haryono5
1
Teknik Informatika/STMIK Amik Riau, Jl.Purwodadi Indah, Sapitrianjeli@gmail.com
2
Teknik Informatika/STMIK Amik Riau, Jl.Purwodadi Indah , Wahyustaw@gmail.com
3
Teknik Informatika/STMIK Amik Riau, Jl.Purwodadi Indah, Mesyaniza@gmail.com
4
Teknologi Informasi/STMIK Amik Riau, Jl.Purwodadi Indah, yoyonefendi@stmik-amik-riau.ac.id
5
Sistem Informasi/STMIK Amik Riau, Jl.Purwodadi Indah, dwiharyono@sar.ac.id
Anjeli Sapitri,
Email: Sapitrianjeli@gmail.com
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
transfer terpilih desain B dengan persentase 55,6%. Selain
itu, penelitian ini menghasilkan hasil yang konsisten
antarmuka pengguna dalam hal warna, font, gambar dan tata
letak serta pengalaman pengguna yang mudah pengguna
memahami untuk menggunakan aplikasi dan mendapatkan
informasi sesuai kebutuhan. Hasil desain diuji menggunakan
metode Usablility Testing guna untuk mencapai kemudahan
menggunakan dan penerimaan pengguna dengan desain yang
diusulkan atau yang telah di buat.
Abstract
BSI Mobile Banking is an application owned by BSI because it not only has transaction features but
also provides sharia features that can make transactions easier for customers. Mobile Banking is a
banking product service designed to simplify the banking process for customers and banks. With BSI
Mobile, customers can make transactions independently via BSI Mobile without having to go to a
bank branch or ATM. Apart from that, the existence of BSI Mobile helps reduce customer queues at
the banking hall, increases the number of transactions via BSI e-channels and makes service quality
effective and efficient, but the features and design of BSI M-Banking are still incomplete and no
longer attractive, so experienced a decline in use of M-Bangking BSI. Therefore, it requires User
Interface (UI) and User Experience (UX) design as a basis for building a platform to create more
attractive designs and features. The Lean UX method focuses on user satisfaction with the user
interface created, so this method was chosen in this research to develop the user interface design.
Based on analysis, implementation and evaluation, the final prototype is a combination of prototypes
A and B which have been validated in terms of appearance, as well as criticism and suggestions from
consumer users and technicians. Prototype A was selected for 5 features and Prototype B was
selected for 5 features. On the logo page design A was selected with a percentage of 72.2%, on the
main menu page design A was selected with a percentage of 80.6%, on the home page design A was
selected with a percentage of 69.4%, on the account information page design A was selected with a
percentage of 75%, and the selected transfer page was design B with a percentage of 55.6%. In
addition, this research produces consistent user interface results in terms of colors, fonts, images and
layout as well as a user experience that is easy for users to understand to use the application and get
information as needed. The design results are tested using the Usability Testing method in order to
achieve ease of use and user acceptance with the proposed or created design.
113
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
et al., 2023). Selain itu, Mobile banking disesuaikan dengan pengalaman
merupakan layanan perbankan yang penggunanya (Widiatmoko et al., 2022).
memungkinkan nasabah bank melakukan User Interface adalah sebuah tampilan
transaksi perbankan melalui ponsel atau visual yang saling berkaitan antara user
smartphone, seperti halnya BSI dengan sebuah sistem, melalui sejumlah
Mobile(Vadly Azhar Lubis & Siregar, 2021). perintah atau teknik untuk mengoperasikan
Selain itu, aplikasi mobile juga dikenal sistem tersebut, meng-input data, dan
sebagai aplikasi yang dapat diunduh dan memanfaatkan isinya (Jocelyn & Sutanto,
memiliki fungsi tertentu sehingga menambah 2022).
fungsionalitas dari perangkat mobile itu Pembuatan user interface dilakukan
sendiri(Muzawi et al., 2018). dengan tujuan mempermudah penggunaan
Bank Syariah Indonesia (BSI) adalah teknologi tersebut oleh pengguna, yang
bank di Indonesia yang berbasis di bidang sering disebut dengan istilahyang ramah
perbankan syariah yang juga menyediakan pengguna (Pamungkas, 2023).
layanan mobile banking. Bank meluncurkan Tampilan UI/UX yang baik adalah suatu
BSI Mobile sebuah media layanan transaksi faktor penting dalam keberhasilan sebuah
perbankan berbasis teknologi informasi aplikasi. Menciptakan pengalaman pengguna
untuk memanfaatkan perkembangan yang menyenangkan, intuitif, dan efisien
teknologi informasi dalam layanan sangat penting untuk meningkatkan adopsi
perbankannya (Agustina & Krisnaningsih, pengguna serta mempertahankan kepuasan
2023). Perbankan adalah segala sesuatu yang mereka (Rifki & Haryono, 2023).
menyangkut tentang bank, mencakup Lean UX merupakan sebuah metode
kelembagaan, kegiatan usaha, serta cara, dan pengembangan user experience (UX) yang
proses dalam melaksanakan kegiatan berorientasi pada pengguna (user- centered).
usahanya (Kadir, Abdul & Machasin, 2014). Lean UX memiliki fokus untuk
Dalam Pengembangan layanan perbankan meningkatkan hubungan kolaborasi dalam
tidak lagi hanya dengan slogan layanan yang tim, menghilangkan proses yang tidak perlu,
aman dan terpercaya, namun juga mampu memaksimalkan efisiensi kerja, dan belajar
memberikan layanan yang disesuaikan dari kesalahan agar akhirnya mencapai solusi
dengan kebutuhan nasabah yang telah yang lebih baik. Di dalam siklus metode
berkembang searah dengan perkembangan Lean UX, terdapat 3 aktivitas utama, yaitu
teknologi (Khoiriyah & Putra, 2022). Untuk think, make, dan check (Yunus & Wahyu,
menghadapi dunia teknologi yang sudah 2021).
maju dengan sangat pesat ini harus Model Lean UX adalah sebuah model
dimanfaatkan sebaik baiknya terutama dalam yang membawa sebuah sifat nyata dari
hal memaksimalkan menggunakan internet, sebuah produk agar memiliki keberhasilan
maka Bank BSI akan tetap dapat bersaing. dan kesuksesan yang lebih cepat secara
Oleh karena itu perbankan harus bekerja kolaboratif dan lintas fungsional dengan
lebih keras untuk memasarkan produk agar meminimalisir penekanan pada dokumentasi
dapat menarik nasabah seperti menarik minat namun berfokus pada peningkatan
nasabah menggunakan produk mobile pemahaman dari product experience yang
banking. Aktivitas penjualan harus selalu ada sedang dirancang (Musfikar et al., 2022).
di setiap perusahaan, baik itu berkiblat pada Metode Lean UX berfokus pada kepuasan
keuntungan dan usaha sosial (Pangestu, pengguna dengan antarmuka pengguna yang
2022). dibuat, sehingga metode ini dipilih pada
Sebagai langkah awal untuk mendukung penelitian ini untuk mengembangkan desain
pengembangan aplikasi ini, maka perlu antarmuka pengguna (Hasibuan et al., 2023).
dirancang desain antarmuka aplikasi yang
114
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
Dari penjelasan di atas mengenai user
Interface dan user experience kita dapat
mengambil kesimpulan untuk
mengembangkan sebuah aplikasi tidak boleh
sembarangan, harus memperhatikan aspek-
aspek tertentu. Salah satunya adalah aspek
User Experience (UX) ketika menggunakan
aplikasi tersebut (Sihaloho, 2023).
Adapun solusi yang digunakan untuk
meyelesaikan permasalahan diatas adalah
dengan cara merancang UI/UX
menggunakan metode Lean UX. Metode ini
memiliki kelebihan seperti “Hemat Biaya,
Hemat Waktu, User-centric, dan Data-
driven” (Fathurrahman, 2022). Gambar 1. Halaman logo
Setelah data dianalisa, maka bisa
dilakukan perancangan wireframe yang
menjadi dasar dalam pembuatan design UI /
UX prototype. Wireframe ini merupakan
sketsa kasar yang bertujuan untuk
mempermudah dalam pembuatan user
interface (Angelica & Nas, 2023).
Maka dari itu, penulis memberikan solusi
untuk melakukan design UI / UX prototype
pada aplikasi M-Banking BSI berbasis
mobile dengan menggunakan Figma.
Diharapkan dengan adanya hasil desain
prototype M-Banking BSI yang baru agar
dapat lebih menarik minat nasabah BSI
dalam menggunakan M-Banking BSI
tersebut.
Berikut ini kami paparkan gambaran M-
Banking BSI:
115
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
2. Metode Penelitian
116
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
3. Run an experiment adalah tahapan
pengujian MVP yang telah dibangun
untuk memastikan Prototype yang
telah dibuat sesuai dengan asumsi
yang telah ditentukan.
4. Tahap akhir merupakan hasil dari
desain terbaru yang telah dibuat dan
desainnya disusun berdasarkan pilihan
mana yang paling banyak disukai oleh
responden.
117
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
3.4 Hipotesis
118
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
Tahap ini merupakan bentuk pernyataan semua device. Font ini juga mudah
penelitian yang ingin dibuktikan. terbaca dalam segala elemen.
Berdasarkan tahap asumsi, asumsi diubah
Sedangkan font yang digunakan
menjadi pernyataan hipotesis “Dengan
untuk desain B adalah font langar,
penerapan user interface yang baik pada
font lemon, dan font kelly slab.
aplikasi akan dapat memudahkan user dalam
ketiga font tersebut di pilih karena
menggunakan aplikasi”.
font tersebut tentunya juga sangat
3.5 Create a MVP Desain menarik dan agar bisa membedakan
yang mana desain A dan yang mana
1. Logo
desain B.
Identitas pada logo m-banking BSI
3.6 Wireframe
merupakan suatu hal yang
melambangkan bahwa aplikasi yang Pada tahap wireframe ini desain dan tata
di buat itu merupakan aplikasi M- letak diuraikan dalam warna hitam putih
Banking BSI. Logo terbaru yang untuk menampilkan desain UI yang lebih
sudah di rancang untuk M-Banking jelas bersama dengan detail visual lainnya.
BSI dapat dilihat pada gambar
Berikut ini gambar wireframe nya:
dibawah ini:
3. Tipografi
Font yang digunakan untuk desain
A adalah font inika, font inter, dan Gambar 17. Menu Utama
font inria serif. dari variasi ketiga
font di atas dipilih karena
perpaduannya terlihat menarik dan
bisa terbaca dengan baik dan rapi di
119
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
Gambar18. Beranda
120
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
pengguna. Tahap ini membuktikan bahwa
rancangan yang telah dirancang sesuai
dengan rencana dan kebutuhan pengguna
melalui dua tahap iterasi pengujian.
(Mayasari et al., 2021)
121
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
AD = Menurut bapak/ibu/teman-teman dari
gambar di atas desain menu info rekening
mana yang bagus dan di sukai?
Adapun kami paparkan dalam bentuk Gambar 30. Jawaban dari responden mengenai
persentase yaitu sebagai berikut: desain menu informasi rekening mana yang di
sukai
122
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
banyak/paling tinggi dengan masing-masing 69,4%, halaman informasi rekening
page nya sebagai winner. terpilih desain A dengan persentase 75%,
dan halaman transfer terpilih desain B
6. Conclusion and Recommendation dengan persentase 55,6%.
Berdasarkan hasil dari analisa,
7. User experience dapat dengan mudah
implementasi dan evaluasi perancangan user
dipahami oleh user ketika mengakses
interface/user experience pada desain M-
aplikasi dan mendapat informasi yang
Banking BSI menggunakan metode Lean UX
sesuai dengan kebutuhan berdasarkan
menghasilkan prototype final yang memiliki:
hasil pengujian yang telah dilakukan.
1. Skema warna yang terdapat pada desain
terbaru yang telah dirancang tersebut 7. Referensi
senada dan konsisten, yaitu warna orange Agustina, D. A., & Krisnaningsih, D. (2023).
dengan kode #FFA800 dan warna biru “Pengaruh Penggunaan Bsi Mobile
tosca dengan kode #0C949C, sehingga Terhadap Kepuasan Nasabah Di
menciptakan perpaduan warna yang Bsicabang Jenggolo.” Jurnal Tabarru’ :
Islamic Banking and Finance, Volume 6
menarik.
N, 180–185.
Angelica, I., & Nas, C. (2023). Design
2. Font yang digunakan baik itu pada desain UI/UX Prototype Aplikasi Pemesanan
A maupun pada desain B karena semua Produk Dimskuy Berbasis Mobile
font yang digunakan pada setiap desain Dengan Menggunakan Figma. Jurnal
yang dirancang tersebut terlihat menarik Manajemen Sistem Informasi, 1(1), 22–
dan bisa terbaca dengan baik dan rapi di 26.
semua device. Arrizki, F., Lubis, A. Y., & Lestari, D.
(2023). Pengaruh Bsi Mobile Dan
Pelayanan Terhadap Kepuasan Nasabah
3. Tampilan gabungan yang terdapat pada
(Studi Kasus Mahasiswa/I Perbankan
prototipe desain A dan desain B, dimana Syariah-Uinsu). Eksya, 4(1), 2746–
prototipe desain A terpilih untuk 4 fitur 8925.
yakni pada halaman logo, menu utama, Fathurrahman, A. (2022). Perancangan
beranda, dan menu informasi rekening. Ui/Ux Pada Startup Suvis Indonesia
sedangkan pada prototipe desain B yang Menggunakan Metode Lean Ux
terpilih hanya 1 fitur yakni pada menu Startup. 11, (הארץ8.5.2017), –2003
2005.
transfer.
Firmansyah, R. (2018). Usability Testing
Dengan Use Questionnaire Pada
4. Pada kuesioner user research terdapat Aplikasi Sipolin Provinsi Jawa Barat.
kritik dan saran sebagai bahan pembuatan Swabumi, 6(1), 1–7.
desain BSI yang baru agar menjadi lebih https://doi.org/10.31294/swabumi.v6i1.
menarik lagi. 3310
Hasibuan, F., Setiawan, H., Ali, E., &
5. Pada kuesioner usability testing terdapat Junadhi. (2023). Prototype Design User
pilihan mengenai desain mana yang Interface Sistem Preloved
Menggunakan Metode Lean Ux.
paling menarik menurut responden.
ZONAsi: Jurnal Sistem Informasi, 5(1),
137–148.
6. Pada halaman logo terpilih desain A
https://doi.org/10.31849/zn.v5i1.12915
dengan persentase 72,2%, pada halaman Jocelyn, J., & Sutanto, R. P. (2022).
menu utama terpilih desain A dengan Penerapan Metode Lean UX dan
persentase 80,6%, halaman beranda Design Sprint Pada Pembuatan dan
terpilih desain A dengan persentase Pengembangan Aplikasi Aryanna.
123
SATIN – Sains dan Teknologi Informasi
Vol. 9, No. 2, Desember 2023, pp. 112-124
ISSN: 2527-9114, DOI: 10.33372/stn.v9i2.1038
Jurnal DKV Adiwarna, 1, 9. Metode Usability Testing dan System
https://www.plainconcepts.com/lean- Usability Scale (Studi Kasus : KCP
ux-methodology/ Trenggalek Sudirman 1). Jurnal
Kadir, Abdul, M., & Machasin, D. (2014). Pengembangan Teknologi Informasi
JURNAL EKONOMI Volume 22, Dan Ilmu Komputer, 6(2), 793–801.
Nomor 2 Juni 2014. Ekonomi, 22, 1–17. http://j-ptiik.ub.ac.id
Khoiriyah, U., & Putra, P. (2022). Analisis Sihaloho, F. (2023). Perancangan User
Jalur Pengaruh Pengambilan Keputusan Interface ( UI ) dan User Experince (
Bertransaksi Melalui BSI Mobile. UX ) Aplikasi pendistribution alat-alat
Jurnal Ilmiah Ekonomi Islam, 8(3), kesehatan pada perusahaan PT .
2522–2535. Rekamileniumindo Selaras Jakarta
http://dx.doi.org/10.29040/jiei.v8i3.645 Barat. 9(1), 33–38.
5 Sugihartono, T., & Chrisna Putra, R. R.
Mayasari, R., Susilo Yuda Irawan, A., & (2019). Pengembangan Aplikasi E-
Singaperbangsa Karawang, U. (2021). Government Pelayanan Administrasi
Penerapan Metode Lean Ux Pada Terpadu Kecamatan (PATEN) Berbasis
Perancangan Ui/Ux Aplikasi Digilib Android. SATIN - Sains Dan Teknologi
Unsika Versi Windows Implementation Informasi, 5(2), 9–16.
of Lean Ux Method on Ui/Ux Design of https://doi.org/10.33372/stn.v5i2.544
Digilib Unsika Application in Windows Vadly Azhar Lubis, M., & Siregar, O. M.
Version. Journal of Information (2021). Analisis Minat Nasabah pada
Technology and Computer Science Penggunaan Aplikasi BSI Mobile
(INTECOMS), 4(2), 2021. dalam Upaya Meningkatkan Loyalitas
Musfikar, R., Harahap, N. F., & Hazrullah. Pelanggan pada Bank BSI KCP
(2022). Implementasi Metode Webqual Rantauprapat. Skripsi, 1(1), 1–165.
4.0 untuk Mengukur Kualitas Website Widiatmoko, D. T., Utami, B. S., Studi, P.,
Sistem Informasi Akademik Sekolah. Komunikasi, D., Informasi, F. T.,
SATIN - Sains Dan Teknologi Kristen, U., & Wacana, S. (2022).
Informasi, 8(2), 58–67. Perancangan UI / UX Purwarupa
https://doi.org/10.33372/stn.v8i2.863 Aplikasi Penentu Kualitas Benih Bunga
Muzawi, R., Agustin, W., & Informatika, J. Berbasis Mobile Menggunakan Metode
T. (2018). SATIN – Sains dan Teknologi Design Thinking ( Studi Kasus PT
Informasi Sistem Pengendalian Lampu Selektani ) Pendahuluan Peran
Berbasis Web dan Mobile. 4(1). teknologi informasi ( TIK ) dalam
Pamungkas, F. T. (2023). Perancangan UI / pengelolaan pertanian di Indonesia PT
UX Aplikasi Variety off Food Layanan Selektani Induk U. 19(1), 120–136.
Penjualan Makanan Secara Online Yunus, C. D. P., & Wahyu, S. (2021).
Menggunakan Aplikasi Figma. 6(1), Pembangunan Konsep Desain User
165–183. Experience Aplikasi Mobile
Pangestu, D. (2022). Analisis Kepuasan Majubersama Guna Mendorong
Nasabah dalam Penggunaan BSI Percepatan Pengimplementasian
Mobile. Jurnal Muamalat Indonesia - Kurikulum Merdeka Belajar-Kampus
Jmi, 2(2), 72–86. Merdeka. KONIK (Konferensi Nasional
https://doi.org/10.26418/jmi.v2i2.58961 Ilmu Komputer).
Rifki, M. A., & Haryono, K. (2023). Desain
Antarmuka dan Pengalaman Pengguna
pada Aplikasi Menghafal Quran
berbasis Mobile menggunakan Lean
UX. Sistemasi: Jurnal Sistem
Informasi, 12(1), 2540–9719.
http://sistemasi.ftik.unisi.ac.id
Santoso, A. J., Hadi Wijoyo, S., &
Perdanakusuma, A. R. (2022). Evaluasi
Usability Aplikasi Bank Syariah
Indonesia Mobile menggunakan
124