Content architecture, Visual system, 3D interaction, Frontend
Outcome
A manufacturer with no active site now has a launched digital presence for sales evaluation.
Key decision
Use a real CAD asset as the hero story instead of a generic industrial catalog.
Trade-off
The 3D interaction differentiates the site but adds performance and maintenance cost.
Next measure
Conversion and qualified-lead data are not yet mature enough to claim business impact.
Context
Decades of manufacturing expertise with no digital presence
Moldsid is a precision injection mold manufacturer with over 40 years of experience. Despite their technical capability, their previous domain had expired and they had no active website. Potential clients—often international buyers—had no way to evaluate their capabilities, services, or quality before starting a conversation.
The goal was to build a digital experience that communicated precision and scale without becoming another generic industrial catalog.
Challenge
Contemporary without losing technical credibility
The visual language needed to feel advanced while remaining direct for an industrial audience. Complex manufacturing services needed clear explanation, contact paths had to stay visible, and the experience had to work across very different devices.
The central tension appeared in the hero: the most expressive differentiator—an interactive 3D product—could also become the most expensive element to render.
Technology needed to explain the product, not compete with it.
Approach
Structure before spectacle
I started with content architecture: capabilities, services, process, evidence, and contact. Industrial references helped establish category expectations and find a clearer way to present technical information.
The structure supports both visitors who need a direct route to a quote and those who need to understand the company before engaging.
Editorial composition using public assets from the launched Moldsid site.
The same visual system reorganized for a smaller viewport.
Key decisions
Turn a physical product into the interface
Show instead of describe
The team chose an interactive 3D model over the initial video direction so visitors could understand how the mold is assembled.
A real CAD-to-web pipeline
The client provided a CAD file in Siemens NX format. I exported it, separated the model into 10 individual parts in Blender, and prepared optimized geometry for Three.js.
Exploded-view storytelling
Model, copy, and background move as independent layers while the exploded view reveals the product progressively. The animation makes visible a complexity that a flat photograph cannot explain.
Expose the trade-off
The 3D experience adds differentiation but comes with a real performance cost, particularly on lower-powered mobile devices. Lighthouse scores: Accessibility 94, Best Practices 100, SEO 92.
The CAD starting point in Siemens NX format; protected technical details are omitted.
The model was separated into 10 parts and organized for web export.
The final web interaction turns technical geometry into an explanation.
Visual system
Expression within known constraints
Wide hierarchy, technical composition, controlled motion, and reusable modules establish the visual direction. Service pages share a common structure while retaining room for their specific processes.
Some client-selected color combinations introduce contrast limitations. The constraint was documented, and functional surfaces remain an area for continued accessibility improvement.
The same visual direction reorganized for desktop and mobile.
Implementation
The browser changed the design
I built the website with React and Next.js, organizing services, capabilities, process, and calls to action as reusable components. I integrated Lenis for smooth scroll and the Three.js sequence for the hero.
Implementation changed spacing, pacing, and model scale from the initial static compositions. The final experience had to respond to actual browser behavior, not just a design frame.
The 40+ years of company history became the narrative anchor: the site emphasizes experience and quality over flash, using the 3D interaction as proof of technical capability rather than decoration.
The hero uses the 3D exploded view as the primary narrative element.
Current result
A published digital foundation for a 40-year-old manufacturer
Moldsid now has a live website that presents its services, capabilities, process, and contact routes through one coherent system. Stakeholders approved the direction and felt it represented the organization more accurately.
The site previously had zero digital presence—no active domain, no way for clients to evaluate them online. The qualitative feedback from stakeholders and early visitors has been positive, but there is not yet enough data to attribute conversions or new leads to the redesign.
Reflection
Ambition creates a technical obligation
→An advanced interaction needs to justify its implementation cost.
→Working with real industrial assets creates a more authentic story than generic media.
→A bold proposal also creates an obligation to optimize and maintain it.
→Stakeholder approval validates direction, not user or business impact.
