Forged by
fire
Project overview
Forged From Fire is an immersive storytelling project that brings the ancient art of Wootz steel knife-making to life through modern UX design. We treated the website as a living narrative – a cinematic experience that connects users emotionally with the craft, not just as an informational archive. The design blends rich media (3D models, video interviews, sound, and animations) to evoke the heat, rhythm, and artistry of the forge. In line with best practices, our goal was to “evoke emotions, convey heritage, and highlight craftsmanship” through narrative, following Deloitte Digital’s advice that such storytelling creates “personal and unforgettable” experiences . We used a multi-sensory approach (visuals, sound, motion) to immerse users in the forging process . In short, Forged From Fire is a digital tribute that honors the dying Wootz tradition by making users feel the craft in a modern, interactive way .
Problem Statement
Existing sites about crafts and bladesmithing were found to be informative but not engaging. They often focus on sales or static information, leaving out the story and sensory experience of the craft. This gap was our starting point:
- Lack of Interactivity & Narrative: Most craft sites present information statically (plain text or images). Research shows static pages feel “dull” and fail to guide attention, whereas scroll-driven animations and interactive elements can transform browsing into an engaging journey .
- Absence of Emotional Storytelling: Without narrative and sensory cues, young users drift away. In contrast, UX research emphasizes that stories which connect with emotions and heritage drive engagement and buy-in .
- Overly Technical, Text-Heavy Layouts: Dense text and poor hierarchy can alienate modern audiences. Users today expect fluid, intuitive experiences for example, interactive content has been shown to capture attention 50% longer than static content .
- Poor Mobile Experience & Hierarchy: Any lag or clutter on mobile loses users; notably, over 50% of mobile visitors abandon pages that take longer than 3 seconds to load . Our audit flagged weak responsive design and visual prioritization.
Opportunity: We saw a chance to create a digital tribute to craftsmanship, merging storytelling and technology. By designing an immersive web experience (cinematic visuals, parallax scroll, 3D interactivity), we could let users “feel the heat” of the forge. In doing so, we aimed to preserve Wootz forging as a living narrative, not just an archival record .
Goals & Objectives
- Immersive Storytelling: Design a scroll-based, narrative UX that walks users through the full Wootz forging journey.
- Media Integration: Seamlessly blend 3D modeling, video, sound, and photography into one cohesive user experience.
- Digital Preservation: Use modern tools to document and preserve the ancient craft of knife-making.
- Accessibility & Responsiveness: Build a responsive site optimized for performance and accessibility (captions, alt text, motion toggles) so it educates, moves, and inspires any visitor.
These goals align with UX best practices. For example, we knew from UX research that meaningful animation and narrative can guide attention and engage users step-by-step .
Research & Discovery
- Literature & Benchmark Review: We surveyed digital heritage and storytelling initiatives (e.g. the Mingei Project) and benchmarked exemplary storytelling sites (Atmos by Leeroy, Digital Cover, 35mm One). These case studies reinforced our direction: using a dark, cinematic UI with scroll-triggered visuals for dramatic effect . We also noted that advanced interactive storytelling in cultural heritage yields unique immersive experiences of historical crafts and spaces . Such research validated our approach of combining narrative with interactive tech to bring a craft to life.
- Primary Research (Interviews): We interviewed master bladesmith Andrei Petrocenco to understand the craft deeply. He revealed a 9-step Wootz forging process and rich philosophies (“the knife chooses the user”), highlighting the emotional bond between maker and metal. These insights shaped our narrative, ensuring authenticity.
- User Surveys: We surveyed craft and DIY communities (35+ respondents) to understand preferences. Key insights:
- Users showed high engagement with video and interactive 3D content.
- A clear preference for scroll-based storytelling over traditional menu-driven navigation.
- Strong emotional response to authentic, cinematic presentations of craft.
These findings align with industry data: interactive web content can boost engagement significantly , and scroll-driven animations guide attention to key details . In essence, users wanted to “experience” the craft, not just read about it.
Primary Persona
Zoë Martins, age 25 (Graphic Designer / DIY hobbyist), exemplifies our target user: visually oriented, curious about craftsmanship, but bored by static technical tutorials. Her goals and pains (e.g. “I want to feel the craft, not just read about it”) guided our UX choices – keeping the experience engaging, intuitive, and emotional.
Information Architecture
The site was structured as a linear narrative flow following the forge process chronologically. Key sections:
- Home: Cinematic hero video and intro tagline.
- The Process: The core scroll-triggered journey through each forging step (3D models and video).
- Gallery: High-resolution visuals of finished blades and behind-the-scenes.
- About Andrei: Documentary-style interview video.
- Blog: Articles linking design, steel, and craft.
- Creators: Background on the artisan and academic sources.
- Contact: Community and collaboration outreach.
This sitemap ensured a logical user journey through the craft, with minimal menu friction. By chunking content into these focused sections, we kept the story digestible and immersive .
Design Approach
Visual Direction
We drew direct inspiration from fire, metal, and memory. A dark, moody palette (charcoal black and steel blue) served as the backdrop, punctuated by ember orange accents (e.g. #FF8C00) to evoke glowing coals. This high-contrast scheme reflects the forge atmosphere and draws users into the content. In UX terms, we treated every page as a cinematic “scene” – heavy on visuals and ambient sound – following luxury storytelling principles that advocate multi-sensory, visual narratives to create immersive experiences .
Our visual system included:
- Color: Charcoal black (#171717) and off-white (#FFF2E4) for text, offset by ember orange and steel blue highlights.
- Typography: Clean, technical fonts (Alumni Sans) for body text, with a distinctive display face (Ethnocentric) for cinematic titles.
- UI Motifs: Smooth parallax scroll, subtle motion-triggered reveals (text fading in, elements sliding) and 3D model hover states. These small motions serve a purpose – to guide focus and reinforce the story – not just decoration .
Wireframing & Layout
We translated initial sketches into digital wireframes (Figma) that prioritized the forging story. Navigation was kept minimal to encourage linear exploration. We adopted a mobile-first mindset, ensuring all animations and media were optimized for phones early on. This was crucial given industry data: slow, janky mobile pages lose over half of potential users . By testing performance early, we focused on lean layouts and efficient assets.
3D Modeling & Animation
We created five realistic 3D knife models (Butcher, Chef’s, Folding, Peeling, Steak) in Blender, using UV-unwrapping and texture baking from real metal references. These models were exported for web interactivity. Each blade could rotate 360° and even be “thrown” in a simple mini-game giving users a tactile sense of the craft. This approach follows UX trends: 3D product models allow users to inspect items as they would in a physical store , enhancing engagement and memorability. Subtle animations (like a knife dropping or spinning) enrich the storytelling by showing the blades in motion.
Motion Design
We integrated GSAP and its ScrollTrigger plugin for scroll-synced animations. For example, as the user scrolls through The Process, videos scrub in sync with scroll speed to simulate the forge’s rhythm (hammer strikes, glowing metal). Parallax effects and Lottie-based spark/ember animations punctuate transitions. Importantly, we designed motion with purpose, following best-practice advice: “Don’t animate just to animate. Use motion to highlight information, draw focus, or evoke emotion” . Users can also toggle reduced-motion for accessibility. Each animation – from a text fade-in to a parallax shift – was there to enrich the narrative without overwhelming the user.
Interactivity & Development
We built the site on WordPress with Elementor Pro, supplemented by custom code (HTML/CSS/JS). Key tech and tools: Spline for embedded 3D scenes, ScrollTrigger (GSAP) and Lenis for smooth scrolling, jQuery, and libraries like Lottie for vector animations.
Core features:
- Scroll-triggered storytelling: Each scroll feels like a page turn, revealing the next forging step through layered animations .
- 3D Model Interactivity: Users can rotate blade models freely and trigger a “throwing” animation, making the craft feel hands-on.
- Responsive Design: Layouts and animations adapt gracefully to all screen sizes. We optimized all media and used lazy-loading to keep performance high (critical since 53% of users leave slow sites ).
- Accessibility: Captions for all videos, descriptive alt text for images/3D models, keyboard navigation, and motion-reduction toggles. As industry guidelines stress, interactive elements must be keyboard-navigable and have alt-text so the ~22% of users with disabilities can experience the content
Final Logo Design
Prototype
Usability Testing
We conducted usability tests with 10 volunteer users and solicited feedback from online craft communities.
- Positive: Participants consistently praised the “cinematic” scroll flow and the tangible feel of the 3D models. They reported that the animations “felt natural” and that the interactive blades sparked curiosity. The emotional voiceover narrations deepened users’ connection to the material. These reactions confirmed our hypothesis that a story-driven, multimedia experience would engage audiences far more than a static page .
- Improvements: A few users noted minor scroll lag on older mobile devices and suggested even smoother transitions. Some also wanted clearer calls-to-action between sections. We responded by optimizing asset loading and tweaking animation timing (slightly slower fades). This was important because research shows that users abandon sites quickly if performance is poor .
Overall, the feedback validated our approach: storytelling and interactivity significantly enhanced engagement, while iterative fixes improved usability on all devices.
oUtcome & impact
Forged From Fire achieved a seamless blend of heritage and technology in a web format. The final site delivers a cohesive, emotionally rich narrative: users move through a realistic forge, witnessing the making of a blade step-by-step. Key results:
- Immersive Experience: By unifying 3D visuals, video, and smooth scroll animations, the site feels like a guided tour of a forge rather than a typical website. Interactive elements (blade rotation, parallax sparks, sound of hammering) hold attention much longer than text alone .
- Community Response: Craft and design communities responded positively, noting that the site “brings the craft to life.” Many users expressed newfound respect for Wootz forging, evidencing that the site preserved cultural knowledge in a compelling way.
- Tech Validation: The project served as a proof-of-concept for using modern web tech (GSAP, WebGL, AR) in heritage education. It showed that complex physical processes can be made accessible through careful UX design.
In essence, Forged From Fire redefines heritage preservation for the digital age. Rather than a static archive, it treats craftsmanship as a living story. By applying principles of interactive design, we’ve demonstrated that even a centuries-old artisanal process can be dynamically conveyed online .
Watch Some videos created for the site
Reflection & learning
This project taught us that translating a physical craft into digital form requires an experiential mindset. It’s not enough to simply present a process; the UI/UX must evoke the experience. We found that motion design and multimedia were key: carefully timed animations and video helped users grasp complex forging actions and kept them emotionally invested. As the UX community advises, animation should enhance, not overwhelm . By iterating based on user feedback, we balanced visual flair with readability.
Moving forward, we plan to build on these foundations: for example, developing a fully interactive 3D “Build Your Knife” configurator would let users learn by doing, and an AR workshop demo could literally bring the forge into the user’s space. Collaborations with museums and schools could further extend the project’s impact, using technology to keep traditional craftsmanship alive. As one heuristic puts it, every design choice from scroll interactions to color accents was made to tell a story. When done right, our website “won’t just inform it’ll move your users, both visually and emotionally” .
Sources: We grounded our design decisions in UX research and case studies. For example, Nielsen Norman Group emphasizes that effective storytelling connects users and products . Industry articles confirm that interactive 3D content dramatically boosts engagement . Academic studies of digital heritage also show that merging narrative with technology creates unique, immersive learning experiences . These insights helped shape Forged From Fire into a robust, user-centered solution. Each reference above informs how our design choices address the identified problems and goals.
