A product platform that can absorb a 14-model range without a redesign

The problem

A wide product range is a content architecture problem long before it is a design problem. A 55-tonne truck, a 12-metre low-floor city bus and a three-wheeler cargo vehicle share almost no specification fields. A fleet operator comparing two bus variants needs a side-by-side table. A municipal transport authority needs procurement-grade detail. An investor wants the range at a glance.

The default agency answer is to design each model page individually. That works for the first three and becomes unmanageable by the tenth — every new launch means new templates, new code, and a site that drifts visually as different hands touch it. Meanwhile the marketing team cannot ship anything without an engineering ticket.

What we did

We started with the content model rather than the visual design. Working through the existing range, we identified which specification fields were genuinely universal (payload, range, charging), which were category-specific (seating and floor height for buses, axle configuration for trucks), and which were model-specific one-offs.

That produced a schema with three inheritance levels. A new bus variant inherits the bus category template and only needs its own values filled in — the page structure, comparison tables and specification layout all come for free.

On top of that we built a component library: specification tables, comparison modules, gallery blocks, enquiry forms, technology explainers. Each component was built once, tested once, and made available to the content team as a block they assemble rather than a layout they request.

Performance as a budget, not an afterthought

Vehicle marketing is image-heavy, and image-heavy sites are usually slow. We set a performance budget before design started and enforced it in CI — a build that exceeded the budget failed, rather than shipping and getting fixed later.

• Responsive image pipeline with modern formats and correctly-sized variants per breakpoint
• Lazy loading below the fold, with priority hints on the hero image only
• Font subsetting and preload so text renders without a layout shift
• Automated Lighthouse checks in CI against an agreed Core Web Vitals target

Making the range findable

Structured data was built into the component layer rather than added per page, so every model page emits correct product and organisation markup automatically. That matters for search, and increasingly for answer engines that need to parse specifications as facts rather than prose.

• Product schema per model, generated from the same fields that render the page
• Clean URL and internal linking architecture across category and model levels
• Specification content written as retrievable claims, not marketing adjectives
• Three separate enquiry routes — dealership, vendor, general — unified into one tracked flow

Outcome

The marketing team publishes new model pages themselves, in hours rather than sprint cycles. The design stays consistent because consistency is a property of the component library rather than a matter of discipline. And the platform's cost curve flattened — the fifteenth model page costs a fraction of the first.

The structural win: when a range expands, the platform absorbs it. No redesign, no rebuild, no engineering bottleneck between a product launch and its web presence.