Redesain UI/UX Aplikasi Mbca

[Disclaimer: Proyek ini merupakan bagian dari tugas akhir mata kuliah UI/UX Design, di Program Studi Teknik Informatika, Fakultas Teknik dan Informatika, Universitas Dian Nusantara (Undira). Saya tidak bekerja atau diikat dalam kontrak professional oleh [MBCA].]

Hai para pembaca setia medium, perkenalkan saya Neysia Meymili, dalam article ini saya akan berbagi cerita tentang tugas UI/UX STUDY yang saya dan teman teman saya kerjakan dalam mata kuliah UI/UX di kampus Universitas Dian Nusantara dengan dosen pengampu Pak Muhammad Patria, ST, MMSI, Selamat Membaca :)

LATAR BELAKANG

Dengan perkembangan teknologi dan kebutuhan Customer/nasabah BCA yang semakin kompleks, perusahaan BCA telah menyadari pentingnya menjaga kompetitivitas dan memberikan pengalaman pengguna yang unggul melalui aplikasi MBCA. Oleh karena itu, Kami memutuskan untuk melakukan redesain terhadap aplikasi ini agar meningkatkan tampilan, fungsionalitas, dan kemudahan penggunaan agar lebih praktis

Redesain MBCA bertujuan untuk menciptakan pengalaman perbankan yang lebih baik dan praktis, meningkatkan kemudahan penggunaan, dan mengadopsi teknologi terkini. BCA berharap bahwa melalui redesain ini, aplikasi MBCA akan semakin menjadi pilihan utama dan diminati nasabah dalam melakukan transaksi perbankan digital di Indonesia.

Artikel ini bertujuan untuk mengulas permasalahan yang dihadapi oleh user aplikasi MBCA dan memberikan latar belakang tentang mengapa redesain aplikasi ini sangat penting.

OBJEKTIF

Tujuan Dari Study kasus ini adalah untuk melakukan redasain aplikasi MBCA dengan penambahan dan mendesign beberapa fitur berdasarkan pain point yang dialami oleh user Aplikasi MBCA

• Peningkatan Fungsionalitas Pencarian: Menambahkan fitur pencarian untuk Virtual Akun di halaman utama MBCA agar pengguna dapat dengan mudah menemukan dan mengakses informasi Virtual Akun mereka melalui pencarian kata kunci atau nama Virtual Akun.
• Peningkatan Keterjangkauan Saldo: Menambahkan widget saldo di halaman utama untuk memudahkan pengguna dalam melihat saldo secara langsung tanpa membuka menu khusus, meningkatkan keterjangkauan informasi dan kemudahan dalam mengelola keuangan.
• Pengurangan Langkah Transaksi: Mengurangi langkah pendaftaran Nomor Rekening terlebih dahulu sebelum melakukan transaksi untuk mempercepat proses transaksi, menghemat waktu pengguna, dan meningkatkan kepuasan.

PERAN DALAM TIM

Dalam menyelesaikan studi kasus ini, saya berperan sebagai UI/UX Designer yang melakukan kolaborasi dengan 3 anggota tim lainnya, yaitu,@Aditya bayu adji dan @Afif alfadillah sutisna,@Maidatul jannah. Dalam tim ini, tanggung jawab saya adalah sebagai berikut:

• Melakukan Secondary Research dari berbagai metode penelitian
• Melakukan pemetaan hasil Secondary Research untuk mendefinisikan Pain Point
• Melakukan brainstorming untuk membuat ide solusi terhadap Pain Point yang didapatkan
• Menentukan prioritisasi terhadap ide solusi
• Membuat sketsa Crazy 8’s dari prioritas ide yang ditentukan
• Menyusun skenario User Flow
• Merancang Wireframe (low-fidelity) terkait halaman yang terdapat pada User Flow
• Membuat Design System yang akan digunakan pada User Interface
• Membuat desain User Interface (high-fidelity) menggunakan Figma
• berdasarkan Wireframe yang telah dibuat dan dikembangkan lagi
• Membuat Prototype pada desain UI yang telah dibuat

Dalam kasus ini kami memilih menggunakan Design Thinking sebagai pendekatan design process yang kami lakukan. [Mengapa?]

1 — Empathize

