lo ux designer

Il contesto

Il lavoro da UX designer in Agricolus.

Dopo la parentesi della doppia vita (direttore creativo di giorno e indie hacker di notte), vediamo il nostro soggetto entrare nel mondo dell’innovazione dalla porta principale. Agricolus è una startup che si occupa di agricoltura di precisione. Più correttamente: sviluppa un sistema di supporto alle decisioni dedicato al mondo agricolo.

Il prodotto è presente in più di 70 paesi, è tradotto in 8 lingue e offre una vasta gamma di funzionalità, tra cui modelli previsionali per la difesa delle colture sviluppati internamente dal reparto R&D, l’uso innovativo delle immagini satellitari per il monitoraggio dei campi, e una suite completa di strumenti per la gestione dell’azienda e il risparmio degli input agricoli.

Il soggetto viene inserito inizialmente come UX designer nel reparto produzione, ed è così che abbiamo classificato il dossier, anche se il ruolo evolverà nel tempo. Per capire meglio di cosa si tratta utilizziamo questo video, realizzato da Fumanti stesso per coinvolgere utenti nel cosiddetto “programma tester”.

Video: Agricolus

Sappiamo che il soggetto, tra i primi incarichi, si è misurato con la progettazione di una nuova linea di prodotti destinati alle filiere e ai consorzi. Il target primario di Agricolus infatti erano le aziende agricole, ma c’era spazio per inventare un prodotto trasversale per le grandi organizzazioni.

Fumanti deve quindi progettare l’esperienza dei diversi utenti. Non solo agricoltori e agronomi, ma anche operatori di filiera, amministratori, consulenti e professionisti trasversali alle organizzazioni.

Video: Agricolus - nuova linea di prodotti

Video: Agricolus - nuova linea di prodotti

Focus on: agricons

La produzione di una libreria di icone custom.

Una traccia lasciata da Fumanti nel prodotto è il cambio delle icone. Un intervento apparentemente marginale, ma significativo: Agricolus infatti attingeva a librerie di icone esistenti ma, trovandosi ad operare in una nicchia molto specifica, aveva bisogno di un lessico visivo che, semplicemente, non esisteva.

Questo perché nessun designer aveva avuto il problema di rappresentare adeguatamente con un’icona alcuni concetti. Ad esempio: fenologia - l’informazione che descrive lo stadio di sviluppo di una pianta. Un’icona adeguata era difficile da trovare.

Gli sviluppatori in questi casi adottavano il classico workaround: tempo passato a cercare un’icona in qualche modo affine, magari attingendo a librerie diverse. Con ovvie conseguenze: incoerenza visiva, dipendenze, inefficienze. Costi, in definitiva, senza raggiungere il risultato desiderato, cioè quello di diminuire il carico cognitivo dell’utente.

Fumanti affronta il problema di petto e crea “AgrIcons”, una libreria estensibile di icone custom. Negli anni il soggetto aggiungerà centinaia di icone fino a contarne circa 5400, nelle versioni outline (solo bordo) e filled (con un riempimento).

Avere un set di icone estensibile non bastava. Perché fosse utile a tutti doveva essere facilmente implementabile. In altre parole: il designer doveva essere in grado di modificare la libreria rapidamente, mentre lo sviluppatore non doveva fare nessuna difficoltà a recuperare l’icona corretta.

Fonti interne ci hanno dato accesso ai documenti che rivelano la follia creatrice di Fumanti: un intero flusso di lavoro sviluppato da zero, dalla progettazione di un’icona fino alla sua messa in produzione.

ATTENZIONE: questa parte è profondamente tecnica. La riportiamo solo per documentazione, sperando che qualcuno sappia decifrarla meglio di noi.

Primo step: creazione della nuova icona.
Fumanti aveva definito regole precise per garantire che una nuova icona fosse coerente con le precedenti. La nuova icona doveva essere creata in un canvas di 24x24 pixel, con uno spessore del bordo di 1.5 punti, con un border radius di 1 pt e non doveva mai occupare uno spazio superiore a 22x22 pixel, in nessun caso. C’erano regole specifiche sulle intersezioni e su come un’icona outline avrebbe dovuto riempirsi per diventare la sua controparte filled.

Secondo step: esportazione in SVG
L’icona così creata doveva essere esportata in formato SVG. Anche qui c’erano diverse regole da rispettare, tutte pensate per risparmiare tempo e costi in fase di utilizzo. Ad esempio: il file doveva avere un unico path, indipendentemente dalla complessità dell’icona. In questo modo, quando la nuova icona veniva aggiunta nel componente Figma, se l’istanza subiva qualche modifica (colore, spessore del tratto), lo swap non dava problemi, e il designer avrebbe risparmiato secondi preziosi ad ogni cambio.

