UI/UX Redesign Case Study: Jenius App by BTPN

Latar Belakang

Berkembangnya teknologi yang semakin pesat memicu berkembangnya berbagai macam aplikasi salah satunya aplikasi berbasis perbankan digital. Bank Tabungan Pensiunan Nasional melakukan inovasi dengan menghadirkan Jenius yang merupakan aplikasi perbankan digital mereka. Jika dahulu anda harus mengantri di bank untuk membuat sebuah rekening tabungan, dengan Jenius anda dapat membuka rekening tabungan hanya dengan aplikasi yang ada di smartphone anda. Kemudahan tersebut menjadikan banyak pengguna Jenius berasal dari kalangan anak muda karena fitur yang ditawarkan menunjang kebutuhan mereka untuk berlangganan musik, aplikasi bahkan tagihan game online.

Jenius menyediakan layanan kartu debit yang memiliki fitur sama seperti kartu kredit sehingga mempermudah dalam transaksi online. Demi memaksimalkan pengalaman pengguna dari segi kenyamanan, kemudahan Namun, masih terdapat beberapa kendala dalam pengembangan aplikasi Jenius terutama dalam segi Interface pengguna serta pengalaman pengguna setelah menggunakan aplikasi Jenius. Maka dari itu, kami bertujuan melakukan rancangan ulang Interface aplikasi Jenius menurut keluhan pengguna yang telah kami terima sehingga kedepannya lebih mempermudah pengguna dalam menggunakan aplikasi Jenius.

Target user and Market

Digital Savvy

Peran Kami

Rangga Ray Irawan | Aspiring Junior UX Designer/Mahasiswa Sistem Informasi 2017
Ken Rangga Dinar |Aspiring Junior UI Designer/Mahasiswa Sistem Informasi 2018
M. Axl Bayu |Aspiring Junior UX Researcher/Mahasiswa Sistem Informasi 2017

Tujuan dan Dampak

Tujuan kami melakukan redesign adalah untuk memecahkan masalah yang dialami oleh pengguna Jenius dengan meningkatkan kepuasan pengguna pada pemakaian aplikasi dengan cara meningkatkan “usability”, “accesibilty” dan “pleasure” produk. Sehingga solusi yang kami buat dapat bertemu dengan ekspektasi pengguna dan juga menyelesaikan masalah-masalah pengguna Jenius dan dapat tepat sasaran

Proses Desain

Metodologi yang kami gunakan untuk mendefinisikan permasalahan yang ada pada aplikasi Jenius adalah Metodologi Design Thinking. Metodologi Design Thinking terdiri dari lima fase, diantaranya:
1. Emphatize/Observe
2. Define
3. Ideate
4. Prototype
5. Test

1. Emphatize/Observasi

Pada fase ini, sebelum kami melakukan observasi, kami menuliskan beberapa asumsi masalah yang kami alami sendiri selama memakai aplikasi Jenius. Berikut Emphaty Map dari masalah-masalah yang ada berdasarkan asumsi kami. (Kami menggunakan Miro sebagai media collaborative tool )

*berikut beberapa lampiran screenshot masalah yang dialami tim kami saat menggunakan jenius:

Setelah kami melakuka Emphaty Map pada masalah-masalah yang ada di aplikasi Jenius, selanjutnya kami melakukan validasi masalah dengan cara riset pada pengguna lain. Para pengguna Jenius diminta ketersediaanya untuk mengisi sebuah form kuesioner online melalui tautan: https://axlbayu.typeform.com/to/vd4Fco

Berikut beberapa daftar pertanyaan yang kami ajukan:

1. Mengapa anda menggunakan Jenius?
2. Fitur/layanan apa saja yang sering anda pakai?
3. Apakah anda pernah mengalami kendala saat memakai aplikasi mobile jenius? dan Seberapa sering anda mengalami permasalahan tersebut ? (dalam waktu yang spesifik)
4. Ceritakan masalah apa yang anda rasakan selama menggunakan jenius mobile? dan Fitur/layanan apa yang paling berkesan saat anda memakai aplikasi jenius?
5. dll.

Persona Pengguna & Skenario Pengguna

Kami membagi dua kategori pengguna Jenius berdasarkan kebiasaan mereka:

1. Si Rajin menabung
   Kategori pengguna ini menggunakan Jenius sebagai media penyimpanan uang mereka. Kebanyakan dari mereka menggunakan fitur save it karena mudah pengelolaannya dan mudah mendapatkan bunga setiap bulannya.
2. Si Cashless Society
   Kategori pengguna ini menggunakan Jenius sebagai media transaksi e-wallet mereka untuk aplikasi transportasi atau memesan makanan. Mereka menggunakan fitur e-wallet karena kemudahan top-up dan potongan yang minim.

