Case Design UI/UX Design: Redesign Aplikasi Gopay dalam lingkup Fitur dan Search Bar

Introduction

Kami dari Kelompok 1 mata kuliah Human Computer Interaction — Hernan Crespo Barus, Fauzan Akbar, Tzar Madani Pasha, Muhamad Rasyid Al kautsar, dan Salman Alfarizi Ibrahim. Dalam tugas ini, kami melakukan analisis UI/UX terhadap aplikasi GoPay, dompet digital terkemuka di Indonesia yang dioperasikan oleh PT Dompet Anak Bangsa dan merupakan bagian dari ekosistem GoTo.

GoPay mulai dikenal luas sejak tahun 2016 dan menyediakan solusi pembayaran digital serba bisa, mulai dari layanan Gojek, QRIS, hingga transfer bank. Pada tahun 2023, GoPay resmi meluncurkan aplikasi mandiri untuk mempermudah transaksi harian penggunanya.

Dengan jutaan pengguna aktif, GoPay menjadi salah satu e-wallet yang paling banyak digunakan di Indonesia. Namun, apakah aplikasi yang populer selalu berarti aplikasi yang memiliki UX yang baik? Itulah pertanyaan yang mendorong kami untuk melakukan studi ini.

The Problem we are assuming is..

Penggunaan user interface pada GoPay, khususnya pada fitur Rekomendasi dan Search Bar, masih terasa kurang efektif dan justru menjadi beban bagi pengguna. Pada fitur Rekomendasi, pengguna seperti dipaksa mengingat sendiri fitur yang sering digunakan karena sistem belum menampilkan rekomendasi berdasarkan kebiasaan atau persona pengguna. Akibatnya, fitur pada bagian “Rekomendasi Buatmu” sering muncul secara acak dan tidak relevan dengan aktivitas pengguna. Misalnya, ketika pengguna lebih sering memakai fitur Transfer Gratis atau Split Bill, yang muncul justru fitur lain yang jarang atau bahkan tidak pernah digunakan. Selain itu, pada fitur Search Bar, pengguna diwajibkan mengetik minimal tiga huruf agar hasil pencarian muncul. Ketika pengguna mengetik kurang dari tiga huruf dan sistem tidak memberikan respons apa pun, muncul kesan bahwa sistem lambat atau tidak bekerja, sehingga membingungkan pengguna.

Dalam Memperbaiki Fitur Gopay ini kami memulai dari sebuah framework yaitu, empati, Define, ideation, prototype, dan test.

Empathise

Kami menggunakan pendekatan kualitatif deskriptif dengan tujuan utama memahami persepsi dan pengalaman pengguna terhadap UI/UX aplikasi GoPay.

Subjek Penelitian: 9 informan mahasiswa yang dipilih melalui purposive sampling dengan kriteria:

• Pengguna aktif GoPay harian
• Memahami fitur dasar seperti top up dan transfer
• Bersedia mengikuti sesi Focus Group Discussion (FGD)

Teknik Pengumpulan Data:

1. FGD — metode utama untuk menggali diskusi mendalam antar pengguna
2. Observasi — mengamati respons spontan dan bahasa tubuh partisipan
3. Dokumentasi — pencatatan dan perekaman untuk menjaga keakuratan data

Langkah awal ini kami memulai dari mewawancarai 9 ( sembilan ) orang mahasiswa dengan membentuk 2 ( dua ) user persona sebagai berikut:

Insight yang kami dapatkan dari mewawancara narasumber adalah:

1. Practical user tidak menemukan/merasa relate dengan fitur rekomendasi yang ada tidak terpersonalisasi sama sekali dengan user.
2. Practical user saat ini menggunakan aplikasi Gopay bertujuan untuk transaksi cepat, praktis dan tanpa kerumitan, sehingga intensitas user cukup sering tetapi hanya saat dibutuhkan.
3. Feature Oriented User merasakan ketika melakukan pencarian Fitur Gopay tetapi harus melakukan minimal Tiga pengetikan Huruf baru opsi fitur-fitur gopay itu muncul.

Define

Setelah melakukan wawancara dan mendapatkan Insight dari kedua narasumber,

kami selaku mahasiswa juga mencoba menggunakan kedua fitur kami, di masing masing handphone kami, dan hasil nya sama persis mengalami masalah yang dirasakan oleh kedua narasumber kami yaitu:

1. Fitur rekomendasi tidak mengikuti personalisasi diri kami masing-masing, tetapi memunculkan fitur-fitur random.
2. Fitur Pencarian atau search bar juga mengalami masalah terhadap pengetikan minimal 3 huruf baru memuncul opsi fitur-fitur dari aplikasi Gopay.

Dari kedua masalah ini, kami menetapkan dua Problem Statement sebagai landasan evaluasi dan pembuatan prototype di Figma.

How Might We

Sebelum melompat ke solusi, kami melakukan sesi How Might We untuk membuka ruang eksplorasi ide seluas-luasnya. Pertanyaan-pertanyaan ini kemudian menjadi panduan dalam proses ideasi.

