Chi sono Metodo
Servizi
Casi Contatti
IT / EN
Prenota la call
Selected work

Non progetto solo schermate. Progetto il sistema che deve farle funzionare.

Una selezione di progetti diversi tra loro: software complessi, workflow operativi, dashboard e prodotti digitali. In alcuni casi il risultato è molto visibile. In altri, il lavoro migliore è ciò che l'utente non deve più fare.

UI & Visual Direction 01

Da catalogo digitale a esperienza di marca.

Edilarte Piracci è un'azienda familiare con cinquant'anni di esperienza nell'arredo e nei materiali per la casa. Il sito esistente raccontava soprattutto categorie di prodotto; il nuovo progetto doveva trasferire online la qualità percepita dello showroom, della consulenza e della selezione dei marchi.

Vedi il nuovo sito
BEFORE · Product catalogue
Vecchio sito Edilarte Piracci: menu Prodotti aperto con tredici categorie piatte, nessuna gerarchia visiva, immagini trattate come decorazione

Molte categorie, poca gerarchia, immagini utilizzate soprattutto come catalogo e un'esperienza digitale poco rappresentativa del posizionamento reale dell'azienda.

AFTER · Editorial experience
Nuovo sito Edilarte Piracci: direzione editoriale, fotografia d'ambiente, tipografia e spazio come elementi di identità

Una direzione più editoriale, costruita su fotografia, tipografia, ritmo, spazio e gerarchia per avvicinare il sito all'esperienza dello showroom.

Design system Edilarte Piracci: componenti, tipografia Futura e DM Sans, palette blu-ocra-nero, hero sections, card prodotto e card stanze Direzione creativa con il fotografo: moodboard di abbinamenti materiali (marmi, ceramiche, rubinetterie) che raccontano la consulenza sartoriale dell'azienda Sezione Chi siamo del nuovo sito: identità familiare, collage fotografico d'ambiente, testo sulla consulenza sartoriale Pagina categoria Idromassaggio: gallery prodotto con lightbox, marchi selezionati in evidenza

Il sito è in fase di completamento: alcuni contenuti fotografici e di prodotto sono ancora in attesa di consegna dal cliente.

Il cambio radicale

Da vetrina di prodotti altrui a racconto di una consulenza.

Il vecchio sito mostrava prodotti di altri marchi e rimandava direttamente ai siti dei produttori. Il problema non era estetico: era di posizionamento. Edilarte non è un rivenditore che espone cataloghi: è un'azienda familiare che seleziona grandi marchi, li abbina in base alle esigenze di ogni cliente e li accompagna dall'idea fino al post-vendita. Questa differenza non emergeva da nessuna parte. Il nuovo sito è costruito per renderla evidente: la consulenza è il prodotto, i marchi sono lo strumento.

Design decisions
01

Ridurre il rumore

Dal catalogo di categorie a pochi ingressi ad alta intenzione. Meno scelte, più chiarezza sul posizionamento.

02

Dare più spazio alle immagini

Il materiale visuale diventa parte della gerarchia, non semplice decorazione. Fotografia e abbinamenti materiali come elementi di identità.

03

Costruire riconoscibilità

Tipografia, composizione e ritmo usati come elementi di identità invece di affidarsi a un template neutro che avrebbe assomigliato a qualsiasi rivenditore.

Complex Product Design 02

Un unico sistema per coordinare persone, informazioni e operazioni.

Sistema gestionale su misura per una rete di strutture sanitarie distribuite sul territorio. Più ruoli, più turni, più flussi informativi che dovevano convergere in un'unica interfaccia operativa senza richiedere formazione estesa.

Chi usa il sistema · cosa fa · cosa propaga
Operatore di sede
deve controllare una normativa → apre il portale → digita il nome → trova il documento non cerca tra le mail
deve modificare gli orari → apre il portale → modifica nel profilo → propaga al sito istituzionale · ente pubblico · web app cittadini
Responsabile turni
suddivide le sedi per zone → clicca "Genera turni" → algoritmo calcola 48h su 2 anni → variazioni puntuali sulla riga → propaga alla web app cittadini
Cittadino · ore 2:00
apre il portale pubblico → accetta geolocalizzazione → vede la sede aperta più vicina
La complessità

Un'unica azione nel portale propaga dati su tre superfici diverse in tempo reale. L'operatore che modifica i suoi orari non sa che sta aggiornando contemporaneamente il sito istituzionale, la comunicazione verso l'ente pubblico di competenza e la web app che un cittadino userà alle due di notte per trovare la sede aperta. Non deve saperlo. Deve solo modificare l'orario.

Portale operatori
→
Sito istituzionale
+
Ente pubblico
+
Web app cittadini
Problemi chiave

01 · Tre superfici, zero sincronizzazione

Orari, turni e normative esistevano in sistemi separati. Ogni aggiornamento richiedeva di intervenire manualmente su ciascuno. Gli errori di disallineamento erano frequenti e visibili ai cittadini.

02 · Turni calcolati a mano

Il responsabile dei turni costruiva manualmente i calendari di reperibilità per decine di sedi su base biennale. Ogni variazione richiedeva di ricalcolare a mano i turni collegati.

Decisione progettuale

Prima di progettare le schermate, abbiamo progettato il flusso.

Il modello dati e la propagazione sono stati definiti prima di disegnare qualsiasi interfaccia. L'obiettivo non era costruire un gestionale, era fare in modo che un'azione in un posto aggiornasse tutto il resto senza che l'operatore dovesse pensarci.

