Perkenalkan, aku Arion Valentino, Digital Banking UI/UX Specialist dari Jenius. Aku akan menceritakan kisah di balik layar proses desain dari fitur TapCash yang baru saja launching di aplikasi Jenius.
Sejak berdiri 4 tahun lalu, sebagai digital banking yang pertama di Indonesia, Jenius sudah banyak mengembangkan fitur yang sangat membantu kehidupan finansial penggunanya. Salah satu fitur yang paling digemari oleh #temanjenius adalah fitur e-Wallet Center.
Challenge!
Saat itu, fitur e-Wallet Center di Jenius hanya sebatas memindahkan Saldo Aktif dari Jenius ke wallet lain seperti GoPay, OVO, dan sejenisnya yang bukan merupakan kartu uang elektronik (chip based). Sementara itu, kebutuhan akan kartu uang elektronik terus meningkat penggunaannya mulai dari pembayaran tol, naik MRT, naik Transjakarta, naik KRL, sampai pembayaran parkir.
Berangkat dari situ, kami memutuskan untuk mencoba mengembangkan fitur yang dapat mempermudah user untuk melakukan top up dan update saldo uang elektronik melalui aplikasi Jenius, yang bisa dilakukan #dirumahaja, terutama di masa-masa pandemi seperti sekarang. Hal ini bisa mengurangi effort dan risiko harus top up di ATM atau minimarket. Jenius berkolaborasi dengan BNI TapCash sebagai penyedia kartu uang elektronik.
Fitur ini dikembangkan oleh squad-ku, namanya Brajamusti, dan di sana aku berperan sebagai desainer UI/UX-nya. Proses desainnya sendiri menggunakan metode design thinking.
Berangkat dari Ketidaknyamanan
Ketidaknyamanan terkadang membuat user menjadi enggan menggunakan suatu produk secara terus-menerus. Melalui user interview yang dibantu oleh Squad Customer Experience, kami menggali lebih dalam bagaimana kebiasaan user dalam melakukan top up uang elektronik dan apa yang menjadi faktor ketidaknyamanan user selama melakukan top up uang elektronik.
Kami membagi kebiasaan user dalam beberapa situasi dan menuliskannya dalam Journey Mapping.
• Top up melalui ATM
Gambar 1 – Journey Mapping (Top up ATM)
User merasa gak nyaman ketika harus mencari lokasi ATM terdekat untuk melakukan top up uang elektronik, antre di ATM, mengganti kartu ATM dengan kartu uang elektronik untuk update saldo, dan tentunya pengeluaran bertambah ketika user harus melakukan parkir di area ATM.
• Top up via minimarket
Gambar 2 – Journey Mapping (Top Up Minimarket)
Masih sama dengan situasi sebelumnya, user juga merasa gak nyaman ketika harus mencari minimarket terdekat, harus antre, dan mengeluarkan biaya ekstra untuk parkir.
• Top up melalui aplikasi ‘isi ulang’
Gambar 3 – Journey Mapping (Aplikasi Isi Ulang)
Sedikit berbeda dengan 2 situasi sebelumnya, user merasa gak nyaman hanya ketika harus meng-input informasi kartu kredit sebagai sumber dana pembayaran di aplikasi isi ulang lainnya.
Selain melakukan user interview, kami juga melakukan online survey untuk memperkuat data-data yang kami miliki. Salah satu yang kami tanyakan di online survey adalah “di mana saja user menggunakan kartu uang elektronik”.
Gambar 4 – Online Survey (Penggunaan Kartu Uang Elektronik)
Menganalisis dan Mengelompokkan Masalah
Setelah melakukan serangkaian user research kepada beberapa user, kami dapat merangkum beberapa hal yang membuat user gak nyaman selama melakukan proses top up, di antaranya adalah:
- malas mencari ATM,
- malas antre ATM,
- malas mencari minimarket,
- malas antre di minimarket,
- gak mau bayar parkir, dan
- malas input nomor kartu kredit.
User juga mempunyai beberapa ekspektasi jika Jenius mempunyai fitur top up uang elektronik, yaitu:
- informasi ada di dashboard,
- bisa simpan uang elektronik di Jenius,
- bisa melakukan top up tanpa kartu, serta
- menu top up harus muncul saat melakukan cek saldo.
Gambar 5 – Analisis dan Sintesis Hasil Riset
Menjawab Ketidaknyamanan dan Mengubahnya Jadi Solusi
Kami mendengar suaramu!
Aku akan menceritakan proses yang menjadi bagian favoritku: membuat desain!
Gambar 6 – Proses Pembuatan Flow dan Desain
Sebagai UI/UX Designer, kita dituntut untuk bisa mengolah masalah yang ada, membuat solusi, menerjemahkannya ke dalam desain, serta meninggalkan semua asumsi kita dan berpusat pada data yang ada.
Beberapa solusi yang coba aku gambarkan berdasarkan hasil riset:
• Informasi TapCash di dashboard Jenius
Gambar 7 – Sketsa dan HiFi Desain Dashboard
Menempatkan informasi TapCash di halaman dashboard Jenius merupakan tantangan besar, mengingat TapCash adalah uang elektronik yang berbeda dengan e-Wallet lainnya. Setelah berdiskusi dengan Product Owner Brajamusti dan UI/UX Lead, akhirnya aku mencoba untuk mengeksplorasi desain menggunakan banner di widget e-Wallet Center.
• Input nominal yang fleksibel
Gambar 8 – Sketsa dan HiFi Design Input Amount
Di halaman masukkan jumlah top up, aku juga menambahkan pilihan untuk jumlah top up yang dapat dipilih oleh user langsung tanpa harus mengetik nominal. Atau, user juga bisa memasukkan jumlah top up sesuai keinginannya. Sangat fleksibel! Hal ini bisa menjawab kebutuhan user yang memiliki kebiasaan top up langsung banyak untuk sebulan atau hanya sekadar memasukkan nominal yang mereka inginkan untuk frekuensi pemakaian mingguan atau harian.
• Detail informasi kartu
Gambar 9 – Sketsa dan HiFi Desain TapCash Detail
Setelah menge-tap kartu, user akan melihat informasi seperti saldo kartu, nama e-Wallet, waktu update, dan nomor kartu. User juga bisa menyimpan informasi TapCash di e-Wallet Center seperti e-Wallet yang lain dan memberikan nama sesuai keinginan. Jika informasi kartu TapCash sudah tersimpan, user bisa melakukan top up kartu tanpa harus tap kartu terlebih dahulu.
Proses untuk melakukan desain dari sketsa menjadi High Fidelity Design memakan waktu kurang lebih 1 bulan. Dalam proses desain ini aku juga banyak berdiskusi dengan Front-End Developer dan Back-End Developer squad-ku tentang apa saja data yang bisa ditampilkan di suatu screen, apakah desain ini memungkinkan untuk dibuat atau gak. Diskusi ini sangat diperlukan agar kita sebagai desainer bisa mendapatkan insight dalam membuat desain, sehingga pada saat masuk ke proses development, developer sudah aware dengan desain yang sudah kita buat.
Prototype & Testing
Setelah melalui proses desain, kini saatnya membuat prototype. Desain yang sudah aku buat, aku translate menjadi prototype yang bisa diklik untuk dites ke user melalui usability testing. Usability testing tuh penting untuk mengevaluasi desain yang sudah kita buat, apakah dipahami atau gak oleh user.
Dari hasil usability testing tersebut aku mencoba untuk melakukan beberapa perubahan, kemudian dites kembali sampai mendapatkan hasil yang sesuai. Salah satu contoh screen yang mengalami perubahan desain setelah melalui usability testing adalah screen Update Saldo.
Gambar 10 – Success Widget untuk Usability Testing
User merasa informasi Update Saldo gak terbaca karena terlalu kecil, dan ketika melihat ikon centang, user berasumsi bahwa proses top up telah selesai dan gak perlu update saldo kembali. Padahal, proses top up baru benar-benar selesai ketika user telah selesai melakukan Update Saldo.
Setelah mencari referensi dan tetap berdiskusi dengan Product Owner, Tim Front-End, dan Back-End dan UI/UX Lead, akhirnya aku mencoba untuk mengeksplorasi desain widget baru khusus untuk fitur ini.
Gambar 11 – Success Widget Setelah Usability Testing
Ketika desain widget ini selesai, kembali bersama Squad Customer Experience, kami melakukan AB Testing untuk menguji konsep widget baru ini kepada beberapa user dan hasilnya. User memilih desain widget baru ini dibanding desain sebelumnya karena pada screen ini, informasi untuk Update Saldo lebih terlihat jelas dibandingkan screen sebelumnya, sehingga user tau bahwa setelah top up, user harus melakukan Update Saldo.
Proses Development
Setelah melalui usability testing, akhirnya kita masuk ke proses development. Hal yang pertama kali kami lakukan adalah grooming (bukan perawatan tubuh ya, hehe).
Gambar 12 – Grooming Squad Brajamusti
Grooming adalah istilah yang digunakan untuk berdiskusi antartim dalam squad. Di sini kita akan bahas tuntas desain yang sudah dibuat dari sisi teknis dan juga untuk mengambil keputusan mana saja yang akan masuk ke prioritas utama development. Setelah grooming selesai, developer akan mulai membuat fitur TapCash yang akan dibagi menjadi beberapa sprint dan kemudian siap untuk diluncurkan.
Gambar 13 – Brajamusti Squad dalam Balutan Batik Setelah Melakukan Sprint Planning
Gambar 14 – Potluck Brajamusti Sebulan Sebelum WFH
Sebulan sebelum WFH, kami sempat potluck bersama di kantor. Kemudian bulan setelahnya kami mesti full WfH. Semua komunikasi terkait development fitur ini kami lakukan secara online dan berjalan dengan sangat baik sampai kemudian akhirnya siap diluncurkan.
Gambar 15 – Game Night Brajamusti
Kami juga sempat mengadakan acara game night virtual biar tetap kompak meski terpisahkan jarak. Oh iya, waktu kita mengadakan game night ini, ada 1 anggota squad yang gak bisa join karena lagi ikut testing performance fitur ini.
Perjalanan Baru Dimulai
Proses development ini memakan waktu kurang lebih 1 tahun, mulai dari awal riset sampai fitur ini lahir. Ini bukan sebuah akhir melainkan sebuah perjalanan baru yang akan dimulai. Kami membutuhkan masukan dari para Co.Creators agar bisa terus mengembangkan fitur ini menjadi lebih baik.
Buat kamu pengguna Android NFC yang selama ini bingung mau top up TapCash dan update saldonya di mana, jangan lupa update aplikasi Jenius kamu, ya. Tinggal tap, beres!
