Il progetto
La principale sfida progettuale è stata organizzare un catalogo di oltre 15.000 referenze e renderlo facilmente consultabile da un pubblico professionale composto da cartolerie, uffici e rivenditori, abituato a effettuare ordini frequenti e a lavorare con quantità, confezioni, varianti e condizioni commerciali specifiche.
L’intera esperienza è stata quindi costruita attorno a velocità di consultazione, chiarezza delle informazioni e riduzione dei passaggi necessari per completare un ordine. Ricerca, navigazione per categorie, filtri e strumenti di selezione aiutano l’utente a individuare rapidamente ciò che cerca, mentre prezzi, codici articolo, disponibilità, configurazioni e quantità vengono presentati in modo chiaro lungo tutto il percorso di acquisto. Particolare attenzione è stata dedicata anche alle dinamiche tipiche del B2B, come il riordino, l’acquisto di più unità, la presenza di varianti e la necessità di verificare con precisione il valore complessivo dell’ordine.
Dal punto di vista UX/UI, abbiamo lavorato su gerarchie visive semplici, call to action riconoscibili e una struttura coerente tra le diverse aree del sito, così da mantenere continuità e orientamento durante la navigazione. Promozioni, novità, prodotti consigliati, bundle e marchi trovano spazio senza interferire con le attività principali, contribuendo invece a favorire scoperta e cross selling.
Un altro elemento centrale è stato il responsive design. L’esperienza è stata ripensata per funzionare in modo efficace anche da smartphone, mantenendo accessibili ricerca, filtri, informazioni commerciali e azioni d’acquisto. Il risultato è una piattaforma digitale pensata come vero strumento di lavoro: capace di semplificare gli approvvigionamenti, valorizzare la profondità dell’assortimento Ugo Tesi e trasferire online la qualità del servizio che caratterizza l’azienda dal 1919.
Home
La home page è progettata come un accesso immediato all’ecosistema B2B, con una gerarchia visiva che mette al centro ricerca, categorie e servizi. L’header raccoglie in uno spazio compatto il logo, la barra di ricerca, l’accesso all’area riservata, le liste e il carrello, mentre il menu principale organizza i percorsi per prodotto, scuola, stagionalità, novità, promozioni e marchi. Questa struttura riduce la distanza tra intenzione di acquisto e contenuto utile, un aspetto centrale per clienti professionali che consultano cataloghi ampi e ordinano con frequenza.
La fascia informativa superiore comunica subito tempi di consegna e vantaggi operativi, trasformando un dato logistico in elemento di fiducia. Subito sotto, i messaggi dedicati a Tinta Unita, assortimento, marchi e assistenza rafforzano il posizionamento dell’azienda senza interrompere la navigazione. Il progetto lavora quindi su una UI essenziale, con colori istituzionali e call to action blu ad alta riconoscibilità. L’impostazione privilegia chiarezza, velocità e continuità d’uso, valorizzando oltre cento anni di esperienza attraverso un linguaggio digitale contemporaneo e funzionale alle esigenze quotidiane di cartolerie, uffici e rivenditori. Ogni elemento è collocato per orientare lo sguardo senza sovraccaricare la pagina, mantenendo sempre visibili gli strumenti necessari alla ricerca, alla selezione e al riordino professionale.
Contenuti commerciali e merchandising integrati
Il cuore commerciale della home è costruito attraverso moduli che alternano contenuti editoriali, categorie in evidenza e prodotti acquistabili, creando un ritmo di consultazione adatto a un catalogo molto esteso. Le card iniziali introducono aree tematiche con immagini ampie e titoli sintetici, offrendo accessi rapidi ai percorsi più rilevanti. Più in basso, il blocco dedicato a Tinta Unita integra racconto del brand e collegamento diretto all’assortimento, mentre la sequenza dei marchi in esclusiva rende immediatamente percepibile il valore distributivo di Ugo Tesi. La pagina non si limita a presentare prodotti, ma costruisce una vetrina commerciale capace di sostenere scoperta e riordino.
Le griglie prodotto mostrano etichette come Promo, Novità e Consigliato, insieme a codice, prezzo e azione primaria. Questa combinazione consente al cliente professionale di valutare rapidamente convenienza, disponibilità percepita e tipologia dell’articolo senza aprire subito la scheda completa. Il design favorisce quindi una lettura comparativa e orientata alla conversione, particolarmente utile quando l’acquisto coinvolge molte referenze. La presenza di caroselli e sezioni dedicate a contesti come ufficio permette inoltre di articolare l’offerta senza allungare eccessivamente il percorso cognitivo. Ogni modulo mantiene coerenza tipografica, spaziature regolari e pulsanti omogenei, rafforzando una UX riconoscibile anche durante sessioni di acquisto prolungate online.
Un’esperienza responsive coerente tra desktop e mobile
Il lavoro responsive emerge con chiarezza nel confronto tra desktop e smartphone, dove gli stessi contenuti vengono riorganizzati secondo priorità d’uso differenti. Su mobile il logo, l’account, i preferiti e il carrello restano nella testata compatta, mentre il menu viene condensato e la ricerca mantiene una posizione centrale. La continuità tra dispositivi è stata pensata per permettere al cliente di iniziare una consultazione in ufficio e proseguirla anche in mobilità, senza dover reinterpretare l’interfaccia.
I contenuti in evidenza diventano scorrevoli orizzontalmente, soluzione che conserva ricchezza visiva limitando l’ingombro verticale. Le immagini mantengono un ruolo dominante, i titoli restano leggibili e gli elementi interattivi acquistano dimensioni più adatte al tocco. Anche la sezione Tinta Unita viene ricomposta in modo lineare, con logo e testo immediatamente riconoscibili. Il responsive non replica semplicemente il desktop, ma ridefinisce gerarchie e spazi per proteggere velocità e comprensione del percorso.
Listing
La pagina di listing dedicata all’archiviazione affronta una delle esigenze più complesse di un e-commerce B2B: rendere esplorabile un assortimento numeroso senza perdere precisione nella scelta. Sul desktop il progetto adotta una struttura a due aree, con tassonomia e filtri nella colonna laterale e griglia prodotti nella porzione principale. La navigazione per categorie resta sempre leggibile e consente di passare rapidamente da una famiglia merceologica all’altra, mantenendo il contesto del catalogo e riducendo la necessità di tornare ai livelli precedenti.
La profondità dell’assortimento viene resa evidente attraverso sottocategorie specifiche, dalle cartelle ai portalistini, fino agli accessori complementari. Più sotto, il filtro per marchio aggiunge un ulteriore livello di selezione particolarmente utile per cartolerie e rivenditori abituati a lavorare con fornitori o linee precise. Nella parte superiore del contenuto, titolo, numero di articoli e ordinamento per rilevanza forniscono coordinate immediate.
L’architettura informativa bilancia ampiezza del catalogo e controllo dell’utente, trasformando una pagina potenzialmente densa in uno strumento operativo. La scelta di mantenere filtri e navigazione visibili sul desktop risponde a sessioni d’acquisto articolate, in cui l’utente confronta molte referenze e deve poter correggere il percorso senza interrompere il flusso di consultazione. Spaziature regolari e allineamenti netti completano una UI razionale leggibile.
Schede progettate per il confronto
Le schede sintetiche del listing sono state progettate per supportare il confronto veloce tra articoli simili, requisito decisivo nelle forniture professionali. Ogni card combina immagine, eventuale badge commerciale, EAN, codice articolo, denominazione e prezzo, organizzando le informazioni secondo una sequenza costante. La ripetizione di uno schema visivo stabile riduce lo sforzo cognitivo e permette di scandire la griglia quasi come un catalogo tecnico, mantenendo però immediatezza e qualità grafica proprie di un e-commerce contemporaneo.
Le call to action distinguono gli articoli acquistabili direttamente da quelli che richiedono la scelta di una variante. Il pulsante blu crea un punto di attenzione costante e facilita l’azione ripetuta su molte referenze. Prezzi precedenti, sconti e diciture fiscali sono integrati nella stessa area informativa, così il cliente può leggere rapidamente il valore commerciale dell’offerta. L’interfaccia mette insieme merchandising e operatività senza trasformare la pagina in una sequenza aggressiva di promozioni.
La selezione diventa immediata anche su smartphone
Nel passaggio al mobile il listing cambia struttura senza perdere le informazioni necessarie alla decisione d’acquisto. La lunga colonna laterale del desktop scompare dalla vista principale e viene sostituita dal comando “Filtra i prodotti”, affiancato dall’ordinamento per rilevanza. Questa scelta libera spazio prezioso sul piccolo schermo e mantiene filtri e sorting accessibili nel momento in cui servono, senza appesantire la prima lettura della pagina. Titolo e breadcrumb restano visibili in apertura, assicurando orientamento anche dopo percorsi di navigazione profondi.
La griglia viene ricomposta su due colonne, soluzione che offre un buon equilibrio tra quantità di prodotti mostrati e dimensione delle singole card. Immagine, badge, codici, titolo, prezzo e promozione restano leggibili, mentre il pulsante occupa una larghezza maggiore e diventa più semplice da attivare con il pollice. Il design responsive conserva quindi la logica comparativa del desktop, adattandola a una consultazione più rapida e verticale.
Prodotto
Il layout desktop separa con chiarezza area visiva e area commerciale: a sinistra trovano spazio immagine principale, miniature e documentazione tecnica, mentre a destra compaiono nome articolo, codici, prezzo, configurazione, quantità e disponibilità. La gerarchia è costruita per portare l’utente dalla verifica del prodotto alla configurazione dell’ordine con il minor numero possibile di passaggi.
La selezione del confezionamento assume particolare rilievo nel contesto B2B, perché chiarisce come la quantità scelta si traduce in pezzi effettivi. Il controllo numerico è collocato accanto alla call to action principale, riducendo ambiguità prima dell’inserimento nel carrello. La disponibilità in pezzi e la nota sugli imballi completano il quadro operativo. Prezzo, unità di vendita e logica di confezionamento vengono presentati come parti di un’unica decisione commerciale, evitando che dati fondamentali siano distribuiti in zone distanti della pagina.
Anche descrizione, scheda tecnica e scheda di conformità rafforzano la qualità informativa del progetto. L’interfaccia non tratta quindi il prodotto come semplice immagine con prezzo, ma come una referenza professionale documentata, configurabile e pronta per essere inserita rapidamente nei processi di approvvigionamento dei clienti dell’azienda tramite portale B2B.
Bundle, correlati e continuità dell’esperienza di acquisto
Il progetto della scheda estende la funzione di vendita oltre il singolo articolo, introducendo meccanismi di cross selling coerenti con le abitudini di acquisto di cartolerie e uffici. La sezione dedicata alla combinazione propone più referenze complementari nello stesso contesto visivo, mentre il box “Offerta bundle” riepiloga composizione, prezzo normale, prezzo bundle e risparmio percentuale. Questa impostazione trasforma il suggerimento commerciale in una proposta leggibile e misurabile, lasciando al cliente elementi concreti per valutarne la convenienza.
La costruzione grafica del bundle separa bene prodotti e riepilogo economico, evitando che la promozione interferisca con le informazioni principali della referenza. L’azione di acquisto è evidenziata in blu, in continuità con il linguaggio della piattaforma. Più in basso, i prodotti correlati riprendono il modello di card già utilizzato nel listing, rafforzando familiarità e velocità di lettura. La coerenza tra pagine riduce il tempo necessario per comprendere ogni nuova interazione e rende il catalogo percepito come un sistema unitario.
Una scheda responsive costruita sulle priorità dell’utente
Su smartphone la scheda prodotto viene riorganizzata secondo una sequenza verticale che privilegia riconoscimento, descrizione e consultazione immediata. L’header compatto mantiene logo, account, preferiti e carrello, con menu e ricerca subito accessibili. Dopo il breadcrumb, il badge di novità anticipa una galleria fotografica ampia, dotata di controlli laterali adatti allo scorrimento. L’immagine assume sul mobile un ruolo ancora più centrale, perché consente di identificare rapidamente la referenza prima di entrare nei dettagli tecnici e commerciali.
Titolo, codice produttore e descrizione vengono disposti in successione naturale e con corpi tipografici ben differenziati. Questa scelta sostiene la lettura su schermi stretti e riduce il rischio di sovrapporre dati con funzioni interattive. Le informazioni che sul desktop convivono nello stesso livello vengono quindi distribuite lungo un percorso progressivo. Il responsive interpreta la scheda come una conversazione ordinata con l’utente, non come una semplice compressione del layout desktop.
Carrello
La pagina di riepilogo carrello è progettata come un punto di controllo prima della chiusura dell’ordine, con una struttura volutamente più essenziale rispetto alle aree di esplorazione del catalogo. Il titolo chiarisce subito il contenuto del carrello e il numero di righe, mentre la tabella principale presenta prodotto, prezzo unitario, quantità e prezzo totale. La pagina concentra l’attenzione su verifica, modifica e conferma economica, riducendo gli elementi che potrebbero distrarre l’utente in una fase delicata del percorso d’acquisto.
Ogni riga mantiene un’immagine identificativa dell’articolo, il nome del prodotto e le informazioni sul colore, insieme alla quantità effettiva collegata al confezionamento. Il selettore numerico consente di correggere il numero di confezioni direttamente nel riepilogo, senza obbligare il cliente a tornare sulla scheda prodotto. Questa scelta rende l’editing dell’ordine rapido e coerente con le dinamiche B2B, dove variazioni quantitative sono frequenti prima dell’invio definitivo. Il sistema rende trasparente la relazione tra quantità, unità di vendita e valore totale, favorendo un controllo puntuale prima del checkout.
Il riepilogo come strumento di trasparenza
Accanto all’elenco degli articoli, il box “Riepilogo acquisto” concentra tutte le variabili necessarie alla decisione finale. Totale prodotti, IVA, spedizione e saldo complessivo sono presentati in una sequenza lineare, con importi allineati e separatori sottili che facilitano la verifica. La trasparenza del riepilogo riduce l’incertezza prima del checkout e permette al cliente professionale di comprendere immediatamente come si compone l’importo dell’ordine. La call to action “Vai alla chiusura ordine” occupa la posizione più evidente del box e utilizza lo stesso blu già associato alle azioni primarie del sito.
L’icona del lucchetto rafforza visivamente il passaggio verso una fase più sensibile della transazione e comunica continuità con una procedura strutturata. Il pulsante è separato dalle righe di calcolo, così l’utente può controllare i dati prima di procedere. Il progetto distingue chiaramente informazione economica e azione finale, senza spezzare la continuità del flusso.
Questa impostazione è particolarmente adatta a un portale B2B, nel quale il valore dell’ordine può dipendere da confezioni, aliquote e costi logistici. Una sintesi ordinata consente di individuare rapidamente discrepanze e riduce il rischio di conferme non intenzionali. La pagina accompagna quindi il passaggio dal catalogo al checkout con un linguaggio visuale sobrio, coerente e orientato al controllo.
Continuità di navigazione e supporto alle attività B2B
Il riepilogo carrello mantiene inoltre una forte continuità con l’architettura generale del sito. Header e navigazione restano disponibili anche in questa fase, permettendo di recuperare rapidamente una categoria, cercare un articolo o consultare le liste prima della conferma. La coerenza dell’interfaccia evita che il passaggio al carrello venga percepito come un ambiente separato dal catalogo, elemento importante per mantenere fiducia e orientamento durante ordini complessi.
Il footer assume qui un ruolo particolarmente visibile e raccoglie collegamenti istituzionali, informazioni di vendita, funzioni account e canali social. Termini e condizioni, pagamenti, spedizioni, privacy, cookie policy, storico ordini, fatture e note di credito sono raggiungibili da un’unica area, supportando un pubblico professionale che può avere necessità amministrative oltre che commerciali. La pagina chiude così il percorso con informazioni operative e riferimenti utili, rafforzando la percezione di un servizio strutturato.
In conclusione
Il progetto Ugo Tesi traduce più di un secolo di esperienza nella distribuzione in un’esperienza digitale costruita sulle esigenze concrete dei clienti professionali. La UX non cerca effetti superflui, ma riduce i passaggi necessari per trovare, confrontare, configurare e acquistare migliaia di referenze. Dalla home al listing, ogni scelta sostiene velocità e orientamento, mentre la scheda prodotto porta chiarezza nei dettagli che incidono sull’ordine e sulla gestione quotidiana degli approvvigionamenti.
Anche il carrello segue la stessa logica, rendendo leggibili quantità, prezzi e costi prima della chiusura dell’ordine. Il risultato è un e-commerce B2B coerente tra desktop e mobile, capace di accompagnare sia l’acquisto programmato sia il riordino rapido. La piattaforma diventa così un’estensione del servizio Ugo Tesi: uno strumento operativo che valorizza assortimento, disponibilità e competenza, rafforzando nel digitale una relazione commerciale costruita nel tempo e pronta a evolvere ancora.
Scopri di più su www.ugotesi.it
