Salman Al Farisi

UX Designer

UI Designer

Product Designer

Salman Al Farisi

UX Designer

UI Designer

Product Designer

Blog Post

Gocard: Studi Kasus Layanan Virtual Card di Aplikasi Gojek

March 9, 2021 Uncategorized
Gocard: Studi Kasus Layanan Virtual Card di Aplikasi Gojek

Overview

Context

GoCard dimulai saat kami tim 5 student Purwadhika Digital Technology School UI/UX Design batch 5 mendapat fintech sebagai tema final project.

Studi kasus ini dibantu rekan 1 tim saya yaitu Marcelini Tirta Agung, Arya Putra Dewangga dan Rishad Affadel saat proses research (interview dan survey).

Berawal dari pengalaman pribadi dan juga teman 1 tim yaitu “kesusahan dan kekhawatiran” saat melakukan transaksi internasional seperti berlangganan streaming film, pembayaran situs luar negeri, pembelian aset digital dan lain-lain.

Kesusahan ini datang ketika kami hanya menemukan field checkout untuk credit card saja yang sepertinya umum dipakai di situs luar negeri, selain itu kami juga dilema kekhawatiran saat menggunakan kartu bank sebagai alat pembayaran karena tak jarang kita temui kasus kejahatan siber dan juga pengalaman autorenew yang sering saya alami.

Problem

Setelah melakukan brainstroaming dengan beberapa rekan yang sering transaksi luar negri dan juga pengguna kartu credit dan debit, kami coba memperdalam masalah ini dengan menggunakan 3 metode yaitu survey, interview dan comparative analysis dimana mereka adalah  pengguna aktif kartu debit atau kredit berlogo master card dan visa, berpengalaman transaksi internasional dan berumur 17-35 tahun. Setelah proses epathize selesai ternyata hypothesis kami di amini beberapa user, selain itu kami juga mendapat beberapa insight lain seperti proses memasukan data kartu yang ribet, tidak semua kartu bisa digunakan transaksi internasional, fluktuasi uang yang sering berubah dsb.

Challenge

Setelah memvalidasi hypothesis dan menyelesaikan proses emphatize, kami menentukan tantangan pada studi kasus ini adalah mempermudah seseorang saat melakukan transaksi internasional yang biasanya hanya ada pembayaran credit card dan transaksi di dalam negri yang menggunakan metode pembayaran kartu berlogo visa dan mastercard dengan mudah, aman fleksibel.

Solution

Dari pemetaan masalah dan solusi yang telah di gali, kami memutuskan untuk menggunakan aplikasi Gojek sebagai penyedia layanan pembayaran internasional daripada membuat aplikasi baru, hal ini kami putuskan karena Gopay merupakan dompet digital terbesar di Indonesia dan telah memiliki banyak partner sehingga layanan ini akan lebih maksimal. Selain itu dengan adanya layanan ini kami juga berpikir dapat memberikan impact ke Gopay berupa meningkatkan daily/monthly active user dan meningkatkan transaction value karena user Gopay bisa transaksi di semua merchant yang mendukung pembayaran dengan kartu debit/kredit berologo visa atau mastrecard.

Product

Layanan yang kami kembangkan berupa virtual card seperti  layanan yang di sediakan beberapa bank seperti Jenius e-Card dan BNI Virtual Card Number. Pada dasarnya virtual card sendiri terbagi menjadi 2 yaitu virtua credit card (VCC) dan virtual card number (VCN), perbedaan dari kedua produk ini adalah VCC dapat diisi ulang dan memiliki masa aktif yang panjang, sebaliknya VCN tidak bisa diisi ulang dan masa aktifnya hanya 24-48 jam sejak di issued, dari sini sudah bisa dilihat bahwa VCC lebih unggul dari VCN dan dari sini kami pun memtuskan VCC sebagi virtual card yang akan dikembangkan.

Jika kamu ingin membaca studi kasus ini dengan singkat, kamu bisa melihat slide presentasi dibawah sini 👇

