Thomas FurlanettoCase study · configuratore visuale
Un selettore interattivo per confrontare materiali, colori e finiture e scegliere il pavimento dello stand con maggiore chiarezza.
La scelta del pavimento di uno stand avveniva consultando campioni e informazioni distribuite. Moquette, PVC e laminati hanno colori, finiture e caratteristiche diverse: senza una vista ordinata, confrontare le alternative e comunicare una scelta precisa richiedeva più passaggi.
Ho trasformato i materiali in un configuratore visuale integrato in walcher.bz. L’utente sceglie la famiglia, cerca un prodotto, confronta i campioni e vede subito colore, nome, codice e caratteristiche. Il PDF aggiornato resta disponibile nello stesso flusso.
Ho progettato e sviluppato personalmente il configuratore: struttura dei contenuti, UX/UI, frontend HTML e CSS, logica JavaScript, manipolazione del DOM, visualizzazione dei materiali, lightbox e generazione dei PDF bilingui.
Un percorso più ordinato dalla scoperta del materiale alla scelta. Clienti e project manager possono confrontare le opzioni nello stesso ambiente, con riferimenti tecnici coerenti e senza passare tra pagine o documenti separati.
Moquette, PVC e laminati sono separati in percorsi chiari ma mantengono la stessa logica di consultazione.
La ricerca filtra i materiali per nome o codice mentre l’utente digita.
Swatch, colori e finiture rendono confrontabili le varianti senza aprire schede separate.
La selezione aggiorna l’anteprima del pavimento per mostrare il materiale nel contesto dello stand.
Codice, nome, specifiche e campione ingrandito restano disponibili dalla stessa vista.
La documentazione DE/IT viene generata o aggiornata a partire dagli stessi materiali del selettore.
03 · Workflow
Moquette, PVC o laminato
Nome, codice o variante
Colore e finitura
Specifiche e anteprima
Scheda pronta da condividere
04 · Data → preview
Ogni voce segue lo stesso modello: categoria, codice, nome, campione, immagine, specifiche e traduzioni. La coerenza dei dati permette di aggiungere nuovi materiali senza ricostruire manualmente l’interfaccia.
05 · Logic & architecture
La logica JavaScript mantiene separati dati, stato e presentazione. Gli eventi dell’interfaccia aggiornano filtri, campione selezionato, dettagli, anteprima e PDF senza ricaricare la pagina. Il DOM viene ricostruito a partire dalla struttura dei materiali, così nuovi prodotti e varianti entrano nello stesso flusso.
Categorie, materiali, varianti e traduzioni seguono uno schema comune e riutilizzabile.
JavaScript conserva categoria, ricerca e campione attivo e sincronizza ogni componente della pagina.
Swatch, schede e dettagli vengono generati dai dati invece di essere duplicati nel markup.
La stessa sorgente alimenta interfaccia, informazioni tecniche e documentazione PDF bilingue.
06 · Stack
Frontend HTML5 e CSS3, JavaScript senza framework, manipolazione del DOM, immagini WebP, lightbox, generazione PDF multilingue e integrazione nella piattaforma WordPress di Walcher.bz.
Walcher Messebau
Un percorso più ordinato dalla scoperta del materiale alla scelta. Clienti e project manager possono confrontare le opzioni nello stesso ambiente, con riferimenti tecnici coerenti e senza passare tra pagine o documenti separati.