Overview
Scent & Soul is a full e-commerce storefront for niche perfumes, built as a headless frontend ready to plug into any commerce API. The target market is Indonesian consumers, so the platform uses IDR pricing and local payment methods (GoPay, OVO, DANA).
The core design challenge was interesting: how do you sell something invisible through a screen? Customers can’t smell perfume online. So I translated scent into visual language. Each fragrance family gets its own color palette, gradient, and mood. An interactive quiz guides unsure shoppers toward products that match their preferences. Every product page breaks down the fragrance notes (Top, Heart, Base) so customers understand what they’re buying before they commit.
The result is 20 fully interactive pages covering the entire shopping journey, from discovery through checkout.
Challenge
Selling perfume online has a fundamental problem that most e-commerce templates completely ignore:
- Customers can’t smell products through a screen. Without sensory context, confidence drops and return rates climb
- Most Indonesian perfume e-commerce sites rely on generic templates with no brand personality. Every store looks the same
- Shoppers abandon carts when checkout flows require too many steps or don’t offer familiar local payment methods
- There’s no way to discover new fragrances based on personal preferences without visiting a physical store. Browsing a flat product grid doesn’t replace the “tell me what you like and I’ll recommend something” experience
Solution
Sensory Product Experience
I created a visual system that makes scent feel tangible. Six scent families (Floral, Woody, Citrus, Oriental, Fresh, Spicy) each have their own color palette and gradient backgrounds, so browsing by family feels distinct and immersive.
- Every product page shows a fragrance note breakdown (Top/Heart/Base) with mood-based tagging
- An interactive 4-question Scent Finder quiz recommends products based on the shopper’s mood, occasion, and note preferences. This replaces the “I don’t know what to pick” paralysis with guided discovery
Shopping and Cart
Cart behavior had to feel native-app smooth. I used Zustand with localStorage for persistent state across browser sessions, with maxStock enforcement per variant to prevent overselling.
- Slide-out cart drawer with quantity controls and wishlist-to-cart conversion
- Global search modal with real-time filtering by name, brand, and category
- All interactive components use hydration-safe rendering to prevent flash-of-unstyled-content on page load
Checkout and Content
The checkout is a clean 3-step flow with field-level validation, three shipping tiers (JNE, JNE YES, GoSend), and the local e-wallets Indonesian shoppers actually use.
- Journal/blog section with editorial layouts for brand storytelling
- 6 curated scent family collection pages for browsing by mood and style
- Store locator for 4 physical boutique locations across Jakarta, Surabaya, Bali, and Bandung
Results
- Page count → 20 fully interactive pages covering the entire shopping journey, up from the 5-8 static pages typical of template-based stores
- Product discovery → Filter, Scent Finder Quiz, Search, and 6 curated collection pages replace browse-only catalogs
- Cart persistence → Cart state survives browser restarts via Zustand + localStorage
- Animation system → 6 reusable motion primitives applied consistently across all 20 pages