Tahap pertama dalam setiap proyek design thinking adalah berempati dengan masalah yang akan muncul secara tersirat melalui user research. Pada tahap ini kami mencari tahu pandangan dan kebutuhan target user agar dapat mendefinisikan Pain Point. Saya dan tim melakukan Secondary Research dengan metode sebagai berikut:

1. Keterbatasan Waktu: Pengguna akan lebih cepat untuk mengakses ke informasi keuangan mereka, termasuk saldo.
2. Kemudahan Penggunaan: Antarmuka pengguna harus intuitif dan mudah digunakan, mempertimbangkan tingkat pengetahuan teknologi yang beragam.
3. Keamanan dan Privasi: Fitur keamanan dan privasi harus kuat dan mudah diakses untuk memastikan perlindungan informasi keuangan pengguna.
4. Efisiensi Transaksi: Pengguna mengharapkan proses transaksi yang cepat dan tanpa hambatan.
5. Konsistensi Pengalaman Pengguna: Redesain harus mempertahankan elemen penting dari antarmuka sebelumnya untuk memudahkan pengguna yang sudah terbiasa dengan MBCA.

Dari hasil ini, maka akan dilakukan proses selanjutnya, yaitu Define.

2 — Define

Informasi dan pengamatan yang dilakukan pada tahap sebelumnya dikumpulkan dan dianalisis untuk menentukan inti masalah yang dihadapi. Dari hasil Secondary Research yang dilakukan pada tahap Empathize, kemudian kami mendefinisikan titik-titik permasalahan yang dialami oleh user, yang nantinya akan dikembangkan menjadi sebuah solusi.

Pain Point

Pain Point merupakan proses pengidentifikasian masalah yang dihadapi oleh user MBCA. Masalah atau pain point yang dialami user saat menggunakan campaign.com cukup beragam. Berikut hasil pemetaan Pain Point yang berasal dari hasil Secondary Research.

Pemetaan Pain Point

How Might We

Dalam menentukan ide solusi yang ditawarkan dalam studi kasus aplikasi MBCA, masing-masing dari kami memunculkan ide-ide kreatif, berupa sebuah fitur baru, yang mungkin dapat menjadi solusi bagi masalah yang ada. Proses awal kami dalam memicu ide-ide kreatif tersebut adalah dengan melontarkan pertanyaan singkat terhadap pernyataan yang didefinisikan pada Pain Point.

Definisi Solusi Menggunakan ‘How Might We’

Agar proses definisi solusi menjadi lebih fokus, masing-masing dari kami cukup memberikan 2 ide kreatif berupa fitur tambahan yang kira-kira bisa dikembangkan untuk menjawab Pain Point dari user. Dari total 8 fitur yang dilontarkan, kemudian masing-masing dari kami melakukan voting terhadap 2 fitur yang menurut kami sangat cocok sebagai solusi atas masalah yang dialami oleh user.

Definisi Solusi Menggunakan ‘How Might We’

3 — Ideate

Tahap ini ditujukan membentuk ide-ide yang dapat dijadikan sebagai solusi permasalahan. Prosesnya dilakukan dengan brainstorming atau diskusi untuk mengeluarkan ide kreatif dari masing-masing anggota tim. Kami mengacu kepada hasil voting yang sudah dilakukan agar bisa fokus dalam melakukan eksplorasi terhadap ide solusi.

Affinity Diagram

Dari hasil voting, kemudian kami mengelompokkan ide ke dalam Affinity Diagram. Hal ini ditujukan untuk dapat menggambarkan tema-tema dari banyak ide yang sudah terpilih.

Affinity Diagram

Dari 9 ide yang terpilih, kemudian kami mengelompokkan ke dalam 3 tema, agar bisa fokus dalam memilih ide yang tepat. Tema dalam Affinity Diagram yang kami definisikan, diantaranya:

• Payment, berisi ide untuk menambahkan fitur e-wallet yang terintregasi pada aplikasi MBCA.
• Redesesin, berisi ide yang berfungsi untuk melakukan pembaharuan pada desain awal agar lebih menarik.
• Hygiene Feature, berisi ide yang secara umum merupakan fungsi dasar bagi aplikasi.

Prioritization Idea

