Thirty-nine templates instead of four hundred pages.

A site built one campaign at a time.

ENGIE sells to two audiences that share almost nothing. A household wants a plan and a bill it can understand. A facilities manager wants fire compliance, mechanical servicing, and a tender response by Friday. Both arrived on the same site, and the site had been extended for whichever campaign was running at the time.

The result was a navigation that had stopped describing the business, and a page library where every new offer meant a new bespoke layout for the developers to build from scratch.

Eight sections, three levels deep.

The new structure starts from what a visitor came to do, so a household and a facilities manager separate on the first click instead of competing inside the same menu. Three levels of depth, with a template for each level instead of a layout for each page.

Structure settled before anything was styled.

Every template was wireframed and signed off in grey. It keeps the review on the thing that matters at that stage, which is whether a visitor can find what they came for, and it stops a stakeholder approving a layout because they liked the photograph.

Five templates below, in order of depth. The same modules recur down the set: a summary band, alternating image and text blocks, a card grid, the articles rail, an enquiry band. That repetition is the argument for the component library.

Templates

01Our Services 02Solutions for Territories 03Electrical & Communications 04Better Cities 05Security System Installation

Our Services

Level 1

-

A section landing routes; it does not sell. A summary band and the value propositions, then one card per service area: electrical and communications, AV, mechanical, fire protection. It closes on "Why ENGIE?" because the decision at this depth is whether to keep going, not what to buy.

Solutions for Territories

Level 2

-

The first template that has to argue. Value propositions, then alternating image and text blocks for the narrative, then three solution cards: Better Cities, District Heating and Cooling, Energy Networks. A council reading this is comparing approaches, so the page gives them prose before it gives them a choice.

Electrical & Communications

Level 3

-

Seven sub-services in a three-up grid, from data network cabling to cable assembly. The uneven count is the point: the grid had to hold three, seven or four items without a bespoke layout, which is what made it a template instead of a page.

Better Cities

Level 3

-

A solution page rather than a service list. Summary, two alternating narrative blocks, the articles rail, then the enquiry band. Same parts as the Territories template, fewer of them, because a visitor this deep has already chosen.

Security System Installation

Level 4

-

The deepest template, and the only one with a call to action in the hero. Three narrative blocks, testimonials, then the contact form. At this depth the visitor knows what they want, so the page stops explaining and starts collecting.

The same skeleton, three depths.

Three levels of the Solutions branch, resolved. Each page is the wireframe filled in with ENGIE's photography and the brand blue, and each one carries the same parts in the same order: hero, a four-item value strip, a card set, then whatever that level owes the visitor. What changes with depth is the ending. A section landing hands off to the next level; a solution page ends in the enquiry form.

Pages

01Homepage 02Our Solutions 03Solutions for Territories

Homepage

Level 1

First screen, phone

Hero, a four-item value strip carrying the numbers that matter to a commercial buyer, a guided tour prompt, trusted partners, then the three Solutions cards, projects and client testimonials. It sends a visitor onward in the first screen instead of trying to sell from the homepage.

Our Solutions

Level 1

First screen, phone

The same skeleton at the shortest length in the set. Hero, value strip, three audience cards splitting territories, businesses and consumers, then one "Why ENGIE?" block. This is the page that separates a household from a facilities manager, and the whole job is done above the footer.

Solutions for Territories

Level 2

First screen, phone

The longest page, and the one that earns its length. Three solution cards, three alternating narrative blocks, a paginated projects rail, then a full enquiry form with the enquiry type as radio buttons, so a routed lead arrives already categorised.

A library, so a launch is an assembly job.

Thirty-nine templates only stay maintainable if they are built from shared parts. The component library covers navigation, hero and banner types, card and listing patterns, forms, tables and the footer, each defined at both breakpoints so a mobile layout is a designed state and not a squeezed desktop.

A site the marketing team can run.

The work shipped as an architecture, a template set and a component library, handed to the development team as specifications they built against. The measure of it is that a new ENGIE offer no longer needs a designer to reach the web.