Anche il naming aveva un suo formalismo, ma non abbiamo elementi sufficienti per approfondire.

Terzo step: la conversione in font.
Migliaia di icone SVG non potevano essere pubblicate in questa forma. Se fossero state impacchettate in un font, avrebbero occupato meno spazio e sarebbero state gestite con la stessa semplicità di un testo. Fumanti quindi sviluppa uno script che, preso in input l’intera collezione di SVG, restituisce tutti gli asset necessari, tra cui WOFF, TTF, OTF, DART e CSS.

Da quanto riusciamo a leggere nel file CSS, ogni icona aveva una sua classe coincidente con il proprio nome, oltre a classi generiche che stilizzavano la dimensione. Con una particolarità, che tratteggia bene l’ossessione di Fumanti per i dettagli. Non siamo nemmeno sicuri di aver capito bene, ci proviamo.

Le icone venivano identificate dal loro nome, scritto in kebab case, e da un suffisso. “-fill” per quelle con riempimento, “-line” per quelle senza. Se però veniva usato il suffisso speciale “-hover”, l’icona outline si sarebbe trasformata nella sua versione fill al passaggio del mouse dell’utente su di essa. Allo sviluppatore bastava semplicemente cambiare un suffisso per avere gratuitamente un comportamento raffinato, già codificato nella definizione dell’icona.

Quarto step: la pagina di consultazione
Avere molte icone aveva anche un altro problema: la libreria era complessa da sfogliare. Fumanti provvede a integrare nello script di conversione anche la generazione di un’anteprima HTML per la ricerca e la consultazione. In questa pagina web lo sviluppatore poteva trovare l’icona che gli interessava e, cliccandoci, avrebbe copiato la classe CSS specifica da incollare nel codice. Era utile anche ai designer. Se si doveva scegliere un’icona, la modalità “pick” permetteva di appuntarsi da una parte tutte le candidate, così da scegliere comodamente la vincente.

la progressione

L’incarico come coordinatore. Esperimenti e progetti europei.

L’azienda cresce e il ruolo di Fumanti evolve di conseguenza. L’obiettivo principale rimane sempre lo stesso: migliorare il prodotto a partire dall’esperienza utente. Cambiano invece le responsabilità.

Il soggetto prende il coordinamento di un team multidisciplinare composto da sviluppatori front-end, back-end, mobile e agronomi. A questi si affiancano anche agricoltori e partner tester, dai quali settimanalmente raccoglie feedback sulle proposte di design, sugli esperimenti pre-lancio, sulle abitudini d’uso e sul mercato.

Questo lo rende un punto di contatto tra diversi reparti, coordinando parte della produzione e collaborando con le divisioni di marketing, sales, ricerca e sviluppo. In quegli anni le fonti lo vedono partecipare alla stesura e alla revisione dei flussi aziendali, contribuire alla messa a terra di progetti speciali e alla strategia di prodotto.

Sono collega di Andrea da diverso tempo in Agricolus.

Andrea è un designer molto valido che qualunque team vorrebbe avere. È molto preparato, disposto spesso a fare anche un passo indietro e guardare una situazione da un altro punto di vista per cogliere nuove prospettive o opportunità e criticità. Ha ottime capacità di problem solving e una conoscenza approfondita di UI/UX, con linee guida sempre rivolte a migliorare l'esperienza dell'utente finale. Arriva rapidamente a prendere confidenza con nuovi strumenti ed è proteso sempre al continuo miglioramento di se stesso e del prodotto. Inoltre è capace di tirare fuori materiale utilissimo a noi sviluppatori in brevissimo tempo, nonché di rivoluzionare un aspetto poco funzionale.

È simpatico, frizzante, gli piace fare gruppo sempre con la battuta pronta. È una risorsa preziosa in squadra!

Sappiamo che anche in questa fase non mancavano i tentativi di produrre soluzioni poco ortodosse, con l’obiettivo di migliorare l’esistente.

Su questo riportiamo un aneddoto. Fumanti sa bene che l’ostacolo maggiore degli utenti di Agricolus è l’inserimento dei dati in piattaforma. Il prodotto infatti è tanto più utile quanto più l’utente contribuisce con le sue osservazioni. In molti casi però quest’abitudine si rivela difficile da costruire.

