UI/UX Study Case: OLX Indonesia (Part 2)

Simak pembahasan sebelumnya di sini

User Flow

Setelah mendapatkan gambaran yang cukup jelas dari data-data sebelumnya, saya mencatat ada tiga flow penting pada aplikasi OLX yang dinilai perlu diperbaiki, yakni:

1. Pencarian Iklan

Berikut adalah flow pencarian iklan pada aplikasi OLX saat ini:

Seperti yang telah dijelaskan pada pain points sebelumnya, user didikte untuk memilih kategori hingga yang paling spesifik. Merepotkan dan tidak ringkas.

Berikut adalah flow pencarian iklan yang saya buat:

Pada flow ini, user diberi keleluasaan untuk memilih sub “lihat semua” untuk masuk pada halaman hasil yang berisikan semua barang dari berbagai sub, atau memilih sub kategori tertentu. Terkait detail merk, tipe, dan lainnya, terletak pada fitur filter yang bisa diakses pada halaman hasil pencarian.

2. Memasang Iklan/Menjual Barang

Berikut adalah flow pemasangan iklan pada aplikasi OLX saat ini:

Catatan untuk flow di atas:

1. Langkah pertama yang user lakukan adalah memilih kategori (detail), bukan memilih gambar. Selain tidak umum jika dibandingkan dengan aplikasi jual-beli lainnya, hal tersebut menimbulkan perasaan tidak nyaman.
2. Pada flow tersebut, pengisian data iklan tidak berada pada satu halaman. Ditambah lagi, tidak ada keterangan progress status pada setiap halamannya. Hal tersebut tentu menjebak user untuk bertanya-tanya, “berapa halaman lagi proses ini akan selesai?”.
3. Saat user menekan tombol “pasang iklan”, sekalipun data iklan terisi dengan asal-asalan, sistem langsung memberitahu bahwa iklan “telah berhasil tayang”. Baru sesaat kemudian muncul notifikasi terkait “iklan gagal ditayangkan” untuk iklan-iklan yang bermasalah. Pada proses inilah user sering merasa tertipu oleh sistem.

Berikut adalah flow pemasangan iklan yang saya buat:

Jika dibandingkan dengan flow sebelumnya, flow ini terlihat jauh lebih ringkas.

1. Diawali dengan memilih gambar sesaat setelah user menekan tombol jual pada navigation bar.
2. Kemudian masuk pada halaman pengisian informasi iklan. Halaman ini memuat data berupa gambar yang telah dipilih, nama dan deskripsi iklan, kategori, harga, dan lokasi. Dengan demikian, user bisa fokus pada satu halaman saja untuk mengisi data.
3. Lanjut ke tahap berikutnya, user dihadapkan pada pilihan dua tombol yakni “simpan draft” dan “pasang iklan” di bagian bawah halaman. Tombol “pasang iklan” berada pada kondisi tidak menyala jika sistem membaca ada data yang belum lengkap terisi.
4. Setelah menekan tombol “pasang iklan”, muncul pop up notifikasi terkait pengecekan data iklan oleh user. Apakah yakin data sudah benar, atau belum dan ingin melakukan revisi sebelum iklan masuk pada tahap validasi oleh sistem.
5. Iklan masuk ke tahap validasi oleh sistem. Pada tahap ini, user telah menyelesaikan tahap pemasangan iklan. Jika lolos, iklan akan ditayangkan.

3. Paket Iklan

Seperti yang dijelaskan dalam pain points di awal, untuk melihat daftar biaya iklan pada fitur “paket iklan”, user diarahkan untuk memilih kategori barang terlebih dahulu.

Berikut adalah flow paket iklan pada aplikasi OLX saat ini:

Awalnya saya pikir, hal tersebut tidak perlu ada kalaupun toh pada akhirnya paket iklan bisa diterapkan untuk semua jenis kategori barang. Namun ternyata, iklan berbayar diterapkan tidak untuk semua jenis kategori, melainkan hanya pada kategori tertentu seperti properti, mobil, dan motor, dengan biaya yang bervariasi untuk masing-masing sub kategrinya. Maka, langkah memilih kategori sebelum melihat halaman daftar harga iklan menjadi barrier yang harus dilalui user. Kelemahan dari flow ini adalah, user dibuat kebingungan karena tidak bisa melihat harga iklan pada kategori lain secara langsung sebagai informasi pembanding. Bisa jadi seperti saya yang mengira bahwa biaya paket iklan untuk semua kategori adalah sama, padahal tidak. Satu-satunya cara untuk tahu adalah user keluar masuk halaman kategori untuk mengecek satu persatu kategori, apakah kategori ini dan itu dikenakan biaya iklan atau tidak. Jempol pasti kriting sodara-sodara…

So, berikut adalah flow paket iklan yang saya buat:

