# Proposta UX — Nuovo configuratore Krossing **Cliente:** Kriptonite **Prodotto:** Krossing, sistema modulare a parete (versioni Regular e Custom) **Documento preparato da:** Palazzina Creativa **Data:** maggio 2026 ## Sommario esecutivo Questo documento propone un ripensamento integrale dell'esperienza di configurazione di Krossing. La direzione è guidata da un principio chiaro: il configuratore deve adattarsi al modo in cui l'utente immagina la libreria, non imporre una sequenza di passi rigidi. Sono stati realizzati cinque prototipi interattivi che hanno validato progressivamente l'interaction model proposto, dalla griglia base fino alla vista 3D rotabile con finiture reali e cancellazione individuale di piani e tubetti. La sintesi finale è il configuratore consegnato (`index.html`) che integra tutte le funzionalità e aggiunge il selettore tra le tre varianti di catalogo Kriptonite: **Krossing**, **Krossing Midi**, **Krossing Maxi**. Il configuratore è **giocabile nel browser** all'indirizzo del deploy Netlify. ## Contesto e problema Krossing è una libreria modulare costruita con piani in alluminio e tubetti verticali che si combinano in blocchi quadrati. Esistono due versioni: Regular (struttura standard rettangolare) e Custom (adattabile a pareti irregolari, nicchie, sotto-scala). Il prodotto offre enorme libertà compositiva — ma proprio questa libertà rende difficile progettare un configuratore che sia al tempo stesso potente e immediato. I configuratori di librerie modulari più diffusi sul mercato cadono in due trappole opposte: o sono **troppo rigidi** (impongono blocchi pre-confezionati che limitano le combinazioni), oppure sono **troppo aperti** (lasciano l'utente solo davanti a una griglia vuota senza guida). Krossing merita un'esperienza che eviti entrambi gli estremi. ## Principio guida — non scegliere mai una direzione Il quesito di partenza era: "lasciamo che l'utente inizi a costruire la libreria dall'alto o dal basso?" La risposta progettuale è: **non chiediamo mai**. Krossing è fissato a parete, quindi "sopra/sotto" non è un vincolo strutturale ma una preferenza visiva dell'utente. Chi pensa "voglio una libreria da terra a soffitto" parte naturalmente dal basso. Chi pensa "voglio una mensola sospesa sopra il divano" parte da metà parete. Forzare un punto d'ancoraggio fa sbagliare entrambi. La soluzione adottata in tutti e cinque i prototipi è una **canvas con griglia libera** in cui l'utente clicca o trascina dove vuole, con preset di partenza che esprimono un **intento** (colonna, riga, 2×2, parete intera) invece di una coordinata. Le linee guida di pavimento e altezza occhi sono **opzionali e disattivate di default**: anchorage fisico per chi lo vuole, libertà esplorativa per chi preferisce. Questo è il fondamento UX su cui poggia tutto il resto. ## Le tre varianti di catalogo Il configuratore consegnato gestisce tutte e tre le varianti del catalogo Krossing — Regular (chiamato semplicemente Krossing), Midi e Maxi — esposte come prima scelta dell'utente, in posizione visivamente prominente sopra a tutti gli altri controlli. | | Krossing | Krossing Midi | Krossing Maxi | |---|---|---|---| | Modulo | 33×33 cm | 41×41 cm | 48×48 cm | | Profondità ripiano | 15 cm | 20 cm | 25 cm | | Diametro tubetto | Ø 6 mm | Ø 8 mm | Ø 10 mm | | Portata per ripiano | 5 kg | 10 kg | 25 kg | | Sistema | Solo parete | Parete o terra | Terra (con base) | Il cambio di modello aggiorna in tempo reale tutte le metriche derivate: dimensioni in centimetri (un modulo Maxi mostra ingombri molto diversi dallo stesso layout in Krossing), portata massima per ripiano, prezzo stimato, e la geometria della vista 3D (profondità del ripiano e diametro dei cilindri dei tubetti scalano proporzionalmente). **Decisione di design chiave:** posizionare la scelta del modello *prima* di tutto il resto, come prima decisione di acquisto. È la decisione che cambia di più la natura del prodotto (capacità di carico, dimensioni minime di parete utilizzabili, costo). Tutti gli altri controlli — scenario parete, blocchi, finitura — vengono dopo. Questa gerarchia visiva guida l'utente nel giusto ordine senza imporre wizard sequenziali. In produzione il selettore di modello potrà essere arricchito con un breve rationale per ciascun modello ("Per piccoli oggetti e libri leggeri", "Per librerie classiche", "Per carichi pesanti e mobili a terra") oppure con una pagina di selezione preliminare con foto in contesto. ## I cinque prototipi iterativi I cinque prototipi qui descritti sono stati realizzati come tappe di validazione del modello d'interazione e sono confluiti nel configuratore finale (`index.html`). Sono documentati per tracciabilità del processo di design. ### v1 — Griglia base e click-to-toggle Il modello mentale base. Una griglia di 12×7 celle quadrate, click per aggiungere o rimuovere un blocco, cinque preset di partenza per iniziare velocemente. Hover su un blocco esistente che evidenzia le celle adiacenti valide come suggerimento di estensione. Funziona come "graph paper" digitale: la griglia è sempre visibile (tratteggiata leggera), i blocchi si posizionano cliccando, niente è imposto. Il counter di blocchi, piani, tubetti e prezzo si aggiorna in tempo reale, trasformando il "gioco" in "progetto". **Decisione di design chiave:** evitare wizard a passi sequenziali. L'utente vede subito tutto e può esplorare in qualsiasi ordine. La griglia infinita è il vero canvas. ### v2 — Parete custom con ostacoli Estende v1 introducendo il concetto di **forma della parete**, che è il vero differenziatore competitivo del Krossing Custom. Quattro scenari pre-configurati mostrano la varietà: parete piana, nicchia di 6 colonne, parete con finestra (3×2 al centro) e presa elettrica, parete sotto-scala con perimetro diagonale. In modalità Edita parete, quattro pennelli permettono di ridisegnare la zona muraria o segnare ostacoli: muro, vuoto, finestra, presa. La logica di posizionamento dei blocchi rispetta automaticamente l'area utile e gli ostacoli, anche per i preset (es. il preset "Riempi parete" salta automaticamente le finestre e le aree non muro). **Decisione di design chiave:** separare cognitivamente "definire il vincolo" (parete) dal "riempire il vincolo" (blocchi). Sono due attività diverse e meritano due modalità distinte, ma sempre visibili sulla stessa canvas — niente wizard, niente cambio di pagina. L'utente passa avanti e indietro liberamente. ### v3 — Drag-to-extend L'interaction model si fa adulto. Mantieni premuto il pulsante del mouse e trascina: ogni cella attraversata dal cursore viene dipinta. La cella di partenza determina la direzione (se vuota, si dipinge in modalità "aggiungi"; se piena, in modalità "cancella"). Stessa logica in modalità Edita parete con il pennello attivo. Aggiunge anche feedback fini: cursore "puntatore" su cella vuota valida, "crosshair" in modalità muro, "vietato" sopra ostacoli; hover su blocco esistente che si tinge di rosso (azione = rimuovi) e adiacenti che si tingono di blu chiaro (estensione possibile). **Decisione di design chiave:** ogni drag — anche di 10 celle in fila — è un singolo passo di undo. Questo è comportamento standard nei tool di design seri (Figma, Photoshop) e cambia radicalmente la velocità d'iterazione. ### v4 — Vista 3D rotabile Toggle 2D/3D nella toolbar. Tutto lo stato è condiviso: qualunque modifica fatta in 2D si riflette istantaneamente nella scena 3D, e viceversa. La scena Three.js mostra ogni blocco con i piani come ripiani orizzontali e i tubetti come cilindri verticali, contro una parete e un pavimento di riferimento semi-trasparenti per dare anchoring spaziale. L'orbit camera supporta drag per ruotare (yaw + pitch limitato a ±60°), rotella per zoom (range 6-40 unità), touch per tablet. Niente animazioni di transizione tra 2D e 3D: nelle iterazioni rapide diventerebbero fastidiose. **Decisione di design chiave:** il 3D è preview-only, non editor. Tutta la modifica avviene in 2D. Forzare l'editing 3D aggiunge complessità implementativa enorme (raycasting, gestione camera durante l'edit) per un beneficio marginale — i migliori configuratori sul mercato (IKEA, USM, Tylko) mantengono il 3D come preview. ### v5 — Finiture e cancellazione individuale L'ultima iterazione introduce due feature richieste esplicitamente: **selettore di finiture** (5 preset Krossing-like: bianco, nero, industriale, noce, rovere) e **cancellazione individuale** di singoli piani o tubetti, indipendentemente dai blocchi. Le finiture si applicano sia alle linee in 2D che alle superfici materiali in 3D. La cancellazione individuale funziona per hit-test di prossimità: avvicinare il cursore a un piano o tubetto lo evidenzia in rosso (rimozione) o verde (ripristino se è già ghost), un click attiva l'azione. Le linee rimosse appaiono come tratteggi grigi sottili per ricordare che sono in stato "preferenza" e possono essere ripristinate. I contatori in basso riflettono i pezzi effettivamente presenti, quindi il prezzo stimato si abbassa quando si rimuovono pezzi: feedback importante sul valore della semplificazione strutturale. **Decisione di design chiave:** la cancellazione individuale apre un problema strutturale (alcune configurazioni risultanti potrebbero non essere realizzabili, es. un blocco con tutti i tubetti rimossi). Nel prototipo è lasciata libera per favorire l'esplorazione. In produzione serve un sistema di validazione real-time con un badge "configurazione non valida" e suggerimenti di correzione — argomento da chiarire con Kriptonite caso per caso. ## Reference design I prototipi traggono ispirazione da tre famiglie di configuratori, ciascuna per aspetti diversi. USM Haller resta il **gold standard** per la struttura a celle quadrate condivise. La sua griglia rigorosa, il feedback di prezzo in tempo reale e l'eleganza minimale dell'editor sono il riferimento principale per Krossing Regular. String Furniture eccelle nella gestione di **pannelli verticali e ripiani**, una struttura concettualmente vicina a tubetti e piani. Il loro approccio a moduli combinabili in colonne è particolarmente utile per pensare ai preset di partenza. Tylko ha il miglior **feedback parametrico** in tempo reale e la sensazione di "scolpire" la libreria mentre la si configura. Il loro 3D è incorporato nell'editor, ma le iterazioni più veloci avvengono in vista 2D — conferma della nostra scelta di separare i due piani. ## Cosa manca per la produzione Il prototipo copre tutti gli **interaction model chiave**. Per arrivare a una versione di produzione utilizzabile da clienti reali servono ulteriori sviluppi, organizzati per priorità di impatto. ### Priorità alta — necessari per il lancio **Input numerico delle misure reali della parete.** Oggi nel prototipo l'utente disegna la parete in celle. In produzione deve poter inserire le misure in centimetri della parete reale (eventualmente importando da una foto con misurazione manuale) e ottenere la griglia adattata. Lo snap continuo (non più a celle fisse di 32 cm) richiede un ripensamento dell'engine. **Layout a tre colonne.** I prototipi hanno toolbar orizzontali sopra al canvas che funzionano bene per la demo ma diventano stretti con molte opzioni. Il layout di produzione classico è sidebar sinistra (scenari, finiture, preset), canvas centrale grande, sidebar destra (dettagli, prezzo, CTA "Richiedi preventivo" o "Aggiungi al carrello"). **Validazione strutturale real-time.** Necessaria soprattutto in combinazione con la cancellazione individuale di piani e tubetti. Un badge "configurazione non valida" con descrizione del problema ("blocco isolato senza supporti", "tubetto verticale senza piani adiacenti") e suggerimenti di correzione. Da definire insieme a Kriptonite quali configurazioni sono effettivamente realizzabili. **Prezzi reali Kriptonite.** I prezzi stimati nei prototipi sono placeholder (8€ per piano, 5€ per tubetto). In produzione serve collegare il catalogo reale, considerando le variazioni di prezzo per finitura, eventuali sconti per quantità, accessori opzionali. **Mobile-first ottimizzato.** I prototipi hanno supporto touch base ma non sono progettati per mobile. Una percentuale significativa degli utenti configura mentre è seduta sul divano a guardare la parete vuota: l'esperienza mobile deve essere prima classe, con gesture pinch-to-zoom, long-press per azioni secondarie, panel collapsibili. ### Priorità media — esperienza migliorata **Disaccoppiamento finiture.** Oggi le finiture sono 5 preset combinati (tubetto + piano). In produzione l'utente probabilmente vorrà combinare liberamente: 5-6 colori alluminio per i tubetti e separatamente diversi materiali per i piani (alluminio, vari legni, finiture cucina come il piano fresato porta-bicchieri menzionato sul sito Kriptonite). Questo richiede più spazio UI, tipicamente in un panel laterale. **Vista 3D più rifinita.** Aggiungere ombre proiettate (i blocchi che proiettano ombra sul pavimento aiutano la percezione di profondità), un selettore di ambiente con riferimenti umani in scala (silhouette di una persona, un divano), capacità di esportare uno screenshot della vista corrente in PNG. **Salva, condividi e itera.** Salvare una configurazione genera un link condivisibile (utile per coinvolgere il partner, l'architetto, il rivenditore). Lista delle configurazioni salvate, possibilità di clonare una configurazione per crearne varianti. **Upload foto della parete.** L'utente carica una foto della parete reale, indica le misure approssimative (alto e largo), e la usa come sfondo della canvas 2D per progettare visivamente sulla parete vera. Funzionalità ad alto impatto emotivo che sposta la percezione del configuratore da "tool" a "esperienza". ### Priorità bassa — refinements Tutorial interattivo al primo accesso (3-4 step di onboarding); modalità "ispirazioni" che precarica configurazioni esemplari realizzate da designer Kriptonite; integrazione con il CRM per richiedere preventivi diretti; export PDF della configurazione con schede tecniche da portare in negozio. ## Stima di sforzo Le stime sono in week di sviluppo, indicativi per scenario di lavoro ad alta densità con un team di 2 persone (1 frontend + 1 designer). **Fase 1 — MVP produzione (8-10 week).** Refactor in framework reattivo (consigliato Svelte o Vue per leggerezza), implementazione layout a tre colonne, input numerico misure reali, snap continuo, integrazione catalogo Kriptonite con prezzi reali, validazione strutturale base, mobile responsive base. **Fase 2 — Esperienza completa (6-8 week).** Disaccoppiamento finiture con panel laterale dedicato, salva e condividi, ottimizzazione mobile avanzata con gesture, vista 3D rifinita con ombre. **Fase 3 — Differenziazione (4-6 week).** Upload foto parete con uso come sfondo, esportazione configurazione in PDF e PNG, modalità ispirazioni con configurazioni esemplari, eventuale integrazione AR (vedere la libreria sulla parete tramite fotocamera dello smartphone). **Totale stimato:** 18-24 week per un configuratore di livello competitivo. Costo orientativo da definire con Kriptonite in base a perimetro effettivo. ## Approccio consigliato per i prossimi step I prototipi servono ora come materiale di **validazione utente** prima di passare allo sviluppo della Fase 1. Suggeriamo tre attività in ordine: Primo, presentare i 5 prototipi a Kriptonite (con questo documento) per allineamento sulla visione e raccolta del feedback strategico. Decisioni da prendere: quali finiture mettere a catalogo nel configuratore (oggi nel prototipo ne abbiamo 5 generiche), quali ostacoli supportare nel modulo Custom oltre a finestre e prese, quali configurazioni vanno effettivamente validate strutturalmente. Secondo, condurre 4-6 test utente moderati (30-45 minuti ciascuno) con clienti tipo Kriptonite — sia architetti che utenti finali — facendo configurare un caso reale (es. "progetta la libreria per questa parete fotografata"). I prototipi v3 e v5 sono ideali per questa fase. Obiettivo: validare il modello mentale (parti dove vuoi, dipingi liberamente, modifica struttura singolarmente) e identificare le frizioni rimaste. Terzo, scrivere le **specifiche tecniche di Fase 1** sulla base del feedback raccolto, poi avviare lo sviluppo. La nostra raccomandazione è procedere con un primo MVP in ambiente staging, lanciato in beta a un piccolo gruppo di rivenditori Kriptonite per validare le scelte tecniche prima del rollout al pubblico. ## Conclusione I cinque prototipi dimostrano che Krossing merita un configuratore radicalmente diverso da quelli oggi disponibili sul mercato. Il fondamento è il principio "non scegliere mai una direzione": una griglia libera che si adatta al modo di pensare dell'utente, non viceversa. Sopra a questo, abbiamo costruito drag-to-extend, vista 3D, finiture reali, edit individuali, e modalità custom per pareti irregolari — il tutto in un unico flow coerente. Il lavoro di prototipazione consegnato in questa fase è funzionale alla decisione strategica di Kriptonite di investire nel nuovo configuratore. Ora la palla è sul vostro tavolo. --- **Palazzina Creativa** [palazzinacreativa.it](https://www.palazzinacreativa.it/)