Dev Mode riduce di 1,5 ore il flusso di lavoro dal design al codice di HP

Un vero e proprio gigante del settore dell'elettronica, HP è stata pioniera nello sviluppo di tecnologie che spaziano dalle stampanti ai laptop fino ai sistemi di gaming e altro ancora, tanto che il piccolo garage di Palo Alto dove tutto è iniziato è oggi un California Historical Landmark, noto come la "culla della Silicon Valley". Ma con una gamma così vasta di prodotti, ciascuno con la propria base specifica di clienti, diventa difficile mantenere un'esperienza coesa per tutti, mentre l'azienda continua a innovare. Ed è qui che entra in gioco il sistema di progettazione di HP, Veneer. Abbiamo parlato con il team dell'azienda per scoprire come sono riusciti a:

• Creare un sistema di progettazione multilivello per supportare oltre 70 prodotti e abbattere le barriere tra i team;
• Utilizzare Dev Mode in modo da far risparmiare a sviluppatori e designer una media di 98 minuti a settimana;
• Implementare Code Connect per estendere l'adozione di Veneer su larga scala e ridurre il tempo perso dagli sviluppatori per passare da un contesto all'altro;
• Ottenere un ROI del 500% in termini di tempo risparmiato ogni anno e ridurre del 50% i tempi di sviluppo grazie a Veneer.

Ci parli del suo team e di come affrontate il tema della qualità dei prodotti in HP.

Gilson Hoffmeister, Design Systems Strategist di HP: il nostro team gestisce l'esperienza end-to-end del sistema di progettazione di HP, che spazia dal favorire l'accessibilità del design all'implementazione in piattaforme specifiche, come Android, iOS, Windows e web.

Ci concentriamo nel mettere i team di HP nelle condizioni di creare in modo efficiente esperienze di alta qualità, che siano coerenti e d'impatto per tutti i clienti. Ma questo può rivelarsi difficile, perché HP è una grande azienda con più di 100 linee di prodotti diversi. Ogni prodotto HP ha un DNA unico e riconoscibile. I PC aziendali, devono essere eleganti, ma al contempo funzionali per l'uso quotidiano, con l'intento di trasmettere fiducia e sicurezza agli utenti. Gli accessori da gaming, invece, devono essere divertenti e di alta qualità, in modo che le persone siano orgogliose di indossarli, utilizzarli e mostrarli.

Andrei Garcia, responsabile del design senior di HP: ci siamo trovati in difficoltà di fronte alle numerose unità aziendali di HP, ognuna concentrata sulle proprie esigenze e obiettivi. Spesso, lavoravano in isolamento senza molta coordinazione su come HP dovesse presentarsi e comunicare a livello digitale. Pur non essendo una scelta fatta di proposito, sentivamo la necessità di allineare tutti a un unico standard.

Può parlarci di Veneer, il sistema di progettazione di HP?

Gilson: per noi di HP l'obiettivo principale è la soddisfazione del cliente. Con Veneer, possiamo assicurarci che tutti i nostri software trasmettano coerenza e funzionino bene insieme. Aiuta tutti ad allinearsi alle medesime linee guida per il design e la progettazione, semplificando l'esperienza per i nostri vari segmenti di clientela.

Andrei: Veneer offre a tutti, designer, sviluppatori, UX e UI writer e altri ancora, una base da cui partire e li supporta durante l'intero processo di sviluppo del software.Ciò che è iniziato come una semplice "libreria di componenti frontend" si è evoluto in un sistema multifunzionale che consente di risparmiare tempo, elimina le attività ridondanti e crea coesione.

Come misurate il livello di adozione di Veneer?

Gilson: misuriamo l'adozione di Veneer attraverso una combinazione di metriche quantitative e qualitative. Attraverso l'analisi dei dati di utilizzo delle librerie in Figma e tracciando i download dei nostri pacchetti di sviluppo, otteniamo informazioni utili su quanto ampiamente ed efficacemente viene utilizzato il sistema. Ad esempio, con la nostra libreria Iconography, vediamo che 915 componenti di icone vengono utilizzati da 320 team in tutta HP, con una media di 85.000 inserimenti a settimana, a conferma del suo vasto utilizzo. È interessante notare che l'icona ellissi si distingue come la più utilizzata con oltre 1,2 milioni di inserimenti.

Perché è importante favorirne l'adozione?

Gilson: usare Veneer è fondamentale perché rende il nostro processo di sviluppo del prodotto più veloce e mantiene la coerenza in tutto l'ambiente HP. Con Veneer, designer e sviluppatori hanno un punto di partenza comune. Creare componenti da zero richiede tempo, con Veneer solleviamo i team da questo compito gravoso, perché gli stati e le linee guida di accessibilità sono già integrati, in modo da non dover sviluppare e testare elementi già collaudati. Ciò gli consente di dedicare più tempo alle attività più importanti e di concentrarsi sul lavoro da ultimare.