Il soggetto, intervistando decine di utenti, scopre che il 62,5% degli agricoltori appunta le osservazioni su carta. Il 43,7% dei quali usa la carta come unico supporto. Il dato sconvolgente è che più della metà portano comunque lo smartphone in campo e hanno un abbonamento a un qualche software agritech.

Fumanti unisce i puntini con un’idea: un blocco note cartaceo che abbia pagine preformattate per compilare il dato come serve all’utente e come piace al software. Qualora l’utente desideri digitalizzare l’informazione, potrebbe scattare una foto con l’app di Agricolus. Si tratterebbe solo di integrare un algoritmo di riconoscimento ottico dei caratteri e analizzare qualche caso limite. Non facilissimo, ma il team fa cose molto più difficili di questa. Sfortunatamente non abbiamo dati sull’esito dell’esperimento. Sappiamo infatti che il blocco note viene stampato (siamo in possesso di una copia), ma il protocollo di integrazione del dato non viene sviluppato. Non siamo a conoscenza del motivo.

Ad un certo punto registriamo il coinvolgimento di Fumanti in progetti di ricerca europei. Come ci sia arrivato, le fonti non lo dicono. Forse la padronanza dell'inglese o le capacità diplomatiche. Più probabilmente, non c'era di meglio in zona.

Sta di fatto che i nostri tabulati in quegli anni lo tracciano in tutta Europa tra conferenze, meeting e appuntamenti. Collabora con aziende, centri di ricerca e università sparse nel continente. Spuntano foto che lo immortalano nella sede italiana dell’Agenzia Spaziale Europea, e prove video come la seguente, nella campagna belga.

Video: Agricolus - progetto europeo in Belgio

Focus on: terra

La sfida: un design system completo e una nuova app mobile.

Primavera 2023.

Complice un’app un po’ datata e una buona dose di incoscienza, Fumanti offre il suo team per riprogettare da zero la versione mobile di Agricolus.

Precedentemente erano già stati fatti tentativi di revisione, ma il risultato non era stato pienamente soddisfacente. C’era bisogno di ripartire dalle basi e la strada più rischiosa era diventata la più naturale: andava riprogettata l’intera esperienza utente, e con essa l’identità dell’app, con un nuovo design system.

Le fonti qui sono concordi. Quando Fumanti racconta la genesi di questo progetto parte sempre da un aneddoto strambo che coinvolge il panorama umbro, risalente ai primi mesi di lavoro in Agricolus. Il soggetto, durante un giro in scooter ha un’intuizione: i campi, visti dall’alto, sembrano elementi di un’interfaccia un po’ bizzarra.

La nuova app dovrà riuscire ad unire due punti di vista diversi. Da un lato quello del satellite che osserva la Terra, lo stesso che Agricolus usa per produrre valore, innovazione e ricerca. Dall’altro il punto di vista dell’agricoltore in campo, quello che si indossa quotidianamente per portare a casa il raccolto. In entrambi i casi, sia per il satellite che per l’agricoltore, è la natura a fare da limite, da risorsa, da interfaccia.

Per il design system deve valere lo stesso. La natura è’ l’interfaccia.

Fumanti elabora 7 concetti chiave che avrebbero guidato gli sviluppi. Divisi in 4 “Foundations” per governare l’identità visiva del prodotto e 3 “Guidelines”, per massimizzare l’usabilità, l’utilità e il valore.

Così nasce TERRA, il design system di Agricolus.

TERRA ha alcuni dettagli che la rendono particolare. La caratteristica più identitaria è che l’interfaccia, esattamente come accade in natura, cambia gradualmente colore nel corso dell’anno. L’app infatti, a partire dal 21 marzo (primo giorno di primavera) ogni mese cambia leggermente tonalità.

Per farlo il soggetto realizza 4 scale cromatiche a partire da altrettanti colori selezionati dal logo di Agricolus, definendo così un vocabolario di colori validi, identificabili attraverso la luminosità percepita di ciascuno.

Questo dava subito un vantaggio pratico, che approfondiremo: due colori con lo stesso grado di luminosità percepita, preservano le caratteristiche di contrasto (quindi di leggibilità) a prescindere dal resto delle informazioni cromatiche che possiedono. Se in fase di progettazione vengono definiti vincoli precisi, la tonalità del colore diventa quasi del tutto ininfluente.

La difficoltà maggiore stava nella combinazione dei colori e nella definizione del loro ciclo annuale. Fumanti sceglie per ogni stagione un colore primario e uno secondario, e definisce il ciclo annuale così: il colore secondario di una stagione deve diventare il colore primario della successiva.