Persona Pengguna Pertama:

Nama : Umi Zahroh
Umur : 20
Pekerjaan : Mahasiswa
Hobi : Programming

Umi Zahroh merupakan mahasiswa aktif program studi Sistem Informasi. Selain aktif akademik, Umi juga aktif di Lab sebagai Asisten Praktikum Programming.Disamping tugas utamanya sebagai pengajar, Umi juga sering mendapatkan projectan untuk membangun sebuah aplikasi. Hal tersebut tentu sangat bagus untuk dia karena selain mendapatkan pengalaman, Umi juga mendapatkan penghasilan tambahan dari project tersebut. Umi menggunakan fitur Card Center untuk memisahkan uang hasil projectnya dengan uang bulanan. Dari penghasilan tambahannya juga sebagian Umi gunakan untuk menabung. Umi menggunakan Jenius untuk pembayarannya karena ada fitur save it yang dapat dikelola dengan mudah. Dibalik kemudahannya tersebut, Umi sering mengalami kendala. Pertama ketika menginput pin atau finger print dalam kondisi tertentu.Hal ini sering terjadi. Loading data nya juga lama sekali ketika sudah masuk ke halaman utamanya. Dan juga, masih banyak fiutr-fitur yang Umi belum pernah gunakan karena tidak tahu fungsinya.

Persona Pengguna Kedua:

Nama : Haikal gibran akbar

Umur : 18

Pekerjaan : Mahasiswa

Hobi : -

Haikal merupakan seorang mahasiswa telkom university, sebagai seorang mahasiswa haikal melakukan aktivitas hariannya seperti berangkat ke kampus, mengikuti kegiatan kampus dan berorganisasi. sebagai seorang yang aktif bertransaksi ia membutuhkan mobilitas yang tinggi dalam hal bertransaksi antar bank, maka dari situ ia memilih menggunakan jenius yang mendapatkan jaminan gratis transfer antar bank dengan kebijakan jenius. ia sering pula menggunakan fitur send & pay untuk mengirim dana kepada seseorang serta e-wallet yang memberikan kemudahan penyimpanan uang online, dalam hal ini haikal terbiasa memesan makanan melalui layanan aplikasi makanan ojek online. haikal juga menambahkan, untuk aplikasi yang jarang sekali ia pakai yaitu move balance, save money, dimana haikal merasa kedua fitur tersebut tidak pernah dipakai dalam kehidupan sehari hari haikal dikarenakan kurang memiliki dampak ke kehidupan haikal sebagai mahasiswa.

Namun dalam pengoperasion aplikasi mobile jenius pada setiap harinya, haikal tak jarang menemukan error pada saat hendak mentransfer uang dan haikal tidak mengetahui asal usul permasalahannya tersebut. permasalahan tersebut cukup mengganggu kegiatan sehari hari haikal dalam bertransaksi secara online. haikal juga menambahkan kalau pada aplikasi jenius bisa juga ditambahkan fitur micro-transaction dan mengusulkan perubahan warna yang ke arah pastel agar membuat efek nyaman di mata, serta tata letak penempatan fitur fitur icon yang kurang bisa bisa dijangkau oleh ibu jari, sehingga menyulitkan mobilitas haikal dalam mengoperasikan aplikasi secara efisien.

