Studi Kasus UI/UX: Bank Jago UI/UX Challenge

11 min readNov 28, 2021

PENDAHULUAN

Kegiatan magang dari Kemendikbud yang merupakan bagian dari program MBKM (Merdeka Belajar Kampus Merdeka) telah memasuki masa akhir kegiatan. Sebagai bagian dari program magang MBKM, kegiatan SVI (Skilvul Virtual Internship) yang dimulai 23 Agustus 2021 juga memasuki babak akhir. Sebelumnya pengerjaan UI/UX Challenge dari platform skilvul telah selesai dan dilanjutkan pengerjaan UI/UX Challenge dari Challenge Partner yaitu Bank Jago. Selama kurang lebih dua bulan telah berlalu sejak dimulainya pembuatan solusi desain untuk menjawab UI/UX Challenge yang diberikan oleh Bank Jago melalui Skilvul.

Catatan: Proyek UI/UX ini merupakan bagian dari program magang Merdeka Belajar Kampus Merdeka yang dilakukan oleh Kementerian Pendidikan, Kebudayaan, Riset, dan teknologi dengan Skilvul dan Bank Jago sebagai Challenge Partner. Saya tidak bekerja atau diikat dalam kontrak profesional oleh Bank Jago.

PERMASALAHAN

Pada UI/UX Challenge Bank Jago, terdapat permasalahan yang perlu diatasi dengan membuat solusi desain yang sesuai. Permasalahan pengguna dijelaskan pada bagian brief UI/UX Challenge Bank Jago, singkatnya dijelaskan bahwa Bank Jago ingin membuat fitur yang bisa mengintegrasikan layanan untuk memberi barang atau jasa yang dibutuhkan pengguna, selain itu Bank Jago ingin membuat fitur asuransi jiwa dan wasiat yang menyenangkan untuk mengatasi berbagai pandangan negatif ataupun perasaan khawatir akan kematian. Adapun rincian masalah yang perlu dicari solusinya sesuai dengan brief UI/UX Challenge Bank Jago, yaitu sebagai berikut:

Sulit untuk mengintegrasikan layanan yang dapat memberikan barang atau jasa yang dibutuhkan pengguna.
Tidak banyak orang yang melakukan perencanaan masa depan.
Pandangan negatif tentang asuransi ataupun wasiat karena berhubungan dengan musibah.
Bagaimana merancang prosedur pembuatan wasiat yang mudah.
Bagaimana membuat perhitungan untuk biaya bulanan atas wasiat yang diinginkan.
Bagaimana merancang wasiat agar bisa di edit dengan tetap menjaga komitmen.
Bagaimana cara kreatif untuk gamifikasi gaya hidup sehat yang bisa menurunkan biaya komitmen bulanan.

TARGET PENGGUNA

Agar solusi desain yang dibuat lebih terarah dan sesuai dengan kebutuhan pengguna, perlu dilakukan klasifikasi pengguna berdasarkan kriteria tertentu sesuai dengan penjelasan pada brief UI/UX Challenge. Adapun beberapa kriteria pengguna yang dijadikan patokan ketika menentukan suatu solusi desain, yaitu sebagai berikut:

Tidak terbatas gender, bisa pria maupun wanita.
Memilki umur 25 hingga 35 tahun.
Kondisi geografis tinggal di daerah perkotaan, SES A & B (tingkat pengeluaran per bulan).
Profesi sebagai pegawai.

PERAN DAN TIM

Proyek UI/UX Challenge dari Bank Jago ini dikerjakan secara berkolaborasi bersama rekan satu tim, dengan tiga (3) anggota yaitu saya sendiri Leko Wijaya, Yohannes Mario, dan Nadifah Adya Ilham. Sebagian besar tahapan ketika membuat solusi desain dikerjakan secara bersama-sama, namun ada beberapa tahapan yang dikerjakan secara perorangan sesuai pembagian tugas masing-masing. Dalam proyek ini saya memiliki beberapa peran diantaranya:

1. Membantu proyek Brainstorming bersama anggota satu tim untuk tahapan define dan ideate.

2. Membantu membuat Wireframe sesuai dengan User Flow yang telah dibuat sebelumnya.

3. Merancang suatu UI Style Guide untuk membantu proses desain.