Pada flow ini, setelah user menekan fitur “paket iklan”, user akan langsung masuk pada halaman daftar biaya iklan tanpa perlu memilih kategori terlebih dahulu. Pada halaman iklan yang saya buat nantinya, terdapat keterangan jenis-jenis paket iklan berdasarkan kategori. Hal ini akan jauh lebih efektif bagi user dalam memahami, bahwa terdapat biaya iklan yang berbeda-beda untuk kategori tertentu.

User Interface

Pada bahasan UI di sini, sengaja tidak saya tulis secara detail terkait wireframe, lo-fi, grid, text, warna, ikon, dst. Rencananya akan saya bahas pada tulisan tersendiri yg fokus pada UI dalam studi kasus OLX ini.

Secara keseluruhan, saya mengadopsi nuansa biru pada aplikasi OLX saat ini, mempercantik tampilan dengan pilihan ikon yang lebih hidup, membuat tampilan lebih lega dengan pengaturan jarak yang sesuai, dan menggunakan sudut round pada card dan button agar tampilan tidak terlihat kaku.

On Boarding

Seperti pada umumnya, namun sengaja tidak saya pasang tombol “skip” karena on boarding di atas sudah cukup ringkas yakni tiga halaman dengan highlight informasi yang singkat. User tidak memerlukan waktu lama untuk mencapai halaman “daftar/login”.

Login

Pada halaman OLX versi saat ini, informasi yang ditampilkan terlihat padat dengan hirarki informasi yang tidak begitu jelas. Maka saya memperbaikinya dengan memisah halaman daftar dan halaman login dengan hirarki informasi yang lebih baik.

Homepage

Sesuai bahasan pada bab Information Architecture (IA) sebelumnya, homepage pada aplikasi OLX versi saat ini memuat informasi yang tidak begitu penting dan perlu diringkas antara lain seperti kolom “iklan favorit anda” dan kolom “rekomendasi iklan ketegori tertentu”. Lebih lengkapnya sebagai berikut:

1. Penambahan banner menjadi penting untuk memuat informasi-informasi seperti promo atau event tertentu. Nilai plusnya, halaman beranda menjadi tidak terlalu plain.
2. Posisi search bar saya letakkan menggantung tepat di kaki banner dengan posisi di tengah agak ke atas, agar mudah menangkap fokus user, dan mudah dijangkau oleh jempol user.
3. Jumlah ikon saya ringkas, dan membuatnya tampil lebih besar dan lega agar nyaman dilihat, dan yang terpenting user mudah memahaminya.
4. Pada card iklan, saya menambahkan informasi live count seberapa hangat iklan terpasang, dan informasi mengenai jenis iklan (baru, bekas, atau jasa).
5. Tombol “jual” pada navbar saya buat mencolok namun tidak lebay, agar fokus user tertuju pada tujuan utama aplikasi, yakni menjual barang.

Category

Halaman sub kategori berdiri terpisah dari halaman kategori, menurut saya ini kurang efektif. Ditambah lagi dengan pain points ketika user menekan tombol back, maka yang terjadi adalah user kembali ke halaman home instead of kembali ke halaman kategori. Maka saya mengemasnya seperti gambar di sebelah kanan. Sub kategori akan muncul di bawah kategori saat ikon atau baris kategori ditekan, dan akan kembali seperti semula jika ikon kembali ditekan.

Search And Result

Tampilan halaman pencarian dan hasil pada aplikasi OLX saat ini terlalu plain. Ditambah lagi dengan keberadaan ads yang terlalu mencolok pada tampilan pertama hasil pencarian (above the fold), alangkah lebih baik jika ads diletakkan agak tenggelam ke bawah agar user tidak terdistrak dengan informasi lain atau tidak langsung kecewa karena ekspektasi mereka dipatahkan terlalu dini. Maka pada desain yang saya buat, saya menghidupkan tampilan dengan nuansa biru, menghilangkan peletakan ads dari halaman pertama hasil pencarian, dan menambah fitur lokasi iklan sebagai informasi lokasi sesuai yang ditentukan user pada proses pencarian sebelumnya.

Filter

Halaman filter OLX memuat terlalu banyak informasi yang seharusnya bisa dipisah ke dalam beberapa bagian. Maka saya mem-breakdown fitur filter ke dalam empat bagian yakni “kategori”, “filter” (detail iklan), “urutkan”, dan “grid” (model tampilan) seperti gambar di sebelah kanan.

Detail Iklan

Pada desain di sebelah kanan:

1. Saya menambahkan informasi pada iklan hasil pencarian berupa status iklan yakni live count iklan terpasang, jumlah iklan dilirik, dan jumlah iklan disukai, yang mana pada aplikasi OLX saat ini, informasi ini hanya muncul pada halaman iklan pribadi saja, tidak pada halaman iklan hasil pencarian.
2. Divider (pemisah) saya buat sedikit lebih lebar agar user jelas dalam memahami dan membedakan masing-masing section.
3. Fitur “nego” bukannya tidak ada pada aplikasi OLX versi saat ini, hanya saja keberadaannya tersembunyi di dalam halaman pesan pribadi, di barisan paling kanan tombol auto chat. Saya memindahkannya di halaman utama detail iklan, pada card nama dan harga barang, karena fitur nego seharusnya memang menjadi fitur andalan untuk aplikasi OLX yang notabene identik dengan proses tawar-menawar barang.

