E-Commerce & Admin Workspace · 2026
Furniro Living & E-Commerce Workspace
Transforming modern furniture shopping with an interactive catalog, slide-over cart/wishlist drawers, instant search (Cmd+K), and a unified multi-channel admin operations workspace.
01 / 06
Business challenge to solve
Online furniture retail demands immersive visual exploration without jarring page reloads, while store operators need a single command center to oversee orders and stock across websites and multiple marketplaces.
In online furniture shopping, customers often hesitate when forced to open multiple browser tabs just to review specifications, ratings, and dimensions. Traditional e-commerce workflows that reload pages on every cart or wishlist action cause high drop-off rates.
Operationally, furniture brands sell across multiple channels: their standalone brand website as well as top marketplaces such as Shopee, Tokopedia, and TikTok Shop. Without a unified workspace, operators struggle to keep track of incoming orders, reconcile stock in real time, and flag low-stock items before they run out.
The core objective was building a dual-purpose web experience: a high-end, responsive storefront for buyers, paired with an ergonomic, clear admin workspace ready for multi-channel inventory sync.
- Storefront UX
- Slide-over drawers & quick-view modals with zero page reloads
- Omnichannel
- Admin queue tracking orders across Website, Shopee, Tokopedia, TikTok Shop
- Responsiveness
- Adaptive design from mobile viewports to widescreen monitors
- Instant Search
- Rapid product discovery modal triggered by Cmd+K shortcut
02 / 06
Key architectural decisions
01
Slide-over Drawers for Cart & Wishlist
Shoppers can inspect their cart, adjust quantities, or review saved favorites via smooth slide-over drawers without losing their place in the catalog. Includes a single-click 'Add All to Cart' feature.
Requires strict reactive state synchronization to keep cart badges and drawer totals consistent across all components.
02
Quick View Modal & Instant Search (Cmd+K)
The Quick View modal delivers high-res photos, star ratings, customer review counts, material descriptions, and instant checkout triggers. The search modal offers instantaneous keyword filtering.
Product image assets must be carefully compressed and loaded progressively to ensure instantaneous modal rendering.
03
Unified Multi-Channel Admin Workspace
Designed a back-office dashboard that highlights gross sales metrics, real-time order attribution by sales channel, catalog stock status pills (Active, Low Stock, Out of Stock), and marketplace sync readiness policies.
Admin screens prioritize dense data clarity and fast operational triage over consumer-oriented storytelling.
04
Warm Minimalist Design Language
Applied a curated color palette of warm terra cotta (#e28a55), refined gold (#b88e2f), organic cream (#fcf8f3), and crisp typography to evoke craftsmanship and luxury.
Custom color systems demand disciplined CSS design tokens across both storefront and management themes.
03 / 06
How the system works
- 01
Room Exploration & Catalog Discovery
Customers browse curated 50+ room inspirations or filter items by category (Chairs, Sofas, Lamps, Bedrooms, Accessories).
- 02
Quick Inspection & Wishlist Stacking
Shoppers preview product details in the Quick View modal or bookmark favorites with immediate toast notification feedback.
- 03
Slide-over Cart & Checkout Trigger
Customers adjust item quantities inside the Cart Drawer with live IDR subtotal calculations before proceeding to checkout.
- 04
Back-Office Fulfillment & Inventory Sync
Operations teams manage incoming orders across multiple channels, review stock levels, and monitor marketplace sync readiness.
04 / 06
How the solution was built
Engineered with a lightweight, modular React architecture and client-side reactive state to deliver lightning-fast response times.
Reactive State & LocalStorage Persistence
Cart items, wishlist bookmarks, and quantity counts automatically synchronize with browser localStorage for seamless guest checkout.
Isolated Storefront & Admin Routing
Supports dual viewing modes with clean separation between the public shopping storefront and the internal operations dashboard.
Integer-Based Financial Arithmetic
All pricing, discounts, and order totals are calculated using clean integer representations in IDR to prevent decimal rounding discrepancies.
Modular CSS System with Micro-Animations
Styled using modular CSS with hardware-accelerated drawer transitions, backdrop blurs, and full support for reduced-motion preferences.
05 / 06
Interface & workspace gallery
Visual breakdown of the interactive storefront experience and back-office management workspace.
StorefrontHero Section & Curation Showcase
Main landing page hero showcasing the latest collection, satisfaction metrics, and room exploration CTA.
StorefrontInteractive Quick View Modal
Product inspection modal complete with star ratings, specifications, add-to-cart, and wishlist toggle.
StorefrontSlide-over Shopping Cart Drawer
Responsive cart drawer with interactive quantity modifiers and real-time subtotal calculations.
StorefrontFavorites & Wishlist Drawer
Saved product wishlist featuring 'Add All to Cart' to transfer all items in a single click.
StorefrontInstant Search Modal (Cmd+K)
Fast keyboard-driven catalog search modal with live category tags and direct product selection.
Admin WorkspaceAdmin Operations Dashboard
Executive workspace overview showing gross revenue, order volume, live inventory, and marketplace health.
Admin WorkspaceCatalog & Stock Management
Admin inventory table with category filters, quick search, and active/low-stock status pills.
Admin WorkspaceMulti-Channel Order Operations
Fulfillment queue consolidating orders from Website, Shopee, Tokopedia, and TikTok Shop.
Admin WorkspaceMarketplace Channel Control
Integration hub monitoring sync readiness and policy enforcement across external marketplace channels.
StorefrontFull Landing Page Architecture
Complete storefront architecture from hero section, value propositions, catalog, room inspirations, to footer.
06 / 06
Proven business outcomes
The end-to-end implementation from Figma design tokens to interactive components demonstrates a production-grade e-commerce experience.
- Frictionless customer journeys with zero-reload slide-over drawers and quick-view inspection modals.
- Instant catalog discovery with keyboard-accessible search reducing time-to-cart.
- Unified back-office workspace simplifying multi-channel order triage and inventory monitoring.
- 100% fidelity to the Figma UI design system with fully responsive mobile, tablet, and desktop layouts.