4. Membantu membuat solusi desain berupa UI Design.

5. Membantu melakukan User Research.

DESIGN PROCESS

Metode design process yang kami gunakan untuk proyek UI/UX Challenge Bank Jago kali ini yaitu metode design thinking. Mempertimbangkan batas waktu penyelesaian proyek yang cukup lama dan juga menyesuaikan dengan kebutuhan UI/UX Challenge, kami pada akhirnya memutuskan menggunakan design thinking sebagai metode design process pada proyek ini. Penggunaan design thinking sebagai metode design process juga memiliki beberapa keunggulan, diantaranya metode design thinking dapat mendorong munculnya ide-ide kreatif setiap anggota tim untuk memenuhi kebutuhan pengguna, kebutuhan bisnis, dan juga kemampuan teknologi yang ada.

Catatan: Sebagian besar tahapan design thinking yang dilakukan hingga menghasilkan suatu solusi desain dilakukan dengan menggunakan aplikasi Figma.

EMPATHIZE

Tahapan ini kami lakukan dengan tidak melibatkan pengguna secara langsung, sebagai gantinya kami melakukan secondary research untuk mencari tahu pandangan dan juga kebutuhan pengguna sebelum mendefinisikan masalah dan membuat solusi. Secondary research yang kami lakukan yaitu dengan mengkaji kembali penjelasan yang tertera di brief Challenge, feedback user di Playstore, dan juga mencermati kembali apa yang disampaikan pihak Bank Jago saat sesi AMA (Ask Me Anything). Hasil temuan dari secondary research yang kami lakukan kemudian akan kami bahas di tahapan berikutnya yaitu Define.

DEFINE

Berdasarkan hasil temuan dari tahapan empathize, kami lanjutkan ke tahapan define yaitu dengan mendefinisikan permasalahan pengguna. Setelah permasalahan dari pengguna telah didefinisikan, langkah selanjutnya kami membuat suatu How-Might We sebagai jawaban untuk peluang yang bisa dimanfaatkan terkait permasalahan pengguna.

Pain Point

Berdasarkan hasil secondary research pada tahapan empathize, di lakukanlah brainstorming untuk kembali mendefinisikan permasalahan yang dihadapi pengguna. Poin-poin permasalahan pengguna yang kami dapatkan dapat dilihat pada gambar dibawah. Adapun poin permasalahan pengguna yang saya definisikan yaitu sebagai berikut:

Tidak adanya kepastian terkait uang yang telah disetorkan oleh pengguna.
Desain produk dan fitur layanan yang kurang menarik.
Besarnya biaya premi yang dikeluarkan setiap bulannya.
Tidak terlalu menguntungkan jika dibandingkan instrumen investasi lainnya.
Pengguna khawatir salah memilih produk asuransi jiwa.
Pengajuan klaim yang rumit.

How-Might We

Tahapan ini kami lakukan untuk mencari suatu jawaban atas permasalahan pengguna yang kemudian dapat dijadikan peluang. Sebelum ditarik suatu how-might we kami masing-masing menyusun opsi how-might we yang kemudian kami lakukan voting untuk menentukan how-might we yang akan digunakan. How-might we terpilih akan kami cari ide solusinya pada tahapan Ideate. Berikut how-might we yang terpilih berdasarkan hasil voting:

“Membuat layanan yang berfokus pada lifestyle asuransi yang menyenangkan dan menikmati hidup daripada memikirkan sesuatu yang negatif tentang kematian”

IDEATE

Berdasarkan how-might we yang ditentukan sebelumnya, pada tahapan ini kami mulai sesi brainstorming ide untuk menentukan solusi-solusi yang mungkin bisa digunakan untuk menjawab how-might we sekaligus mengelompokkan ide, membuat urutan prioritas ide yang di buat, serta membuat suatu gambaran UI versi low fidelity.

Solution Idea

Kami mulai tahapan ideate dengan menentukan berbagai opsi ide yang mungkin bisa digunakan untuk menjawab tujuan dari how-might we. Ide-ide yang kami tentukan dapat dilihat pada gambar dibawah ini. Adapun ide-ide yang saya usulkan untuk menjadi solution idea diantaranya:

User guide yang dapat membantu pengguna saat proses registrasi.
Fitur untuk melihat legalitas layanan.
Fitur pembayaran yang mendukung QR Code.
Fitur rekomendasi produk.
Fitur ask/help yang membantu pengguna bertanya terkait produk atau aplikasi.
Fitur beli/swap mata uang asing sehingga bisa digunakan diluar negeri.
Fitur pengenalan konsep wasiat.
Estimasi rincian perhitungan biaya yang sederhana.
Fitur pembayaran dari E-Wallet.
Fitur custom plan sebagai perencanaan wasiat oleh pengguna.
Fitur request video atau suara yang bisa dilampirkan bersamaan dengan wasiat.

Affinity Diagram

Setelah berbagai pilihan ide solusi ditentukan, maka pada affinity diagram kami lanjutkan dengan mengelompokkan ide berdasarkan kriteria-kriteria tertentu. Pada proyek kali ini kami mengelompokkan ide yang telah ditentukan menjadi enam (6) kategori, yaitu sebagai berikut:

Registrasi
Produk asuransi
Surat Wasiat
Layanan
Gamifikasi
Keamanan

Prioritization Idea

Pada dasarnya pada tahapan ini kami menentukan urutan prioritas, urutan prioritas yang dimaksud yaitu urutan prioritas ide-ide yang telah ditentukan sebelumnya. Dengan mengelompokkan ide berdasarkan urutan prioritas mana yang dikembangkan terlebih dahulu mana yang belakangan, akan mempermudah dan membuat proses pengembangan suatu produk ataupun fitur lebih optimal. Pembagian prioritas dilakukan dengan memperhatikan dampak ide dari sisi user value dan juga effort, yang kemudian dibagi sesuai prioritas paling tinggi menjadi: Yes, do it now — Do next — Later dan terakhir Do last. Berikut gambaran pengelompokan ide yang kami tentukan berdasarkan urutan prioritasnya:

Crazy 8's

Setelah serangkaian tahapan yang dilakukan sebelumnya, kini telah memasuki tahapan akhir dari proses Ideate. Pada tahap ini kami masing-masing membuat suatu gambaran wireframe versi low fidelity pada 8 bagian kertas berdasarkan solusi desain yang telah ditentukan sebelumnya, dimana rancangan desain yang paling banyak dipilih melalui voting akan kami gunakan untuk tahapan selanjutnya. Berikut gambaran hasil rancangan crazy 8’s yang telah kami buat:

PROTOTYPE

Pada tahapan ini kami mulai mengembangkan suatu solusi desain dengan mempertimbangkan segala hasil yang telah diperoleh dari tahapan sebelumnya. Tahapan ini kami mulai dengan mempersiapkan User Flow yang akan memberi suatu gambaran terkait alur yang dilalui pengguna ketika menyelesaikan task tertentu. Kemudian berdasarkan hasil rancangan crazy 8’s, kami juga membuat wireframe digital sebagai gambaran tentang UI yang akan didesain.

Setelah membuat User Flow dan Wireframe, langkah selanjutnya kami membuat rancangan UI Style Guide. UI Style Guide akan membantu proses desain ke depannya dan juga membantu agar desain UI yang dihasilkan dapat lebih konsisten, selain itu komponen atau style yang telah dibuat juga akan mempermudah proses pengembangan desain ke depannya.

User Flow

Pada proyek kali ini kami menggunakan user flow versi sederhana yaitu berupa task flow , yang terbagi menjadi tiga flow utama yaitu flow untuk buat asuransi dan flow untuk buat wasiat. Selain flow tersebut kami juga membuat flow lain untuk beberapa fitur seperti flow ensiklopedia produk, flow kalkulator ajaib dan juga flow Challenge. Adapun gambaran User Flow yang kami buat yaitu sebagai berikut:

Wireframe

Pada tahapan crazy 8’s sebenarnya kita telah membuat suatu wireframe, walaupun masih dalam bentuk yang sederhana. Untuk mempermudah proses desain UI dan juga untuk menekankan informasi apa saja yang terdapat pada rancangan UI termasuk struktur maupun layout desain, pada tahapan ini kami akan membuat suatu wireframe digital yang hasilnya dapat dilihat pada gambar dibawah.

UI Style Guide

