Studi Kasus — UI/UX Explorasi Fitur Aplikasi Stockbit dan Bibit

Pendahuluan

Hadirnya Stockbit dan bibit memberikan warna baru dunia investasi saham dan reksadana, fungsi dan tampilan yang baik dan lebih menarik, warna yang enak di pandang dan informasi yang terstruktur sehingga mudah dipahami oleh semua orang.

Pada kesempatan kali ini saya akan melakukan eksplorasi dua fitur pada aplikasi Stokbit, yaitu

1. Stream
Fitur Stream ini mempunyai fungsi layaknya media sosial para investor yang dapat membuat status, poling, prediksi dan banyak lagi.

2. Trade
Fitur Trade ini mempunyai fungsi untuk menjual dan membeli saham secara simple.

Dan melakukan redesign tampilan menu order page pada halaman aplikasi mobile bibit .

Proses eksplorasi ini saya di tantang oleh tim Product stockbit untuk menyelesaikan masalah yang dikasih.

Masalah

• Masalah pertama ada pada fitur stream. Dimana fitur tersebut mempunyai masalah letak entry point untuk membuat sebuah postingan baru serta meredesain halaman profile dan memberikan entry point untuk pengguna melakukan direct messages.
• Masalah kedua kedua yaitu membuat sebuah fitur baru atau yang sudah ada untuk ditampilkan pada bottom navbar aplikasi stockbit.
• Masalah ketiga untuk meredesign tampilan order page pada aplikasi bibit karena tampilannya tidak konsisten antara order menggunakan pembayaran virtual account dan order menggunakan transfer manual.

Dari ketiga masalah tersebut, masalah kedua lah yang perlu melakukan analisa ke orang yang sering menggunakan aplikasi stockbit.

Saya menyempatkan diri untuk melakukan interview terhadap beberapa teman, menggali lebih dalam tentang harapan dan pendapat mengenai fitur apa yang diinginkan dalam aplikasi stockbit.

Hasil interview ke beberapa teman saya.

“Aplikasi yang sering digunakan untuk trading saham?”
jawaban mereka antara lain:

• Stockbit, hots, koins, ipot.
• Ipot, stockbit, hots.
• MNC Trade, stockbit, spot, ipot.
• Ipot, ajaib, stockbit.

“Dari aplikasi yang tadi kalian sebutin, aplikasi apa yang menurut kalian mudah dipahamin ketika kalian bertransaksi saham?”
jawaban mereka antara lain:

• hots, ipot
• hots
• Stockbit sama ipot
• tiga-tiga nya bagus

“Ketika kalian bertransaksi saham, fitur yang paling lengkap ada di aplikasi apa, pilih salah satu dari aplikasi tadi yang sebelumnya disebutin sama kasih alesannya?”
jawaban mereka antara lain:

• hots karna ada button max cash untuk beli atau max sell untuk jual, kurang dari 30 detik udh langsung bisa order
• hots karna jual dan beli nya di satu tempat gapindah pindah halaman
• Ipot gampang diliat semua fiturnya karna langsung muncul semua
• Stockbit soalnya lebih sering make itu

“Ada aplikasi lain ga untuk trading selain aplikasi saham trs sebutin satu yang menurut kalian paling simple dan mudah untuk digunain tradingnya, sama alesannya?”
jawaban mereka antara lain:

• Binance, simple soalnya orderbook, open order sama tempat beli jualnya satu tempat gapindah pindah halaman
• Binance, tampilannya jual beli nya bagus, bisa menyesuaikan asset kita ingin beli atau sell , gampang dimengerti untuk orang awam
• Huobi, tampilannya simple gampang di mengerti
• Binance, bagus simple ada indicator frekuensi tiap harganya jadi tau banyaknya orang yang beli atau jual

Perancangan Solusi

Berdasarkan dari masalah yang sebelum nya, saya mencoba untuk menggali solusi apa saja yang dapat diterapkan pada ketiga masalah tersebut

Solusi masalah pertama

Masalah pertama yaitu

• Meredesain halaman profile dan memberikan entry point untuk pengguna agar melakukan direct messages.

Profile pengguna dan direct message

