Lucian Light: WordPress to Next.js & Payload CMS | FocusReactive

Challenge

Lucian Light, a wholesale building materials provider, was constrained by a legacy WordPress and PHP architecture. The outdated setup was increasingly difficult to maintain, suffered from poor mobile usability, and lacked the technical foundation required for modern SEO discoverability.

As a B2B business, Lucian Light didn't need a traditional, bloated B2C e-commerce engine with credit card checkouts. Instead, they required a highly structured digital catalog capable of handling complex product relationships—categories, brands, finishes, and deep technical specifications. Their customers needed a fast, intuitive way to filter products and submit bulk inquiries.

The challenge was to engineer a scalable, easily manageable content and product platform from scratch that would deliver a seamless "cart-like" inquiry experience, without forcing the client into the operational complexity and high costs of a standard enterprise e-commerce platform.

Solution

We migrated Lucian Light to a modern headless stack using Next.js v15 (App Router) and Payload CMS, delivering a highly performant, SEO-first platform explicitly tailored to their B2B operational model.

Scalable Product Architecture: We configured Payload CMS (backed by MongoDB) to handle complex, heavily structured data. The system effortlessly manages 100+ products with full variant support, automatically generating specific page layouts based on the assigned brand.

Custom B2B Inquiry Workflow: Rather than shoehorning a traditional e-commerce checkout, we built a streamlined, "cart-like" inquiry flow. Users can seamlessly compile a list of products, submit inquiries via forms, and generate downloadable PDF quotes. This approach perfectly matches the client's business model while keeping the infrastructure lean.

Advanced, Lightning-Fast Filtering: We enginered a robust filtering system that allows users to navigate the extensive catalog by category, brand, finish, and technical parameters. The UI is completely mobile-first, featuring touch-optimized product cards and intuitive drawer-based filters.

Empowered Editorial UX: We provided the marketing team with 14 customizable content blocks and a built-in Live Preview within Payload CMS, enabling safe, visual, and on-the-fly content updates.

Technical SEO & Performance by Default: The new platform utilizes server-side rendering, automatic sitemap generation, and advanced image optimization, achieving excellent Core Web Vitals scores and significantly boosting organic discoverability.

Projects in Numbers

100+

products with full variant support

150+

pages migrated and rebuilt

14

customizable content blocks

1

custom product inquiry workflow replacing traditional eCommerce

Project Tech Stack

Payload CMS

Modern self-hosted headless CMS built with TypeScript and Node.js, offering full control over data structure, API, and business logic.

Next.JS

React framework for building fast, SEO-friendly web applications with server-side rendering and static site generation.

Vercel

A cloud platform for hosting and deploying frontend applications, built to work seamlessly with Next.js and modern frameworks.

Tailwind

A utility-first CSS framework that lets you build custom user interfaces directly in HTML or JSX by composing small, reusable utility classes instead of writing traditional CSS.

MongoDB

An open-source, document-oriented NoSQL database that stores data in flexible JSON-like documents (BSON) instead of traditional tables, allowing for dynamic schemas that change as your application evolves.

How we work

Governed and Scalable, by Design

We design content models, editorial workflows, and governance into the architecture from day one to make your Information Architecture clean and usable as your team, markets, and channels grow.

Editorial UX boosts your marketing team's speed and freedom. They can build pages, launch campaigns, and manage content without needing developer help.

Performance & AI SEO by Default

Each project includes a complete SEO + LLM optimization. Performance baseline as standard: Core Web Vitals, structured data, rendering strategy, and AI SEO setup.

Scalable Next.js architecture derived from 7+ years of experience.

Already live? Our Next.js SEO audit gives you an actionable, dev-ready assessment of where you stand.

Predictable & Efficient Delivery

90% of our projects fit the initial budget. That comes from the time we invest upfront — understanding exactly what we're building before a single line of code is written.

Our CMS Kit has page builders, navigation, localization, content models, and SEO settings. It boosts every engagement. Plus, it won’t limit your choices. It's a smart starter refined across dozens of production deployments, not a constraint.