Please wait while flipbook is loading. For more related info, FAQs and issues please refer to DearFlip WordPress Flipbook Plugin Help documentation.

Design Thinking

Dalam prosesnya, GoCard dimulai dengan metode design thinking yang sangat popoler digunakan mengembangkan atau merancang sebuah produk melalui pemahaman masalah dan kebutuhan pengguna sehingga dapat menemukan strategi dan solusi yang tepat.

Emphatize

Untuk menggali insight dan memvalidasi hypothesis yang telah dipikirkan setelah melakukan brainstorming, kami melakukan proses research yang terdiri dari 3 metode yaitu survey, interview, dan comparative analysis. Adapun kriteria partisipannya adalah:

  1. berumur 17-35 tahun, karena menurut survey seseorang dengan rentang umur ini mendominasi e-Commerce, tetapi karena project ini adalah untuk seseorang yang aktif belanja online dan pengguna kartu debit/kredit kami batasi minimal 17 tahun dimana diumur 17 tahun sudah diperbolehkan memembuat akun bank.
  2. Pengguna aktif kartu debit/kredit yang berlogo Visa dan Mastercard
  3. Berpengalaman transaksi internasional baik pembelian barang fisik atau digital, berlangganan atau pembayaran lainnya.

Interview ~ Setelah menentukan target partisipan, kita membuat question list untuk interview yang terbagi menjadi 4 bagian, dimana setiap bagian terdapat sub questions 4-7 pertanyaan:

  1. Q1
    Pertanyaan: Bisa tolong ceritain apa motivasi belanja atau transaksi internasional?
    Tujuan: Mengetahui pengalaman user saat berbelanja internasional
  2. Q2
    Pertanyaan: Ceritain dong pengalaman kamu belanja pake kartu debit/kredit!
    Tujuan: Mengetahui pengalaman user saat menggunakan kartu debit/kredit baik dari pendaftaran  hingga proses checkout.
  3. Q3
    Pertanyaan: Selama kamu pakai Gopay, apa hal yang kamu suka dan kurang suka?
    Tujuan: Mengetahui produk Gopay lebih dalam yang akan menjadi penyedia layanan GoCard
  4. Q4
    Pertanyaan: Aplikasi atau perusahaan apa yang kamu gunain untuk kartu debit/kredit?
    Tujuan: Mengetahui dan memahami produk kompetitor dalam mengembangkan produknya.

Karena ini adalah proses interview perdana dalam hidup saya, ada beberapa masalah kecil seperti gugup, canggung dsb. tetapi hal itu tidak membuat proses ini bermasalah, justru setelah interview selesai, hasilnya melebihi ekspektasi. Saya mendapat banyak insight dari partisipan yang tidak pernah terpikir sebelumnya, dari sini saya sadar bahwa setiap orang memiliki karakter, sudut pandang dan pengalaman yang berbeda, dimana perbedaan itu membuat saya lebih memahami problem yang akan di selesaikan. Tak lupa saya merekam sesi interview baik via face to face, Zoom atau telfon untuk meninjau kembali dan memastikan tidak ada insight yang terlewat dari partisipan.

Survey ~ Dalam proses research via survey via Google Form kami mendapatkan data berupa diagram, berikut beberapa hasilnya:

Comparative Analysis ~ Metode terakhir yaitu comparative analysis. Saya mengambil 3 sample dari 7 layanan yang menyediakan virtual card, tujuan daripada proses ini adalah membandingkan dan mempertimbangkan kemungkinan-kemungkinan beberapa fitur yang akan dikembangkan.

Define

Proses reasearch telah selesai, sekarang saya memetakan insight – insight yang di ambil dari data 60 orang survey, 12 orang interview dan 3 comparative analysis untuk mengetahui apa sebenarnya masalah yang dialami user.

Affinity Mapping ~ Untuk membuat data lebih clear saya menyusun insight terbaik yang di dapat sesuai dengan tema masalah dengan melakukan affinity mapping, singkatnya insight-insight “mentah” yang telah saya filter di kelompokan sesuai dengan masalah yang sama.