Permasalahan yang terjadi pada aplikasi yang sekarang adalah menu direct message yang ada didalam icon titik tiga bagian kanan atas dan tidak terlihat oleh pengguna lain. Seharusnya untuk lebih aware, direct message tersebut diletakkan pada halaman profile. Karena yang kita tau jika bermain social media seperti facebook, twitter, instagram itu button direct message atau mengirim pesan pasti muncul di halaman profile.

Social media Instagram, Facebook, dan Twitter

• Mencari entry point untuk membuat sebuah postingan baru dengan goals banyak pengguna membuat postingan. Dari masalah tersebut, saya mencoba untuk riset kenapa button icon untuk membuat postingan baru itu ada di pojok kanan atas.

Button icon untuk membuat postingan baru

Sedangkan area pojok kanan atas itu merupakan area yang susah untuk dijangkau dari zona ibu jari.

Zona ibu jari

Dari gambar tersebut lah saya berasumsi kenapa button icon nya tidak berada diarea bawah untuk mempermudah membuat postingan baru.

untuk memvalidasi asumsi tadi, saya mencoba riset lebih jauh ke aplikasi sosial media yang mempunyai fitur membuat postingan seperti twitter, facebook, dan line. Hasilnya adalah aplikasi twitter dan line menggunakan floating button di area kanan bawah untuk membuat postingan baru sedangkan facebook menggunakan section area yang berada di atas.

Dari hasil validasi tersebut saya bisa menyimpulkan untuk membuat sebuah floating button di area kanan bawah dengan warna hijau (warna primary dari aplikasi stockbit) supaya pengguna lebih aware kalau ada button di area tersebut.

Solusi masalah kedua

Masalah kedua yaitu membuat sebuah fitur baru atau yg sudah ada dengan goals fitur yang ada pada bottom navbar bisa mempermudah pengguna.

Berdasarkan hasil interview yang sudah saya tanyakan secara mengerucut terhadap beberapa orang, secara garis besar yang menjadi keinginan pengguna adalah

• Jual beli nya di satu halaman dan mudah dimengerti untuk orang awam
• Semua fitur jual beli ada pada satu halaman
• Transaksi dengan waktu yang singkat

Disini saya bertanya tanya kenapa jawaban para partisipan mengerucut pada fitur transaksi jual dan beli dan ternyata fitur yang paling penting dan yang paling utama adalah fitur tersebut, tanpa adanya fitur jual dan beli, kita sebagai pengguna tidak bisa melakukan sebuah transaksi. Hasilnya saya coba untuk mendalamin fitur transaksi jual dan beli pada aplikasi selain stockbit.

Saya melakukan percobaan untuk merasakan experience terhadap aplikasi yang sudah disebutkan pada interview diatas oleh partisipan.

Berikut percobaan saya menggunakan aplikasi yang sudah

• Hots
  Hasil experience yang telah saya coba di aplikasi ini awalnya sangat membingungkan dari tampilannya yang berbeda dengan stockbit, dan setelah memakai beberapa hari hasilnya saya merasa lebih ringkas dan cepat dari segi flow karna gabutuh pindah pindah halaman untuk membeli dan menjual. Dan ada satu fitur dimana kita bisa melihat frekuensi sehingga memudahkan pengguna untuk mengetahui informasi berapa banyak buyer atau seller dan fitur persentase tiap ticknya jadi saya sebagai pengguna tidak kebingungan untuk mengetahui keuntungannya.

Aplikasi Hots dari mirae asset sekuritas

• IPOT
  Setelah menggunakan aplikasi ini, saya sangat suka dari tampilannnya karna enak dilihat meskipun dari segi experience awalnya bingung karna fitur yang dijabarkan banyak sekali dalam satu halaman, tapi setelah mencoba beberapa lama saya tau alasan kenapa di tampilan menu tersebut banyak sekali fitur fitur yang disediakan karna untuk menunjang aktivitas dari analisa sebuah saham yang ingin kita beli. Sedangkan untuk tampilan beli dan jual nya itu terpisah jadi ketika kita sudah membeli dan ingin langsung menjual, kita harus balik ke tampilan menu kemudian mengklik fast sell atau simple sell. menurut saya sangat tidak efektif dari alur flow nya harus mengulang kembali ke tampilan menu utama.

