Mystic Haven — Demo Boutique E-Commerce Platform
Immersive e-commerce for modern witches & spiritual seekers.
Overview
Industry: Spiritual Retail & Lifestyle E-Commerce
Role: Designer & Developer
Timeline: 2 Weeks
Tech Stack: HTML5, CSS3, Vanilla JavaScript, Custom SVG Icons, LocalStorage, Responsive Design
Mystic Haven is a self-directed demo project exploring how digital design can create an immersive shopping experience for modern witches and spiritual seekers. The challenge was to merge authentic mystical atmosphere with highly functional e-commerce systems, building trust through intention-first navigation, lunar guidance, and ritual education.
Objectives
- Create an authentic mystical atmosphere while maintaining usability and conversion rates.
- Develop intuitive product categories based on magical intention (Protection, Love, Divination, Cleansing).
- Build trust with visitors through educational content and lunar guidance.
- Balance ethereal aesthetics with practical e-commerce functionality.
- Convey energy and ritual purpose of products digitally.
Process
1. Research & Discovery
- Researched witchcraft aesthetics, competing mystical shops, and user behavior.
- Prioritized intention-based categorization over traditional product types.
- Added lunar tracking and ritual education to reinforce authenticity.
- Balanced beginner-friendly content with depth for experienced practitioners.
2. Visual Language & UX Design
- Typography: Cinzel, Cardo, Forum, and Karla for a mix of classical mysticism and modern readability.
- Palette: Custom earthy + celestial tones (#272322, #44468E, #857670, #E6E1D8, #C5A46D).
- Iconography: 23+ custom SVG mystical symbols (moon, tarot, crystals, herbs).
- UX: Purpose-driven navigation, atmospheric imagery, and progressive educational content.
3. Technical Implementation
- Moon Phase Tracker: Real-time lunar data visualization with ritual recommendations.
- Lunar Ritual Calendar: Educational resource with phase-based ritual suggestions.
- Cart System: LocalStorage-powered cart with notifications for persistence and ease of use.
- Atmospheric Animations: Shimmer effects, floating icons, and smooth transitions to enhance immersion.
- Accessibility & Performance: Semantic HTML, ARIA roles, optimized imagery, WCAG 2.1 AA compliance.
Outcome
- Performance: 96 Lighthouse Performance Score (desktop), 0.8s LCP.
- Accessibility: 98% Accessibility Score (WCAG 2.1 AA compliant).
- Conversion Flow: Intention-first navigation that educates while guiding toward purchase.
- Atmosphere: Authentic mystical presence that appeals to practitioners and newcomers alike.
- Trust-Building: Educational commerce model reinforces credibility and deepens engagement.
Key Metrics & Impact
- 96 Lighthouse Performance Score (desktop)
- 0.8s Largest Contentful Paint (LCP)
- 98% Accessibility Score (WCAG 2.1 AA compliant)
Tools & Tech
- HTML5, CSS3, Vanilla JavaScript
- Custom SVG Icon Library (23+ icons)
- Farmsense API (Moon Phase Data)
- LocalStorage (Cart Persistence)
Reflection
Mystic Haven shows how niche e-commerce platforms can go beyond products by offering education, ritual, and atmosphere. Through intentional categorization, immersive lunar guidance, and original mystical design systems, this demo project demonstrates how to build a store that not only sells but enriches the spiritual journey.