Case Study UI/UX Design: Redesign Shopee Live

Bikin Pengalaman Nonton Live Shopping Jadi Lebih Nyaman

Halo, teman-teman!

Perkenalkan, kami adalah Kelompok 6 dari kelas HCI Bisnis Kreatif 2023A — terdiri dari Dara Ziva Visia Ananda, Deslyn Valencia, Hafshah Fadilma Ashila, Milka Amalia, dan Sella Kurnia.

Saat ini kami telah melakukan redesign UI/UX pada Shopee Live yang bertujuan untuk memenuhi tugas pada mata kuliah HCI (Human and Computer Interaction).

Kenapa Shopee Live?

Saat ini, Shopee Live telah menjadi salah satu fitur andalan untuk berbelanja online sambil menonton konten live streaming. Tapi kalau kamu sering pakai fitur ini, pasti pernah ngerasain betapa “ramainya” tampilannya — pop-up produk muncul di mana-mana, chat tenggelam karena kebanjiran komentar, sampai nggak sengaja kepencet tombol live padahal lagi asyik lihat produk.

Nah, dari situ kami mulai tertarik buat mendalami masalah-masalahnya secara lebih serius.

Hasil User Research

Kami melakukan Focus Group Discussion (FGD) bersama 8 narasumber yang merupakan pengguna aktif Shopee Live. FGD ini dilaksanakan pada 12 Maret 2026 di Vokasi Universitas Indonesia. Berdasarkan sesi FGD, kami temukan 4 permasalan utama dari Shopee Live:

1. Antarmuka terlalu padat dan mengganggu karena pop-up Hampir semua narasumber (N1, N2, N3, N4, N6, N7, N8) merasa tampilan Shopee Live terlalu ramai— banyak elemen yang muncul bersamaan dan menyebabkan kelelahan mata dan sulit untuk fokus ke konten live-nya.
2. Peletakan pop-up produk yang mengganggu experience live N3 dan N7 secara khusus menyoroti posisi pop-up produk yang muncul di atas kiri layar, sehingga sering menghalangi video live streaming yang sedang ditonton.
3. Pesan sering tenggelam karena kolom chat sedang ramai N3, N4, N6, dan N8 mengeluhkan bahwa pertanyaan atau komentar yang mereka kirimkan sering tidak terbaca oleh host, tenggelam di antara ratusan chat yang masuk bersamaan.
4. Pop-up Shopee Live yang sering kepencet saat lihat produk N2 dan N4 mengalami kejadian tidak sengaja masuk ke halaman live hanya karena tanpa sadar menekan pop-up yang muncul di laman produk.

Mid Fidelity/Wireframe

Berdasarkan hasil user research, kami merancang solusi dalam bentuk wireframe mid fidelity untuk dua flow utama, yaitu (1) Membuka Katalog Produk dari Shopee Live dan (2) Membuat Komentar di Shopee Live

FLOW 1 —Membuka Katalog dari Shopee Live

Keseluruhan Layar Flow 1 (Mid Fidelity)

Flow pertama berfokus pada pengalaman berbelanja dengan melihat katalog melalui Shopee Live.

• Layar 1: Masuk Shopee Live melalui Laman Produk

[MF] Before & After Flow 1 Layar 1 — Masuk Shopee Live melalui Laman

Masalah pertama yang kami tangani adalah tampilan laman produk yang terlalu penuh informasi. Solusinya kami menggunakan prinsip heuristic ke #8 Aesthetic and Minimalist Design — dengan membuang elemen-elemen distraksi seperti promo berlebihan, dan hanya menyisakan inti: gambar produk, harga, dan tombol CTA.

Untuk masalah pop-up yang sering tertekan, kami menerpakan prinsip heuristic ke #5 Error Prevention dengan pendekatan non-blocking UI (floating button) — jadi tombol Live tidak lagi menghalangi area scroll utama dan minim misclick.

• Layar 2: Melihat Laman Shopee Live

[MF] Before & After Flow 1 Layar 2— Melihat Laman Shopee Live