Gilson: per fare un esempio, da gennaio a dicembre del 2023, abbiamo riscontrato che l'utilizzo di Veneer ha fatto risparmiare il 500% di tempo in più rispetto a quello impiegato per svilupparlo. Invece di investire tempo e risorse per creare da zero gli stessi componenti in ogni progetto, i team hanno utilizzato quelli già pronti presenti in Veneer. Ciò dimostra quanto Veneer abbia contribuito nell'abbattere i costi e migliorare l'efficienza, rendendo l'investimento fatto cinque volte più prezioso.

Andrei: se i team dovessero scegliere di non utilizzare Veneer, ci sarebbero concrete ripercussioni sulla coerenza del prodotto, la scalabilità e l'efficienza degli sviluppatori. Secondo il nostro VP dell'ingegneria, Gaurav Roy, per alcuni progetti, l'utilizzo di Veneer ha ridotto il tempo di sviluppo del 50%. Questo benchmark rispecchia delle comparazioni esterne, come uno studio condotto da IBM che ha riscontrato un tempo di sviluppo più veloce del 47% per la creazione di moduli semplici, quando si utilizza un sistema di progettazione rispetto a partire da zero.

Prima di Dev Mode, quali difficoltà ha incontrato il suo team nel promuovere l'adozione di Veneer?

Andrei: una delle principali difficoltà, tuttora presente, era data dall'elevato numero di sottomarchi che HP possiede. È impossibile supportare un tale scenario con un sistema di progettazione a un solo livello. Ci è voluto un po' di tempo per strutturare Veneer affinché fosse abbastanza flessibile da supportare una strategia che abbracciasse più marchi. Senza la possibilità di avere più livelli di adozione, non riuscivamo a guidare l'allineamento e la coerenza tra i diversi prodotti e segmenti.

Gilson: convincere i designer a utilizzare Veneer non è stato facile perchéci tenevano molto ai loro prodotti e utenti. Il fatto che qualcosa dall'esterno mettesse in discussione ciò che avevano costruito fino a quel momento è stato visto come un campanello d'allarme, perché pensavano che questo nuovo approccio potesse danneggiare la loro relazione con i loro utenti.

La difficoltà più grande è stata riuscire a dimostrare a queste persone come un sistema di progettazione unificato potesse invece aiutarle. Molti erano abituati a prendere decisioni sul design e sulla progettazione in modo autonomo, come quali componenti utilizzare o quali colori scegliere. Dovevamo mostrare a queste persone che se avessero evitato di occuparsi di questi compiti e utilizzato invece Veneer, avrebbero potuto concentrarsi di più sulle parti creative e distintive dei loro progetti, come la logica di business e i pattern di design.

Gli sviluppatori hanno trovato più facile adottare Veneer, perché hanno capito subito i benefici derivanti dal riutilizzo del codice. Ma abbiamo comunque dovuto affrontare la sfida di assicurarci che Veneer fosse efficace sugli oltre 40 framework di UI e tecnologie frontend utilizzate all'interno di HP.

Può dirci come i team di HP hanno utilizzato Dev Mode con il sistema di progettazione?

Dev Mode ha ottimizzato il modo in cui i nostri sviluppatori accedono a queste specifiche di design all'interno di Figma, riducendo la necessità di lunghe discussioni e riunioni e rendendo il passaggio dal progetto di design al codice molto più fluido.

Andrei: ad esempio, abbiamo aggiunto il supporto per componenti a forma di pillola e ciò ha comportato la modifica di padding e margini. Utilizzando le annotazioni in Dev Mode, è stato più facile per i designer mettere in evidenza gli aggiornamenti da fare per il team di sviluppo, snellendo così il flusso.

La funzione di confronto delle modifiche è estremamente utile per vedere cosa è cambiato da una versione del progetto all'altra, specialmente quando stiamo aggiornando i nostri prodotti esistenti. Mantiene tutti allineati e rende gli aggiornamenti più fluidi.

Un'altra cosa interessante è la possibilità di contrassegnare le parti del progetto come pronte per lo sviluppo, con la funzione "Ready for dev", che indica esattamente ai nostri sviluppatori su cosa devono lavorare, riducendo la confusione e aiutando tutti a concentrarsi nel portare a termine le cose.

In che modo le variabili e Dev Mode vi aiutano a gestire le complessità di un catalogo multiprodotto?