Kemudian, ide-ide yang sudah dikelompokkan dimasukkan ke dalam Proritization Idea Diagram untuk menyusun tingkat prioritas dari ide-ide tersebut. Dengan menyusun prioritas, maka kami dapat menentukan mana ide yang bisa dikerjakan sekarang (Do It Now), mana ide yang bisa dikerjakan selanjutnya (Do Next), mana ide yang dikerjakan di akhir (Do Last), dan mana ide yang dikerjakan di kemudian hari (Later). Hal tersebut ditentukan berdasarkan ide yang memiliki potensi besar (user value) berbanding dengan effort yang akan dikeluarkan.

Menyusun Prioritas Ide

Pada proses ini, kami memutuskan untuk memilih 4 ide dengan voting terbanyak, sebagai ide yang akan dikerjakan sekarang. Ide tersebut akan dituangkan menjadi sebuah fitur baru agar bisa dimanfaatkan sebagai jawaban atas permasalahan user. Berikut adalah 4 ide yang kami pilih, berdasarkan alasan mengapa 4 ide ini sangat cocok untuk dijadikan solusi:

Meningkatkan Keterlihatan Saldo: Dengan menampilkan informasi saldo di bagian atas halaman utama, tujuannya adalah memberikan akses cepat dan mudah bagi pengguna untuk melihat saldo mereka. Hal ini akan memungkinkan pengguna untuk dengan cepat memeriksa saldo mereka tanpa harus mencari-cari menu yang tepat, meningkatkan efisiensi dan kenyamanan pengguna.

Peningkatan Fungsionalitas Pencarian: Penambahan fitur pencarian untuk Virtual Akun di halaman utama MBCA bertujuan untuk memberikan kemudahan bagi pengguna dalam menemukan dan mengakses informasi Virtual Akun mereka. Dengan adanya fitur ini, pengguna dapat langsung melakukan pencarian dengan memasukkan kata kunci atau nama Virtual Akun, sehingga mereka tidak perlu lagi mencari secara manual melalui menu yang berbeda. Hal ini akan mempercepat proses akses dan meningkatkan kepuasan pengguna.

Peningkatan Keterjangkauan Saldo: Dengan menambahkan widget saldo di halaman utama, tujuannya adalah memudahkan pengguna dalam melihat saldo mereka secara langsung, tanpa harus membuka menu untuk menampilkan saldo. Widget ini dapat menampilkan saldo secara real-time dan dapat ditempatkan dengan mudah di halaman utama, sehingga pengguna dapat dengan cepat melihat saldo mereka hanya dengan membuka aplikasi MBCA. Hal ini meningkatkan keterjangkauan informasi dan memberikan kemudahan bagi pengguna dalam mengelola keuangan mereka.

Pengurangan Langkah Transaksi: Dengan mengurangi fitur mendaftarkan Nomor Rekening terlebih dahulu sebelum melakukan transaksi, tujuannya adalah mempercepat proses transaksi bagi pengguna. Dengan menghilangkan langkah pendaftaran yang tidak perlu, pengguna dapat langsung melanjutkan ke bagian transaksi, menghemat waktu dan meningkatkan kepuasan pengguna.

Crazy 8's

Setelah menemukan solusi, saya dan tim membuat sketsa menggunakan salah satu metode design sprint, yaitu Crazy 8’s. Crazy 8’s adalah salah satu metode untuk brainstorming design. Dalam proses ini, masing-masing dari kami melipat kertas kedalam 8 bagian. Disebut Crazy 8’s dikarenakan kami harus membuat 8 sketsa atas ide dan solusi yang sudah diprioritaskan ke dalam 8 bagian kertas tersebut dalam kurun waktu 8 menit. Hal ini ditujukan agar kami mampu berpikir cepat dalam mencari ide desain User Interface yang nanti akan dibuat.

Crazy 8's

Dari hasil sketsa Crazy 8’s, kemudian kami melakukan voting kembali untuk memilih sketsa mana yang akan dijadikan tolak ukur dalam membuat desain Wireframe dan User Interface.

4 — Prototyping

Pada tahap ini, ide dan sketsa yang sudah dipilih kemudian direalisasikan dalam bentuk clickable prototype. Proses untuk menuju clickable prototype diawali dengan menyusun User Flow, kemudian merancang Wireframe, menentukan Design System yang digunakan, lalu membuat desain User Interface, dan terakhir menerapkan prototyping pada desain User Interface tersebut.

