ES Solutions Street Furniture: bespoke notice board configurator

ES Solutions Street Furniture make bespoke products for councils, landscape architects, facility managers and urban planners. Their notice board range is a customer-design service: clients spec their own board from a wide set of options, then request a quote. The brief was to give that service a proper online configurator, with a visual preview that builds up as choices are made and a spec output the ES Solutions sales team can quote against.

The flow looks linear but isn’t. Notice boards have a wide option space (size, mounting style, post and header style, opening type, illumination, colour, decorative additions, lock type, and more), and many options branch: not all header styles allow all custom header options, certain mounting styles rule out certain post types, and so on. Each option also needed its own thumbnail. The configurator had to walk users through that branching space without trapping them in dead ends.

Three engineering pieces had to work together. First, a live preview composited from up to three layered images per choice, staying in sync as the user moves forward or back through the flow. Second, a constraint on who edits this: the entire flow graph (steps, options, layer images, branching rules, conditionals) had to live in WordPress and be editable by both Williams & Crosby and the client, without anyone touching code. Third, and the trickiest part of the whole build: a summary screen at the end where the user can change any choice already made. Doing that means re-walking the graph, recalculating which options downstream are still valid, and updating the preview without losing the legal choices the user wants to keep.

The data model lives entirely in ACF Pro, with steps and options stored as nested fields. Each step holds its options, the layer images that build up the preview, a ‘next step’ pointer for branching, and visibility rules for conditionals. That’s the entire flow graph, editable by Williams & Crosby and ES Solutions through the WordPress admin without any developer involvement.

The front end is Vue 3, mounted onto a standard WordPress page template, with the ACF data rendered into the page on load. The live preview is a stack of layered PNGs that recomposes as choices change. The custom RAL picker is a Vue overlay built into the same app, with the full RAL Classic palette available. The whole thing, including the preview and the RAL overlay, is fully responsive.

PDFs are generated client-side using html2canvas and jsPDF. Two routes out: a ‘download as PDF’ button saves locally, and the quote-request flow generates the PDF, uploads it to WordPress, and hands the resulting URL to a Contact Form 7 submission alongside the configured spec. The site currently runs as ‘WooCommerce-as-quote’ (products in the catalogue, no real checkout), so the configurator deliberately bypasses WooCommerce and routes the enquiry through CF7. The architecture is set up to flip to a full WooCommerce checkout when the client is ready.

Shipped July 2025, still in production. The configurator covers the full bespoke notice board range, and Williams & Crosby and ES Solutions can extend or modify the flow themselves through ACF.

One honest reflection. A branching graph this size is close to the sensible limit of what you’d want to express as nested ACF repeaters. It works well in production, and the client can edit it without a developer. But if I were starting fresh knowing how big the flow graph would get, I’d at least weigh up a proper schema-backed model from the off. Easier to reason about, and easier to evolve.