From Confusing to Clean: Redesigning Shopee Live for Better User Experience

A UI/UX Redesign for Better Efficiency and Experience

Tentang Kami

Kelompok 6 Bisnis Kreatif 2023 — A

Kami merupakan Kelompok 4 dari mahasiswa Program Studi Bisnis Kreatif semester 6 Universitas Indonesia yang sedang mengerjakan proyek akhir pada mata kuliah Human-Computer Interaction (HCI). Proyek ini berangkat dari pengalaman nyata yang kami rasakan sendiri saat menggunakan fitur Shopee Live.

Proyek ini bermula dari keresahan yang cukup personal. Dalam beberapa kesempatan, salah satu anggota kelompok kami merasa kesulitan saat berinteraksi di Shopee Live. Alih-alih menikmati jalannya siaran, dia justru harus berusaha memahami letak fitur, menavigasi antarmuka yang kurang intuitif, hingga akhirnya memilih keluar tanpa melakukan apa pun.

Berangkat dari pengalaman tersebut, kelompok kami memutuskan untuk mengangkatnya menjadi sebuah studi desain yang lebih serius, bukan sekadar keluhan pengguna, melainkan sebuah proyek yang dapat memberikan solusi nyata, memperkuat portofolio, serta menawarkan perspektif baru terhadap peningkatan pengalaman pengguna.

Shopee Live — Konsepnya Keren, Eksekusinya Perlu Perhatian

Shopee Live adalah fitur live commerce di dalam aplikasi Shopee. Penjual bisa menyiarkan diri secara langsung sambil menjual produk kepada penonton secara real-time. Penonton bahkan dapat bertanya, memesan, atau bahkan mendapatkan harga spesial yang hanya tersedia selama siaran.

Kedengarannya seru, kan? Memang seru, secara konsep. Masalahnya, antara konsep yang keren dan eksekusi yang mulus, ada gap yang cukup lebar. Banyak pengguna masuk ke Shopee Live karena penasaran, tapi keluar karena bingung🤔. Dan dalam dunia e-commerce yang penuh persaingan, kebingungan pengguna itu mahal harganya.

(Semua di dunia ini bingung, nanti nggak bingung kalo udah di surga — Aldi Taher)

Tiga Pola Masalah yang Terus Berulang

Kami mulai dari pengalaman sendiri, diperkuat dengan hasil FGD (Focus Group Discussion). Dari sana, tiga pola utama terus muncul:

1. Masuk ke Live tanpa disengaja — Banyak pengguna secara tidak sadar menekan fitur live dan tiba-tiba masuk ke dalam siaran. Sayangnya, tidak ada transisi yang jelas atau konfirmasi sebelumnya, sehingga pengguna merasa “terjebak” dan kebingungan mencari cara untuk keluar.
2. Tampilan yang terlalu padat — Antarmuka dipenuhi berbagai elemen yang muncul bersamaan, mulai dari informasi produk, harga, komentar, tombol pembelian, hingga identitas penjual. Semua ditampilkan sekaligus tanpa hierarki yang jelas, sehingga terasa saling bersaing dalam menarik perhatian.
3. Akses katalog yang kurang intuitif— Menemukan dan membuka katalog produk bukanlah proses yang sederhana. Pengguna harus keluar dari alur menonton dan melakukan beberapa langkah tambahan yang terasa tidak praktis.
4. Fitur kategori pesan sulit ditemukan — Meskipun fitur kategori pesan tersedia, keberadaannya tidak terlihat secara jelas. Pengguna harus “mencari-cari” terlebih dahulu, seolah sedang memecahkan teka-teki untuk bisa mengaksesnya.

Sejenak Mendengar Suara Pengguna

Kami memang tidak memiliki akses terhadap data kuantitatif internal Shopee. Namun, kami mengumpulkan insight dari berbagai sumber yang relevan, mulai dari pengalaman pribadi, observasi hasil FGD, ulasan pengguna di platform seperti Google Play Store dan App Store, hingga diskusi di berbagai forum online. Dari sana, muncul sejumlah pernyataan yang cukup merepresentasikan pengalaman pengguna:

“Awalnya saya kira hanya menonton video biasa, ternyata sudah masuk ke live. Tapi setelah itu, saya tidak tahu cara kembali ke halaman produk.” — Pengguna, 20 tahun, mahasiswi

“Saya ingin bertanya soal warna produk, tapi bingung harus mengetik di mana. Akhirnya jadi malas dan memilih keluar.” — Pengguna, 21 tahun, mahasiswi

“Katalognya sebenarnya ada, tapi saya tidak tahu cara membukanya. Saya kira harus terus scroll ke bawah.” — Pengguna, 20 tahun, mahasiswa

Menariknya, keluhan-keluhan ini tidak berkaitan dengan harga maupun kualitas produk. Permasalahan yang muncul justru berakar pada desain itu sendiri, bagaimana sebuah desain, yang seharusnya membantu, justru membuat pengguna merasa kebingungan. Dalam konteks ini, bukan pengguna yang kesulitan memahami sistem, melainkan sistem yang belum sepenuhnya dirancang untuk memahami penggunanya.

Dari Problem Statement ke Pertanyaan “How Might We”

Setelah merumuskan problem statement, langkah berikutnya adalah menerjemahkannya ke dalam bentuk pertanyaan How Might We (HMW). Pendekatan ini membantu membuka ruang eksplorasi solusi, sekaligus menjadi jembatan yang menghubungkan masalah dengan proses ideasi.

Beberapa pertanyaan kunci yang kemudian muncul adalah:

1. Bagaimana kita dapat membuat proses masuk ke Shopee Live terasa lebih disengaja dan memberikan kontrol yang lebih jelas bagi pengguna?
2. Bagaimana kita dapat menyederhanakan tampilan live tanpa menghilangkan informasi yang esensial?
3. Bagaimana kita dapat menghadirkan katalog produk sebagai bagian yang menyatu secara alami dengan pengalaman menonton?
4. Bagaimana kita dapat membuat fitur pengiriman pesan berkategori menjadi lebih intuitif dan mudah diakses?

Melalui pertanyaan-pertanyaan ini, fokus tidak lagi hanya pada masalah, tetapi mulai bergeser ke kemungkinan solusi yang lebih berorientasi pada kebutuhan pengguna.

Dua Flow Utama yang Jadi Fokus

Flow I— Membuka Katalog dari Shopee Live (with guideline)

Kami memutuskan untuk fokus pada dua user flow yang paling bermasalah dan paling sering dilakukan pengguna:

Flow I — Membuka Katalog dari Shopee Live 5 Layar

Layar 1: Masuk dari Laman Produk — Ada konfirmasi lebih jelas saat pengguna menekan tombol live. Mengatasi masalah “masuk karena kepencet”.

Layar 2: Tampilan Live — standar dengan titik masuk katalog yang lebih mudah ditemukan.

*Layar 3: Clean Mode (Zoom In)* — Pengguna bisa mengaktifkan mode bersih yang menyembunyikan elemen UI tidak esensial. Layar lebih fokus, pengalaman menonton lebih nyaman.

Layar 4: Menonaktifkan Clean Mode — Kembali ke tampilan normal kapan saja. Kontrol ada di tangan pengguna.

Layar 5: Katalog dalam Panel — Satu tap membuka katalog sebagai panel yang bisa di scroll tanpa menutup siaran. Nonton dan belanja sekaligus.

Flow II — Mengirim Pesan Live dengan Kategori 5 Layar

Flow II— Mengirim pesan live dengan kategori 5 layar

Layar 1: Laman Shopee Live — Titik awal, pengguna sedang menonton siaran.

Layar 2: Membuka Katalog — Akses katalog terlebih dahulu untuk menemukan produk yang ingin ditanyakan.

Layar 3: Pilihan Kategori Pesan — Setelah tap tombol tanya, pengguna disambut 8 kategori: Spill, Lokasi, Warna, Ukuran, Try On, Stock, Diskon, Asli?

Layar 4: Mengetik Pesan — Keyboard muncul setelah memilih kategori. Pertanyaan jadi lebih terarah dan mudah dijawab penjual.

Layar 5: Pesan Terkirim — Pesan muncul di komentar lengkap dengan label kategori. Penjual bisa memprioritaskan jenis pertanyaan.

Tiga Perubahan yang Paling Berdampak

1. Clean Mode — Kontrol Visual di Tangan Pengguna: Bukan menghapus informasi, tapi memberikan pilihan kapan informasi itu ditampilkan. Sederhana, tapi memberi kebebasan nyata kepada pengguna.
2. Katalog dalam Panel — Tanpa Keluar dari Siaran: Menghilangkan kebutuhan pengguna memilih antara “nonton” atau “belanja”. Kini keduanya bisa dilakukan bersamaan dalam satu layar.
3. Kategori Pesan — Fitur Bagus yang Akhirnya Ditemukan: Fitur ini sudah ada tapi tersembunyi. Dengan alur yang lebih jelas, fitur yang sudah baik ini akhirnya bisa dimanfaatkan dengan optimal.

Usability Testing — Apa Kata Pengguna?

Kami melakukan sesi testing sederhana bersama lima pengguna Shopee aktif dengan profil berbeda dari orang terdekat kami: mahasiswa, ibu rumah tangga, dan karyawan kantoran.

“Clean Mode-nya bagus banget! Saya sering ngerasa layarnya rame tapi nggak tau gimana nguranginnya.”

— Responden A, 23 tahun

“Katalognya langsung muncul tanpa keluar dari Live? Ini yang saya cari dari dulu.”

— Responden B, 34 tahun

“Kategori pesannya membantu, tapi ikonnya perlu lebih besar supaya lebih gampang di-tap.”

— Responden C, 28 tahun

“Transisi masuk ke Live sudah lebih jelas. Sebelumnya saya selalu panik kalau masuk nggak sengaja.”

— Responden D, 45 tahun

Feedback campuran ini menunjukkan arah desain sudah benar, tapi masih ada ruang penyempurnaan, terutama di ukuran tap target dan keterbacaan ikon.

Apa yang Kami Pelajari dari Proyek Ini

Proyek ini mengajarkan kami beberapa hal yang tidak akan kami dapatkan hanya dari menonton tutorial:

1. Masalah desain yang paling mengganggu sering bukan yang paling dramatis. Bukan bug, bukan crash, tapi ketidakjelasan kecil yang menumpuk dan membuat pengguna lelah.
2. Solusi terbaik bukan selalu menambahkan fitur baru. Kadang yang dibutuhkan adalah membuat fitur yang sudah ada lebih mudah ditemukan.
3. Usability testing dengan lima orang sudah cukup untuk menemukan pola masalah utama. Tidak perlu menunggu riset skala besar untuk mulai memvalidasi ide.
4. Keterbatasan proyek ini berbasis observasi kualitatif tanpa akses data nyata Shopee. Implementasi nyata memerlukan iterasi jauh lebih dalam dan pertimbangan teknis yang lebih kompleks.

Tapi keterbatasan itu bukan alasan untuk tidak memulai. Bagi kami, proyek ini bukan tentang memperbaiki Shopee, ini tentang memperbaiki cara saya berpikir sebagai seorang desainer.