Overview
Scent & Soul is a modern e-commerce storefront for niche perfumes, built as a headless frontend ready to connect to any commerce API. The platform targets Indonesian consumers with IDR pricing, local payment methods (GoPay, OVO, DANA), and translates invisible aromas into visual experiences through color-coded scent families, an interactive scent-matching quiz, and animated fragrance notes.
Challenge
- Perfume shopping online lacks sensory context. Customers can’t smell products through a screen, leading to low confidence and high return rates
- Most Indonesian perfume e-commerce sites use generic templates with no personality or brand storytelling
- Shoppers abandon carts when checkout flows are confusing or require too many steps
- No easy way to discover new fragrances based on personal preferences without visiting a physical store
Solution
Sensory Product Experience
- Color-coded scent families (Floral, Woody, Citrus, Oriental, Fresh, Spicy) with unique visual palettes and category-specific gradient backgrounds
- Fragrance note breakdown (Top/Heart/Base) on every product detail page with mood-based product tagging
- Interactive 4-question Scent Finder quiz recommending products based on mood, occasion, and note preferences
Shopping & Cart
- Persistent cart state across browser sessions using Zustand + localStorage with maxStock enforcement per variant
- Slide-out cart drawer with quantity controls, wishlist with add-to-cart conversion, and hydration-safe rendering
- Global search modal with real-time filtering by name, brand, and category
Checkout & Content
- 3-step checkout with field-level validation, three shipping tiers (JNE, JNE YES, GoSend), and local e-wallet payments (GoPay, OVO, DANA)
- Journal/blog section with editorial layouts and 6 curated scent family collection pages
- Store locator for 4 physical boutique locations across Jakarta, Surabaya, Bali, and Bandung
Results
- Page count: 5-8 static template pages → 20 fully interactive pages covering the entire shopping journey
- Product discovery: Browse-only → Filter + Scent Finder Quiz + Search + 6 curated collection pages
- Cart persistence: Lost on refresh → Survives browser restarts via Zustand + localStorage
- Animation system: None (static) → 6 reusable motion primitives consistent across all 20 pages
