UX Case Study : Bank Jago UX Challenge

Wikan Adnyana
6 min readNov 29, 2022

--

Perkenalan

Halo semuanya, kenalin aku Wikan yang saat ini sedang menjalankan program kampus merdeka dari kemendikbudristek dan kolaborasi dengan Skilvul.

Pada kesempatan kali ini, saya ingin membagikan ke teman-teman semua mengenai UX Case Study mengenai partner challenge yaitu dari Bank Jago.

Disclaimer: Projek ini merupakan bagian dari Skilvul dan juga bukan merupakan projek yang dibuat karena ada unsur pekerjaan pada perusahaan Skilvul.

Peran

Peran saya pada pengembangan tampilan UI/UX challenge partner pada Bank Jago yaitu menyusun UI dan juga melakukan UX riset. Pengembangan tersebut saya lakukan bersama teman saya yaitu Dama, Fitri, dan juga Arif.

Design Proses

Alur pada perancangan desain atau metode desain proses yang diterapkan pada pengembangan UI/UX aplikasi Bank Jago adalah dengan menggunakan Design Thinking. Design Thinking merupakan sebuah metode yang terdiri dari beberapa tahapan yaitu seperti empathize, define, ideate, prototype, dan juga testing. Design thinking merupakan metode yang paling umum yang digunakan oleh UI/UX desainer dalam melakukan pengembangan tampilan dan juga pengalaman dari aplikasi. Ketika sudah menerapkan design thinking, maka aplikasi yang dirancang dapat dikatakan bisa sesuai dengan apa yang pengguna inginkan.

Tahapan Design Thinking

Pada challenge partner bersama Bank Jago kali ini, kita diminta untuk mendesain sebuah tampilan interface dari aplikasi yang menyelesaikan beberapa permasalahan khususnya dalam beberapa fitur yaitu pada fitur wasiat dan juga asuransi. Fitur wasiat merupakan fitur yang dapat dipilih oleh pengguna untuk membuat wasiat berupa wasiat olografis, wasiat uang tabungan, wasiat umum, maupun wasiat rahasia yang dapat diberikan kepada keluarga. Selain fitur wasiat, terdapat juga fitur asuransi yang merupakan fitur yang dapat dipilih oleh pengguna untuk membuat asuransi berupa asuransi jiwa, asuransi kesehatan, maupun asuransi ketenagakerjaan. Tahapan di dalam pembuatan project ini menggunakan metode design thinking yang akan dijelaskan dibawah ini.

1 — Empathize

Empathize merupakan proses pengenalan terhadap apa permasalahan yang akan dihadapi. Empathize bisa dikatakan sebagai awal dari pelaksanaan dari design thinking. Tahapan empathize yang dilakukan saat ini adalah dengan menggali informasi secara langsung dari melakukan wawancara dengan beberapa orang yang memiliki kriteria umur yang sesuai. Pada tahapan ini kami mewawancarai 2 responden yang memiliki kriteria sesuai dengan user persona yang telah diberikan. Dari kedua responden tersebut kami menggali beberapa informasi dan bertanya mengenai beberapa hal yang berkaitan dengan asuransi dan juga wasiat. Dari hasil wawancara tersebut, kami memiliki beberapa temuan yang sekiranya menjadi dasar dari pembuatan project dari challenge Bank Jago ini. Hasil dari wawancara tersebut dijadikan beberapa poin temuan yang akan dijelaskan di langkah selanjutnya.

2 — Define

Define merupakan tahapan untuk melakukan pencatatan atas penemuan-penemuan yang telah ditemukan pada tahapan empati tadi. Beberapa penemuan itu lalu akan di definisikan sehingga nantinya akan dilakukan pemilihan sekiranya permasalahan dan juga solusi mana yang akan dipecahkan melalui UI/UX pada aplikasi Bank Jago tersebut. Pada tahapan define terdapat beberapa hal yang dilakukan yaitu seperti menentukan pain points dari riset yang telah dilakukan pada tahapan empati, menentukan how might we berdasarkan pain points yang telah dirumuskan tadi, dan menentukan solution idea.

Pain Points

Pain points merupakan beberapa poin-poin yang bisa ditentukan dari temuan atau riset yang dilakukan pada tahapan empati. Beberapa poin penting tersebut lalu dituliskan pada Figjam di Figma. Berikut merupakan beberapa gambaran dari pain points yang telah grup kami rumuskan.

Pain Points

How Might We