Andrei: usiamo le variabili collegate ai nostri token primitivi o semantici, che si adattano magnificamente attraverso diversi temi e modalità, come chiara, scura e ad alto contrasto.

Cosa ancor più importante è che le variabili formano un collegamento cruciale tra gli elementi di design e l'ambiente di codifica. Il nostro team Foundation gestisce gli elementi chiave di Veneer, inclusa l'automazione per semplificare la transizione dal design al codice. I team è riuscito a realizzare un solido ponte che connette design, progettazione e sviluppo, utilizzando l'API di Figma, che consente di leggere queste variabili direttamente dai design. Ciò significa che le variabili usate nel design sono tradotte 1:1 nel codice, in modo che designer e sviluppatori parlino letteralmente lo stesso linguaggio.

Questo allineamento non solo semplifica il processo di sviluppo, ma migliora anche la comunicazione tra i team, permettendo un'implementazione più precisa delle specifiche di design. Mantenendo questa corrispondenza diretta tra elementi di design e codice, riduciamo significativamente le inconsistenze e miglioriamo la qualità e la scalabilità complessiva dei nostri prodotti digitali.

Siccome siete tra i primi utilizzatori di Code Connect, ci racconti la vostra esperienza finora?

Gilson: Code Connect è la funzionalità che ci ha entusiasmato di più. Configurarlo è stato super facile, è bastato il lavoro di due settimane di un solo ingegnere.

Per riuscire a risparmiare ancora più tempo, stiamo incrementando l'automatizzazione del processo per attività come le modifiche dei componenti. Ad esempio, abbiamo un file sorgente in cui tutte le icone sono nella loro versione "modificabile" (utilizzando più livelli, elementi diversi come linea, rettangolo, cerchio, ecc.). Monitoriamo le modifiche sul file sorgente sfruttando l'automazione, dopodiché le appiattiamo e realizziamo un dizionario con il codice SVG, che viene utilizzato per creare la nostra libreria Iconography di Figma e condiviso con lo sviluppo per essere aggiunto alle librerie di sviluppo. Ogni volta che viene aggiunta un'icona al file sorgente, l'automazione la aggiunge automaticamente alla libreria delle icone, a Code Connect, e la diffonde alle librerie di sviluppo.

Gilson: abbiamo un sito web enorme che raccoglie tutta la documentazione su ciascun componente, dove gli sviluppatori possono vedere le proprietà e persino ottenere demo live con i frammenti di codice. In passato, erano costretti a sprecare tempo andando su un sito web per recuperare i frammenti di codice necessari. Ora, con Code Connect, devono solo fare clic su un componente in Figma per visualizzare i frammenti di codice con tutte le impostazioni corrette. In questo modo, riusciamo a sviluppare e integrare Veneer molto più rapidamente.

Andrei: Code Connect è stato di grande aiuto anche per i nostri designer, perché adesso capiscono meglio come funziona la codifica e riescono così a creare prototipi più accurati, che è qualcosa che va ben oltre ciò che si può fare con la sola funzione di prototipazione di Figma.

Come ha risposto il suo team a Dev Mode?

Gilson: abbiamo condotto un sondaggio su 400 persone, per lo più sviluppatori, che utilizzano Dev Mode in HP. Il feedback è stato estremamente positivo. Un sviluppatore dice: "Dev Mode riduce il tempo che spreco per i compiti di routine, permettendomi di concentrarmi sull'ottimizzazione del funzionamento". Un altro ancora rivela: "La possibilità di generare e utilizzare direttamente i frammenti di codice ha accelerato notevolmente i nostri cicli di sviluppo".

In media, ogni persona ha inoltre risparmiato 98 minuti a settimana non dovendo più cambiare strumento e andare su un sito web diverso per accedere ai frammenti di codice giusti.

Questi dati dimostrano chiaramente che la maggior parte dei team ha riscontrato dei significativi miglioramenti nel loro flusso di lavoro, grazie all'adozione di Dev Mode, con percentuali rilevanti che riportano incrementi in termini di efficienza, velocità e qualità del lavoro. Questo feedback quantitativo evidenzia i benefici tangibili di Dev Mode, rafforzando il valore che offre ai processi di sviluppo di HP.

Andrei: Dev Mode ha portato con sé anche un vero e proprio cambio di mentalità. Sta aiutando designer e sviluppatori a parlare la stessa lingua, e ci aiuta a ripensare il processo di creazione dei nostri prodotti. Il concetto di passaggio di consegne è stato eliminato; ora, le persone stanno iniziando a parlare di flusso di lavoro, che va dalla progettazione allo sviluppo. Si tratta di un flusso molto più fluido, che consente di accelerare il nostro processo di sviluppo del prodotto.