Una volta definita questa semplice regola, basta una banale interpolazione lineare da un colore all’altro per avere il controllo sul numero di step intermedi e sulla rapidità della progressione. Fumanti decide che i colori vanno cambiati 12 volte l’anno, il 21 del mese, al cambiare delle stagioni. Può sembrare complicato, ma si tratta di poche righe di codice e qualche variabile.

Questo stratagemma permette a Fumanti di progettare l’interfaccia senza (quasi) considerare il cromatismo. Infatti, una volta definite le coppie primario-secondario e il loro avvicendamento, la tonalità e la saturazione diventano aspetti irrilevanti.

Questo significa che, chiarite le regole cromatiche una volta per tutte, è possibile disegnare interfacce anche in bianco e nero; il risultato sarà sempre quello desiderato in termini di accessibilità, contrasto e gradevolezza delle combinazioni. Indipendentemente dalla stagione.

Ma la progettazione di TERRA doveva considerare che l’app sarebbe stata usata in condizioni impegnative. L’agricoltore infatti avrebbe usato il dispositivo in campo, in presenza di condizioni di luce assente o, al contrario, diretta sullo schermo. Andavano quindi realizzati dei temi. Tema chiaro e tema scuro erano indispensabili per garantire un minimo di accessibilità. Ma non erano sufficienti.

Fumanti allora pensa a un terzo tema: il tema in campo.

Il tema in campo è un tema pensato per l’uso, appunto, in campo, e si comporta come un tema ad elevata leggibilità. Padding e testi si ingrandiscono in maniera prestabilita. Il contrasto tra testo e sfondo aumenta. Gli elementi diventano più facilmente individuabili grazie alla presenza di bordi scuri e sfondi chiari.

Testimoni dicono di aver visto Fumanti fare chilometri a piedi nel parcheggio dell’azienda in ogni condizione meteo, per mettere a punto il nuovo tema. Una fonte, che ha chiesto di rimanere anonima e di cui possiamo solo dire l’occupazione (imprenditrice agricola), dichiara di essere stata costretta dal soggetto a provare il tema in ogni condizione. Anche durante la guida del trattore in campo!

Immaginiamo la faccia dei primi sviluppatori con cui Fumanti interagisce. Lo sfondo di un bottone non è semplicemente un colore, ma 12 (4 stagioni, 3 temi). La complessità sarebbe esplosa subito. Sarebbe stata una follia.

In realtà il soggetto è sufficientemente accorto da presentare il progetto insieme alla soluzione. Un uso sapiente dei design token, unito a un’ottima definizione dei componenti di base, permetteva a Fumanti di progettare l’interfaccia rapidamente e senza nessun problema di handoff con gli sviluppatori.

Ciascun token dei colori era infatti definito esaustivamente attraverso 3 criteri: semantica, luminosità’ e destinazione d’uso.

Tornando all’esempio del bottone: se questo doveva avere uno sfondo (destinazione d’uso) di colore primario (semantica) e doveva essere prominente (con luminosità 60, ad esempio), al soggetto bastava dire che lo sfondo del bottone sarebbe dovuto essere PBg60 (Primary - BackGround - 60). Quel token aveva in sé tutte le informazioni necessarie per sapere come comportarsi. La luminosità 60 definiva un valore univoco, codificato. Era uno sfondo, quindi il colore sapeva quanto schiarirsi o quanto scurirsi, in funzione del tema. Era primario, quindi sapeva come cambiare in base alle stagioni.

Possiamo dirlo: era un modo molto elegante per contenere la complessità in una codifica molto semplice.

Fumanti si incaricherà di guidare non solo la creazione del design system, ma l’intera riprogettazione dell’app mobile: dall’analisi delle funzionalità alla definizione degli sprint, dal coordinamento del team alla negoziazione con il board, fino alla prototipazione e ai test con gli utenti. Sappiamo che tutto questo è stato possibile solo grazie all’ottimo team che il soggetto aveva la fortuna di coordinare.

La versione alpha viene rilasciata nel periodo natalizio del 2023. La beta ad Aprile 2024. La prima versione stabile al termine dell’estate 2024. Siamo riusciti a recuperare il video di lancio della nuova app. Non ne siamo sicuri, ma sembra che sia stato fatto dal nostro soggetto. Di nuovo, ci risulta improbabile, ma lo stile sembra proprio il suo.

Video: TERRA - video di lancio

L’app mobile sarà l’ultimo grande progetto di Fumanti in Agricolus. L’azienda ha bisogno di lui altrove. Abbiamo raccolto le informazioni a riguardo nel dossier numero 6, il product manager.