Chat — Pop Up Notification

Di sini saya hanya menyederhanakan tampilan, dengan mengurangi ikon, memperbaiki copy, dan membuatnya terlihat jelas sebagai pop up notification.

Chat And Call

Pada halaman pesan pribadi saya menambahkan fitur/informasi berupa keterangan kapan terakhir kali penjual online agar membantu user mengetahui seberapa aktif sang penjual untuk bisa dihubungi. Pada halaman kontak, saya menambahkan fitur kontak instan WhatsApp demi kemudahan user dalam berkomunikasi dan mencapai tujuan jual-beli.

Account

1. Jika diperhatikan, seharusnya informasi pada dua halaman akun OLX di sebelah kiri tersebut bisa disatukan dalam satu halaman agar user fokus dan nyaman dalam mencerna informasi pribadi mereka, dan secara tampilan juga tidak terlihat kosong, menyisakan terlalu banyak white space. Maka pada desain yang saya buat, saya menyatukan informasi-informasi tersebut ke dalam satu halaman dengan informasi tambahan yang umum ada pada halaman akun seperti dompet, paket iklan, pengaturan, bantuan OLX, tentang OLX, dan akses log out.
2. Saya menghilangkan fitur following-follower karena menurut saya kurang relevan mengingat OLX bukanlah platform social media, dan menggantinya dengan fitur informasi berupa status saldo dompet, sisa kuota memasang iklan, dan jumlah paket iklan dibeli. Hal ini saya buat dengan maksud menyesuaikan model bisnis yang ada pada OLX saat ini, di mana memasang iklan tidak lagi gratis. Artinya, akan terjadi lebih sering transaksi pembelian paket iklan oleh user. Maka dengan adanya informasi status dan fitur dompet di halaman akun, masing-masing user akan merasa terbantu memahami informasi transaksi pribadi mereka.

Paket Iklan

Kenapa harus dipersulit?

Seperti yang kita ketahui bahwa OLX memasang tarif iklan hanya untuk kategori mobil, properti, dan motor dengan biaya yang bervariasi untuk masing-masing sub-kategorinya. Dengan model tampilan dan mekanisme pada flow OLX saat ini, user dibuat kewalahan untuk mencerna informasi berbagai macam biaya paket iklan dari ketiga kategori utama tersebut karena tidak terpampang pada satu halaman dan harus menjelajahinya satu persatu meski sebagian besar sub kategori memiliki harga yang sama. Hal tersebut diperparah oleh tampilan yang plain dengan susunan informasi yang memanjang ke bawah tanpa adanya divider yang jelas.

Maka, saya menyederhanakan pilihan kategori iklan berbayar beserta informasi pilihan paket iklannya dalam bentuk slide mode seperti yang terlihat pada gambar di sebelah kanan. Harga iklan yang tertera merupakan harga untuk semua sub-kategori iklan dalam kategori mobil. Hal ini saya buat berdasarkan data bahwa sebagian besar harga iklan pada sub-kategori iklan baik pada kategori mobil, properti, dan motor adalah sama. Sedangkan untuk kategori iklan yang tidak berbayar atau gratis, diwakili oleh kategori “lainnya”, yang di dalamnya terdapat informasi jelas mengenai kategori iklan gratis dan arahan berupa jalan pintas bagi user untuk langsung memasang iklan melalui tombol yang disediakan.

Dengan demikian, interaksi user terhadap informasi yang tersedia akan menjadi lebih ringkas, mudah, dan nyaman.

Closing

Singkat kata memang, dapat dikatakan bahwa re-design total yang dilakukan OLX pada update “The All New OLX” merupakan sebuah kekeliruan (kalau tak mau dikatakan gagal) dalam menjawab tantangan zaman. Seharusnya, OLX mempertimbangkan keberadaan user mereka sebagai acuan dasar dalam bertindak, yakni dengan memahami permasalahan sebenarnya yang dialami user, bukan mendahulukan “keakuan” OLX yang sekedar ingin memberikan “pengalaman baru” yang nyatanya belum dibutuhkan oleh user.

Jika diperhatikan, studi kasus UI/UX di atas cenderung kental membahas User Experience-nya, sedangkan User Interface tidak detail saya bahas melainkan baru sekedar memperlihatkan re-design versi saya dari aplikasi OLX yang ada saat ini. Oleh karena itu, pada tulisan berikutnya akan saya bahas fokus pada UI dari studi kasus aplikasi OLX.

Kritik dan saran sangat dipersilahkan. Terima kasih banyak telah menyimak. Semoga bermanfaat! :)