Uno showroom digitale aperto 24 ore su 24.
Sito su misura per MG Auto, concessionaria di Ballabio (Lecco): un’auto in 3D che si esplora direttamente nel browser, animazioni fluide, schede vettura da configuratore premium e un assistente AI che conosce il parco auto e risponde 24 ore su 24.
Nel mercato dell’auto online, tutti sembrano uguali.
Chi cerca un’auto usata parte quasi sempre dai grandi portali di annunci. Lì una concessionaria curata come MG Auto e un venditore improvvisato occupano lo stesso identico spazio: una foto, un prezzo, una riga di specifiche. La cura del parco auto, la garanzia, la serietà nella permuta: tutto appiattito, e la scelta si riduce a chi costa meno.
MG Auto aveva bisogno del contrario: un posto di proprietà dove la prima impressione fosse quella dello showroom vero, ordinato e curato, e dove ogni vettura potesse essere raccontata come merita. Perché nell’usato la fiducia è la prima cosa che un cliente compra, ancora prima dell’auto.
C’era poi un limite di orario: le richieste arrivavano solo quando lo showroom era aperto. Ma le auto si cercano la sera sul divano e nel weekend, esattamente quando nessuno può rispondere al telefono.
- 01Sui portali ogni annuncio è identico agli altri: si compete solo sul prezzo.
- 02Nessuna casa digitale di proprietà: l’immagine dipendeva da piattaforme di terzi.
- 03La fiducia, decisiva nell’usato, era impossibile da trasmettere in un annuncio.
- 04Richieste e domande solo negli orari di apertura dello showroom.
- 05Zero differenziazione dai concorrenti della zona di Lecco e della Valsassina.
Portare online la sensazione di entrare in uno showroom curato.
- 01Distinguersi dai portali con un’esperienza che nessun concorrente locale offre.
- 02Trasmettere la cura e la serietà dello showroom fin dal primo pixel.
- 03Presentare ogni vettura con la chiarezza di una scheda tecnica e il fascino di una vetrina.
- 04Rispondere ai clienti a qualsiasi ora, anche a showroom chiuso.
Come abbiamo affrontato il problema
- Fase 01
Direzione creativa
Prima del codice, l’identità dell’esperienza. Abbiamo studiato il settore (portali anonimi, siti vetrina tutti uguali) e scelto la direzione opposta: nero profondo da studio fotografico, oro per i dettagli, tipografia editoriale. Il lusso non si dichiara, si percepisce.
- Analisi di portali e concorrenti locali
- Moodboard dark & gold, riferimenti automotive premium
- Gerarchia dei contenuti: prima l’emozione, subito dopo i dati
- Fase 02
Design dell’interfaccia
Un design system coerente dal menu al footer: navigazione essenziale, contrasti calibrati, CTA dorate che guidano l’occhio. Tutto progettato mobile-first, perché le auto si cercano soprattutto dal telefono.
- Design system: colori, tipografia, componenti
- Percorsi chiari: parco auto, vendi la tua auto, contatti
- Esperienza mobile-first e accessibile
- Fase 03
Scena 3D con Three.js
Il cuore della hero è una scena tridimensionale renderizzata in tempo reale nel browser con Three.js e WebGL: una vettura illuminata come in uno studio fotografico, che dà profondità e presenza alla pagina senza video pesanti.
- Modello 3D ottimizzato per il web
- Illuminazione a tre punti in stile studio
- Performance budget: il 3D non rallenta la pagina
- Fase 04
Animazioni fluide su ogni schermo
Ogni transizione è coreografata: reveal all’ingresso, parallasse legata allo scroll, micro-interazioni su bottoni e card. Solo proprietà accelerate dalla GPU (transform e opacity), così l’animazione resta fluida anche su smartphone di fascia media.
- Animazioni solo su transform e opacity, mai layout
- Scroll fluido e parallasse calibrate
- Rispetto di prefers-reduced-motion per chi lo richiede
- Fase 05
Parco auto e schede vettura
Ogni auto ha una scheda da configuratore: prezzo in evidenza, dati chiave a colpo d’occhio (anno, chilometri, alimentazione, cambio, potenza, colore), badge di pronta consegna e la rassicurazione che conta: garanzia inclusa, permuta e finanziamento.
- Griglia dati leggibile in tre secondi
- Foto grandi e badge di stato della vettura
- CTA dirette: dettagli, contatto, richiesta
- Fase 06
Assistente AI
Ultimo tassello: un chatbot addestrato sul parco auto e sulle informazioni della concessionaria. Conosce le vetture in vendita, risponde in pochi secondi e accompagna il cliente fino alla scheda giusta o al contatto, anche alle undici di sera.
- Base di conoscenza: parco auto, servizi, orari, indirizzo
- Pulsanti azione e risposte rapide integrate nel brand
- Attivo 24/7, aggiornato quando il parco auto cambia
Un’auto in 3D reale, direttamente nel browser.
La vettura nella hero non è un video e non è una fotografia: è una scena tridimensionale renderizzata in tempo reale con Three.js, la libreria WebGL più usata al mondo. Il browser calcola luci, riflessi e prospettiva a ogni frame, come in un videogioco.
Il risultato è una presenza fisica che nessuna immagine statica può dare: la carrozzeria scura raccoglie la luce dorata dello showroom, il controluce disegna il profilo della vettura e la scena reagisce con naturalezza mentre la pagina scorre.
Tutto questo senza sacrificare la velocità: il modello è ottimizzato per il web, il 3D si carica in modo asincrono mentre i contenuti sono già leggibili, e la qualità di rendering si adatta al dispositivo per restare sempre fluida.
Rendering in tempo reale
La scena gira nel browser via WebGL, senza plugin né video da scaricare: luci e riflessi sono calcolati frame per frame.
Luci da studio fotografico
Illuminazione a tre punti: luce principale morbida, controluce che scolpisce il profilo e riflessi calibrati sulla carrozzeria.
Modello ottimizzato
Geometria alleggerita e materiali essenziali: il modello 3D pesa una frazione di un video e si carica in modo asincrono.
Fluido anche su mobile
La risoluzione di rendering si adatta al dispositivo: fluidità costante dallo smartphone di fascia media al monitor 4K.
Contenuti prima di tutto
Il 3D arriva dopo il testo: titolo, menu e contatti sono leggibili e cliccabili da subito, il canvas si accende un istante dopo.
Fallback elegante
Chi preferisce il movimento ridotto o naviga da dispositivi datati vede una scena statica altrettanto curata. Nessuno resta fuori.
Ogni auto presentata come merita.
Prezzo grande e dorato, sei dati chiave leggibili in tre secondi, badge di pronta consegna e la riga che rassicura: garanzia inclusa, permuta e finanziamento. È una scheda da configuratore premium, non un annuncio da portale: la stessa auto, percepita in un’altra categoria.
Un venditore che non dorme mai.
In basso a destra, su ogni pagina, vive l’Assistente MG Auto: un chatbot AI addestrato sul parco auto reale della concessionaria, sui servizi, sugli orari e sull’indirizzo. Chiedigli “che auto avete in vendita?” e non risponde con frasi generiche: ti dice quale vettura c’è adesso in showroom, con allestimento e condizioni.
Ogni risposta è accompagnata da pulsanti azione che portano dritti al punto: la scheda della vettura, i contatti con la mappa, le domande più frequenti. Il cliente non deve cercare: viene accompagnato.
E soprattutto lavora quando lo showroom è chiuso: la sera e nel weekend, esattamente quando le persone cercano l’auto. Ogni conversazione può trasformarsi in una richiesta o in un appuntamento che il mattino dopo è già nella casella di MG Auto.
- Conosce il parco auto reale: modelli, prezzi, chilometri e allestimenti.
- Pulsanti azione che portano alla scheda della vettura o a contatti e mappa.
- Risposte rapide suggerite: si conversa anche senza digitare.
- Risponde in pochi secondi, 24 ore su 24, anche a showroom chiuso.
- Aggiornato quando il parco auto cambia: mai una risposta vecchia.
- 0Su misura: ogni schermata è costruita attorno al parco auto reale.
- 3DUn’auto esplorabile direttamente nel browser, senza app da installare.
- 0L’assistente AI risponde a ogni ora, anche quando lo showroom è chiuso.
- 0Chiamate perse: l’assistente AI accoglie ogni richiesta, anche di notte.
Parole scritte per convincere, non per riempire
Il copy parla come un venditore di fiducia: diretto, concreto, senza il gergo degli annunci. “La tua prossima auto inizia qui” non descrive un servizio: apre una storia.
- Titoli brevi che vendono la sensazione, non la specifica tecnica.
- I dati dove servono: anno, chilometri e potenza a colpo d’occhio nella scheda.
- CTA chiare in ogni punto chiave: parco auto, vendi la tua auto, contatti.
- Tono premium ma umano, coerente dal sito fino alle risposte del chatbot.
Quello che ci chiedono più spesso
Il 3D non rende il sito lento?
No, se è fatto bene. Il modello 3D di MG Auto è ottimizzato per il web e si carica in modo asincrono: testi e navigazione sono pronti subito, la scena si accende un istante dopo. La qualità di rendering si adatta al dispositivo, così l’esperienza resta fluida anche da smartphone.
Come fa il chatbot a sapere quali auto sono in vendita?
L’assistente è addestrato su una base di conoscenza che descrive il parco auto reale, i servizi, gli orari e i contatti della concessionaria. Quando il parco auto cambia, la base di conoscenza viene aggiornata: il bot non inventa vetture e non dà mai informazioni vecchie.
Quanto costa un sito con 3D e assistente AI?
Dipende da cosa serve davvero: la scena 3D, il numero di pagine, l’assistente AI e le integrazioni si valutano progetto per progetto. Partiamo sempre da un’analisi gratuita e da un preventivo chiaro entro 24 ore, senza impegno.
Un sito così ha senso solo per le concessionarie?
No. Funziona per qualsiasi attività che vende prodotti o servizi ad alto valore percepito: immobili, arredamento, orologi, esperienze. Dove la fiducia e la presentazione fanno la differenza, uno showroom digitale lavora per te 24 ore su 24.
Vuoi uno showroom digitale anche tu?
Che tu venda auto, case o esperienze, costruiamo il sito che fa percepire il valore di ciò che offri: 3D, motion design e assistente AI compresi. Analisi gratuita e preventivo chiaro entro 24 ore.