UX / UI
Web app per la gestione aziendale e delle trattative commerciali, progettata per usare l’AI nello snellire l’onboarding dei prospect. Con una app companion pensata per chi lavora fuori sede.
Il problema
Un CRM deve mostrare molti dati senza diventare illeggibile. Il nodo era duplice: rendere leggibile lo stato di decine di trattative in parallelo, e ridurre a pochi secondi l’inserimento dati di chi è in strada tra un cliente e l’altro.
Cosa ho progettato
- Vista fasi a colonne — opportunità creata, contatto stabilito, presentazione, offerta inviata, confermata, rifiutata — con contatori per stato, totale del valore in fondo a ogni colonna e azioni massive: sposta di fase, congela, archivia.
- Vista elenco alternativa sugli stessi dati, ordinabile per titolo, azienda, assegnatario, scadenza, fase e valore: due modi di leggere lo stesso lavoro, per due modi di lavorare.
- Pannello laterale di dettaglio con le azioni raggruppate per intento — riportare, programmare, comunicare — per chiudere l’attività senza uscire dalla pipeline.
- Trovaclienti: l’AI segmenta i potenziali clienti per fascia di spesa e li propone all’acquisto, con metriche di sintesi, confronto con aziende note e storico dei pacchetti già presi.
- App mobile con modello di interazione a newsfeed: promemoria vocali, esiti riunione a un tocco, contatti su mappa. Consegnata al team per lo sviluppo in React Native.
- Design system documentato: otto accenti semantici e otto livelli di grigio, stati completi dei campi form, gerarchia di bottoni primari, secondari e distruttivi — con le specifiche CSS già scritte per gli sviluppatori.
Una app volutamente leggera per la vendita sul campo, costruita attorno a un ciclo che si chiude ogni ventotto giorni: arriva una lista, la si lavora, si misura cosa ha funzionato.
Il problema
Il venditore non compila un CRM mentre è in macchina. Serviva ridurre ogni interazione a un gesto solo e restituire in cambio qualcosa di immediatamente utile: dove sono i contatti, come sta andando il mese. E serviva un posto per chi non risponde al primo tentativo, che sul campo è la maggioranza.
Cosa ho progettato
- Il ciclo di ventotto giorni come struttura portante: la nuova lista si annuncia con quanti contatti contiene e quanto tempo resta, e da lì ogni schermata porta con sé i giorni residui.
- Lista contatti con stato a colore — nuovo, contattato, ingaggiato, chiuso — distanza dalla posizione attuale e azione contestuale sulla card, commutabile in mappa dallo stesso controllo in testa.
- Scheda contatto ridotta ai dati che servono sulla porta: recapito, indirizzo, punto di fornitura e listino, con chiamata e navigazione come uniche azioni primarie.
- Ciclo di feedback in una schermata sola: una domanda, una faccia che cambia con la risposta, quattro livelli e sempre una via d’uscita dichiarata — chiamata non riuscita, non era in casa.
- Recupero del contatto mancato: se il momento era sbagliato si riprogramma con data e ora in due tocchi, altrimenti si dichiara perso. I recuperi finiscono in una lista propria.
- Dashboard di performance personale: distribuzione degli stati a donut chart, tasso di redemption e rapporto vinti/persi su barra continua, con un riconoscimento a fine mese.
- Identità del prodotto: logo, palette e scala tipografica costruita su Quicksand, documentate in style guide.
App per il settore pneumatici, dove la gamification serve a sostenere le vendite dei rivenditori e a tenere insieme una community.
Il problema
Gli pneumatici sono un acquisto rimandato finché non diventa urgente. L’idea era dare all’automobilista un motivo per aprire l’app prima di quel momento, e al rivenditore un motivo per farlo entrare in negozio.
Cosa ho progettato
- Tre sezioni sole nella barra in alto — caccia al tesoro, garage, tire test — perché un’app che si apre due volte l’anno non può chiedere di imparare una navigazione.
- Sezione Garage: auto e treno gomme dell’utente, con usura in percentuale e semaforo colore che anticipa la sostituzione prima che diventi un problema.
- Tire test: scansione fotografica del battistrada con la ruota da inquadrare in un cerchio guida, per stimare il consumo e confrontare le gomme montate.
- Meccanica a caccia al tesoro sulle promozioni — trovare la serie completa sblocca lo sconto — per convertire l’uso dell’app in traffico verso i punti vendita.
- Direzione visiva ad alto contrasto giallo e nero, tipografia condensata inclinata, bandiera a scacchi e tratteggi: linguaggio da motorsport, non da e-commerce.
Catalogo online di lame circolari, frese, punte e coltelli per la lavorazione di legno, plastica e alluminio. Centinaia di codici, ognuno con una scheda tecnica che decide l’acquisto.
Il problema
Chi compra una lama non cerca un prodotto: cerca la lama giusta per il materiale che deve tagliare e per la macchina che ha in officina. Un catalogo organizzato per categoria non risponde a quella domanda. Bisognava ribaltarlo e partire dal lavoro da fare.
Cosa ho progettato
- Filtri costruiti sul problema reale invece che sull’anagrafica di magazzino: si parte da quattordici materiali da tagliare — legno tenero e duro, compensato, truciolare, impiallacciato, laminato, MDF, plexiglass, alluminio, metalli ferrosi e non — e si stringe con i cursori su diametro lama, diametro foro e spessore.
- Specifiche tecniche portate sulla card di elenco invece che nascoste nella scheda prodotto: diametro, foro, numero di denti e spessore, ciascuno con la propria icona e con i valori minimo e massimo. Si leggono durante il confronto, che è il momento in cui servono.
- Ricerca con selettore di ambito accanto al campo: chi arriva con un codice a mente lo cerca subito, chi non ce l’ha resta nel percorso a categorie.
- La wishlist funziona da richiesta di preventivo: si accumulano i codici e si spediscono in blocco. Nel B2B tecnico non si conclude con un pagamento, si conclude con un’offerta, e il sito accompagna fino a quel punto.
- Tassonomia a tre livelli su sei famiglie — lame, coltelli, punte, frese, accessori, affilatura — percorribile dal menu, dalla griglia di categoria e dalla briciola di pane, perché in un catalogo tecnico si entra da ogni parte.
- Pagine editoriali sui temi che giustificano il prezzo: trattamento Frozen, metallo duro, caratteristiche delle lame. In un mercato tecnico la spiegazione è parte del prodotto.
- Fondo scuro e accento azzurro: l’acciaio dei prodotti è grigio, e su carta bianca sparisce. Doppia lingua italiano e inglese su tutto il catalogo, codici compresi.
Compagnia siciliana di autolinee attiva dal 1926: oltre centonovanta autobus, più di tre milioni e mezzo di passeggeri l’anno. Il sito deve vendere un biglietto e insieme reggere gli obblighi di un servizio pubblico.
Il problema
Tre pubblici diversi sulla stessa homepage: il turista che prenota una tratta lunga, il pendolare che rinnova l’abbonamento, chi cerca un biglietto urbano da pochi euro. Ognuno ha fretta in modo diverso, e nessuno dei tre deve inciampare negli altri due.
Cosa ho progettato
- Motore di ricerca viaggio in prima schermata, sovrapposto all’immagine invece che relegato sotto: partenza, arrivo, andata, ritorno e passeggeri. Il pulsante di scambio tra le due località evita di ridigitare tutto a chi cerca il rientro.
- Il ritorno è un campo tratteggiato e facoltativo e la data di andata arriva già compilata a oggi: il percorso più corto è premuto per primo, gli altri restano a un tocco di distanza.
- I biglietti urbani hanno un colore proprio, il verde, e stanno fuori dal riquadro della ricerca tratte. Due prodotti diversi che convivono sulla stessa schermata senza confondersi.
- Gli abbonamenti su linguetta accanto ai biglietti: richiedono la tessera e quindi la registrazione, e il vincolo è dichiarato nel punto esatto in cui blocca, non due schermate dopo.
- Su mobile una barra Acquista resta ancorata in fondo per tutta la pagina: si legge la storia dell’azienda, le tratte, le domande frequenti, senza mai perdere di vista il motivo per cui si è entrati.
- Le promesse di servizio esplicitate prima dell’acquisto — biglietto digitale, contactless a bordo, prenotazione modificabile fino alla partenza, Wi-Fi e prese, bagaglio 1+1 — e le domande frequenti a raccogliere le obiezioni rimaste.
- Rete percorribile per città oltre che per tratta, con schede che parlano del luogo prima che dell’orario, e gli obblighi da servizio pubblico — carta dei servizi, condizioni di trasporto, reclami, accessibilità — integrati senza appesantire il percorso d’acquisto.