Studi kasus produk end-to-end tentang menghubungkan konten hiburan, penemuan merchandise, dan perjalanan pembelian yang dapat dipercaya.
Seorang penggemar dapat tertarik pada sebuah dunia fiksi tanpa langsung mengetahui ke mana harus melangkah. Mereka mungkin menemukan komik di media sosial, mengenali karakter pada sebuah T-shirt, tetapi tetap harus mencari sendiri di mana ceritanya berada, merchandise apa yang tersedia, dan apakah jalur pembeliannya dapat dipercaya. Celah antara ketertarikan dan tindakan tersebut menjadi peluang produk yang saya eksplorasi untuk Kara Guardian of the Realms, sebuah entertainment IP Indonesia yang berkaitan dengan Visi8 Studio.
Saya merancang landing page dan pengalaman e-commerce desktop-first yang memberi dunia Kara satu titik masuk yang jelas, lalu menghubungkannya dengan pemilihan produk, review cart, pengiriman, pembayaran, dan konfirmasi pesanan. Output-nya mencakup wireframe, layar high-fidelity, customer journey map, dan user flow. Evaluasi juga merekam respons directional dari peserta usability testing nyata.
Pertanyaan utamanya bukan memilih antara atmosfer cerita atau commerce. Tantangannya adalah membantu pengunjung memahami semesta Kara tanpa memperlambat penggemar yang sudah ingin membeli. Studi kasus ini mengikuti keputusan tersebut dari input awal hingga interface akhir, lalu memisahkan feedback yang benar-benar tercatat dari hal-hal yang masih perlu divalidasi oleh tim produk.
🧭 Konteks Proyek dan Keputusan Produk
Satu website dengan dua pekerjaan
Brief proyek menggambarkan tiga lini utama Kara: komik digital, konten animasi atau film, dan merchandise. Pada saat studi dilakukan, belum ada jalur khusus Kara yang menyatukan penjelasan mengenai IP dengan pembelian merchandise. Seseorang dapat mengenal Kara tanpa menemukan satu destinasi yang menjelaskan dunianya sekaligus membantu mereka membeli.
Saya membingkai website ini melalui dua pekerjaan yang saling berkaitan. Pertama, orientasi: membantu pengunjung baru memahami Kara dan jenis konten maupun produk di dalamnya. Kedua, transaksi: membantu penggemar membandingkan item, melihat biaya dan pilihan pemenuhan pesanan, lalu menyelesaikan pembelian dengan yakin. Product grid saja dapat menjual kaus tanpa menjelaskan alasan emosional di baliknya. Sebaliknya, halaman world-building dapat terlihat menarik tetapi menyembunyikan tindakan berikutnya.
Cakupan saya meliputi walkthrough pengalaman yang tersedia saat itu, desk review terhadap entertainment storefront pembanding, journey dan flow mapping, wireframe, serta high-fidelity desktop.
Skenario penggemar untuk menguji logika journey
Saya menggunakan Rafi dalam customer journey map untuk menguji apakah logika pengalaman tetap konsisten dari kunjungan pertama hingga checkout. Ia merepresentasikan penggemar komik dan animasi di Jakarta yang mengikuti cerita Kara, ingin memahami merchandise, dan memilih metode pembayaran yang ia percaya.
Skenario tersebut membantu mengajukan pertanyaan yang perlu dijawab interface. Apa yang menunjukkan bahwa komik, film, dan merchandise berasal dari satu dunia? Kapan informasi produk sudah cukup untuk memilih? Apa yang membuat total biaya dan pengiriman jelas sebelum pembayaran? Pertanyaan-pertanyaan ini membentuk halaman berikutnya.
🔎 Input, Riset, dan Framing Masalah
Apa yang dapat dipelajari dari pengalaman saat itu
Saya menelusuri landing page Visi8 Studio yang tersedia pada saat studi, menjalankan task, dan memeriksa bagaimana seseorang berpindah di dalam website. Aktivitas ini membantu menunjukkan tidak adanya jalur khusus Kara. Namun, catatan proyek tidak menyimpan task script, comparative baseline, screenshot setiap state, atau frekuensi friction. Karena itu, walkthrough saya perlakukan sebagai input desain, bukan temuan usability yang terukur.
Implikasi brief yang paling bertahan adalah kebutuhan untuk menghubungkan konten, merchandise, dan pembayaran. Pertanyaan desainnya menjadi: bagaimana sebuah situs dapat mengajak seseorang memasuki dunia Kara, menemukan produk yang relevan, dan menyelesaikan pembelian tanpa menjadikan storytelling maupun checkout sebagai hambatan?
Benchmark sebagai prinsip kerja, bukan bukti performa
Saya meninjau Warner Bros Shop dan Disney Shop sebagai referensi entertainment commerce. Pola yang berguna mencakup browsing berbasis konten, kategori produk yang terlihat, related items, dan hubungan yang dapat berlanjut setelah transaksi. Benchmark tersebut tidak membuktikan perilaku toko saat ini, performa conversion, ataupun preferensi penggemar Kara.
Dari perbandingan itu saya menyusun tiga prinsip: buat pilihan utama Kara mudah dibaca, tampilkan hubungan antara konten cerita dan merchandise, serta jangan memaksa pengguna bergabung dengan komunitas sebelum memberi jalur belanja langsung. Karena katalog Kara lebih kecil daripada franchise global, menyalin struktur toko besar justru berisiko menambah kompleksitas lebih awal.
Tiga ketegangan yang perlu diselesaikan
World-building versus immediate intent. Pengunjung baru membutuhkan atmosfer dan konteks, sementara penggemar lama mungkin langsung mencari item tertentu. Hero visual dan jalur Shop perlu tersedia bersama, bukan narasi panjang yang menjadi gate sebelum commerce.
Keluasan produk versus kategori yang mudah dipahami. Digital Comics, Shop, dan Movies adalah penawaran yang berbeda. Ketiganya perlu terlihat sebagai bagian dari dunia yang sama tanpa mengasumsikan inventaris dan nilai komersial yang setara.
Ekspresi brand versus kepercayaan transaksi. Dark fantasy art memberi karakter, tetapi keputusan membeli bergantung pada hal yang sangat praktis: variant, total, pengiriman, pembayaran, dan konfirmasi. Visual system perlu membawa identitas Kara sambil menjaga informasi tersebut mudah dibaca.
🗺️ Journey, Flow, dan Keputusan Wireframe
Memetakan kunjungan lengkap seorang penggemar
Saya memetakan journey mulai dari discovery dan immersion, evaluasi produk, cart dan checkout, hingga post-purchase. Map ini menghubungkan keputusan yang jika dilihat terpisah akan tampak seperti tugas layar individual. Pengunjung dari media sosial perlu segera mengenali Kara. Saat browsing, mereka perlu mengetahui identitas dan harga item. Setelah memesan, konfirmasi harus jelas sebelum website mengajak mereka kembali ke konten.
Map ini juga membuka dependency di luar interface. Hero besar dapat memperlambat halaman. Product card dapat terlihat baik sementara size atau stock datanya salah. Bank transfer dapat terasa familiar bagi pembeli Indonesia tetapi tetap membutuhkan rekonsiliasi pembayaran yang andal. Confirmation page hanya kredibel jika transaksi dan follow-up benar-benar bekerja.
CJM mengikuti Rafi dari discovery dan immersion menuju pemilihan produk, checkout, serta momen setelah pembelian.
Dua jalur masuk dalam satu website
User flow membedakan pengunjung yang sedang bereksplorasi dengan penggemar yang sudah siap membeli. Pengunjung pertama dapat memulai dari hero, melihat tiga kategori, membaca atau menonton konten, lalu masuk ke toko. Penggemar yang kembali dapat menggunakan Shop atau search untuk langsung menuju listing. Ini adalah perbedaan intent, bukan klasifikasi pengguna yang permanen.
Saya memperlakukan keduanya sebagai jalur paralel dalam satu sistem produk. Memaksa registrasi sebelum belanja berisiko menghambat pembelian. Menghapus seluruh konteks cerita dari toko membuat pengalaman terasa generik. Karena itu, landing page menampilkan Register Now dan Shop the Collections bersama, sementara navigasi mempertahankan Digital Comics, Shop, Movies, dan search.
Jalur commerce kemudian bergerak melalui listing, product detail, cart, address, delivery dan payment, hingga confirmation. Flow juga mengarahkan post-purchase kembali ke komik, menghubungkan item fisik dengan cerita Kara.
Flow memperjelas dua intent masuk dan rangkaian checkout.
Apa yang diselesaikan wireframe sebelum visual design
Wireframe low-fidelity menguji hierarki homepage, listing, product detail, dan checkout. Homepage menyediakan ruang untuk hero, Digital Comics, Shop, Movies, Blog, dan fan invitation. Listing mengeksplorasi filter berdampingan dengan grid. Detail memberi ruang untuk variant, harga, konteks cerita, dan related items. Checkout mempertahankan order summary ketika task berpindah dari review menuju address dan payment.
Tahap ini penting karena information architecture melakukan pekerjaan utama. Tanpa artwork pun pengguna tetap harus dapat menemukan komik, memilih variant T-shirt, dan memahami langkah berikutnya.
Kolase wireframe menunjukkan struktur halaman sebelum konsep high-fidelity.
🖥️ High-Fidelity Design dan Alasan di Baliknya
Homepage: membangun dunia tanpa menyembunyikan commerce
Hero menggunakan ilustrasi fantasy dan dark surface untuk membangun karakter Kara. Dua CTA tetap terlihat: Register Now dan Shop the Collections. Yang pertama membuka jalur relationship, sementara yang kedua melayani intent pembelian langsung. Desain tidak mengasumsikan bahwa registrasi selalu lebih penting; kedua jalur dibuat dapat dievaluasi.
Di bawah hero, Digital Comics, Shop, dan Movies muncul sebagai entry point terpisah. Bagian berikutnya memberi kedalaman melalui carousel komik, merchandise, animation content, editorial stories, dan Join The Kara Fans. Komik tampil sebelum merchandise untuk memberi konteks, tetapi Shop tetap dapat diakses dari navigasi atas.
Artwork besar juga menciptakan trade-off: ia memperkuat IP tetapi dapat menutupi label atau memperlambat mobile connection. Implementasi akan membutuhkan responsive crop, contrast check, alt description, dan image delivery yang sesuai perangkat.
Listing dan detail: mengurangi biaya keputusan
Halaman Shop menggunakan grid tiga kolom dan filter Product Type, Color, Size, Price, serta Franchise. Active filter membantu pengguna memahami mengapa hasil berubah. Nilai kontrol ini bergantung pada kualitas data katalog; size, stock, dan tag yang salah dapat menyembunyikan produk valid atau menjanjikan item yang tidak tersedia.
Product detail memusatkan T-shirt Kara dengan imagery, contoh harga IDR 220,000, pilihan color dan size, quantity, serta Add to Cart. Deskripsi menyatukan konteks cerita dengan informasi produk. “You May Also Like” membantu eksplorasi hanya jika recommendation mempertimbangkan karakter, variant, inventory, dan harga.
Komposisi high-fidelity merangkum arah homepage, listing, dan detail.
Checkout: membuat biaya dan fulfillment terlihat
Purchase path mencakup cart review, address, delivery dan payment, serta confirmation. Order Summary tetap terlihat selama task berubah agar pembeli dapat memeriksa item dan biaya. Ini penting dalam konteks Indonesia, ketika pilihan kurir, alamat, dan metode pembayaran memengaruhi kepercayaan.
Desain menampilkan kurir, bank transfer, digital wallet, dan card sebagai contoh. Produk nyata membutuhkan shipping rate yang akurat, integrasi pembayaran, rekonsiliasi bank transfer, serta model alamat lokal yang memadai. Confirmation page menegaskan keberhasilan sebelum menawarkan komik sebagai langkah sekunder.
Layar checkout mencakup review cart, address, delivery dan payment, hingga confirmation.
🧪 Apa yang Didukung Evaluasi
Saya menguji desain dengan peserta nyata. Catatan evaluasi menyimpan tiga tema respons: look and feel dinilai menarik, modern, dan menyenangkan; peserta menyukai variasi produk; serta arah pembayaran dan pengiriman dianggap nyaman. Feedback tersebut membantu menentukan apa yang perlu dipertahankan pada iterasi berikutnya.
Evaluasi lanjutan sebaiknya menguji apakah pengguna memahami tiga kategori, dapat memilih variant yang tepat, dan mengenali total biaya sebelum berkomitmen. Ini juga perlu menemukan titik ketika visual appeal berhenti membantu dan product comprehension menjadi penentu utama.
Output akhirnya menghubungkan story-led entry, kategori yang jelas, listing dan detail produk, cart dan checkout, serta undangan kembali ke konten. Artifact membuat rangkaian keputusan dapat ditinjau per halaman sekaligus menunjukkan dependency pada inventory, delivery, payment, dan content access.
🚀 Pengembangan Lanjutan dan Pertimbangan Produk
Jika konsep dibawa menuju production, saya akan memulai dengan audit content dan inventory. Minimum useful release membutuhkan deskripsi dan variant yang benar, availability, cart yang bekerja, validasi alamat, delivery quote, payment status, serta order confirmation. Homepage tetap perlu memberi cukup konteks Kara agar situs tidak berubah menjadi product grid generik.
Layer berikutnya dapat menambah relationship path: newsletter consent, ekspektasi update, comic access, dan post-purchase message yang relevan. Character browsing, bundle, built-in reader, limited drops, saved addresses, referral, dan fan tiers adalah peluang yang perlu diuji, bukan fitur selesai atau roadmap Visi8.
Production juga membutuhkan state yang tidak terlihat pada happy path: item kehabisan stock setelah masuk cart, kurir tidak melayani alamat, bank transfer pending atau gagal, perubahan address setelah shipping fee muncul, serta payment yang dikirim dua kali. Hak atas artwork, animation preview, dan merchandising juga perlu memiliki ownership yang jelas.
Untuk validasi, saya akan menguji dua task pada pengunjung baru dan penggemar Kara. Task pertama meminta peserta menjelaskan apa yang Kara tawarkan, lalu menemukan komik dan merchandise. Task kedua meminta pembeli memilih size dan color tertentu, meninjau total, memilih delivery dan payment, lalu menjelaskan arti confirmation. Purchase outcome harus menggunakan seluruh eligible product-detail sessions sebagai denominator, bukan hanya checkout starters.
📝 Refleksi dan Pembelajaran
Pelajaran utamanya adalah bahwa character-led storefront harus mendapatkan dua jenis kejelasan. Brand perlu terasa seperti dunia yang layak dieksplorasi, sementara transaksi harus terasa cukup biasa untuk dipercaya. Layar akhir menghubungkan kebutuhan tersebut melalui content entry bagi pengunjung baru, jalur produk langsung bagi penggemar, dan checkout yang mudah diikuti.
Pekerjaan ini juga menegaskan batas interface. Hero yang kuat tidak dapat memperbaiki inventory salah, Order Summary tidak dapat merekonsiliasi payment gagal, dan fan invitation tidak dapat menciptakan komunitas tanpa content plan. Iterasi selanjutnya perlu menguji pemahaman dan purchase task sebelum menambah loyalty mechanic.
📌 Disclaimer: Ini merupakan proyek desain independen untuk tujuan edukasi, bukan engagement resmi Visi8 Studio atau website Kara yang telah dirilis. Rafi serta pikiran dan emosi pada CJM bersifat ilustratif. Feedback peserta nyata terbatas pada tiga tema yang terdokumentasi; catatan yang tersedia tidak menetapkan jumlah peserta, task-success statistic, conversion lift, atau commercial impact. Harga, pilihan pembayaran, dan order confirmation merupakan contoh desain. Artwork, IP, dan elemen brand tetap menjadi milik pemiliknya masing-masing.
💬 Let’s Connect: Punya masukan atau pemikiran tentang studi kasus ini? Saya senang mendengarnya. Silakan tinggalkan komentar atau lihat karya product dan experience lainnya di cahyadiaditya.site. Untuk berdiskusi, hubungi saya melalui Telegram atau terhubung melalui LinkedIn. Terima kasih sudah membaca.