User Flow

Alur proses user (User Flow) disusun untuk mengetahui bagaimana ide direalisasikan ke dalam aplikasi. Kami menyusun 3 ide terpilih ke dalam satu User Flow yang dikerjakan menggunakan tools FigJam, sebagai berikut:

User Flow

User Flow dimulai dari Menu utama MBCA,dalam menu utama itu akan terdapat pilihan untuk ke menu Transfer dan tampilan saldo, Sehingga akan memudahkan pengguna untuk pemakaian aplikasi MBCA

Wireframe Design

Wireframe adalah blueprint bagi para UI/UX Designer. Wireframe adalah skema atau kerangka yang dapat memberikan gambaran kasar (low-fidelity) setiap halaman yang terdapat dalam sebuah website/aplikasi sebelum memasuki tahapan visual mockup

WireFrame Design

WireFrame Design

Untuk mempercepat proses pengerjaan, kami membagi tugas dalam mengerjakan Wireframe, dimana masing-masing orang mengerjakan 2 Wireframe. Wireframe yang kami kerjakan mengacu kepada User Flow yang sudah disusun. Dalam membuat Wireframe, kami menggunakan tools Figma agar bisa berkolaborasi dalam melakukan perancangan.

Design System

Design System merupakan sebuah komponen yang dapat digunakan kembali untuk keperluan perancangan dan pengembangan produk baik dari sisi desain maupun code programming. Design System berisi kumpulan komponen yang sudah dibuat dengan baik dan matang, sehingga desainer produk tidak perlu menciptakan desain dari nol. Design System memiliki beberapa keuntungan diantaranya

• Konsistensi hasil desain UI dan code Front-end
• Mempercepat proses kerja UI Designer dan Developer
• Dapat mengakomodir kebutuhan product design di masa depan

Design System

• Kami membuat Design System ke beberapa macam komponen yang bisa di-re-use ketika membuat desain UI, yaitu Color Style (Palette), Text Style (Typography), Button, Text Field, Icon, Logo, dan Image Component.
• User Interface Design
• User Interface (UI) adalah desain antarmuka untuk mesin atau software, seperti peralatan rumah tangga, handphone, atau yang lain, yang memaksimalkan usability dan user experience. Dalam proses desain User Interface (high-fidelity), kami mengacu kepada Wireframe dan Design System yang sudah dibuat. Sehingga, hal tersebut dapat memudahkan kami dalam mempercepat proses pembuatan desain.

User Interface Design

User Interface Design

• Sama halnya dengan Wireframe, pada saat proses pembuatan desain UI, kami juga membagi tugas kepada masing-masing tim saya agar proses pengerjaan bisa dilakukan lebih cepat. Saya dan tim juga saling bantu satu sama lain apabila ada anggota tim yang mengalami kesulitan dalam proses pengerjaan menggunakan tools Figma.
• Interactive Prototype
• Prototype adalah bentuk 1:1 dari tampilan produk yang akan di-develop namun belum nyata. Prototype digunakan untuk mencoba dan mensimulasikan solusi desain yang telah dibuat. Keuntungan dari Prototype, diantaranya:
• Dapat mencoba produk dengan mudah dan murah
• Dapat mempelajari dan mengevaluasi solusi desain yang telah dibuat
• Dapat mencegah perubahan yang besar

Untuk melihat prototype, bisa klik link berikut

rototype ini buat berdasarkan alur proses yang sudah didefinisikan pada User Flow.

5 — Testing

Dalam tahap ini kami melakukan User Research untuk menguji prototype yang sudah dibuat pada tahap sebelumnya untuk melihat seberapa baik ide tersebut dalam mengatasi masalah yang diidentifikasi selama tahap satu dan dua. Tahap ini biasanya dilakukan berkali-kali dan hasil yang ditemukan akan digunakan untuk membuat iterasi perubahan dan penyempurnaan.