Solutions ~ Setelah proses affinity mapping selesai, saya mencoba menawarkan beberapa solusi dan menyusunnya bedasarkan High Impact, Low Impact dan High Effort, low Effort.

Persona

Ideate

Di fase ini saya mencoba menggali kemungkinan-kemungkinan yang bisa menjawab kebutuhan dan kendala pengguna yang sebelumnya telah ditentukan pada fase define.

Prioritizing Solutions ~ Setelah proses menentukan solusi selesai, saya mencoba memfilter kembali beberapa solusi tersebut untuk dijadikan final solutions dan selanjutnya di implementasikan ke desain prototype.

Dari proses diatas saya berhasil mendapat final solutions bedasarkan main problem user yaitu:

Input data kartu
Problem: Masalah ini paling banyak di keluhkan oleh partisipan, menurut mereka memasukan data kartu ke field pembayaran memerlukan effort lebih.
Solution: Membuat fitur tap for copy pada nomor kartu, sehingga user tinggal paste data ke field pembayaran

Registrasi dan verifikasi
Problem: Walaupun hampir semua bank sudah bisa daftar via online, ada beberapa user yang masih mengeluhkan hal tersebut, seperti perlu data ini itu, masalah teknis, verifikasi dsb.
Solution: Pendaftaran GoCard tidak perlu mengisi data lagi, hanya perlu menyetujui S.K dan otomatis layanan dapat dipakai karena proses verifikasi menggunakan data GoPay Plus.

Keamanan
Problem: Penggunaan data kartu pribadi terkadang menjadi ancaman tersendiri bagi user, berbagai macam modus kejahatan siber kerap menjadi kekhawatiran.
Solution: Untuk mengatasi masalah kemanan kami menawarkan 2  fitur yaitu:

  1. Fitur blokir kartu: Dalam fitur ini user dapat menonaktifkan kartu jika tidak digunakan dan dapat di aktifkan kembali jika akan digunakan.
  2. Verifikasi PIN: Saat user akan melihat atau menggunakan data kartu, mereka harus memasukan PIN terlebih dahulu, hal ini untuk menghindari orang lain menggunakan data kartu user.

Autorenew
Problem: Saat user berlangganan berbagai layanan, seringkali default pembayaran dari merchant akan otomatis memperbarui di bulan berikutnya.
Solution: Ada 2 solusi untuk  masalah ini yaitu:

  1. User dapat refund saldo GoCard ke saldo GoPay sehingga tidak ada saldo yang tiba-tiba terpotong karena Autorenew
  2. Filter history ditambahkan kategori berlangganan sehingga user dapat melihat status berlangganannya.

Transaksi Cepat
Problem: Beberapa partisipan banyak yang gak suka hal ribet dan ingin semuanya cepat dalam transaksi.
Solution: Fitur autodebit dapat membantu mereka yang gak suka ribet, user tidak perlu topup saldo Gocard dulu saat akan transaksi, cukup mengaktifkan fitur autodebit maka mereka bisa langsung transaksi dan tagihannya langsung di ambil dari saldo Gopay. Untuk mengaktifkan fitur ini user perlu konfirmasi dahulu dengan PIN karena fitur ini dapat menjadi problem sebelumnya yaitu Autorenew. User juga dapat menonaktifkan fitur ini jika dirasa tidak perlu.

Khilaf Transaksi
Problem: Saat user berbelanja terkadang mereka tidak bisa mengontrol belanjaannya sehingga tagihan melebihi target di awal. Selain itu fluktuasi mata uang juga menjadi problem karena tidak dapat di prediksi misalnya belanjaan di bulan lalu dan hari ini akan berbeda nominalnya di barang/item yang sama.
Solusi: Menambahkan fitur set limit untuk membatasi maksimal transaksi menggunakan Gocard.

User Flow

Protoype

