The production homepage combines the ‘Not more work’ narrative, navigation, and blue shader scene.
Turning a consulting service into a visible management system
The real task for Demir Works was not to make another corporate website. Manufacturing consulting is often presented through generic efficiency promises, interchangeable dashboard imagery, and service cards disconnected from the actual method. Here, the product was the operating model itself: turn a field signal into the right management question, a decision, an action with a clear owner, and a measurable result. The website had to make that method visible from the first screen.
I built the main narrative around the line: ‘Not more work. Clearer management. Stronger operations.’ It avoids positioning the service as a way to monitor people more closely or produce more reports. Instead, it focuses on seeing the plan–field gap early, separating the true constraint from noise, and clarifying the management decision. Delivery reliability, cost of quality, capacity and flow, and the 90-day transformation program become different applications of one management logic rather than unrelated services.
The production case-study archive uses editorial-scale typography, shared navigation, and a focused entry surface.
Industrial without falling into industrial clichés
The visual system uses near-black surfaces, high-contrast white type, and electric blue only for decision paths, active states, and measurement signals. Switzer and Neue Montreal create a technical but human rhythm between large direct headlines and compact operational labels. Instead of rounded SaaS cards or abstract AI glows, the site uses objects from the manufacturing world: shipping crates, calipers, shift boards, inspection tools, shafts, and bearings.
The imagery is not atmospheric filler. Every object maps to a concept: the packed pallet to delivery reliability, the two production notebooks to the plan–field gap, the bearing to the 90-day implementation program, and the shop-floor observer to the Diagnostic Sprint. A hero shader, word-level scroll reveals, an expanding menu capsule, and route transitions add motion while the hierarchy still works with animation disabled. On smaller screens, the same story becomes denser without losing the main proposition or action.
The production operating-system page brings the three-stage method, industrial imagery, and decision line into one experience.
A three-stage story from field signal to verified transformation
I turned the How We Work page from a standard process timeline into an experience that explains the operating system itself. Diagnosis moves from management interviews, shop-floor observation, and KPI data to an agreed baseline. Decision Rhythm prioritizes by impact, risk, and feasibility, assigning every action a single owner and target date. Verified Transformation brings quick wins, root-cause work, standard work, and KPI cadence together in a 90-day implementation.
The flow is not left as prose. Signal, data, problem, priority, decision, owner, and proof are connected on one management line, while each phase ends with a concrete set of deliverables. The final operations-control scene places OEE, OTIF, PPM, and scrap next to the action owner and field evidence. The site therefore behaves less like a brochure that hides the consulting method and more like a product demo that reveals its decision logic step by step.
The production mobile view rescales the same message, motion language, and brand contrast for a small screen.
Content archive, CMS, and production infrastructure
I built a shared ArchiveBrowser for case studies and the blog, keeping search and filtering consistent. Visitors can search for delivery, quality, OEE, or another operational signal; the category filter opens in the same compact tool surface, and results narrow immediately. Static case studies and new Sanity content merge into one archive, so the publishing team does not need a frontend deployment for every article.
Sanity schemas manage case studies, blog posts, general pages, site settings, and contact submissions as separate content types. Markdown supports GFM tables, Mermaid diagrams, and JSON chart blocks. Dynamic metadata, canonical URLs, robots, sitemap, and structured data keep the search surface current as the archive grows. The contact modal validates need, scale, and notes before writing the submission to the Sanity operations queue.
The platform runs on Next.js 16, React 19, Sanity, GSAP, Framer Motion, and Lenis. I captured the four interface visuals in this case study directly from the live production homepage, case-study archive, and operating-system routes at desktop and mobile viewports. Demir Works is one of my strongest web projects because it brings brand strategy, industrial art direction, interaction design, CMS operations, and production delivery into one coherent system.
