Theme
Language 中文
← Back to projects

ModBox Modular

Website and operations console for ModBox NWO Inc., a Thunder Bay modular home builder serving Northwestern Ontario and First Nations communities. A factory-first, editorial design built for three very different audiences.

Live · Client Production Solo Engagement · Design + Full-Stack + SEO/GEO
Live site

Context

ModBox NWO Inc. builds complete modular homes in a Thunder Bay factory and trucks them across Northern Ontario, including fly-in First Nations reached only by winter road or barge.

I own the site end to end: the design, the front end, the back end and the search work. It has to speak to three very different visitors at once: a family pricing a home, a First Nations housing office planning teacher housing, and a contractor looking for a factory partner.

Screenshots are taken at 3840×2160, the way the site looks on a 32-inch 4K monitor.

Homepage: real factory footage as the hero, with the company in four numbers underneath.
Homepage: real factory footage as the hero, with the company in four numbers underneath.
Built in Thunder Bay, delivered across the north: every image is the company’s own work.
Built in Thunder Bay, delivered across the north: every image is the company’s own work.
First Nations work gets its own banner-blue chapter on the homepage.
First Nations work gets its own banner-blue chapter on the homepage.

Design philosophy

Show the factory, not stock photography

The company’s strongest argument is that every home is built indoors, in one Thunder Bay facility, then delivered finished. So the design proves it instead of saying it: the homepage opens on footage of the factory floor, and the imagery throughout is the company’s own cranes, trucks, modules and finished buildings.

Built around three audiences

The structure follows the three kinds of visitor. Homebuyers go to Models, a catalogue of wood, light steel and custom systems with product pages, floor plans, spec tables and a 3D model viewer. Communities go to First Nations, where each partner community has its own case study. Commercial clients go to Projects and the custom programs. The six-stage Process page is written for anyone buying modular for the first time.

Calm, editorial, northern

The palette comes from the brand: deep navy and banner blue, set against a warm off-white. Inter carries the interface, with Playfair Display and Newsreader serifs as accents on the company story. Long pages read like a story rather than a brochure. Smooth scrolling, a floating section guide that tracks where you are, and a header that switches between dark and light over photo heroes keep long pages easy to move through. Every layout is tuned from a 320px phone up to a 4K monitor.

Models: three building systems, each with its own catalogue.
Models: three building systems, each with its own catalogue.
Product page: gallery, key specs and a direct path to a consultation.
Product page: gallery, key specs and a direct path to a consultation.
Process: six stages, one at a time, written for first-time buyers.
Process: six stages, one at a time, written for first-time buyers.
Projects: delivered work, led by the First Nations programs.
Projects: delivered work, led by the First Nations programs.
Community page: map, delivery facts and the buildings delivered there.
Community page: map, delivery facts and the buildings delivered there.

Behind the site

  • Leads and analytics. First-party only. Form submissions go to Postgres and to the team’s inboxes, and pageviews are tracked in-house with no Google Analytics.
  • Operations console. Leads, analytics and watermarked quote links live in a private dashboard, written up separately as ModBox Admin.
  • Search and AI visibility. Built in from day one. The site ranks for the questions northern buyers actually ask, and ChatGPT and Gemini cite it when buyers ask who builds modular homes in the region.
Buyer guides: plain answers to the questions people search for.
Buyer guides: plain answers to the questions people search for.

Results

Live at modboxmodular.com and in daily use as the company’s front door. Leads arrive with full context, the team works them in its own console, and the site keeps gaining search and AI visibility.

The lesson I took from it: for a manufacturer, the most persuasive design is evidence. Real footage, real deliveries and real community projects did more than any copy could.

Tech Stack & Links

Site: Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Lenis · Leaflet · model-viewer

Back end: Route Handlers · Resend · PostgreSQL

Live: modboxmodular.com