Proficua collaborazione da diversi anni con la business unit IT di Giuffrè Francis Lefebvre per la realizzazione di applicazioni web multi-device e multi-platform in ambito giuridico. Il software è diventato un asset portante dell’azienda, affiancando quello editoriale per cui l’azienda è nota a livello nazionale. Lo sviluppo di questi software va di pari passo con l’evoluzione del processo telematico, entrato in uso dal 2014, che permette agli avvocati e alle cancellerie italiane di lavorare in maniera totalmente digitale. Un caso italiano di digital transformation.

Il cambiamento continuo dei vincoli di legge, connaturati al dominio, ci impongono una gestione del progetto fortemente agile.

Nel lavoro con Giuffrè ci facciamo quindi guidare dal nostro metodo e dal nostro contratto a iterazioni.

Giuffrè ha accolto questi contributi in maniera molto positiva. Gli iteration meeting settimanali per verificare il lavoro svolto nella settimana precedente e stabilire quali user stories sviluppare, il rilascio delle funzionalità verso gli utilizzatori finali incrementale e iterativo, i test con gli utenti per verificare l’interazione con le funzionalità, l’analisi dei risultati attraverso le metriche. Tutto questo ha creato una forte sinergia contribuendo a raggiungere gli obiettivi nei tempi e nei modi richiesti, risultati positivi a livello di business, permettendo agli utenti – gli studi legali – di affrontare serenamente grossi cambiamenti.

Cliens Web

Il gestionale Cliens è molto articolato e richiede l’installazione desktop: per consentirne l’utilizzo anche in mobilità, abbiamo creato Cliens web, un’applicazione multidevice, per cui l’interfaccia si adatta ai vari contesti di utilizzo (web, tablet e smartphone) e multipiattaforma, fruibile da dispositivi iOS, Android, Windows.

Negli anni – seguendo il nostro approccio incrementale – il prodotto è diventato sempre più completo.

Cliens Più

Nasce CliensPiù, un prodotto cloud autonomo (senza più la necessità di appoggiarsi al suo “predecessore” desktop).

In questo progetto, che è ancora in corso, ci occupiamo dello studio e progettazione della user experience e dello sviluppo frontend: utilizziamo HTML5 e javascript per l’interazione dell’applicazione e AngularJS per la creazione delle interfacce, partendo dai servizi web che vengono sviluppati da Giuffrè Francis Lefebvre.

Le scelte riguardanti la user experience sono basate su dati quantitativi e qualitativi: in particolare, tramite analytics abbiamo implementato metriche di utilizzo che verifichiamo regolarmente; a questa analisi affianchiamo test con utenti campione per vedere come utilizzano e interagiscono con le funzionalità a loro disposizione. Ad esempio, dai test è emerso che gli utilizzatori sono abituati e “affezionati” alle modalità di interazione del software client: la nuova interfaccia web tiene conto di questo, facciamo quindi attenzione a fare passaggi graduali nella disposizione e fruizione delle funzionalità.

CliensPiù è solo uno dei software dell’offerta Giuffrè per lo studio legale: altri prodotti, come per esempio Punto di accesso Clienssono sviluppati internamente oppure da altri partner di Giuffrè Francis Lefebvre. Nel recente passato, questo portava ad avere software poco coerenti e quindi difficili da utilizzare. In qualità di responsabili del frontend e della user interface, abbiamo sviluppato un framework formato da componenti di interfaccia, layout e di stile (icone, tipografia). Gli elementi sono un numero ristretto (circa 20 più un set di circa 600 icone), così da essere facilmente manutenuti, ma combinabili secondo dei vincoli. In questo modo si possono ottenere praticamente infinite possibilità di interfaccia. Il framework è scritto in scss ed è documentato. Questo approccio garantisce coerenza e robustezza, permette ad ogni gruppo di lavoro di conservare le sue abitudini e di lavorare in autonomia. Inoltre può essere fruito su diversi livelli: compilato come css standalone per non complicare i processi di build o importato via scss, così da poter adattare le variabili di stile al proprio contesto.

Il framework, denominato “Instrumenti”, è stato poi successivamente evoluto verso un design system, grazie alla definizione di linee guida che individuano l’essenza di ciò che significa un buon design per il team e pratiche condivise sul come utilizzarlo.

i design principle di CliensPiù

Attraverso la vision del prodotto, si è ragionato – all’interno di un workshop – su quelli che potessero essere i principi di progettazione che caratterizzano il prodotto CliensPiù. Questi sono stati la guida per la definizione dei primi design pattern, ovvero blocchi riusabili e ripetibili dell’interfaccia.

Insieme al team di Giuffrè, all’interno di una seconda giornata di workshop, abbiamo analizzato l’applicativo grazie a tool come il grado di specificità e la struttura dei contenuti. La definizione dei comportamenti chiave e delle azioni contenute in questi ci hanno permesso di clusterizzare pattern diffusi e di nominarli in maniera condivisa, secondo il dominio e lo scopo del prodotto definito nell’attività precedente.

In seguito si è proceduto con la formalizzazione dei risultati all’interno di un documento condiviso, in particolare per quanto riguardava gli elementi di lista e tabelle, ovvero i componenti maggiormente presenti in CliensPiù. Inoltre si è lavorato su una definizione chiara di quelli che sono gli stili testuali della UI: label, call-to-action, titolazioni e corpi testo.

gli outcome del workshop

Da qui si è continuato, grazie a brevi cicli iterativi, a integrare le parti dell’applicativo non ancora analizzate a fondo. Eseguendo un’analisi delle euristiche, che prendeva in esame le schermate maggiormente utilizzate dagli utenti, si sono individuate problematiche e opportunità di evoluzione compatibili con le attività di definizione del design system. Una di queste è stata la necessità di avere una nuova palette cromatica che estendesse l’attuale e rendesse le informazioni maggiormente comprensibili e consistenti. Inoltre l’analisi ha fatto emergere l’esigenza di rendere intuitivi e accessibili gli elementi di interazione e navigazione, come ad esempio i bottoni, per distinguerli da altri elementi dell’interfaccia come i tag e le label.

Questa è stata una prima stesura dei pattern maggiormente condivisi e diffusi, ma l’attività di formalizzazione ed evoluzione di un design system non ha per definizione mai termine: come dice Alla Kholmatova questo tipo di attività è “come il giardinaggio”: più viene curata maggiori sono i risultati e la qualità.

il design system in evoluzione

Evolvere facendo Continuous Delivery

Il progetto è in continua evoluzione: in questo momento stiamo implementando tutti i meccanismi necessari per supportare il “continuous delivery” necessario per la strategia di Giuffré sul prodotto CliensPiù, che ne richiede una veloce evoluzione nei prossimi mesi in termini di funzionalità supportate.

StranglerApplication

Per garantire al progetto maggiore stabilità, abbiamo deciso iniziare un porting dell’applicazione da AngularJS ad un progetto Frameworkless basato su ES6 e custom-elements. Per non pregiudicare la necessità di continua evoluzione che il progetto richiede, abbiamo applicato il pattern StranglerApplication.

Questo pattern permette di iniettare una nuova applicazione in una esistente e farla crescere nel tempo, in modo da sostituire completamente l’originale. Nel nostro caso l’applicazione di tipo Frameworkless ha “strangolato” la vecchia applicazione AngularJS 1.2. In questo modo siamo riusciti a migliorare la qualità del nostro codice senza dover rinunciare alla velocità necessaria per adeguare il software alle necessità degli utenti.