Berikutnya adalah terdapat how might we yang merupakan hal-hal yang sekiranya harus dilakukan untuk bisa mendapatkan solusi dari pain points tersebut. Berikut merupakan how might we yang telah kami susun.

How Might We

Solution Idea

Solution idea merupakan solusi-solusi yang muncul ketika melihat dari how might we yang telah disusun sebelumnya. Solusi-solusi tersebut lalu akan dilakukan voting untuk menentukan solusi mana yang harus dikerjakan terlebih-dahulu. Berikut merupakan solution idea yang telah kami susun.

Solution Idea

3 — Ideate

Tahapan ideate merupakan tahapan dimana kita akan mulai mengeksekusi hasil-hasil riset yang telah dilakukan pada tahapan define. Pada ideate kita mulai mendiskusikan ide-ide seperti fitur apa saja yang akan diterapkan pada aplikasi. Selain itu juga akan ditentukan user flow, wireframe, design system, dan high fidelity. Tahapan ideate bisa dikatakan sebagai tahapan yang cukup panjangan dijalankan karena merupakan tahapan penyusunan dari UI aplikasi tersebut. Berikut merupakan detail dari tahapan yang kelompok kami lakukan pada ideate.

Prioritization Idea

Prioritization idea merupakan tahapan dalam menentukan prioritas dari ide yang telah disusun sebelumnya. Pada prioritization idea terdapat tampilan kuadran yang menentukan seberapa penting ide tersebut harus dieksekusi. Berikut merupakan gambaran dari prioritization idea yang grup kami lakukan.

Prioritization Idea

User Flow

User flow merupakan alur dari bagaimana aplikasi dijalankan oleh pengguna. Alur atau user flow ini digambarkan melalui flowchart agar mudah dipahami. Berikut merupakan gambaran dari user flow pada aplikasi yang kami rancang.

User Flow

Wireframe

Wireframe adalah sebuah kerangka untuk menata suatu item di laman website atau aplikasi. Wireframe yang dibuat harus berdasarkan dari user flow atau alur pengguna yang telah disusun sebelumnya. Berikut merupakan tampilan dari wireframe yang telah grup kami susun.

Wireframe

Design System

Design system merupakan salah satu hal yang sangat penting dalam penyusunan sebuah tampilan aplikasi. Design system merupakan suatu “pakem” yang harus diikuti oleh UI desainer ketika akan menyusun dari tampilan high fidelity suatu aplikasi. Design System harus ditetapkan terlebih dahulu oleh UI designer. Biasanya keunikan suatu tampilan aplikasi ditentukan dari design system ini. Adapun beberapa hal yang ditentukan pada design system yaitu seperti warna, font, spacing, alert, navbar, button, icon, input field, dan lain sebagainya. Berikut merupakan design system yang telah kami rancang.

Design System

High Fidelity

High fidelity merupakan hasil rancangan penerapan dari design system yang sesuai dengan wirefram yang telah dibuat sebelumnya. High fidelity merupakan tampilan dari aplikasi itu sendiri. High fidelity harus benar-benar bersesuaian dengan design system yang telah ditentukan sebelumnya. Berikut merupakan rancangan high fidelity dari aplikasi yang kami buat.

High Fidelity

4 — Prototyping

Tampilan dari high fidelity yang telah dirancang selanjutnya harus dibuatkan prototypenya. Tujuan dari pembuatan prototype ini adalah agar bisa melakukan uji pada aplikasi. Pengguna akan merasakan bagaimana alur dan aplikasi bekerja melalui tahapan prototyping ini. Prototyping dapat dilakukan melalui aplikasi Figma terlebih dahulu sebelum selanjutnya akan diimplementasikan menjadi tampilan frontend oleh developer. Berikut merupakan hasil dari prototyping yang telah kami rancang.

Prototype Design

5 — Testing

Testing merupakan tahapan akhir dari perancangan UI/UX desain dengan metode design thinking. Pada tahapan testing dilakukan uji aplikasi serta wawancara terhadap beberapa pengguna yang memenuhi user persona atau target pengguna dari aplikasi Bank Jago ini. Adapun beberapa langkah-langkah yang harus dilakukan pada saat testing aplikasi yaitu menentukan beberapa dokumen seperti stimulus user research dan juga record dari data user. Wawancara yang dilakukan juga akan menentukan seberapa besar nilai SEQ atau single ease question yang bisa diberikan kepada pengguna yang diwawancarai. Pada tahapan testing ini kami mewawancarai

--

--