VSTAGE
A Collaboration Project
About the project
Project Karaoke Helper ini merupakan hasil kolaborasi saya sebagai Lead UI/UX Designer bersama rekan developer untuk menjawab kendala teknis yang sering dihadapi indie streamer dan VTuber saat sesi karaoke. Fokus utama saya di sini adalah menyederhanakan manajemen metadata lagu dan integrasi overlay OBS agar prosesnya lebih efisien dan tidak mengganggu alur streaming. Menggunakan pendekatan desain gabungan Neo-Brutalism dan Retro Pop Art, saya merancang antarmuka desktop yang mengutamakan kecepatan akses dan fungsionalitas, sehingga streamer bisa mengelola daftar lagu serta menampilkan kredit yang akurat secara otomatis tanpa harus repot melakukan setup manual yang memakan waktu di tengah performa mereka. Website ini telah berjalan live dan siap untuk diakses oleh publik dengan alamat https://vstage.my.id/.
User Target
- Sering live streaming (nyanyi, zatsudan, event spesial)
- Butuh fitur karaoke yang stabil + visually menarik
- Cari konten yang gampang tapi fun
- Karaoke cepat setup (no ribet)
- Cari tools unik biar beda
- Visual penting banget
Wireframe
Style Guide
Kombinasi IBM Plex Sans dan Space Grotesk digunakan untuk menciptakan keseimbangan antara keterbacaan dan karakter visual. Keduanya memiliki bentuk huruf yang tegas namun tetap nyaman dibaca dalam berbagai ukuran. Ini penting untuk memastikan informasi seperti judul lagu dan nama artis dapat langsung dipahami, baik di dashboard maupun saat ditampilkan dalam overlay streaming yang membutuhkan visibilitas tinggi.
Pemilihan warna dibuat kontras dan berani, terinspirasi dari pop art untuk menciptakan tampilan yang langsung menarik perhatian. Warna-warna cerah seperti kuning, ungu, dan biru digunakan sebagai aksen untuk menandai elemen penting, sementara hitam dan putih menjaga keseimbangan visual. Pendekatan ini membantu user memahami hirarki informasi dengan cepat, terutama dalam konteks live streaming yang membutuhkan respon visual yang instan.
Layout disusun menggunakan grid yang cukup lega untuk menjaga keseimbangan antara ekspresi visual dan kenyamanan penggunaan. Meskipun gaya desain cenderung bold dan kontras, struktur tetap dibuat rapi agar user tidak merasa penuh atau bingung. Penggunaan spacing yang konsisten membantu setiap elemen memiliki ruang bernapas, sehingga alur interaksi tetap terasa jelas dan mudah diikuti.
Border tebal dengan ketebalan 3px dipilih untuk memperkuat karakter neo-brutalism yang tegas dan jujur secara visual. Elemen ini tidak hanya berfungsi sebagai estetika, tetapi juga membantu memisahkan konten dengan jelas tanpa perlu banyak dekorasi tambahan. Dengan adanya border yang konsisten, setiap komponen terasa lebih terstruktur dan mudah dikenali, sehingga meningkatkan kejelasan navigasi dalam interface.
Iconography menggunakan gaya sederhana dan solid agar selaras dengan keseluruhan tampilan yang bold. Ikon dirancang tanpa detail berlebihan supaya tetap jelas dan mudah dikenali dalam berbagai ukuran. Pendekatan ini membantu mempercepat pemahaman fungsi tanpa mengalihkan perhatian dari konten utama, serta menjaga konsistensi visual dalam seluruh interface.
Penulisan pada komponen dirancang dengan pendekatan yang jelas, langsung, dan minim distraksi agar mudah dipahami dalam konteks penggunaan yang cepat seperti live streaming. Kata-kata yang digunakan cenderung singkat dan berbasis aksi, seperti “Create Room”, “Sing Now”, atau “Add New Song”, sehingga pengguna langsung mengerti fungsi tanpa perlu berpikir lama. Beberapa microcopy tambahan dibuat lebih santai dan sedikit playful untuk menjaga nuansa yang ramah dan tidak kaku, namun tetap tidak berlebihan agar tidak mengganggu fokus utama. Pendekatan ini membantu menjaga keseimbangan antara kejelasan fungsi, efisiensi interaksi, dan karakter visual yang ingin ditampilkan.
Visual Design
✨ Conclusion
Project ini telah berhasil dikembangkan sebaik-baiknya dengan tenggat waktu yang telah ditentukan bersama. Terlepas dari banyaknya kekurangan yang mungkin terlewat oleh mata, overall saya pribadi puas dengan hasilnya, di mana desain yang saya bawakan telah banyak dipakai oleh end-user yakni target kami para Streamer/VTuber. Dan ketika dicoba promosikan di X, tidak pernah menyangka akan meledak dengan impression luar biasa imho 😆.
🎯 Why This Design Approach?
Pendekatan desain ini dipilih untuk menyeimbangkan antara ekspresi visual yang kuat dengan kebutuhan fungsional yang cepat dan praktis. Gaya neo-brutalism dengan sentuhan pop art digunakan untuk menciptakan tampilan yang berani, mudah dikenali, dan memiliki karakter yang berbeda dari kebanyakan aplikasi serupa, sehingga lebih memorable bagi user. Di sisi lain, struktur layout yang rapi, tipografi yang jelas, serta interaksi yang sederhana memastikan pengalaman tetap efisien dan tidak membingungkan, terutama dalam konteks live streaming yang serba cepat. Secara keseluruhan, pendekatan ini berfokus pada bagaimana desain tidak hanya menarik secara visual, tetapi juga benar-benar mendukung alur penggunaan yang ringan, cepat, dan tanpa hambatan.
Let's hear your ideas and we can discuss about it!
Contact me