Design System ~ Dalam proses mendesain produk ini, saya menggunakan design system Gojek Asphalt untuk mempertahankan konsistensi. (Design system GoCard v 2.0)

Wireframe

High Fidelity

Gak perlu pindah-pindah page, semuanya cukup di homepage.

  1. TopUp: Tambahkan saldo Gocard menggunakan saldo Gopay atau Paylater
  2. Refund: Kembalikan saldo Gocard ke saldo Gopay
  3. Kartu: Geser ke kiri untuk melihat data kartu berupa nomor kartu, valid thru dan kode CVV. Tahan nomor kartu untuk mengcopy data
  4. Set limit: Atur jumlah maksimal transaksi dengan input manual atau menggunakan slider control
  5. Autodebit: Belanja tanpa ribet, langsung bisa transaksi dengan saldo Gopay
  6. Blokir kartu: Khawatir kartu di bajak? Don’t worry, aktifkan fitur ini maka kartu kamu gak bakal bisa dipakai kecuali menon aktifkannya lagi.
  7. History: Lacak riwayat transaksi terkini, gunakan filter sesuai kategori yaitu Cash in, Cash out, Refund, Gagal. Kamu juga bisa lihat detail transaksi berupa jumlah dalam USD dan kurs saat belanja.

Test

Tahap akhir dalam proses design thinking adalah test dimana saya meminta feedback kepada user untuk mengetahui apakah ide yang dirancang mampu menyelesaikan masalahnya atau tidak. Selain itu feedback dari desain juga membantu saya mengetahui apakah desain yang telah saya buat di pahami user atau tidak, yang terakhir berharap mendapatkan insight lain berupa ide, kritik dan saran untuk mengimprove produk ini selanjutnya.

Proses test saya menggunakan 2 metode yaitu moderated via zoom dan unmoderated via Maze. Adapun kriteria untuk partisipan adalah:

  1. Berumur 18-35 tahun
  2. Pengguna aktif Gopay

Saya memperlebar kriteria partisipan usability testing daripada interview karena saya berharap user yang belum pernah transaksi dengan kartu dapat memahami produk ini.

Score

Usability testing pertama via Maze ternyata terdapat masalah teknis di beberapa task, yaitu di task ke 4 dan 5 karena hanya 1 user yang bisa melewati task ini sehingga success rate sangat rendah. Di testing selanjutnya saya akan mencoba menekankan task yang fail ini.

Setelah melakukan usability testing via Maze, saya akan mencoba deep digging beberapa insight dari testing sebelumnya terutama di task yang fail karena masalah teknis dengan melakukan testing via Zoom.

Feedback

Unmoderated ~ Di proses usability testing pertama via maze yang di ikiuti 20 orang, saya menemukan beberapa issue yaitu:

  1. user tidak memahami bahwa desain kartu bisa di geser untuk melihat data kartu
  2. User tidak memahami menggunakan filter kartu, disini saya berasumsi bahwa kesulitan user adalah di copy writing Cash In dan Cash Out, untuk memvalidasi hyphotesis, saya akan coba tanyakan lagi di usability testing berikutnya via Zoom.

Moderated ~ Dari testing moderated saya lebih menemukan banyak insight yaitu:

  1. User tidak mengerti bahwa untuk melihat detail kartu harus di geser ke kiri
  2. User tidak memahami fungsi autodebit
  3. User tidak memahami copy writing Cash In dan Cash Out
  4. User tidak memahami copy writing blokir kartu, mereka mengira kalau menggunakan fitur ini kartu tidak bisa dipakai selamanya
  5. User mencoba mencari promo di homepage
  6. User ingin mengetahui fluktuasi terkini (realtime exchange rates)

