UI/UX Case Study — Flip App
Flip adalah aplikasi untuk melakukan transfer antar bank tanpa biaya. Sampai saat ini Flip telah membantu masyarakat Indonesia menghemat miliaran rupiah dari biaya transfer antar bank.
Jadi, pada studi kasus kali ini, saya ingin mencoba untuk mengembangkan salah satu fitur yang terdapat di aplikasi tersebut, yaitu fitur Kirim Uang. Berikut adalah proses design nya.
Define Problem —
Requirements
Mengembangkan flow pengiriman uang.
Business Goals
- Meningkatkan jumlah transaksi pengguna baru di aplikasi Flip.
- Meningkatkan kepuasan pengguna.
User Goals
- User lebih mudah dalam menggunkan fitur pengiriman uang.
Dikarenakan saya masih kekurangan data untuk mengetahui adakah user yang merasa kesulitan saat menggunkan fitur pengiriman uang, juga masih kurangnya data untuk mengetahui kesulitan apa yang sebenarnya dihadapi oleh user jika memang ada, sehingga saya mencoba untuk melakukan wawancara kepada 5 pengguna aktif dari aplikasi Flip untuk mendapatkan insight dari mereka, tentang pengalaman mereka selama ini menggunakan aplikasi Flip.
Discover —
Sebelum masuk ke tahap penyusunan solusi, saya ingin mencoba terlebih dahulu untuk memahami problem utama yang dialami oleh user ketika sedang menggunakan fitur kirim uang. Kemudian ekspektasi apa yang mereka harapkan ketika menggunakan fitur tersebut, sehingga kita dapat lebih tepat dalam menyusun suatu solusi untuk mengembangkan fitur kirim uang menjadi lebih baik lagi.
Oleh karena itu, saya mencoba untuk melakukan wawancara terhadap pengguna aplikasi Flip guna mendapatkan insight dari hasil yang didapat. Berikut adalah hasil wawancara yang telah saya olah dan dapatkan.
User Research Interview
User interview dilakukan kepada 5 partisipan dari berbagai usia maupun background pendidikan yang berbeda untuk menggali insight yang saya perlukan untuk proses mendesain suatu solusi.
Berikut adalah beberapa pertanyaan yang saya ajukan:
- Bagaimana pengalaman Anda saat sedang melakukan transfer antar bank menggunakan flip?
- Apa yang anda rasakan dari sisi tampilan/layouting aplikasi?
Profil Narasumber
Jenis Kelamin:
3 Wanita dan 2 Pria
Usia:
20 sampai 30 tahun
Pekerjaan:
Karyawan Swasta
Skala Penggunaan Aplikasi:
1 dari 5 sering
4 dari 5 terkadang
Key Insights
Berikut beberapa tanggapan user dari hasil wawancara yang dilakukan, mengenai apa yang mereka hadapi dan rasakan saat sedang menggunakan fitur pengiriman uang, yaitu:
- Ada kesulitan ketika ingin menyimpan nomor rekening kedalam rekening favorit (daftar rekening) tidak bisa.
- Saat salah memasukan angka yang ditransfer tidak dapat di edit, harus keluar dan mengulang proses dari awal lagi (tidak bisa mundur 1 step).
- Informasi waktu operasi aplikasi tidak terlalu jelas dan kurang informatif.
- Tab input rekening dan daftar rekening sulit dipahami (tidak sadar dengan fungsi nya).
- Dua button dibawah halaman kirim uang membuat bingung.
- Pop up list bank terlihat seperti terpotong, sehingga salah mengira ada error didalam tampilannya.
Problem Statement
Bagaimana cara kita untuk mempermudah user dalam proses pengiriman uang? Berikut beberapa poin yang dapat disimpulkan berdasarkan tanggapan dari user:
- Bagaimana cara agar flow pengiriman uang dapat digunakan dengan lebih mudah?
- Bagaimana cara agar mengurangi kesalahpahaman user terhadap layout/tampilan aplikasi?
Ideation
Dari hasil wawancara kepada beberapa user, saya mendapatkan gambaran tentang apa saja kesulitan yang sebenarnya dialami oleh user ketika menggunakan fitur kirim uang dan apa saja yang dapat dikembangkan dari fitur tersebut agar lebih memudahkan user dalam menggunakannya.
Akan ada 3 hal fokus utama yang akan dilakukan, yaitu :
- Memisahkan fitur transfer Input Rekening Baru dengan Rekening Favorit di awal halaman agar mengurangi kesalahpahaman user.
- Memindahkan flow “simpan dan buat transaksi baru” ke tahap review transfer agar user lebih terfokus untuk menyelesaikan 1 data transaksi terlebih dahulu.
- Enhancement UI.
Existing User Flow
Gambar dibawah merupakan flow kirim uang yang ada pada aplikasi saat ini. Dari flow tersebut akan saya coba kembangkan kembali dengan menambahkan beberapa solusi baru disetiap proses nya.
Proposed User Flow
Pada flow baru ini, saya mencoba untuk memberikan solusi dengan memisahkan flow kirim uang kepada nomor rekening baru dan kepada rekening favorit. Kemudian, saya juga memindahkan opsi tambah transaksi menjadi kehalaman review transfer, agar user dapat fokus menyelesaikan satu data transaksi terlebih dahulu.
Data sudah terkumpul, Userflow sudah dirancang, selanjutnya adalah… Wireframing!
Design —
Setelah kita selesai mengumpulkan banyak informasi, melakukan interview, membuat ide, merancang userflow, maka langkah berikutnya adalah tahapan paling seru bagi UI Designer. Yaitu membuat desain UI, tetapi sebelum kita masuk ke high-fidelity design nya, sebaiknya kita melakukan perancangan awal dahulu, yaitu dengan membuat wireframe seperti dibawah ini.
Wireframe
Wireframe terdiri dari 9 halaman inti, yaitu :
- Halaman landing fitur kirim uang
- Halaman daftar favorit
- Halaman input baru
- Halaman kirim uang
- Halaman review
- Halaman pilih bank pengirim
- Halaman konfirmasi pengiriman
- Halaman proses
- Halaman transaksi berhasil
Pembuatan wireframe menjadi tahap yang menarik, dikarenakan kita dapat memvisualisikan insight yang kita dapat dari user kedalam sebuah tampilan.
Lalu seperti apa tampilan high-fidelity design nya?
High Fidelity
Solutions
- Pada halaman ini saya mencoba untuk menawarkan kepada user dua opsi awal yang dapat dipilih. Yaitu ingin kirim uang melalui Input Baru atau melalui Daftar Favorit.
- Saya juga menambahkan informasi transaksi terbaru dan daftar transaksi yang telah user lakukan.
Solutions
- Pada halaman ini saya lebih bertujuan untuk memberikan lebih banyak whitespace, agar user dapat lebih terfokus terhadap informasi dan tahapan yang ingin difokuskan.
- Saya juga menambahkan button “tambah transaksi” pada halaman review, agar user dapat fokus menambahkan transaksinya satu persatu sebelum melanjutkan ke proses selanjutnya.
Solutions
- Sama seperti beberapa halaman sebelumnya, saya melakukan beberapa perubahan dari sisi layout, design style, card, dan memfokuskan user untuk menyelesaikan proses satu persatu agar user lebih terfokus.
- Pada halaman ini saya juga menambahkan halaman konfirmasi ketika user sudah menekan button “Saya Sudah Transfer” untuk memvalidasi ulang tahapan yang akan diambil oleh user.
Solutions
- Saya juga membuat perubahan pada halaman “Sedang Proses” dengan lebih menunjukan waktu yang diperlukan untuk pengecekan transaksi, sehingga dapat lebih terlihat jelas oleh user.
- Pada halaman ini saya coba menambahkan ilustrasi ketika user telah berhasil melakukan transaksi, agar telihat lebih menarik dan user friendly.
Demikian hasil dari proses desain yang telah saya lakukan, dari proses pertama yaitu defining main problem, melakukan wawancara terhadap pengguna, menyusun user flow, membuat wireframe, sampai dengan mengembangkannya menjadi final mockup.
Mohon maaf apabila masih terdapat kekurangan didalam proses pembuatan solusi, semoga ada manfaat yang dapat diambil dari case study saya ini. See you on the next case study!
Follow my account :