Seperti yang disebutkan sebelumnya, UI style guide akan mempermudah proses desain ke depannya karena style ataupun komponen yang telah dibuat dapat digunakan kembali ketika mendesain suatu UI. UI Style Guide juga akan menjaga konsistensi setiap desain UI yang sedang dibuat karena penggunaan style atau komponen yang sejenis. UI Style Guide yang kami buat mencakup komponen atom seperti logo aplikasi, color style, typography, button, text field, dan iconography adapun komponen molecule yang kami buat mencakup komponen header, navigation bar, tabbing, dan komponen lainnya. Berikut gambaran UI Style Guide yang telah kami buat:

UI Design

Setelah serangkaian tahapan mulai dari empathize hingga membuat UI Style Guide, kini kami akan memulai melakukan tahapan utama dalam Design Thinking yaitu membuat desain UI. UI Design yang kami buat tentunya berpedoman pada setiap output yang telah diperoleh pada tahapan-tahapan sebelumnya. UI Design yang kami buat akan mencakup 2 (dua) flow utama pembuatan asuransi dan pembuatan wasiat.

Pembuatan Asuransi | Berikut beberapa rincian terkait flow pembuatan asuransi :

Jika pengguna membutuhkan bantuan, pengguna dapat langsung berkonsultasi dengan pihak Bank Jago baik melalui chat ataupun video call.
Pengguna dapat mengikuti challenge yang tersedia untuk mendapat reward tertentu.
Terdapat dua pilihan peruntukan asuransi, yang pertama untuk pengguna sendiri yang kedua asuransi untuk keluarga pengguna.
Jenis asuransi yang tersedia yaitu Life Savior, pendidikan, kesehatan, dan juga properti.
Terdapat fitur kalkulator ajaib yang bisa digunakan pengguna untuk mengetahui estimasi uang pertangguhan yang diperlukan dan juga rekomendasi premi.
Terdapat beberapa pilihan tier saat mendaftarkan asuransi yaitu silver, gold, dan platinum yang dapat dipilih pengguna sesuai dengan kebutuhan.
Terdapat beberapa opsi pembayaran, namun direkomendasikan pembayaran melalui Kantong Jago.
Setelah pendaftaran asuransi, pengguna dapat melihat detail transaksi yang dilakukan.
Pengguna dapat melihat status sekaligus progress dari asuransi yang didaftarkan pada menu yang disediakan.

Pembuatan Wasiat| Berikut beberapa rincian terkait flow pembuatan Wasiat :

Jika pengguna membutuhkan bantuan, pengguna dapat langsung berkonsultasi dengan pihak Bank Jago baik melalui chat ataupun video call.
Terdapat dua pilihan peruntukan wasiat, yang pertama sebagai bentuk wishes yang kedua sebagai Kado untuk keluarga.
Terdapat fitur untuk menambahkan audio, gambar, ataupun video untuk dilampirkan bersamaan dengan surat wasiat.
Terdapat fitur untuk menambahkan audio, gambar, ataupun video untuk dilampirkan bersamaan dengan surat wasiat.
Jenis wasiat yang dapat dipilih pengguna yaitu surat wasiat umum, rahasia, dan juga olografis.
Pembuatan wasiat dilakukan dengan full online, pengguna cukup melampirkan dokumen yang dibutuhkan dan juga melampirkan tanda tangan pengguna, jika dibutuhkan konfirmasi maka pengguna akan disambungkan dengan pihak Bank Jago.
Sama seperti produk asuransi disediakan beberapa opsi pembayaran, namun direkomendasikan pembayaran melalui Kantong Jago.
Pengguna dapat melihat wasiat yang telah dibuat pada menu yang disediakan.

Final Prototype

Berikut ini merupakan hasil akhir UI Design yang kami buat dalam bentuk prototyping:

TESTING

Setelah solusi desain selesai dibuat, untuk mengevaluasi tingkat keberhasilan ataupun kepuasan pengguna perlu dilakukan Testing. Pada tahapan ini kami akan menguji solusi desain yang dibuat untuk mengetahui ukuran keberhasilan dengan acuan feedback yang diperoleh dari responden. Metode research yang kami gunakan yaitu IDI (In Dept Interview) dengan zoom dan juga Usability Testing. Untuk mendukung proses testing kami terlebih dahulu mempersiapkan segala dokumen yang diperlukan diantaranya dokumen n Stimulus User Research dan juga Dokumen Record Data User research. Berikut informasi yang terdapat pada kedua dokumen tersebut:

Overview : Penjelasan singkat mengenai proyek ataupun aplikasi yang akan dicoba responden.
Research objective : Penjelasan tujuan dari Testing atau User Research.
Respondent criteria : Kriteria responden dalam User Research (pada proyek ini hanya melibatkan satu responden).
List of question :Daftar pertanyaan yang ditujukan kepada responden.
Technical Interview : Penjelasan hal teknis terkait User Research.
Research scenario : Tahapan atau alur dari User Research yang akan dilakukan.
Usability Metric: Ukuran keberhasilan yang digunakan untuk menilai tingkat keberhasilan dari solusi desain. Pada proyek ini kami menggunakan Single Ease Question dan System Usability Scale dengan parameter keberhasilan masing-masing yaitu 5.5 dan 68. (SEQ skala 1–7 dan SUS skala 1–5).

Hasil

Skor SEQ yang diberikan responden untuk Task 1 (Kalkulator ajaib), Task 2 (Buat Asuransi), dan Task 3 (Buat wasiat) masing-masing yaitu 6, 7, dan 6. Karena skor yang diberikan responden untuk ketiga Task telah melampaui parameter keberhasilan SEQ yaitu 5.5, maka solusi desain dapat dikatakan berhasil.

Sedangkan, total skor SUS yang diberikan responden yaitu 65, sehingga dapat dikatakan bahwa solusi desain dinilai kurang berhasil untuk memuaskan pengguna karena masih dibawah skor 68.

Berikut beberapa feedback pengguna ketika kami melakukan User Research untuk menguji solusi desain yang dibuat:

Informasi yang dijelaskan pada bagian hunian sedikit membingungkan.
Terkait icon agak kontras dengan yang di awal sehingga responden sedikit bingung.
Metode pembayaran mungkin bisa ditambah yang lain tidak hanya dari kantong Bank Jago.
Untuk pemilihan jenis wasiat mungkin bisa diberi informasi agar tidak menimbulkan kebingungan.
Maksimal kata pada wasiat mungkin bisa diinformasikan.

KESIMPULAN

Berdasarkan hasil Testing, iterasi ataupun perbaikan-perbaikan desain perlu dilakukan meskipun pada SEQ skor yang diberikan responden telah mengindikasikan bahwa solusi desain telah berhasil. Selain itu, iterasi desain juga perlu dilakukan karena skor SUS yang tidak mencapai parameter keberhasilan dan juga User Research yang hanya melibatkan satu orang responden sehingga hasilnya belum dapat dikatakan valid untuk menjadi acuan dalam menilai keberhasilan solusi desain pada proyek kali ini.

Melalui proyek ini, saya mendapat berbagai pengalaman maupun pemahaman dan nyatanya merancang suatu solusi desain tidaklah mudah karena perlu memperhatikan berbagai faktor. Dengan mengerjakan proyek ini, saya juga dapat lebih memahami apa saja yang diinginkan oleh pengguna sehingga harapannya saat mengerjakan proyek lain saya dapat lebih memaksimalkan suatu solusi desain baik dari segi User Interface maupun User Experience.

REKOMENDASI SELANJUTNYA

Dari serangkaian tahapan yang telah dilakukan dan didukung dengan feedback yang diperoleh dari responden, berikut beberapa tindakan yang dapat diteruskan selanjutnya:

Melakukan iterasi desain sesuai dengan feedback pengguna.
Kembali melakukan User Research atau Testing dengan melibatkan lebih banyak responden.
Mencoba membuat solusi desain dari flow yang belum dibuat solusi desain-nya ataupun membuat solusi desain dari flow baru.
Mengembangkan fitur-fitur lain dari aplikasi bank jago.
Melakukan penelitian lebih lanjut untuk mengetahui permasalahan ataupun kebutuhan lain dari pengguna.

Terima kasih kepada Kemendikbud, Skilvul dan juga Challenge partner Bank Jago karena telah diberi kesempatan untuk melakukan proyek UI/UX Challenge ini, termasuk kepada rekan tim yaitu Mario dan Nadifah dan juga mentor Mas Agus Setyo P atas bantuan yang diberikan selama pengerjaan proyek.