UI/UX CASE STUDY Redesign BCA Mobile
Introduction
Halo, perkenalkan nama saya Farhan Muhammad, saya mau membagikan hasil tugas akhir saya yang mengikuti kelas UIUX Design di altera academy, perhatian ini hanya untuk tugas saja jadi gak ada niatan buat projek atau yang lainnya
selamat membaca semuanya :D
Overview
Bca Mobile Banking Berdiri pada tahun 1957, BCA adalah bank swasta (non pemerintah) terbesar di Indonesia saat ini dengan nilai aset sebesar 750,32 triliun rupiah dan modal inti sebesar 122,73 triliun rupiah per Desember 2017 .BCA masuk kedalam kategori BUKU 4 dengan modal inti diatas 30 triliun rupiah. BCA memiliki lebih dari 17 juta rekening yang didukung oleh 1.235 kantor cabang yang beroperasi di berbagai daerah di seluruh Indonesia. Selain memiliki kantor cabang di Indonesia, BCA juga memiliki cabang di Hongkong dan Singapura. Saat ini BCA memiliki delapan anak perusahaan yang bergerak dalam enam linea bisnis yaitu BCA Finance dan CS Finance yang bergerak pada pembiayaan bermotor , BCA Insurance dan BCA Life yang bergerak di bidang asuransi, BCA sekuritas yang bergerak di bidang sekuritas, BCA Syariah yang bergerak di bidang perbankan syariah, BCA Finance Ltd yang bergerak di bidang remitansi dan Central Capital Ventura (CCV) yang bergerak di bidang teknologi finansial dan industri finansial. Pada tahun 2017 BCA mencatat pertumbuhan penyaluran kredit korporasi sebesar 14.5% yang mencapai 177,3 triliun rupiah. Sektor industri yang mendapat penyaluran kredit paling besar adalah sektor perkebunan dan pertanian sebesar 12,6% disusul oleh sektor jasa keuangan sebesar 10,6% dan sektor pembangkit energi dan tenaga listrik sebesar 7,3%.
Latar Belakang
Bca Mobile Layanan aplikasi mobile banking BCA yang menghadirkan kemudahan transaksi perbankan baik melalui KlikBCA ataupun m-BCA
My Role : UI/UX Research & Designer
Waktu : Dua Minggu
Problem/Masalah
(Based on Reviews on Google Play Store)
UX agak buruk.
UI yang sulit dipahami oleh pengguna.
Saat transfer userflow nya rumit
Gak ada button share atau download bukti transfer
Problem/Masalah
Melakukan perbaikan terhadap UX Aplikasi
Melakukan Improvements beberapa menu
Improvements UI agar mudah dipahami oleh pengguna.
Design proses Menggunakan
Menggunakan Design Thinking. Design thinking merupakan sebuah metode yang digunakan untuk mengembangkan solusi dari suatu permasalahan yang kompleks dengan menggabungkan fokus kekhawatiran , minat , dan human values ke dalam suatu proses desain (Brown, 2009). Design Thinking sering diterapkan di berbagai bidang, terutama bidang kreatif. Prosesnya meliputi 5 tahap yang tidak harus dilakukan secara berurutan, yaitu Emphatize, Define, Ideate, Prototype, dan Test.
Tools Yang Digunakan
Emphatize
Pada tahap ini, desainer mencari tahu kebutuhan dari target pengguna yang dapat dilakukan dengan research. Pada tahap ini, desainer perlu berempati terhadap masalah yang ada dan mencari tahu apa yang sebenarnya dibutuhkan oleh pengguna. Research dapat dilakukan dengan menganalisis data pengguna, melakukan survey, melakukan interview, ataupun dengan focus group discussion. Saya sendiri tidak melakukan Primary Research, melainkan memanfaatkan data-data dan informasi melalui ulasan aplikasi di Play Store sebagai bahan untuk Secondary Research.
Design Thinking :
Empathize — Secondary Research
Dari Secondary Research yang dilakukan, fokuskan target pengguna BCA Mobile sebagai berikut :
Berusia 18–60 Tahun Merupakan Pelajar/Mahasiswa atau seseorang yang memiliki perkejaan Memiliki tingkat ekonomi menengah keatas Memiliki kesulitan beradaptasi
Saya juga screenshot hasil temuan saya di playstore/Appstore
Define
Dari hasil empathize yang telah dilakukan, desainer dapat mengetahui masalah yang dialami pengguna. Pada tahap ini, saya menggunakan Figjam Board untuk melakukan brainstorming dan mendokumendasikan hasil temuanterkait masalah yang ada. Desainer mendokumentasikan Pain Points dan How-Might We.
Pain Points
Setelah melakukan research kemudian kami merumuskan pain points, atau ringkasan sederhananya ringkasan dari masalah yang dihadapi pengguna. Berikut di bawah ini pain poin yang telah kita kumpulkan.
How-Might We
Setelah dapat pain poinnya kita membingkai ulang pertanyaan sehingga jawaban yang diharapkan muncul adalah berupa langkah-langkah aksi yang kongkrit. Dengan menggunakan pendekatan ‘Bagaimana’, diharapkan dapat memotivasi kita untuk aktif mencari solusi dari HMW. Berikut beberapa How-Might We hasil brainstorming dari kami:
Setelah kita reseach hmw pain poin kita gambarkan ke dalama user persona adalah karakter fiksi yang dibuat berdasarkan pada penelitian yang desainer lakukan untuk mewakili target audiens yang mungkin menggunakan layanan, produk, barang, jasa atau merek kamu.
Ideate
Pada tahap ini, saya melakukan Brainstorming untuk mendapatkan solusi-solusi berdasarkan How-Might We. Solusi berfokus terhadap permasalahan pengguna yang didapatkan pada tahap sebelumnya.
Solution Idea
Berdasarkan hasil How-Might We terdapat beberapa ide solusi yang kami hasilkan diantaranya:
Prioritization Idea
Selanjutnya ide-ide Berdasarkan hasil diskusi kami mendapatkan beberapa fitur MVP dimana dari sisi user value itu bagus dan dari sisi effort pengerjaan low, diantaranya adalah:
Setelah fitur apa yang akan di buat terlebihdahulu saya bikin information architecture nya dulu supaya ada gambaran di wireframe nya nanti
Prototyping
Selanjutnya melakukan ide atau solution yang udah kita brainstroming lanjut membuat prototype untuk membuat ide lebih nyata. Untuk melakukan aktivitas ini, kami mulai membuat user flow terlebih dahulu.
Wireframe
Setelah membuat user flow, kami melanjutkan untuk mockup atau wireframe di Figma. Wireframe merupakan blueprint dari sebuah arsitektur. Konsep wireframe hanya bertujuan untuk menyampaikan susunan, layout, navigasi, struktur, dan organisasi konten. Wireframe biasanya hanya bergambar hitam putih saja dan menekankan pada isi dari konten yang akan dibuat. serta mempercepat dalam proses ide disni saya mengunakan tools balsamic. Berikut adalah wireframe untuk BCA Mobile
Design System
Untuk memudahkan dalam pengerjaan dan user interface memiliki komponen yang konsisten, kami membuat sebuah design system. Berikut adalah design system yang kami buat untuk digunakan pada desain high-fidelity dari project ini.
High-Fidelity
Setelah menyelesaikan tahap user flow, wireframe, dan design system, langkah selanjutnya adalah membuat desain high-fidelity menggunakan design system yang telah kita buat sebelumnya.
Prototype
Setelah desain High-Fidelity semua halaman selesai, langkah selanjutnya adalah membuat Prototype. Desain High-Fidelity kemudian diurutkan berdasarkan alur yang akan diikuti oleh pengguna untuk menyelesaikan sebuah task.
Test
Langkah terakhir dalam design thinking adalah pengujian atau testing. Setelah prototipe telah disusun, lakukan pengujian terhadap user dengan melihat apakah produk sudah menjawab kebutuhan mereka.
Selama proses ini, lihat bagaimana pengguna berinteraksi dengan produk prototipe tersebut. Tahap pengujian dilakukan untuk mendeteksi masalah dari awal. Setelah melalui proses pengujian, biasanya muncul masalah-masalah yang tidak terpikirkan sebelumnya. Maka itu, kamu perlu mengulang beberapa tahap untuk menciptakan produk yang terbaik
Yang terakhir yaitu tahap test saya disni mengunakan usability testing disini saya mengunakan maze untuk testing kebeberapa user, saya bikin dulu secenario nya buat Usability Testing nya.
Dan ada beberapa feedback juga dari user
Iterasi Design
Berdasarkan hasil Usability Testing terdapat beberapa feedback dari responden yang dapat kami terapkan untuk memperbaiki beberapa fitur yang masih terdapat kendala saat melakukan User Testing. Feedback dari responden kemudian kami diskusikan dan menentukan poin-poin penting yang dapat direalisasikan. Selanjutnya saya melakukan iterasi design untuk menunjukkan bagian sebelum dan sesudah diperbaiki. Berikut merupakan hasil iterasi design yang kami lakukan berdasarkan feedback dari responden, disini ada beberapa bagian yang berubah (saya tidak mengubah banyak hal).
Ini design awal
Feedback
Maaf, izin kasih feedback ya mas
-Warna kartu sma background Nimpa, mungkin background bisa dikasih warna paling terang dr main colornya atau kartunya bisa di kasih warna lain template kartu banyak di community mungkin bisa digunakan.
-icon scan qr nya keluar dr frame, mungkin bisa dicari refrensi bottom bar yg ada icon di tengah nya
-font size “lihat semua” kegedean sih mas
Saya juga mau kasih pendapat.
- untuk Icon (transfer, m-info, dll) mungkin bisa diberi warna yang berbeda tapi Senada Dengan main color dari bank BCA. Coba lihat UI nya m-banking Mandiri
- masukan untuk keterangan nominal uang bisa diberi warna gradient yang colorful. Ex: apabila nominal mencapai target yang di inginkan, misal target rata rata 2.500.000 maka tampilan frame nantinya akan berwarna Hijau. Kalo nominal tidak sesuai target rata2 (saldo berkurang), warna dari frame berubah menjadi kuning → merah.
- juga untuk logo QR code mungkin bisa di eksplor kembali dan biar mata pengguna langsung tertuju ke QR code mungkin bisa diberi warna yang berbeda dan jangan lupa diberi background tepi dibelakang icon QR code
Selebihnya 👍😎
Mungkin terlambat, tapi kalau boleh saya mau memberikan sedikit feedback untuk design yang sudah mas buat.
1. Untuk halaman home
- untuk tanggal expired tersebut yang dimaksud apakah untuk expired date dari kartu rekeningnya? 🤔
- di bawah expired date ada nomor kartu yang disensor, bagaimana ya cara menampilkan nomor kartunya? 😭
- Konsistensi, sepertinya pengguna icon “>” pada section promo akan lebih baik diganti menjadi “Lihat Semua” (untuk warna sepertinya harus diubah, karena terlihat seperti di-disable).
- Penggunaan bahasa, sepertinya akan lebih baik jika tidak dicampur-campur antara bahasa indonesia dan inggris (personal preference sih).
2. Halaman kirim antar bank
- Jika pengguna nantinya akan berpindah halaman saat klik ‘tambah rekening baru’ maka sepertinya button ‘simpan & lanjutkan’ menjadi tidak terpakai 🤔
Selebihnya dari sisi layout, typografi, pewarnaan ok banget sih, Nice work mas! 😁😁
Hasil yang udah di perbaiki
Closing
Sekian pemaparan study case proses dari Emphatize hingga Prototype yang saya lakukan. Saya memahami bahwa dalam project ini masih ada kekurangan dan jauh dari kata sempurna, namun saya akan terus belajar dan mengasah kemampuan yang saat ini sudah saya dapatkan dari Bootcamp ini. Saya berharap bahwa desain ini akan berguna dan memberikan beberapa wawasan tentang apa yang saya lakukan dalam project ini.
