Thomas FurlanettoCase study · visual configurator
An interactive selector for comparing materials, colours and finishes and choosing an exhibition-stand floor with greater clarity.
Choosing an exhibition-stand floor meant working with samples and information spread across different places. Carpet, PVC and laminate have different colours, finishes and properties; without an ordered view, comparing options and communicating a precise choice required extra steps.
I turned the materials into a visual configurator inside walcher.bz. Users choose the family, search for a product, compare samples and immediately see its colour, name, code and properties. The updated PDF remains available in the same flow.
I personally designed and developed the configurator: content structure, UX/UI, HTML and CSS frontend, JavaScript logic, DOM manipulation, material presentation, lightbox and bilingual PDF generation.
A more ordered path from discovering a material to selecting it. Clients and project managers can compare options in one environment with consistent technical references, without moving between separate pages and documents.
Carpet, PVC and laminate are clearly separated while sharing the same browsing logic.
The search filters materials by name or code as the user types.
Swatches, colours and finishes make variants directly comparable.
Selecting a sample updates the floor preview in the context of the stand.
Code, name, specifications and enlarged sample remain available in the same view.
DE/IT documentation is generated or updated from the same materials used by the selector.
03 · Workflow
Carpet, PVC or laminate
Name, code or variant
Colour and finish
Specifications and preview
Overview ready to share
04 · Data → preview
Every entry follows the same model: category, code, name, sample, image, specifications and translations. Consistent data lets new materials be added without manually rebuilding the interface.
05 · Logic & architecture
The JavaScript logic separates data, state and presentation. Interface events update filters, the selected sample, details, preview and PDF without reloading the page. The DOM is rebuilt from the material structure, so new products and variants enter the same flow.
Categories, materials, variants and translations share one reusable schema.
JavaScript keeps the category, search and active sample and synchronises every component.
Swatches, cards and details are generated from data instead of being duplicated in markup.
The same source feeds the interface, technical information and bilingual PDF documentation.
06 · Stack
HTML5 and CSS3 frontend, framework-free JavaScript, DOM manipulation, WebP imagery, lightbox, multilingual PDF generation and integration into the Walcher.bz WordPress platform.
Walcher Messebau
A more ordered path from discovering a material to selecting it. Clients and project managers can compare options in one environment with consistent technical references, without moving between separate pages and documents.