Toko Online & Workspace Admin · 2026
Furniro Living & E-Commerce Workspace
Transformasi pengalaman belanja furnitur modern dengan katalog interaktif, slide-over drawer, pencarian instan (Cmd+K), serta workspace operasional admin terpadu untuk sinkronisasi pesanan dan stok multi-channel marketplace.
01 / 06
Tantangan bisnis yang perlu diselesaikan
Membeli furnitur secara online membutuhkan visualisasi detail yang kuat dan kenyamanan eksplorasi tanpa hambatan navigasi, sementara pemilik bisnis membutuhkan satu pusat kendali untuk mengelola pesanan dari website dan marketplace tanpa kekacauan stok.
Dalam e-commerce furnitur, calon pembeli sering kali enggan membuka banyak tab untuk mengecek spesifikasi, ulasan, dan dimensi produk. Alur belanja konvensional yang memuat ulang halaman untuk setiap aksi (seperti memasukkan ke keranjang atau mengecek wishlist) sering menyebabkan drop-off konversi.
Di sisi operasional, penjualan furnitur kerap tersebar di berbagai saluran: website brand mandiri serta kanal marketplace seperti Shopee, Tokopedia, dan TikTok Shop. Tanpa workspace terpusat, pengurus toko kesulitan memantau antrean pesanan yang masuk, menyesuaikan stok barang yang tersisa, dan mengidentifikasi barang dengan stok kritis (low stock).
Tantangan utamanya adalah menciptakan arsitektur antarmuka dwifungsi: storefront yang terasa sangat premium, cepat, dan interaktif bagi pembeli, sekaligus workspace admin yang bersih, informatif, dan siap terhubung ke sistem sinkronisasi stok otomatis.
- Storefront UX
- Slide-over drawer & quick view modal tanpa reload halaman
- Omnichannel
- Workspace admin dengan atribusi order per channel (Web & Marketplace)
- Responsivitas
- Navigasi adaptif dari layar smartphone hingga monitor desktop
- Pencarian Cepat
- Instant search modal dengan shortcut keyboard Cmd+K
02 / 06
Solusi utama yang dirancang
01
Slide-over Drawers untuk Keranjang & Wishlist
Pengguna dapat memeriksa isi keranjang, mengubah kuantitas, atau melihat daftar favorit kapan saja melalui slide-over drawer tanpa meninggalkan halaman katalog produk yang sedang mereka jelajahi. Terdapat pula tombol 'Add All to Cart' untuk memindahkan seluruh wishlist dalam satu kali klik.
Membutuhkan pengelolaan sinkronisasi state lokal yang ketat agar data keranjang dan wishlist tetap sinkron di seluruh komponen tanpa perlu re-render total.
02
Quick View Modal & Instant Search (Cmd+K)
Fitur Quick View menyajikan foto beresolusi tinggi, ulasan pelanggan berating bintang, ringkasan dimensi material, dan tombol aksi beli langsung dalam overlay elegan. Shortcut pencarian instan memudahkan pengguna menemukan kursi, sofa, atau lampu dalam hitungan milidetik.
Ukuran payload gambar produk harus dikompresi dan dioptimalkan secara cermat agar modal terbuka instan tanpa jeda rendering.
03
Pusat Kendali Admin Multi-Saluran (Channel Readiness)
Membangun dashboard operasional yang menampilkan ringkasan metrik penjualan kotor, antrean pesanan real-time berdasarkan channel penjualan, tabel manajemen inventaris dengan penanda status stok (Active, Low Stock, Out of Stock), dan panel kontrol status sinkronisasi marketplace.
Desain antarmuka admin difokuskan pada kejelasan data dan kecepatan pemrosesan, memisahkan rute admin dari storefront publik.
04
Desain Sistem Furnitur Berestetika Hangat (Warm Minimalist)
Mengadopsi palet warna tanah yang elegan (aksen terra cotta #e28a55, warm gold #b88e2f, latar cream #fcf8f3, dan teks arang #2a2b2a) yang memperkuat kesan produk interior berkualitas tinggi.
Penggunaan palet warna kustom memerlukan standarisasi token CSS yang disiplin di seluruh komponen storefront dan admin.
03 / 06
Bagaimana sistem bekerja
- 01
Eksplorasi Ruang & Kurasi Katalog
Pelanggan menjelajahi carousel inspirasi 50+ ruangan atau memfilter katalog produk berdasarkan kategori (Chairs, Sofas, Lamps, Bedrooms, Accessories).
- 02
Inspeksi Cepat & Wishlist Interaktif
Pelanggan menggunakan Quick View untuk melihat detail produk atau menandai produk ke Wishlist Drawer dengan feedback notifikasi toast langsung.
- 03
Slide-over Cart & Checkout Flow
Pelanggan menyesuaikan jumlah pesanan di Cart Drawer dengan kalkulasi subtotal instan (Rp) sebelum diarahkan ke alur checkout aman.
- 04
Operasional & Monitoring Admin
Tim toko memantau pesanan baru di antrean Order Operations, memperbarui ketersediaan stok, dan mengecek kesiapan sinkronisasi channel Shopee/Tokopedia/TikTok Shop.
04 / 06
Bagaimana solusi ini dibangun
Arsitektur dibangun dengan pendekatan modular berbasis React dan sistem state reaktif yang memastikan pengalaman pengguna terasa instan, ringan, dan mudah dikembangkan lebih lanjut.
State Management Reaktif & LocalStorage Sync
Keranjang belanja, wishlist, dan filter tersinkronisasi secara otomatis ke LocalStorage browser, memungkinkan pengguna melanjutkan belanja tanpa kehilangan data bahkan saat browser ditutup.
Pemisahan Rute Storefront dan Workspace Admin
Aplikasi mendukung navigasi mulus antara antarmuka belanja publik (`/`) dan workspace internal (`/admin`) dengan layout dan sidebar responsif yang terisolasi secara bersih.
Format Integer & Standarisasi Mata Uang Rupiah
Semua kalkulasi diskon, subtotal, dan total pendapatan dikelola dengan format integer rupiah untuk menghindari floating-point precision error.
Sistem Desain Vanilla CSS Berkinerja Tinggi
Komponen dibangun dengan CSS modular berkinerja tinggi, efek glassmorphism, micro-animation halus pada modal & drawer, serta dukungan motion-reduction yang ramah aksesibilitas.
05 / 06
Tangkapan layar antarmuka & workspace
Pratinjau detail antarmuka storefront interaktif dan workspace operasional admin.
StorefrontHero Section & Curation Showcase
Tampilan landing page utama dengan banner koleksi terbaru, metrik kepuasan, dan navigasi inspirasi ruangan.
StorefrontInteractive Quick View Modal
Modal inspeksi produk lengkap dengan ulasan bintang, deskripsi material, tombol add-to-cart, dan wishlist toggle.
StorefrontSlide-over Shopping Cart Drawer
Drawer keranjang belanja responsif dengan pengaturan kuantitas barang dan kalkulasi subtotal real-time.
StorefrontFavorites & Wishlist Drawer
Drawer penyimpanan produk impian dengan fitur 'Add All to Cart' untuk memindahkan seluruh item dalam satu klik.
StorefrontInstant Search Modal (Cmd+K)
Pencarian cepat katalog produk secara instan dengan shortcut keyboard dan indikator harga langsung.
Admin WorkspaceAdmin Operations Dashboard
Pusat ringkasan operasional yang menyajikan omzet penjualan kotor, antrean order, dan status inventaris.
Admin WorkspaceCatalog & Stock Management
Tabel manajemen produk admin dengan filter kategori, pencarian, dan label status ketersediaan stok.
Admin WorkspaceMulti-Channel Order Operations
Antrean pemrosesan pesanan dari berbagai saluran penjualan (Website, Shopee, Tokopedia, TikTok Shop).
Admin WorkspaceMarketplace Channel Control
Panel kesiapan integrasi sinkronisasi produk dan stok otomatis dengan marketplace ternama.
StorefrontFull Landing Page Architecture
Struktur menyeluruh landing page Furniro mulai dari hero, features, produk, inspirasi, hingga tips & tricks.
06 / 06
Hasil yang dapat dibuktikan
Implementasi menyeluruh dari desain sistem Figma ke dalam prototype fungsional telah terbukti memberikan pengalaman berbelanja yang intuitif dan alur kerja admin yang terstruktur.
- Pengalaman belanja tanpa hambatan melalui Quick View modal dan slide-over drawers yang tidak memerlukan reload halaman.
- Pencarian produk berkecepatan tinggi dengan shortcut keyboard Cmd+K yang meningkatkan kenyamanan navigasi pengguna.
- Struktur workspace admin yang rapi untuk memantau omzet, pesanan multi-saluran, serta status kesehatan stok barang.
- Implementasi desain yang 100% presisi dengan sistem desain Figma, responsif di semua resolusi layar perangkat.