Di halaman utama Live, kami mengurangi jumlah tombol dan opsi yang tampil sekaligus (Hick’s Law), sekaligus memindahkan pop-up produk ke area bawah tengah layar — alias thumb zone — supaya lebih ergonomis dan nggak menghalangi video (Fitt’s Law).

• Layar 3 & 4: Clean Mode (Zoom In / Zoom Out)

[MF] Before & After Flow 1 Layar 3 & 4— Mengaktifkan dan Menonaktifkan Clean Mode

Ini salah satu fitur yang kami usulkan. Dengan gesture cubit layar (pinch to zoom in), pengguna bisa langsung masuk ke Clean Mode — layar jadi bersih tanpa elemen UI yang mengganggu. Cubit balik (zoom out), maka tampilan akan normal kembali. Hal ini sesuai dengan prinsip heuristic ke #7 Flexibility and Efficiency of Use karena gestur ini berfungsi sebagai shortcut yang intuitif.

• Layar 5: Melihat Katalog Melalui Shopee Live

[MF] Before & After Flow 1 Layar 5 — Melihat Katalog melalui Shopee Live

Halaman katalog produk kami redesign menjadi tampilan grid yang lebih rapi dan mudah dipindai mata. Dengan kombinasi prinsip heuristic ke #8 Aesthetic and Minimalist Design, Fitt’s Law (tidak perlu gerakan motorik yang jauh), Hick’s Law (pilihan lebih terfokus), dan prinsip heuristic ke #7 Flexibility & Efficiency of Use (ada opsi filter dan toggle tampilan grid/baris), pengalaman browsing katalog jadi jauh lebih nyaman.

FLOW 2 — Membuat Komentar di Shopee Live

Keseluruhan Layar Flow 2 (Mid Fidelity)

Flow kedua berfokus pada pengalaman interaksi melalui chat/komentar selama live berlangsung. Layar 1 dan 2 adalah tampilan Shopee Live yang sama dengan layar 2 dan 5 di flow 1, jadi kita akan langsung membahas layar 3 hingga 5.

• Layar 3–5: Kategori Pesan, Mengetik, dan Melihat Pesan Terkirim

[MF] Before & After Flow 2 Layar 3, 4, & 5— Kategori Pesan, Mengetik, dan Melihat Pesan Terkirim

Masalah utama di sini adalah pesan yang tenggelam di tengah ramainya chat. Solusinya adalah dengan menambahkan sistem kategori pesan — misalnya pertanyaan tentang Spill, Try On, Ukuran, Warna, Lokasi, Stok, dan sebagainya. Setiap pesan yang dikirim bisa dikategorikan dan tersematkan di atas kolom komentar, sehingga host live bisa lebih mudah menemukannya tanpa harus scroll manual.

Dua prinsip yang kami gunakan:

• #1 Visibility of System Status — buyer bisa tahu apakah pesannya sudah dibaca atau belum.
• #6 Recognition Rather Than Recall — seller nggak perlu mengingat-ingat komentar yang terlewat, karena sistem yang bantu menampilkannya berdasarkan kategori.

Setelah membahas bagaimana perubahan User Experience melalui redesign Mid Fidelity/Wireframe, kita akan masuk pada User Interface melalui redesign High Fidelity

High Fidelity

Setelah mid fidelity selesai dan dipoles lebih lanjut, kami lanjut ke tahap high fidelity dengan menambahkan warna, tipografi, dan elemen visual yang nyata.

FLOW 1 — Membuka Katalog dari Shopee Live

Keseluruhan Layar Flow 1 (High Fidelity)

• Layar 1: Masuk Shopee Live melalui Laman Produk

[HF] Before & After Flow 1 Layar 1— Masuk Shopee Live melalui Laman Produk

Di versi high fidelity, halaman produk tampil jauh lebih bersih. Foto produk jadi fokus utama, harga terlihat jelas, dan varian produk tersusun rapi di bawahnya. Pop-up Live berubah bentuk menjadi floating button kecil di sisi kanan layar — nggak mengganggu, tapi tetap mudah diakses.

Prinsip desain yang digunakan adalah Hierarki Visual — ukuran, warna, dan kontras diatur agar mata langsung tertuju ke produk dan host. Gestalt Principle (Proximity & Common Region) — elemen yang berkaitan dikelompokkan dalam satu area agar tampilan terasa lebih terstruktur.