Flow comparison · Gestione turni
Before
Raccolta dati da ogni sede
↓
Calcolo manuale dei turni su foglio
↓
Aggiornamento del sito istituzionale
↓
Comunicazione separata all'ente pubblico competente
↓
Variazione → ricomincia da capo
Designed flow
Suddivisione sedi per zone
↓
Clic "Genera turni" · algoritmo calcola 2 anni
↓
Variazione: modifica sulla riga
↓
Propagazione automatica su tutte le superfici
Output del progetto
User flow della web app pubblica: splash page, geolocalizzazione, mappa con sede aperta, lista sedi, dettaglio sede con CTA navigazione e chiamata

User flow completo: dalla splash page alla sede aperta, con i due percorsi (geolocalizzazione attiva / non attiva) e i database collegati a ogni schermata.

Schermate iPhone della web app pubblica: sede piu vicina con mappa, menu, lista sedi con stato aperta/chiusa, turni mensili con calendario

Web app per i cittadini: sede piu vicina geolocalizzata, stato in tempo reale (aperta, in turno, chiusa ora, in ferie), turni mensili con calendario navigabile.

Architettura del portale operatori in Figma: tre profili separati con flussi e schermate per ciascuno

Il portale operatori strutturato su tre profili con accessi e funzionalita distinte.

Homepage sito istituzionale: hero con CTA Trova la sede aperta piu vicina e mockup della web app

Il sito istituzionale: una delle superfici che riceve automaticamente gli aggiornamenti quando il portale operatori viene modificato.

Workflow & Data Design 03

Quando il gestionale diventa il punto in cui il lavoro realmente accade.

CRM, preventivi, vendita, noleggio, disponibilità, automazioni e attività vivevano nello stesso ecosistema Odoo, ma non necessariamente nello stesso flusso. Il progetto non era configurare Odoo. Era trasformare requisiti operativi in comportamento del sistema.

Flow · Vendita
Lead→ Opportunità→ Preventivo→ Contratto→ Firma→ Attività→ Reporting
Flow · Noleggio
Disponibilità→ Selezione→ Prenotazione→ Acconto→ Verifica cliente→ Conferma→ Saldo
Tre casi concreti
01

CRM: trasformare un'opportunità in un flusso tracciato

Ogni lead doveva generare attività automatiche assegnate al commerciale corretto, con scadenze visibili e stato aggiornabile senza uscire dalla vista cliente. La necessità operativa era non perdere lead per dimenticanza o mancanza di visibilità sullo stato.

Esigenzanessuna attività persa Datolead + commerciale + scadenza Outputattività automatica assegnata
02

Preventivo: dalla conversazione al documento in un passaggio

Il preventivo doveva riflettere in tempo reale disponibilità, listino aggiornato e margini, ed essere inviabile direttamente dal gestionale con firma digitale integrata. Il problema precedente era la distanza tra la trattativa e il documento formale.

Informazionidisponibilità + listino + margini Logicacalcolo automatico + approvazione Outputpreventivo firmabile da CRM
03

Noleggio: disponibilità, pagamento e verifica in un flusso unico

La prenotazione di un veicolo richiedeva controllo disponibilità, raccolta acconto, verifica documenti cliente e conferma, spesso in momenti e canali diversi. Il progetto ha unificato questi passaggi in un flusso sequenziale con checkpoint espliciti.

Disponibilitàcalendario veicoli in tempo reale Pagamentoacconto + saldo tracciati Verificadocumenti cliente + checklist
Costruzione del flusso
Diagramma di flusso del sistema Odoo per Sordo Auto: flusso vendita e flusso noleggio con tutti i passaggi, stati, attori e automazioni mappati nel to-be ideale

Mappatura del to-be ideale: flusso vendita (CRM, preventivo, ordine, magazzino, consegna) e flusso noleggio (prenotazione, verifica, targhette, riconsegna) con attori, stati e automazioni.

Strategia · Audit UX 04

A volte la decisione migliore è non ridisegnare nulla.

Sito online da anni, traffico presente, conversioni assenti. La tentazione era un redesign completo. L'audit ha mostrato che il problema era strutturale, non visivo. Proporre meno del previsto è stata la decisione più difficile e più corretta.

Problemi chiave

01 · Sito che parla, non converte

L'offerta era chiara per chi già conosceva la consulente, poco leggibile per chi arrivava da fuori. CTA deboli, flusso operativo non allineato, gerarchia informativa da rivedere.

02 · Budget a rischio sul problema sbagliato

Un redesign totale era sul tavolo. Investimento significativo per risolvere un problema visivo che non era la causa principale del basso tasso di conversione.

Decisione progettuale

Fare meno di quello che il cliente si aspettava.

Audit UX e gap analysis hanno chiarito che il problema era strutturale. La roadmap ha distinto tre livelli: cosa fare subito (CTA e flusso operativo), cosa non fare (redesign totale), cosa rimandare (restyling visivo). In parallelo, una nuova landing ad hoc allineata con una specialista ADV.

Le tre decisioni
01
Fare: riallineare CTA e flusso operativo

Interventi chirurgici sui punti di attrito principali. Checklist delle modifiche prioritarie, allineamento con ADV Specialist, nuova landing con flusso ottimizzato.

02
Non fare: redesign totale

Circa 3.000 euro di budget risparmiato. Il problema non era estetico e un redesign avrebbe consumato risorse senza risolvere la causa reale del basso tasso di conversione.

03
Rimandare: restyling visivo

Da valutare dopo aver misurato l'impatto degli interventi strutturali. Il dato sulle conversioni è in arrivo: le campagne ADV hanno bisogno di tempo per fornire segnale affidabile.

Il prossimo caso

Potrebbe essere il tuo.

Raccontami il contesto in tre righe. Se è un buon fit, partiamo da un triage.