Mentor Feedback ~ Saya sangat bersyukur di proses pembelajaran UI/UX pertama kalinya saya didampingin mentor yang sangat hebat, beliau memberikan feedback yang sangat penting dalam proses pembelajaran ini. Ada 3 feedback utama dari testing ini yaitu:

  1. Perhatikan detail desain, baik itu grid, font, spacing dsb. Karena desain yang baik adalah desain yang memperhatikan detail.
  2. Jika ingin menggunakan aplikasi yang sudah besar sebagai pembelajaran, perhatikan design systemnya, jangan sampai ada element yang tidak sama, baik itu icon, card, font dsb. karena konsistensi desain itu sangat penting.
  3. Saat mengguanakan design system untuk studi kasus perhatikan fungsinya, jangan asal pakai atau bahkan memaksakan karena setiap komponen terkadang memiliki fungsi yang berbeda bedasarkan kebutuhan user.

Tentunya masih banyak lagi feedback dari mentor mulai dari proses emphaty hingga testing pada studi kasus ini.

Iteration

Setelah mendapat feedback di proses usability testing, saya baru sadar mempertahankan desain karena ekstetika bukan jalan seorang UI/UX designer 😅. Saya memutuskan untuk medesain ulang project ini sesuai dengan feedback yang telah diberikan user terutama dari mentor.

Iterasi desain Homepage GoCard:

  1. Mendesain ulang homepage sesuai dengan design system Gojek terbaru.
  2. Mengubah flow tampilkan data dengan menghilangkan bottom “tampilkan data” dan mengganti dengan  PIN sebelum masuk GoCard.
  3. Menambahkan fitur finger print untuk menjadi opsi lain PIN.
  4. Menambahkan card fluktuasi terkini (real time exchange rates)
  5. Menambahkan banner  fitur GoCard  untuk mengedukasi user terhadap produk ini.
  6. Mengubah copy writing “blokir kartu” ke “Nonaktifkan kartu”
  7. Mengubah Cash In dan Cash Out dan menggabungkannya menjadi “Mutasi saldo”
  8. Menambahkan banner promo

Iterasi desan Homepage Gojek:

  1. Menambahkan banner promo di homepage Gojek
  2. Menampilkan saldo Gocard di Homepage Gojek dengan men drag card saldo Gopay atau Paylater
  3. Mengganti eksplor Gopay dengan interface terbaru

Finale

Lihat atau download final prototype disini atau cek test disini

What can i Learn?

  • Proses research membantu kita berpikiran terbuka karena wajib bagi kita mendengarkan, mempelajari dan memahami user yang berbeda-beda sudut pandang, karakter dan background
  • Egois adalah sifat yang Wajib di hindari, karena produk yang kita buat harus sesuai dengan banyak orang bukan untuk diri sendiri.
  • UI yang bagus bukan UI yang sedang trend atau hits, namun UI yang bisa menyelesaikan masalah user.
  • Desain yang bagus adalah desain yang memperhatikan detail sekecil apapun.
  • Membuat desain layanan baru di aplikasi yang sudah besar justru lebih sulit, karena harus sesuai dan memahami design system
  • Sebelum lanjut tahapan usability testing atau interview ke partisipan, coba test dulu ke teman atau keluarga terdekat, karena jangan sampai waktu partisipan yang berharga terbuang dengan masalah teknis, pertanyaan  atau hal negatif lainnya.
  • Curilah ide dari kami. Gabungkan dengan ciri khasmu, maka kamu akan temukan dirimu sendiri. Begitulah prosesnya. Kelak akan ada yang mencuri ide darimu.

What Is Next?

  • Melakukan usability testing di UI GoCard V.2.0
  • Melengkapi dokumentasi project ini yang kurang (sketch, storyboard dan user journey map)
  • Mengedit beberapa kesalahan dan menambahkan kekurangan di study case ini.

Special Thanks to

  1. Lecturer Purwadhika: Firas Arafi dan Faris Rakha
  2. Mentor Purwadhika: Kelvino Widagdo
  3. Rekan tim: Marcellini Tirta Agung, Arya Putra Dewangga dan Rishad Affadel

Terimakasih yang telah membaca study case pertama saya, tentunya project ini jauh dari kata sempurna. Jika ada kritik dan saran tolong tinggalkan di komentar.

Taggs:
Write a comment