Membuat Mockup Percakapan WhatsApp dengan Prototyper by Bahasa.ai

Faiz Rabbani
4 min readJul 20, 2022

--

Sebagaimana telah menjadi salah satu aktivitas sehari-hari saya, membuat desain flow dan copywriting untuk chatbot saat ini menjadi sangat mudah dan lebih menarik dengan adanya platform Prototyper by Bahasa.ai.

Melalui platform tersebut, saya bisa membuat desain percakapan WhatsApp yang pada akhirnya bisa saya presentasikan ke tim maupun ke client.

Hanya dengan mengakses prototyper.bahasa.ai, kita bisa langsung menggunakan seluruh fitur yang ada secara GRATIS.

Apa itu Prototyper?

Singkatnya, Prototyper adalah sebuah tools berbasis web yang dikembangkan oleh Bahasa.ai untuk membantu kita membuat mockup atau simulasi percakapan WhatsApp.

Bagaimana cara memulainya?

1. Akses ke platform

Tentu saja yang pertama kita perlu mengakses ke prototyper.bahasa.ai. Sebelum mulai membuat prototype kita sendiri, kita bisa mencoba dan mengotak-atik contoh project yang sudah disediakan. Tujuannya agar dapat mengetahui berbagai fitur maupun fungsi yang tersedia, misalnya mengetahui jenis-jenis message type, header, dan sebagainya.

2. Membuat brand baru

Jika sudah siap untuk membuat prototype kita sendiri, silakan klik tanda [+] di sebelah “Brand” untuk membuat satu workspace baru, lalu masukkan nama brand dan logo — yang mana akan muncul sebagai profil WhatsApp.

Ada dua cara untuk memasukkan logo brand, yang pertama menggunakan fitur upload file dan yang ke-dua menggunakan URL gambar. Namun di sini saya mencoba melalui cara yang ke-dua.

3. Menambahkan flow

Setelah membuat satu workspace baru, langkah berikutnya adalah menambahkan “Flows”. Fitur ini memungkinkan kita memisahkan berbagai section percakapan agar lebih rapi.

Kita bisa membuat banyak flow di sini, misalnya bagian greetings, transaksi, penutupan, dan lain-lain sesuai dengan kebutuhan.

4. Membuat percakapan dalam flow

Untuk membuat dan menambahkan bubble chat, kita bisa klik tombol [+]. Kemudian mulai mengisi body text serta menerapkan berbagai fitur yang ada pada WhatsApp — yang tentunya sudah tersedia di sini.

Di dalam flow ini, kita bisa membuat desain percakapan, serta membuat visualisasi saling balas antara brand dengan pelanggan.

5. Terapkan Fitur Percakapan

Untuk dapat membantu kita membuat simulai percakapan yang 100% aktual, Prototyper by Bahasa.ai juga dilengkapi dengan SEMUA fitur yang ada pada percakapan di WhatsApp.

Di dalam WhatsApp sendiri, terdapat scenario percakapan yang dimulai dari pelanggan yang menyapa terlebih dulu (user-initiated session) dan dari brand yang memulai lebih dulu (business-initiated session). Namun tidak perlu khawatir, karena semua bisa kita setting melalui “Message Type” untuk menentukan siapa pengirim chat-nya.

Pada opsi Message Type, kita bisa menentukan :

  • Customer: chat dari pelanggan.
  • Regular: chat dari bisnis.
  • List Message: chat yang diakhiri dengan tombol call to action yang ketika diklik maka akan pop-up list menu (maksimal 10 menu di dalam list).
  • Reply Buttons: chat yang diakhiri dengan tombol call to action berupa quick reply (maksimal 3 tombol).
  • Single/Multi Product: digunakan untuk mensimulasikan penawaran produk dengan tombol call to action.
  • Message Template: digunakan untuk mensimulasikan pengiriman push message, yang dilengkapi dengan tombol call to action ke website dan telepon dan tombol quick reply.

Pada WhatsApp sendiri, ketika user memilih salah satu opsi tombol yang tersedia, maka tampilannya akan seperti me-reply. Untuk membuatnya, kita bisa mengaktifkan “Context Message”.

Selain itu, ketika kita menerapkan fitur “List Message”, maka tombolnya pun dapat kita klik sehingga akan muncul pop-up sejumlah menu yang sudah kita buat pada flow design.

Sampai sini, sudah cukup terlihat banyak fungsi yang tersedia, ‘kan? Namun sebenarnya tidak berhenti di situ. Masih sangat banyak detail-detail lainnya yang tidak bisa saya tuliskan satu per satu di sini, misalnya fitur untuk mengubah waktu percakapan — default-nya pukul 10.10 di sini.

Untuk itu, saya menyarankan Anda agar langsung meng-explore berbagai fitur yang tersedia pada Prototyper by Bahasa.ai ini, dan membuat prototype atau simulasi percakapan WhatsApp Anda sendiri. Jika Anda ingin berdiskusi lebih lanjut, feel free menyapa saya di LinkedIn.

--

--