• Layar 2: Melihat Laman Shopee Live

[HF] Before & After Flow 1 Layar 2— Melihat Laman Shopee Live

Tampilan live streaming kini jauh lebih “napas”. Video mengisi sebagian besar layar, chat berada di bawah dengan ukuran teks yang readable, dan kartu produk (nama + harga + tombol Beli oranye) diletakkan berdekatan sebagai satu unit informasi transaksi — sesuai Gestalt Principle (Proximity).

Interactive prototype: kolom komentar bisa di-scroll secara independen tanpa mengganggu video.

• Layar 3 & 4: Aktivasi dan Nonaktivasi Clean Mode

[HF] Before & After Flow 1 Layar 3 & 4 — Mengaktifkan dan Menonaktifkan Clean Mode

Saat clean mode aktif (zoom in), semua elemen UI hilang — tinggal video. Saat zoom out, tampilan kembali normal dengan semua kontrol muncul kembali.

Kami menggunakan Gestalt Principle (Closure) di sini — pengguna secara intuitif memahami bahwa elemen UI tadi nggak hilang, hanya berada “di luar bingkai” sementara.

Interactive prototype: mencubit layar = clean mode aktif. Cubit balik = kembali ke tampilan lengkap. Klik ikon keranjang = etalase produk muncul.

• Layar 5: Melihat Katalog Melalui Shopee Live

[HF] Before & After Flow 1 Layar 5 — Melihat Katalog melalui Shopee Live

Grid katalog kini tampil dengan foto produk yang nyata, badge status stok berwarna kontras, dan informasi harga yang jelas. Layout yang seragam membuat mata lebih mudah menelusuri produk dari atas ke bawah. Hal ini selaras dengan Hierarki Visual: informasi disajikan dengan ukuran yang proporsional dan Gestalt (Proximity & Similarity): setiap card punya struktur yang sama, sehingga mudah diprediksi.

Interactive prototype: klik ikon ‘X’ = kembali ke tampilan live.

FLOW 2 — Membuat Komentar di Shopee Live

Keseluruhan Layar Flow 2 (High Fidelity)

• Layar 3 & 4: Pilihan Kategori Pesan dan Mengetik

[HF] Before & After Flow 2 Layar 3 & 4— Kategori Pesan & Mengetik Pesan

Tombol kategori pesan (Spill, Try On, Ukuran, Diskon, Lokasi, Stock, Asli?, Warna) tampil dalam grid yang seragam dengan ikon pembeda di tiap tombol — sesuai Gestalt (Similarity & Proximity). Setelah kategori dipilih, keyboard muncul dan pengguna bisa langsung mengetik pesannya.

Interactive prototype: kategori bisa dipilih sesuai kebutuhan sebelum mengetik.

• Layar 5: Melihat Pesan Berkategori Terkirim

[HF] Before & After Flow 2 Layar 5 — Melihat Pesan Berkategori Terkirim

Setelah pesan terkirim, pesan tersebut muncul di chat dengan visual pembeda (background dan bentuk border) yang menunjukkan kategorinya — prinsip Common Region.

Interactive prototype: pertanyaan berkategori bisa di-swipe untuk navigasi antar pesan.

Penutup

Dari proses panjang mulai dari FGD, mid fidelity, hingga high fidelity, kami berhasil mengidentifikasi 4 masalah utama di Shopee Live dan merancang solusi berbasis prinsip-prinsip HCI yang solid — mulai dari Nielsen’s Heuristics, Hukum UX, hingga Gestalt Principles.

Hasilnya adalah desain yang lebih bersih, terarah, dan nyaman digunakan — baik untuk penonton yang ingin fokus nonton live, maupun yang ingin berinteraksi aktif lewat chat dan melihat katalog produk.

Terima kasih sudah membaca! Semoga case study ini bermanfaat😊

Kelompok 6 — HCI Bisnis Kreatif UI 2023A | Vokasi Universitas Indonesia | Dara Ziva Visia Ananda · Hafshah Fadilma Ashila · Deslyn Valencia · Milka Amalia · Sella Kurnia