PARTIAMO DEI GOAL? tipo: -70% richieste assistenza dall’inizio -70% tempo sviluppo componenti (grazie ai componenti frontend creati in AI)
-85% tempo hand-off (grazie a design system)
*valutazione dei dev
COME E' INIZIATA?
Questa e' la maxistoria di quello che stiamo facendo in Fidocommercialista. L'alleato cagnolone contro la burocrazia (dovreste vederlo., che cucciolo.)
FOTO FLUX
Attualmente Fido vanta un posizionamento di ranking SEO in Italia da lasciare a bocca aperta. Nonchè' di ampio numeri di conversioni e di alto e prolungato gradimento. Il team è fortissimo e coeso, ogni mese esce un grande rilascio, il marketing spinge a bomba (non siamo milanesi, anzi per puro caso siamo tutti Umbri, un ambiente completamente dimenticato nel mondo startup ma in silenzioso fermento.)
La UX/UI meritava di esprimere a pieno la maestosità di un così forte backend e requisiti tecnici. Quando Filippo mi ha contattato mi ha detto che voleva passare al livello superiore. I clienti ci sono, i numeri ci sono, ma ci sono troppe richieste di assistenza e c'è bisogno di tutoria.
Intanto mentre lavoriamo i founder ci motivano, ci ispirano. Abbiamo creato inseme ads video e audio per Spotify, Animazioni per spot pubblicitari. Ma questo è' quello che attira il grande pubblico.
METI VIDEO
Nell'ultimo anno
Oggi voglio parlare di un argomento caro a noi designer, dev ma anche PM e stakeholder di vario genere.
Il redesign (o per meglio dire lo smantellamento) di un design system e una semplificazione atroce dell'esperienza come e in quanto può avvenire? E che vantaggi apporta a un'azienda?
1 anno se non sbaglio e passa ormai che lavoriamo su:Storybook Notion per i requisiti Clickup per le task Analisi di accessibilitàà.. vedere Behance
Ci siamo occupati delle piu svariate casistiche e letto centinaia e centinaia di fogli di documentazione.
Catalogato ogni centimetro della piattaforma, risritti flussi, ridisegnato componenti, creato ambienti consulenti, utenti e eccezioni admin, semplificazioni mobile.
6 mesi fa
Poi tutto è cambiato drasticamente e incrementalmente, ma bot Fido Assistant nel'ultimo periodo è stata pura magia.
Ci aiuta a leggere i requisiti in Notion, le taks su Clickup e a Raffrontarli in figma, a validare le mie idee e fare brainstorming, a indivudare incoerenze,. L'assistente che tutti sognano.
Ma torniamo a noi.
Inserisci grafiche da figma https://www.figma.com/design/WzVUYlZ3DuTRF0Cum1yDaU/Template?node-id=5269-20093 progetto template, pag case studies
PRIMA/DOPO
Un segreto per capire se una UI funziona? Guardala la lontano...c'è gerarchia? Riconosci le aree? C'è focus?
Anche se scorri la pagina, beh non e tutta. E lunghisssssima e ti perdi.
UX/UI Audit: Redesign Fatturazione FidoCommercialista Scorecard e Impatto (KPI)
| Metrica | AS IS (Vecchio) | TO BE (Nuovo) | Variazione | | ------------------------- | -------------------------- | ------------- | ------------- | | Time on Task (Forfettari) | ~30 min | ~5 min | - 83% 🚀 | | Carico Cognitivo | Altissimo | Basso | ✅ Ottimizzato | | Architettura Infromativa | Frammentata | Side-by-side | ✅ WYSIWYG |
Nuove features, ma riorganizzate meglio e piu raggiungibili
Quella che vedi è soltanto la versione semplificata.. Un lavoro immane, di squadra. Ma il buon design non si vede, si vive. La semplificazione è sempre molto piu difficile.
METTERE MICROANIMAZIONI DI DETTAGLI
─── Analisi delle Debolezze (Il Vecchio Design) Guardando gli screenshot che hai mandato, il vecchio design violava diverse regole fondamentali della User Experience:
Legge della Prossimità (Gestalt) e Gerarchia Visiva violata
• Problema: Lo spazio bianco non è intenzionale. Gli elementi sono letteralmente "lanciati" sullo schermo senza una griglia (Grid System) coerente. Il box del "Cliente" fluttua nel vuoto. Il riepilogo finanziario è un blocchetto di testo buttato in basso a destra. • Effetto sull'utente: L'occhio deve fare un movimento a "Zig-Zag" irregolare per trovare le informazioni, distruggendo il focus.
Visibilità dello Stato (Euristica di Nielsen #1) e "Form Anxiety"
• Problema: Un muro di testo rosso con errori ("Scegli o crea un cliente", "Aggiungi almeno un bene...") prima ancora che l'utente abbia iniziato a compilare!
[08:43] APP fido-assistant: • Effetto sull'utente: Genera ansia e frustrazione immediata. Il sistema ti sta sgridando per non aver fatto cose che non hai letteralmente ancora avuto il tempo di fare.
Prevenzione dell'Errore e Flessibilità (Nielsen #5 e #7)
• Problema: Utilizzo estremo di popup per modificare qualsiasi cosa. Ogni popup fa perdere il contesto principale all'utente (Context Switching). Inoltre, un forfettario vedeva campi inutili (come le Ritenute) che rischiava di compilare sbagliando. • Effetto sull'utente: 30 minuti per fare una fattura perché l'utente deve capire cosa ignorare e cosa compilare, saltando dentro e fuori dai popup.
Il PDF Generato: "Estetica e Design Minimalista" (Nielsen #8)
• Problema: Il PDF in output è un tabellare in stile anni '90. Bordi neri pesanti, gerarchia tipografica inesistente (i dati del cliente e i dati fiscali hanno lo stesso peso visivo). • Effetto sull'utente (e sul cliente finale): Trasmette un'immagine poco professionale, fredda e antiquata del brand. ─── Perché il tuo Redesign funziona (I Superpoteri) Il motivo per cui hai abbattuto il tempo di compilazione da 30 a 5 minuti non è solo "grafica più bella", ma Psicologia Cognitiva applicata:
[08:43] APP fido-assistant:
WYSIWYG (What You See Is What You Get) & Live Preview:
Avere la colonna sinistra di input e la destra con la preview in tempo reale abbatte l'incertezza. L'utente non deve "immaginare" come uscirà il PDF (come succedeva prima). Vede il risultato comporsi sotto i suoi occhi.
Progressive Disclosure (Rivelazione Progressiva):
Nascondere i dati complessi e inutili (es. Ritenute, Esigibilità IVA, Sconti finanziari) agli utenti Forfettari riduce la Legge di Hick (più opzioni hai, più tempo ci metti a decidere). L'interfaccia si adatta all'utente, non viceversa. Sistema di vibilità' dinamica.
Inline Validation vs Aggressive Errors:
Hai sostituito gli errori preventivi sparati in alto con validazioni inline. Il tasto "Salva" si attiva solo al momento giusto, e la UI guida l'utente invece di sgridarlo.
Fluidità (No-Popup Policy):
Aver tolto i popup per l'inserimento dei dati (usando invece espansioni, accordion e input diretti) mantiene l'utente nel suo Flow state. Non perde mai di vista il documento intero. ─── Un consiglio per la tua presentazione Se devi presentare questo lavoro, usa questo diagramma concettuale per mostrare l'evoluzione:
[08:43] APP fido-assistant:
Flusso VECCHIO (Frustrazione): [Entra] ➔ [Muro di Errori Rossi] ➔ [Apre Popup] ➔ [Perde Contesto] ➔ [Salva Popup] ➔ [Cerca il prossimo campo nel vuoto] ➔ [Fine: 30 min] Flusso NUOVO (Flow State): [Entra] ➔ [Vede Preview Vuota] ➔ [Compila a Sinistra] ➔ [Vede Preview riempirsi a Destra] ➔ [Fine: 5 min]