User Research merupakan langkah yang dilakukan untuk memahami perilaku, kebutuhan, dan motif user dalam kondisi/tujuan tertentu. Manfaat dari User Research adalah memberikan informasi sekaligus mengklarifikasi dari sisi usability (kegunaan) produk yang akan dibuat dari sudut pandang real-user. User Research tidak sama dengan Usability Testing, karena Usability Testing merupakan bagian dari User Research

System Usability Scale (SUS)

System Usability Scale (SUS) adalah alat pengukuran yang digunakan untuk mengevaluasi kegunaan atau usability dari suatu sistem atau aplikasi.

SUS terdiri dari 10 pernyataan yang dinilai oleh pengguna dengan menggunakan skala Likert 5 poin, mulai dari “Sangat Setuju” hingga “Sangat Tidak Setuju”. Pernyataan dalam SUS mencakup aspek-aspek seperti kemudahan penggunaan, pemahaman sistem, efisiensi, dan kepuasan pengguna. Pada akhirnya, skor SUS digunakan untuk mengukur tingkat kepuasan dan persepsi pengguna terhadap sistem yang dievaluasi.

Setelah pengguna memberikan penilaian terhadap setiap pernyataan, skor SUS dihitung dengan rumus yang telah ditentukan. Skor SUS berkisar antara 0 hingga 100, di mana semakin tinggi skor tersebut menunjukkan tingkat kegunaan yang lebih baik. Biasanya, skor SUS diinterpretasikan dalam kategori seperti “Sangat Baik” (di atas 80), “Baik” (68–80), “Rata-rata” (51–68), dan sebagainya.

Hasil Response Survei

Hasil Perhitungan

Secara keseluruhan, dari rata-rata skala nilai yang diberikan, skor SUS yang kami dapatkan yaitu 49.8, yang berarti bahwa ide solusi desain yang kami tawarkan masih perlu dilakukan pengembangan lebih lagi.

KESIMPULAN

Proses pengerjaan Redesain pada aplikasi MBCA membutuhkan alur yang cukup banyak, serta waktu yang panjang. Dan waktu yang diberikan yaitu perkuliahan secara online sangat membuat kita sedikit kesulitan dalam mengerjakan tugas tersebut, serta kesibukan dari masing-masing anggota tim di luar pelatihan, membuat proses koordinasi sedikit terhambat dan banyak alur proses di dalam aplikasi yang belum ter-cover. Meski begitu, saya bersyukur karena tim kami sudah menyelesaikan Tugas ini dengan sebaik mungkin. Semoga dari pengerjaan tim kami ini dapat menjadi bekal kami untuk selanjutnya.

REKOMENDASI SELANJUTNYA

Challenge ini merupakan pengalaman pertama saya dalam mendesain UI/UX secara komprehensif. Sehingga, masih banyak ruang untuk improvement, terutama pada bagian User Research dalam tahap Emphatize yang belum dilakukan secara langsung. Selain itu, ide solusi desain yang dibuat masih berdasarkan asumsi pribadi saya dan anggota tim.

Proses yang dilakukan dalam tahap Testing juga baru dilakukan ke satu orang, sehingga skor SUS yang kami dapatkan belum mewakili banyaknya user dari aplikasi MBCA. Skor SUS juga baru mencerminkan ide solusi desain yang hanya menyelesaikan beberapa Pain Point saja. Masih banyak lagi Pain Point yang belum diselesaikan. Dari Pain Point ini, masih bisa dikembangkan lagi untuk mendapat hasil yang terbaik. Terutama dengan merealisasikan fitur-fitur yang selanjutnya bisa kita kerjakan (Do Next) yang terdapat pada Prioritization Idea Diagram.

Terakhir, saya ingin berterima kasih kepada anggota kelompok 2, dan Dosen Pengampu kami yang sudah mengarahkan dan membimbing kami dari awal perkuliahan hingga akhir perkuliahan (Pak Muhamad Patria ST, MMSI).

Terima kasih juga kepada kalian yang sudah berkenan untuk berkunjung dan membaca UX Case Study dari saya ini. Saya juga mengharapkan kritik, saran, dan feedback dari kalian apabila ada hal-hal yang keliru dalam proses UI/UX Design yang saya lakukan, maupun kesalahan informasi yang saya sampaikan. Semoga kedepannya, saya bisa berkontribusi untuk memberikan ilmu, tulisan, dan hasil desain yang lebih mumpuni.