UX Writing Case Study “Tokopedia” Tooltip
Halo balik lagi sama aku “Dinda”.
Jadi saat ini aku adalah seorang peserta bootcamp UI/UX Design yang diadakan sama Dibimbing.id, saat ini aku lagi di ada step final project.
Nah di step final project ini tiap peserta diwajibkan untuk mengerjakan Case Study.
Ada 2 Case Study untuk final project-nya, yang pertama UX Writing Case Study, dan kedua UX Research & Design Case Study.
Di tulisan kali ini aku akan bahas UX Writing Case Study tentang tooltip fitur baru di Tokopedia.
Role: UI/UX Designer Student
Tools: Google Form
Timeline: 2 hari
Background
- Nama aplikasi: Tokopedia
- Sekilas tentang aplikasi: Layanan jual beli online atau E-commerce, yang aplikasinya sudah rilis sejak tahun 2014.
- Versi terbaru: 3.122
- Terakhir update: 9 April 2021
- Fitur baru: User dapat langsung memilih alamat pengiriman langsung dari halaman home Tokopedia ketika pertama kali buka apps-nya.
Skenario
Hani ingin mencoba mengganti alamat pengiriman yang ada di fitur baru Tokopedia. Tapi kebingungan ketika membaca deskripsi tooltip apa hubungannya belanja asik dan rekomendasi barang terdekat dari alamatnya.
Problem
Hubungan belanja asyik dan rekomendasi barang terdekat dari alamat user.
Goal
Mengetahui user paham atau tidak maksud dari tooltip tersebut yang tujuannya agar user dapat rekomendasi barang disekitar alamatnya.
Task
Memberikan info rekomendasi barang yang ada di lingkungan sekitar user.
Metode Testing
Comprehension Testing
Detail Testing
- Daftar Pertanyaan
Paham atau tidak
1. Menurut kamu teks ini berusaha menyampaikan apa?
2. Kata apa yang paling menarik perhatianmu?
Kata yang membingungkan
1. Kata/kalimat apa yang membuatmu bingung? Atau membuat berhenti sejenak sebelum lanjut membaca?
2. Tolong beri revisi dari kata/kalimat yg membuat kamu bingung
3. Bisa diceritakan alasan kenapa menggunakan kata/kalimat tersebut sebagai revisi di point 2?
Perasaan setelah membaca
1. Apa yang kamu rasakan atau ingin lakukan setelah baca teks diatas?
Preferensi pemilihan opsi
1. Dari 2 teks di kuesioner ini, menurut kamu lebih baik yang mana? Teks 1 atau teks 2? - Bentuk Testing
Google Form
Proposal
- Opsi 1:
Tone: Informatif
Reason per content element:
“Dapatkan rekomendasi produk di sekitar alamatmu biar belanja jadi makin asyik”
Saya ubah kata “Barang” menjadi “Produk” karena Tokopedia tidak hanya menjual barang tetapi ada juga jasa, seperti jasa buat desain undangan, jasa buat custom foto jadi karikatur, dll. Lalu kalimat deskripsinya dipindah posisi jadi “rekomendasi produk” dulu baru setelahnya kata “asyik” untuk menandakan kalo user bakal lebih asik belanja karena tau ada produk apa aja disekitarnya, jadi kan nyari-nyari tuh karena penasaran ada produk apa aja sih memangnya, gitu.
Alasan lain kenapa kalimat desripsi ini diubah karena pada kalimat sebelumnya saya berenti sejenak saat membaca &(dan) di kalimat “Biar pengalaman belanja lebih asyik & dapatkan rekomendasi barang”. Menurut saya pribadi kalimat & tersebut agak mengganggu kecepatan saat membaca.
Saya tambahkan juga kata “Sekarang” karena pada versi sebelumnya user belum bisa mengganti alamat pengiriman langsung dari home screen Tokopedia.
Button 1: “Back” yang dilambangkan dengan panah ke kiri
Untuk tombol tooltip sebelumnya “Balik” dan “Mengerti” agak ambigu, “Balik” ini maksudnya balik ke tips sebelumnya kah? “Balik” ke home screen kah? atau “Balik” yang lainnya?, jadilah dari kata “Balik” tersebut saya ubah menjadi icon “Back” (panah ke kiri) agar lebih memudahkan user untuk tau “oh ini tuh back ke tips yang sebelumnya ya”.
Button 2: “Ok, saya mengerti”
Untuk kata “Mengerti” saya ubah jadi kalimat “Ok, saya mengerti” tujuannya agar ketika user meng-klik “Ok, saya mengerti” artinya user sudah benar-benar mengerti isi dari copy tersebut. Saya juga menghilangkan icon silang di pojok kanan atas karena menurut saya pribadi terlalu banyak opsi untuk menutup tooltip, sedangkan tooltip sendiri dapat ditutup dengan meng-klik kata “Ok, saya mengerti” atau dengan klik di area luar tooltip tersebut saya rasa sudah cukup.
- Opsi 2:
Tone: Friendly
Reason per content element:
“Dengan ganti alamat pengiriman, kamu bisa dapet rekomendasi barang di sekitarmu lho!”
Pada opsi ke-2 ini saya ubah semua kalimatnya, dan tone yang saya gunakan juga tone yang friendly. Tujuannya agar user merasa Tokopedia itu bisa dijadikan teman untuk berbelanja kebutuhannya si user. Kalimatnya juga saya ubah menjadi “Dengan ganti alamat pengiriman, kamu bisa dapet rekomendasi barang disekitar alamatmu, lho!”, dengan kalimat ini user jadi merasa FOMO sama orang-orang yang ada disekitarnya kalo ga tau ada update barang apa aja yang sekarang dijual di lingkungan dia (berdasarkan situs okelifestyle di paragraf kedua artikel).
Di deskripsi opsi ke-2 ini saya kembalikan kata “Produk” di opsi 1 menjadi “Barang” untuk melihat sebenarnya user lebih familiar dengan kata “Barang” atau “Produk”.
Untuk opsi ke-2 saya menggunakan kata “Ganti” di judul dan isi tooltip agar konsistensinya terjaga.
Button 1: “Back” yang dilambangkan dengan panah ke kiri
Untuk button 1 masih sama seperti opsi 1 dilambangkan dengan panah ke arah kiri.
Button 2: “Ok, siap”
Untuk button ke-2 ini saya ubah menjadi “Ok, siap” agar terdengar lebih friendly, tidak kaku seperti button 2 di opsi 1 “Ok, saya mengerti” dimana kata “Saya” berdasarkan situs typoonline di paragraf Aku dengan saya, digunakan untuk situasi resmi, sedangkan kata “Mengerti” saya rasa terlalu baku untuk tone friendly.
Data Responden
- Responden 1:
Nama: Hannan
Umur: 19 tahun
Pekerjaan: Mahasiswa
Tanggal testing: 4/18/2021 18:43:29 - Responden 2:
Nama: Donny
Umur: 24 tahun
Pekerjaan: Guru/Karyawan Swasta
Tanggal testing: 4/18/2021 18:54:44 - Responden 3:
Nama: Gregorio
Umur: 22
Pekerjaan: Karyawan Swasta
Tanggal testing: 4/18/2021 23:51:46
Jawaban Responden
Responden 1:
Opsi 1: Menurut Hannan, pada opsi pertama sebetulnya sudah baik, hanya tadi ke distract sama kalimat “Dapatkan rekomendasi produk dst”, karena yg awalnya menentukan titik penerimaan tiba-tiba ada rekomendasi produk disekitar.
Opsi 2: Sedangkan untuk opsi kedua, Hannan tidak berkomentar apapun karena copy sudah berhasil menyampaikan maksud dari kalimatnya kepada user.
Dari 2 opsi copy yang diberikan ke Hannan, dia lebih memilih opsi 1
Responden 2:
Opsi 1: Menurut Donny, untuk opsi pertama tidak ada komentar apapun karena copy sudah berhasil menyampaikan maksud dari kalimatnya kepada user.
Opsi 2: Sedangkan untuk opsi kedua, Donny merasa bingung pada kalimat “Sekarang bisa disini!”, dan memberi saran untuk diubah kalimatnya menjadi “Sekarang bisa disini~” alasannya, walaupun mengganjal saat dibaca, namun diucap masih biasa.
Dari 2 opsi copy yang diberikan ke Donny, dia lebih memilih opsi 1
Responden 3:
Opsi 1: Menurut Gregorio, pada opsi pertama tujuan dari judul dan deskripsi sedikit berbeda, tapi memiliki maksud yang sama. Dan yang uniknya, setelah membaca teks dia akan tetap melakukan pemilihan barang, lalu memilih alamat pengiriman seperti yang sudah berjalan dari versi aplikasi sebelum fitur ini rilis.
Opsi 2: Sedangkan untuk opsi kedua, Gregorio merasa kata-kata “Dapet”, “Lho”, dan “Siap” sedikit tidak baku, jadi dia menyarankan untuk merubah kata-kata tersebut menjadi “Dapat”, “Loh”, dan “Saya mengerti” sehingga lebih dapat diterima di segala kalangan, tanpa menghilangkan kesan kasual yang diberikan, dan lebih terlihat mengajak/menganjurkan dari teks sebelumnya. Copy ini juga terlihat lebih menunjukan keuntungan yang akan didapat jika melakukan apa yang dianjurkan.
Dari 2 opsi copy yang diberikan ke Gregorio, dia lebih memilih opsi 2
Insight
Dari hasil testing kepada 3 responden, didapatkan insight bahwa semua responden paham maksud dari 2 opsi copy yang diberikan, maksudnya untuk mempermudah user memilih alamat pengiriman dan mendapatkan benefit jadi mengetahui barang apa saja yang dijual di lingkungan sekitar user berada.
Jadi jika disimpulkan berdasarkan hasil pengamatan jawaban comprehension test, responden memilih copy pada opsi 2 karena menunjukkan keuntungan apa yang didapat user dari mengganti alamat pengirimannya dan juga copy lebih mudah dipahami, tetapi copy tersebut masih harus direvisi.
Copy Revisi
Dalam copy revisi ini saya menggunakan copy opsi 2 dengan revisi pada kata “dapet” menjadi “dapat”, “lho” menjadi “loh”, dan kata “siap” menjadi kalimat “saya mengerti”.
Data Hasil Testing
Ada sedikit tambahan pada jawaban Hannan, dikarenakan pada waktu dia submit kuesioner belum ada pertanyaan “Dari 2 teks di kuesioner ini, menurut kamu lebih baik yang mana? Teks 1 atau teks 2?”. Jadi saya menanyakan langsung melalui Whatsapp, dimana jawabannya berupa screenshot yang saya masukkan ke dalam lembar respon.
Conclusion
Dari hasil testing kepada 3 orang user dengan menunjukkan 2 buah copy yang berbeda, didapatkan insight bahwa user paham maksud yang dijabarkan pada point problem adalah untuk memberikan info rekomendasi barang yang ada di lingkungan sekitar user.
Terima Kasih telah membaca Case Study-ku.
Case study ini masih perlu banyak improvement, karena ini pertama kalinya aku membuat UX Writing Case Study.
Jadi aku seneng banget kalo ada yang mau nambahin pendapat masih ada kekurangan dimana aja aku supaya kedepannya lebih baik lagi :)