(Jawaban detil dapat dilihat di:

https://docs.google.com/spreadsheets/d/13dKAsQkHNWqHZX28QjSqG1DOTv-MtT7JNfWq7L8wHXI/edit?usp=sharing)

2. Define

Setelah melakukan asumsi masalah dan validasi ide melalui observasi, kami menemukan beberapa pain points dari mereka. Diantaranya:

#1 Saat menggunakan aplikasi, sering terjadi error/ bugs aplikasi.

Kejadian ini sama-sama terjadi pada dua pengguna diatas

#2 Kesulitan saat menginput pin/finger print dalam kondisi tertentu.

Minimnya indikator menyebabkan kesalahan input PIN pada pengguna.

#3 Masalah load data yang lambat

Load data yang lambat bisa jadi disebabkan oleh data yang masuk terlalu besar/banyak, atau aplikasi yang masih terdapat bugs.

#4 Tampilan interface yang terlalu sederhana/biasa.

Menurut pengguna yang kami survei, tampilan Jenius terlalu sederhana namun fiturnya sangat berguna.

#5 Tata letak kategori menu yang sulit dijangkau oleh ibu jari.

Menurut kami, Tata letak sub menu/kategori yang kurang pas pada sisi pojok kiri atas menyebabkan proses user flow memakan lebih banyak waktu.

#6 Kurangnya pengetahuan dan kesadaran mengenai fitur-fitur di Jenius.

Berdasarkan data pengguna yang kami survei, mereka banyak yang belum mengetahui fitur-fitur lain di Jenius.

3. Ideate

Setelah kami menemui berbagai permasalahan yang didapat dari survei yang telah kami lakukan, Pada fase ini kami mencoba menemukan solusi dari setiap masalah-masalah pada user.

#1 Tampilan Masuk Pin dan Fingerprint mempunyai indikator yang lebih mudah terlihat.

Pada masalah yang disinggung di atas, Umi mengalami sedikit kendala saat masuk ke aplikasi Jenius. Salah satu alasannya adalah PIN yang kadang tidak sesuai karena jari yang tidak pas terkena nomor PIN. Di sini kami menambahkan indikator yang lebih terlihat besar dan jelas agar memudahkan pengguna saat masuk.

#2 Tata letak sub menu yang diredesain agar lebih mudah dijangkau dan kustomisasi menu

Dengan solusi ini kami yakin dapat memotong alur proses user agar lebih efektif dan efisien. Kamu menaruh

#3 Melampirkan deskripsi di masing-masing fitur.

Berdaasarkan masalah yang dialami Umi, kami yakin dengan adanya penambahan deskripsi pada masing-masing fitur dapat meningkatkan awareness pengguna sehingga mereka dapat bereksplorasi lebih di aplikasi dan membuat beberapa fitur yang jarang diketahui jadi .tidak “mubazir”.

Wireframe dan User Flow

PIN & Fingerprint Authentication Wireframe

Homepage & Category wireframe

(Fitur) In & Out, M-Card dan Add Card Wireframe

E-wallet & Save it Wireframe

Hasil

Berdasarkan hasil semua analisa di atas, berikut poin-poin yang dapat kami simpulkan pada redesign aplikasi Jenius:

1. Kami meredesain tampilan PIN & Fingerprint Authentication agar memiliki indikator yang lebih baik guna mengurangi kesalahan input PIN.

Berikut tampilan yang kami redesign:

Tampilan lama:

Tampilan Baru:

1. Kami melakukan redesain pada sidebar/navigation bar fitur dengan menempatkannya pada halaman utama, hal ini berguna untuk mempersingkat proses user flow dengan mengurangi waktu dan jarak jangkau jari, selain itu dapat dilakukan kustomisasi berdasarkan fitur yang mereka sering gunakan.

Berikut tampilan yang kami redesign:

Tampilan lama: Tampilan Baru:

1. Kami meredesain halaman kategori (fitur-fitur) dengan menambahkan deskripsi di setiap fitur agar pengguna mengetahui dengan jelas fungsi fitur tersebut.

Berikut tampilan yang kami redesign:

Tampilan lama: Tampilan Baru:

Kesimpulan

Berdasarkan dari hasil penelitian mengenai interaksi user dalam menggunakan aplikasi jenius mobile dengan latar belakang user yang berbeda beda kami menyadari bahwa aplikasi mobile jenius masih memerlukan pengembangan dalam bidang user interface dan user experience dalam rangka meningkatkan performa aplikasi. di sini kami menemukan beberapa permasalahan yang sedang dialami oleh user, dari lima user yang kami minta data tentang pengalaman menggunakan aplikasi jenius dengan latar belakang pemakaian yang berbeda beda pula kami merangkum menjadi empat permasalahan utama. yang pertama, tampilan PIN & Fingerprint Authentication belum memiliki indikator yang lebih baik , dalam rangka sebagai penanda user dalam memasukan PIN, user merasa kurangnya indikator tampilan dapat menjadi salah faktor kesalahan memasukan pin.

yang kedua, kami mendesain ulang pada sidebar/navigation bar fitur dengan menempatkannya pada halaman utama, hal ini berguna untuk mempersingkat proses user flow dengan mengurangi waktu dan jarak jangkau jari, pada perkembangan smartphone sekarang kebanyakan mempunyai layar inci yang lebar. kemudian yang ketiga, mendesain ulang halaman kategori (fitur-fitur) dengan menambahkan deskripsi di setiap fitur agar pengguna mengetahui dengan jelas fungsi fitur tersebut, penempatan fitur fitur dalam side bar dirasa kurang mampu membuat attractive user dalam eksplorasi fitur lain selain fitur utama yang sering digunakan. lalu terakhir keempat, Load data yang lambat bisa jadi disebabkan oleh data yang masuk terlalu besar/banyak, atau aplikasi yang masih terdapat bugs, disini kami mengharapkan adanya perbaikan sistem back-end untuk mempermudah load data pada aplikasi.