HMW 1 : Bagaimana kami bisa membuat fitur rekomendasi yang benar-benar mencerminkan kebiasaan dan preferensi masing-masing pengguna?

HMW 2 : Bagaimana kami bisa membuat search bar yang langsung responsif sejak karakter pertama, tanpa menunggu tiga huruf?

HMW 3 : Bagaimana kami bisa memastikan perubahan ini tidak membebani atau mengubah alur navigasi yang sudah familiar bagi pengguna lama?

HMW 4 : Bagaimana kami bisa memberikan feedback visual yang jelas ketika pengguna mulai mengetik di search bar, bahkan sebelum hasil muncul?

Ideate

Berdasarkan dua permasalah yang sudah kami bahas sebelumnya dan melakukan brainstroming maka, kami mengambil sebuah idea yang sederhana tetapi menjawab dua permasalahan dari dua narasumber yang sudah kami wawancara, sehingga mencapai sebuah idea yaitu:

1. Fitur rekomendasi akan di personalisasikan sesuai dengan user sehingga ketika mereka membutuhkan kecepatan dalam menggunakan aplikasi, maka bisa dilangsung digunakan
2. Search bar yang memerlukan tiga huruf kami perpendek ketika user mengetik satu huruf saja maka sudah akan muncul fitur fitur yang berawal dari T seperti contohnya transaksi gratis, solusi ini akan mempermudah user dalam menggunakan aplikasi Gopay

Prototype

Pada langkah ini kami melakukan 2 Tahap pelaksanaan yaitu:

1. user interface
2. Prototype& interaction

UI Design

Pada tahap UI Design ini kami membuat dengan Figma, dan berikut adalah hasil prototype dari aplikasi Gopay yang sudah kami evaluasi:

Berikut adalah Landing page/Beranda yang disebelah “kiri” dan menu semua fitur yang disebelah “kanan”, kami membuat landing page dan menu semua fitur dengan presisi seperti pada aplikasi Gopay dikarenakan pada bagian ini bukan termasuk kedalam compenent yang kami evaluasi.

Selanjutnya adalah bagian dari Fitur Rekomendasi yang kami evaluasi disebelah “kiri” adalah Fitur rekomendasi yang belum di evaluasi, dan yang “kanan” adalah Fitur rekomendasi yang sudah di evaluasi, implementasi dari Personalisasi ini adalah kami memudahkan user menggunakan Fitur Rekomendasi supaya lebih Relatable atau merasa terhubung dengan aplikasi Gopay ini.

Berikut ini adalah Prototype yang sebelum nya minimal 3 Huruf baru muncul Fitur-Fitur dari gopay, tetapi jika kurang dari 3 Huruf tidak akan muncul Fitur-Fitur yang dicari dari gopay, ini adalah sebuah permasalah yang kami define dari user yang kami wawancara, dan setelah melakukan brainstroming dan pembuatan prototype jadi lah Prototype yang “ di tengah” dan “di kanan”, implementasi dari Fitur search bar ini adalah memudahkan user untuk melakukan pilihan sesuai dengan Fitur-Fitur yang user cari walaupun belum ditemukan sehingga walaupun baru mengetik satu Huruf, user sudah bisa melihat opsi yang ingin mereka tuju dan bisa dilakukan Klik.

Validate — Usability Testing

melakukan validasi hasil redesign aplikasi Gopay ini, kami sudah mendapatkan feedback dari beberapa user yang bisa kami minta keterangannya:

1. “lebih mudah cari melakukan transaksi dengan Fitur split bill karena saya dan teman-teman saya biasanya melakukan split bill di aplikasi Gopay”
2. “saya jadi merasa mudah mencari untuk melakukan transaksi Gratis dengan fitur rekomendasi ini, karena lebih cepat tinggal langsung klik, saya digopay biasanya memaksimal fitur ini karena tidak ada di mobile banking”
3. “saya lebih merasa mudah untuk mencari fitur transjakarta karena ketika saya klik huruf T, langsung muncul opsi nya”

Kesimpulan

Studi ini menunjukkan bahwa aplikasi GoPay, meski telah digunakan secara luas, masih memiliki sejumlah celah UX yang mempengaruhi pengalaman dan loyalitas pengguna — terutama di kalangan mahasiswa.

Dua masalah utama yang kami identifikasi adalah:

1. Fitur rekomendasi yang tidak personal, yang melanggar prinsip Visibility of System Status dan Flexibility & Efficiency of Use dalam Nielsen’s 10 Heuristics
2. Search bar yang kurang responsif, yang melanggar prinsip yang sama dan bertentangan dengan Tesler’s Law

Solusi yang kami tawarkan berfokus pada personalisasi pengalaman pengguna dan transparansi informasi — dua hal yang secara langsung merespons kebutuhan nyata yang terungkap dalam FGD bersama 9 informan mahasiswa.

Ke depannya, validasi solusi ini melalui usability testing dengan pengguna nyata perlu dilakukan untuk mengukur efektivitas perubahan yang diusulkan secara empiris.