Aplikasi IPOT dari Indopremier sekuritas

• Ajaib
  Aplikasi ajaib ini hampir sama persis struktur datanya dengan aplikasi stockbit, perbedaannya ada pada order type tampilan buy dan sell nya. fitur disini sangat berguna sekali untuk orang yang gamau ribet untuk masang antrian sell atau buy dan buka aplikasi tiap hari, selain itu ada jumlah persentase lot dengan tujuan untuk mempercepat pengguna ingin membeli atau menjual saham berapa persen dari asset yang dimiliki.

Aplikasi Ajaib

• Binance
  Binance adalah aplikasi yang memperjual belikan asset cryptocurrency. Awal menggunakan aplikasi ini, saya sangat bingung karna banyak sekali fitur yang saya tidak tahu tetapi saya kagum pada tampilannya yang user friendly dan enak untuk digunakan apalagi pada tampilan jual beli nya yang ga ribet harus pindah halaman.

Aplikasi Binance

• Huobi
  Huobi adalah aplikasi yang memperjual belikan asset cryptocurrency. Huobi dengan binance hampir sama tampilan desainnya hanya yang membedakan adalah fitur dan warna nya saja, selebihnya sama dan userfriendly

Aplikasi Huobi

Setelah melakukan percobaan dan analisa terhadap semua aplikasi diatas, tahapan selanjutnya adalah sketsa untuk membuat wireframe kasar sekaligus melakukan idea untuk tampilan baru. Nama menu yang akan ditampilkan pada bottom navbar adalah trade.

Solusi masalah ketiga

Masalah ketiga yaitu meredesign tampilan order page pada aplikasi bibit karena tampilannya tidak konsisten antara order menggunakan pembayaran virtual account dan order menggunakan transfer manual.

Tampilan user interface order detail dengan metode pembayaran transfer manual dan virtual account

Dalam proses redesain ini saya menggunakan teknik Heuristic Usability dan mengumpulkan pain points dari desain yang sudah ada. Setelah melakukan heuristic usability scanning, saya menemukan dua pain points yang perlu diperbaiki, diantaranya adalah

1. Consistency and standard
   Informasi produk yang dibeli tidak konsisten antara tampilan virtual account dengan transfer manual, serta struktur informasi yang diberikan tidak sama antara virtual account dengan transfer manual.
2. Aesthetic and minimalist design
   Desain transfer manual sudah sangat bagus tapi sangat disayangkan desain virtual account berubah drastis dan tidak minimalis jika dilihat.

Setelah menemukan pain points, tahapan selanjutnya adalah sketsa untuk membuat wireframe kasar sekaligus melakukan idea untuk tampilan baru.

Sketsa

Pada tahap ini saya berfokus dan mulai membuat sketsa dasar dari solusi yang sudah dibuat. Untuk sketching saya menggunakan kertas dan pulpen yang saya tuangkan dalam satu kertas terlipat menjadi 8 bagian atau biasa dikenal dengan Crazy’s 8

Sketsa masalah pertama

Sketsa masalah kedua

Sketsa masalah ketiga

Prototype

Sebelum membuat prototype saya mencoba memahami gaya desain dari aplikasi stockbit dan bibit agar desain yang saya buat bisa diterapkan tanpa penyesuaian lebih.

Saya membuat prototype menggunakan Figma, dengan menggunakan Figma saya bisa mempermudah proses kolaborasi antar desainer. Berikut ialah hasil dari prototype yang saya buat.

Prototype masalah pertama

• Redesain halaman profile dan memberikan entry point untuk pengguna agar melakukan direct messages.

Halaman profile setelah di redesain

• Redesain halaman membuat sebuah postingan baru

Prototype membuat postingan baru

Prototype masalah kedua

Fitur trade untuk mempermudah investo melakukan transaksi jual beli.

Prototype masalah ketiga

Redesign tampilan order page pada aplikasi bibit.

Kalian bisa lihat prototype yang sudah saya buat, klik disini

Penutup

Demikian studi kasus yang saya buat ini, semoga bisa bermanfaat pada para pembaca dengan melihat sekilas flow desain UI/UX yang biasanya saya pakai dalam setiap project atau pekerjaan desain saya.

Anas Kurniawan
UI / UX Designer