Il progetto
Il progetto per Marzaioli S.p.A. nasce con l’obiettivo di trasformare un’offerta articolata e fortemente tecnica in un’esperienza digitale semplice, chiara e immediata. L’azienda opera dal 1961 nel settore dei ricambi e dei veicoli industriali e commerciali usati, affiancando alla vendita servizi di demolizione, rottamazione, export e gestione dei veicoli fuori uso. Il lavoro di progettazione ha quindi dovuto organizzare contenuti, prodotti e servizi molto diversi all’interno di un sistema coerente e facilmente comprensibile.
Dal punto di vista UX, la ricerca del prodotto rappresenta il fulcro dell’esperienza: l’utente può orientarsi attraverso caratteristiche tecniche, codici identificativi, categorie e informazioni di supporto, riducendo i passaggi necessari per individuare ciò che sta cercando. L’interfaccia è stata costruita per rendere immediatamente riconoscibili le informazioni più importanti e facilitare il contatto con l’azienda quando è necessario un supporto specialistico.
Parallelamente, il progetto rafforza il posizionamento di Marzaioli attraverso certificazioni, recensioni, autorizzazioni e contenuti dedicati all’economia circolare, integrando gli elementi di fiducia direttamente nell’esperienza di navigazione. Il risultato è un ecosistema responsive che combina catalogo, servizi, competenza tecnica e identità aziendale, mantenendo coerenza e semplicità su desktop e mobile.
Home
La home introduce subito l’identità operativa di Marzaioli con chiarezza. Il visual industriale costruisce un contesto coerente, riconoscibile, immediatamente credibile. Il titolo principale sintetizza offerta, mercato, specializzazione e autorevolezza aziendale. Il payoff storico valorizza continuità, esperienza e qualità del servizio. Le icone evidenziano vantaggi concreti senza appesantire la lettura iniziale.
La ricerca ricambi occupa correttamente una posizione centrale nella pagina. Due percorsi distinguono filtri tecnici e ricerca tramite codice originale. Questa scelta riduce ambiguità e accompagna utenti con esigenze diverse. La gerarchia visiva trasforma subito l’obiettivo commerciale in azione concreta. Il supporto WhatsApp resta visibile come canale rapido e rassicurante.
Le recensioni Google introducono prova sociale nella fase esplorativa iniziale. Il punteggio sintetico rafforza fiducia senza interrompere il percorso principale. Le categorie principali facilitano l’accesso diretto alle famiglie più rilevanti. Le immagini prodotto rendono immediata la scansione delle alternative disponibili. Il progetto equilibra contenuto informativo, ricerca commerciale e orientamento rapido.
La sezione servizi amplia progressivamente la comprensione dell’ecosistema Marzaioli aziendale. Ogni card sintetizza un servizio mantenendo ritmo, coerenza e leggibilità. Il verde istituzionale connette navigazione, call to action e identità. Gli spazi bianchi separano i contenuti e migliorano l’ordine percepito. L’insieme comunica solidità aziendale senza rinunciare alla funzionalità quotidiana digitale.
Un’esperienza responsive costruita sulle priorità operative
Sul desktop la composizione sfrutta larghezza mantenendo priorità molto chiare. Sul mobile gli elementi vengono ricomposti secondo una sequenza verticale. La testata compatta conserva contatti, reputazione, marchio e accesso navigazionale. Il menu hamburger riduce ingombri senza eliminare le funzioni essenziali. La continuità tra desktop e mobile preserva riconoscibilità progettuale complessiva.
I contatti WhatsApp rimangono prioritari anche sugli schermi più piccoli. Questa persistenza supporta richieste rapide durante consultazioni operative in mobilità. Il blocco ricerca mantiene campi ampi e facilmente selezionabili manualmente. La disposizione verticale migliora precisione d’interazione e comprensione dei filtri. Le etichette descrittive anticipano correttamente cosa inserire nei diversi campi.
La tipografia mantiene un contrasto deciso anche sulle immagini fotografiche. Le dimensioni dei titoli guidano rapidamente la lettura dello schermo. Il sistema cromatico distingue azioni primarie, informazioni e contenuti secondari. Il rosso delle call action emerge rispetto al verde istituzionale. Questo contrasto rende immediatamente riconoscibili i principali punti d’azione commerciale.
Le card dei servizi adottano moduli coerenti e facilmente comparabili. La ripetizione controllata crea ritmo e facilita l’apprendimento dell’interfaccia digitale. Le immagini aiutano a distinguere servizi senza affidarsi ai titoli. Il responsive preserva quindi contenuti, priorità e velocità di consultazione. L’esperienza resta coerente anche cambiando dispositivo durante la stessa ricerca.
Architettura informativa, fiducia e orientamento
La home è progettata attorno a bisogni concreti degli utenti. Chi cerca ricambi può iniziare senza attraversare passaggi introduttivi superflui. Chi cerca veicoli trova invece un percorso parallelo chiaramente identificato. La segmentazione iniziale riduce errori e velocizza l’orientamento complessivo digitale. L’architettura informativa traduce la complessità aziendale in scelte comprensibili immediate.
Il progetto integra aspetti commerciali, istituzionali e ambientali senza confusione. Economia circolare e autorizzazioni costruiscono fiducia vicino alla ricerca principale. Questa prossimità lega il servizio alle garanzie dell’operatore autorizzato specializzato. Le recensioni aggiungono conferme esterne prima delle sezioni commerciali approfondite. L’utente riceve così segnali di affidabilità durante l’intero percorso digitale.
Anche il tono visivo sostiene la natura tecnica del progetto. Le fotografie industriali evitano un’immagine generica del settore automotive professionale. Il linguaggio grafico combina solidità, precisione e accessibilità delle informazioni. Ogni sezione contribuisce a costruire continuità tra brand e servizio. La progettazione privilegia utilità, fiducia e rapidità nelle decisioni operative.
Il risultato è una home funzionale per pubblici molto diversi. Privati, professionisti e operatori possono trovare ingressi coerenti facilmente online. La modularità permette inoltre di aggiornare contenuti senza alterare struttura. Questo approccio rende il progetto scalabile rispetto all’evoluzione commerciale futura. La home diventa quindi uno strumento operativo, narrativo e commerciale.
Listing
Il listing organizza un catalogo ampio senza trasformarlo in complessità. Il titolo categoria chiarisce immediatamente il perimetro della selezione visualizzata. Il breadcrumb mantiene visibile il percorso seguito dall’utente nel catalogo. I filtri tecnici precedono i prodotti e supportano ricerche precise. La pagina trasforma dati tecnici complessi in un percorso leggibile.
Marca, serie e categoria compongono una prima modalità di ricerca. Il campo codice offre invece accesso diretto a riferimenti noti. La doppia logica risponde a utenti con competenze differenti efficacemente. Chi conosce il veicolo può procedere attraverso caratteristiche strutturate rapidamente. Chi possiede un codice può ridurre sensibilmente i passaggi necessari.
Il supporto WhatsApp resta vicino agli strumenti di selezione tecnica. Questa posizione intercetta dubbi prima che interrompano la navigazione commerciale. Il numero degli articoli comunica immediatamente ampiezza della disponibilità corrente. L’ordinamento permette di adattare la lettura alle priorità individuali specifiche. Filtri, assistenza e risultati convivono senza competere visivamente tra loro.
La griglia desktop mostra più prodotti mantenendo dimensioni informative adeguate. Ogni card presenta immagine, marca, denominazione e riferimento identificativo tecnico. La ripetizione del formato accelera confronto e riconoscimento dei prodotti. Gli spazi regolari evitano dispersione durante scansioni prolungate del catalogo. L’interfaccia sostiene quindi consultazioni rapide anche su assortimenti estesi quotidianamente.
Il catalogo mobile come strumento di lavoro
La resa mobile ripensa la griglia secondo una lettura verticale. Il titolo resta dominante e mantiene chiara la categoria consultata. I filtri vengono sintetizzati per lasciare spazio immediato ai prodotti. L’ordinamento rimane accessibile senza occupare eccessivamente la prima schermata mobile. Il responsive privilegia continuità funzionale, non semplice riduzione grafica dimensionale.
Le card diventano più grandi rispetto alla larghezza disponibile complessiva. Le immagini acquisiscono maggiore visibilità e facilitano riconoscimento visivo rapido. I nomi prodotto restano leggibili anche quando sono particolarmente lunghi. I riferimenti tecnici rimangono associati chiaramente alla rispettiva scheda prodotto. L’utente conserva così informazioni utili senza aprire ogni risultato singolarmente.
La testata mobile mantiene visibili i canali di contatto diretti. Logo e menu restano riconoscibili dentro una struttura molto compatta. La palette conserva contrasto sufficiente tra informazioni, sfondo e azioni. Il verde identifica continuità istituzionale lungo tutto il percorso mobile. Ogni scelta riduce attrito nelle consultazioni tecniche da smartphone quotidiane.
Questo aspetto è importante per operatori che lavorano fuori ufficio. La consultazione può avvenire direttamente vicino al mezzo interessato fisicamente. Filtri e codici supportano verifiche rapide durante attività operative reali. Il progetto considera quindi contesti d’uso differenti dal desktop tradizionale. La versione mobile diventa parte sostanziale dell’esperienza commerciale complessiva digitale.
Una UX orientata alla trovabilità del ricambio
Il listing comunica affidabilità attraverso ordine, dettaglio e coerenza visiva. La struttura evita decorazioni superflue che rallenterebbero la ricerca tecnica. L’immagine prodotto rimane centrale senza oscurare i dati identificativi essenziali. Marca e denominazione costruiscono una gerarchia facilmente scansionabile visivamente online. Il design sostiene la precisione richiesta dal mercato dei ricambi.
La quantità di risultati non compromette la chiarezza della pagina. Ogni modulo possiede margini sufficienti per distinguersi dagli elementi vicini. La densità informativa resta elevata ma viene gestita con equilibrio. Questa impostazione riduce affaticamento durante sessioni di ricerca più lunghe. La pagina supporta così decisioni basate su confronto e verifica.
Anche le FAQ contestuali possono rafforzare l’autonomia dell’utente interessato online. L’assistenza resta disponibile senza diventare l’unico percorso per avanzare online. Questo equilibrio migliora efficienza sia interna sia per clienti finali. La categorizzazione sostiene inoltre indicizzazione e reperibilità dei contenuti tecnici. UX e architettura informativa lavorano insieme sulla trovabilità complessiva digitale.
Il listing rappresenta un passaggio decisivo verso la scheda prodotto. Deve informare abbastanza senza sostituire completamente il livello di dettaglio. Il progetto rispetta questo equilibrio distribuendo informazioni in modo progressivo. La navigazione mantiene continuità tra ricerca, confronto e approfondimento successivo. Il catalogo risulta quindi strutturato per efficienza, chiarezza e scalabilità.
Prodotto
La scheda prodotto concentra informazioni tecniche e azioni nella testata. Il breadcrumb conserva il contesto della categoria appena attraversata dall’utente. L’immagine principale presenta il ricambio con grande evidenza visiva immediata. Marca e nome completo definiscono subito l’identità del componente selezionato. La priorità progettuale è rendere riconoscibile il prodotto senza ambiguità.
I riferimenti identificativi compaiono vicino alla denominazione e restano leggibili. Il codice OEM facilita verifiche puntuali prima della richiesta commerciale. La condizione usata viene dichiarata nello stesso nucleo informativo principale. Il pulsante informazioni emerge cromaticamente come azione primaria della pagina. La formulazione evita promesse d’acquisto quando serve una verifica preliminare.
Un messaggio ambientale collega acquisto usato e riduzione degli sprechi. Questo contenuto integra sostenibilità dentro la decisione commerciale concreta dell’utente. Il video introduce un formato aggiuntivo per spiegazioni o approfondimenti. Le icone sottostanti ribadiscono consegna, circolarità, autorizzazioni e disponibilità complessiva. La scheda combina conversione, rassicurazione e contenuto tecnico nello flusso.
La sezione descrittiva amplia le informazioni oltre il primo schermo. La scheda tecnica struttura dati utili in righe facilmente confrontabili. Questa organizzazione favorisce verifiche rapide prima di contattare l’azienda direttamente. Il layout mantiene separati contenuti narrativi e parametri più oggettivi. L’insieme costruisce una pagina completa, ordinata e orientata all’azione commerciale.
Una gerarchia mobile costruita sulla decisione dell’utente
Su mobile il prodotto diventa il centro assoluto dell’esperienza visiva. Il titolo lungo viene gestito con una larghezza pienamente leggibile. L’immagine occupa spazio sufficiente per riconoscere forma e componenti chiaramente. Le frecce laterali suggeriscono la presenza di ulteriori fotografie disponibili. Il responsive conserva tutte le informazioni decisive sopra la piega.
Riferimento, codice e condizione seguono immediatamente la galleria fotografica principale. La call action assume quasi tutta la larghezza dello schermo. Questa soluzione aumenta visibilità e semplicità dell’interazione con il pollice. Il messaggio ambientale resta vicino all’azione e rafforza il posizionamento. La successione verticale elimina distrazioni tipiche dei layout affiancati desktop.
La testata mobile mantiene logo, contatti, menu e ricerca accessibili. La continuità con il catalogo riduce il bisogno di riapprendere. Tipografia e spaziature sostengono una lettura rapida anche operativamente mobile. Le informazioni secondarie scendono progressivamente senza sovraccaricare l’apertura della pagina. La gerarchia mobile segue l’ordine reale delle decisioni dell’utente finale.
Prima si identifica il ricambio, poi si verificano riferimenti tecnici. Successivamente l’utente può richiedere informazioni con un gesto semplice immediato. Questo flusso è coerente con consultazioni svolte direttamente sul campo. Il progetto evita di comprimere eccessivamente testi o controlli interattivi. L’esperienza resta quindi utilizzabile, riconoscibile e completa anche da smartphone.
Approfondimento progressivo e continuità del percorso
Dopo l’apertura, la pagina sviluppa contenuti secondo profondità crescente progressiva. Descrizione e scheda tecnica rispondono a esigenze informative complementari differenti. La prima può contestualizzare caratteristiche, utilizzo e stato del ricambio. La seconda organizza attributi verificabili in un formato più sintetico. Questo doppio livello sostiene sia comprensione sia controllo tecnico puntuale.
I prodotti simili prolungano la navigazione quando l’articolo non convince. La selezione correlata facilita confronto senza ritornare al listing principale. Immagini e titoli mantengono lo stesso linguaggio delle card precedenti. Questa coerenza riduce interruzioni cognitive tra differenti livelli del catalogo. Il carosello permette inoltre di ampliare opzioni occupando spazio controllato.
Le FAQ affrontano dubbi frequenti vicino alla fase decisionale finale. Il formato espandibile limita il rumore visivo sulla pagina complessiva. Il banner di ricerca alternativa intercetta bisogni rimasti ancora insoddisfatti. Così la scheda evita vicoli ciechi nel percorso commerciale digitale. Ogni modulo sostiene una fase precisa della decisione complessiva d’acquisto.
L’approccio progettuale considera quindi conversione e servizio come elementi connessi. L’utente può approfondire senza perdere riferimenti fondamentali del ricambio selezionato. L’azienda può valorizzare competenza tecnica attraverso contenuti strutturati e verificabili. La pagina diventa così interfaccia commerciale e strumento informativo insieme. Il risultato rafforza fiducia, orientamento e qualità percepita del servizio.
Corporate
La sezione corporate racconta Marzaioli attraverso sostenibilità, missione e valori. Il progetto evita una presentazione istituzionale basata soltanto sulla cronologia. L’identità aziendale viene collegata direttamente ai processi operativi concreti quotidiani. La sostenibilità apre il racconto come principio integrato nel lavoro. L’economia circolare diventa contenuto progettuale, non semplice dichiarazione valoriale astratta.
Il visual iniziale usa componenti meccanici come sfondo narrativo coerente. La grafica circolare sintetizza recupero, trattamento e nuova valorizzazione materiale. Le icone aiutano a comprendere relazioni complesse con immediatezza visiva. Il verde rafforza il legame con responsabilità ambientale e continuità. Il testo introduttivo chiarisce obiettivi senza sovraccaricare il primo impatto.
La pagina prosegue mostrando concretamente le fasi del processo sostenibile. Bonifica, controllo radiometrico e smaltimento diventano passaggi chiaramente rappresentati visivamente. Le fotografie documentano attività reali e rafforzano credibilità del racconto. I testi brevi spiegano funzione, attenzione e responsabilità di ciascuna. Il design trasforma procedure tecniche in contenuti comprensibili e verificabili.
Questa impostazione sostiene una reputazione fondata su elementi osservabili direttamente. Le certificazioni aggiungono ulteriori segnali di conformità e competenza specialistica. L’utente comprende così il rapporto tra servizio e responsabilità ambientale. Il racconto corporate acquisisce quindi profondità senza diventare autoreferenziale inutilmente. La pagina comunica metodo, controllo e cultura industriale in continuità.
Missione, visione e valori tradotti in linguaggio visivo
La seconda composizione approfondisce visione, missione e valori aziendali condivisi. Un diagramma geometrico rende evidente la relazione tra questi elementi. I tre concetti occupano aree distinte ma visivamente interconnesse chiaramente. La struttura evita lunghi blocchi istituzionali nella parte iniziale visibile. La rappresentazione grafica rende memorabile il sistema identitario aziendale complessivo.
Missione e visione vengono poi sviluppate con testi dedicati separati. Il contenuto mantiene un tono concreto, coerente con l’identità industriale. Il miglioramento continuo emerge come principio trasversale della cultura organizzativa. L’apertura al cambiamento collega crescita, mercati e necessità dei clienti. La valorizzazione delle persone completa la dimensione tecnica dell’impresa quotidiana.
I valori vengono presentati come comportamenti applicabili, non formule decorative. Determinazione e responsabilità descrivono orientamento ai risultati e miglioramento continuo. Contribuzione e disciplina sottolineano collaborazione, metodo e qualità organizzativa interna. Realizzazione e meritocrazia collegano motivazione personale e crescita professionale condivisa. Il testo istituzionale costruisce una cultura leggibile attraverso principi concreti.
Gli spazi bianchi mantengono leggibilità anche con contenuti concettualmente densi. La divisione in colonne facilita il confronto tra temi differenti. Icone e certificazioni riportano il discorso verso elementi operativi tangibili. Le recensioni chiudono il percorso aggiungendo una prospettiva esterna verificabile. La corporate page unisce quindi identità, metodo e prova sociale.
In conclusione
Il progetto Marzaioli trasforma un patrimonio tecnico complesso in un ecosistema digitale più semplice da consultare, comprendere e utilizzare. La ricerca è il fulcro dell’esperienza, ma viene sostenuta da una gerarchia visiva che accompagna l’utente dalla selezione della categoria alla valutazione del singolo ricambio. Informazioni tecniche, assistenza diretta, recensioni e certificazioni lavorano insieme per ridurre dubbi e rendere più solido ogni passaggio verso il contatto con l’azienda in modo consapevole.
Il risultato è un sito capace di unire performance commerciale, identità aziendale e cultura della sostenibilità, senza trattare questi elementi come percorsi separati. Desktop e mobile condividono le stesse priorità, adattando filtri, contenuti e call to action al contesto d’uso. Marzaioli può così presentare catalogo, servizi e competenze con maggiore coerenza, valorizzando una storia iniziata nel 1961 attraverso un’esperienza contemporanea, concreta e orientata alle esigenze degli utenti in ogni momento.
Scopri di più su www.marzaioli.it
