Customer.io semplifica il passaggio di consegne dei progetti con variabili e Dev Mode

Tempo di lettura: 4 minuti

Riepilogo: la funzionalità è sempre stata il focus primario del mondo della tecnologia di marketing (MarTech). Customer.io ha rivoluzionato il settore introducendo un approccio diverso, dove design ed esperienza utente sono i principi alla guida della creazione dei prodotti per i suoi clienti. Fondata nel 2012, l'azienda è cresciuta fino a supportare campagne di messaggistica automatizzata per marchi leader come Notion, Clearbit e IMAX.

Adottando il piano Organization di Figma, Customer.io è riuscita a migliorare il passaggio di consegne tra progettazione e sviluppo, sfruttando le variabili e Dev Mode, consentendo al team di inviare il lavoro più velocemente.

Sfida: librerie di componenti disconnesse creano attriti tra progettazione e sviluppo

Sebbene Customer.io utilizzasse Figma già da qualche tempo, aveva raggiunto un punto di flessione in cui la mancanza di una governance efficace del sistema di progettazione e di componenti ad hoc aveva iniziato a penalizzare il lavoro. Aiden Bordner, dirigente senior e responsabile del design di prodotto di Customer.io, spiega: "Siamo arrivati a un punto in cui non tutti i componenti avevano una rappresentazione canonica in Figma. Non c'era una continuità condivisa tra progettazione e sviluppo, perché le specifiche non riflettevano chiaramente le intenzioni nel sistema di progettazione".

Questa disconnessione creava delle discrepanze nel lavoro che veniva lanciato. Anche se l'impatto era apparentemente lieve, come un pulsante con il bordo sbagliato, un divisore che era troppo scuro, la spaziatura che era disallineata di qualche pixel, tutte queste discrepanze tra progettazione e sviluppo hanno presto causato forti tensioni e un'esperienza utente poco coerente.

"Quando ci sono questi errori, qualcuno durante il processo di QA li segnala; viene quindi creato un ticket e noi procediamo con la ricreazione del front-end", rivela Aiden. "Il tempo speso e i costi di modifica per risolvere i problemi hanno delle ripercussioni concrete sulla nostra capacità di offrire nuove funzionalità ai clienti".

Con l'incertezza che guidava i flussi di lavoro e la tensione crescente tra i team, Aiden si rese conto che era necessario un cambiamento prima che queste discrepanze arrivassero a compromettere l'esperienza utente su larga scala.

Soluzione: entrano in gioco le variabili e Dev Mode

Mentre iniziava ad aggiornare il suo sistema di progettazione, Customer.io ha anche abbracciato le ultime funzionalità di Figma. "La svolta è stata Config 2023, quando sono stati presentati Dev Mode e le variabili; in quel momento ho pensato: 'Questo è lo strumento che stavo aspettando'", rivela Aiden. Il team del design di prodotto ha configurato le variabili in Figma per supportare colori, spaziatura, dimensioni del testo, raggio del bordo e stili di font. Adesso gli sviluppatori non devono più tirare a indovinare per sapere il numero preciso di pixel di un'intercolonna o il codice colore giusto.

Grazie alle variabili, il team è riuscito a standardizzare tutte le proprietà di design. "Uno sviluppatore non deve più chiedersi se sta interpretando un progetto nel modo giusto. Questo approccio aiuterà i nuovi sviluppatori a passare da un mock all'implementazione, perché avranno già a disposizione il 60–70% delle specifiche", afferma Aiden. Grazie a queste infrastrutture uniformi che abbiamo adottato, gli sviluppatori stanno riscontrando una riduzione degli errori e sono in grado di lavorare più velocemente.

Inoltre, l'adozione di Dev Mode ha segnato una svolta decisiva nel flusso di lavoro di Customer.io. "Capire cosa è pronto per essere creato può essere molto complesso", rivela Aiden. "Con Dev Mode, le annotazioni permettono a un designer di evidenziare una sezione specifica in modo che uno sviluppatore possa mettersi subito al lavoro".

Impatto: i team di progettazione e sviluppo hanno alzato l'asticella in termini di efficienza

Il nuovo passaggio di consegne tra progettazione e sviluppo ha dato ottimi risultati in termini di produttività del team. Grazie alle annotazioni presenti nei file di design, gli sviluppatori riescono con facilità a ispezionare, capire la struttura sottostante e passare immediatamente all'implementazione.

Il guadagno in termini di velocità si riflette anche nel team di design. "I designer stanno adottando quella stessa mentalità di crescita", afferma Rennie Abraham, responsabile Brand Studio di Customer.io. "Riescono a iterare, testare e modificare più rapidamente, invece di trascorrere sei mesi a lavorare su due o tre grandi landing page senza la certezza di aver ottenuto i risultati aziendali che ci aspettiamo. Sono davvero poche le realtà che offrono il livello di collaborazione e innovazione che Figma ci consente di esprimere".

Sfruttando le variabili e Dev Mode, il team di Customer.io non solo ha migliorato i suoi processi interni, ma ha anche fatto sì che l'azienda si posizionasse come leader nel settore MarTech per il suo approccio orientato al design. Contrassegnando i file come "Ready to Dev", ovvero "pronti per lo sviluppo", i designer semplificano il tracciamento di dettagli e revisioni, migliorando la qualità del lavoro sviluppato collaborando con gli sviluppatori. L'impegno dell'azienda verso questo livello di raffinatezza consente agli utenti di fidarsi del prodotto e del suo potenziale nel trasformare la comunicazione con i loro clienti.

"Ci impegniamo con la massima dedizione nell'offrire ai nostri clienti il più alto grado di raffinatezza in termini di UX e UI", afferma Aiden. "La connessione che creiamo tra i nostri ambienti di progettazione e ingegneria è l'elemento che ci consente di ottenere un vantaggio competitivo".

Customer.io è un ottimo esempio degli effetti positivi che si possono ottenere quando i team semplificano i passaggi di consegne tra progettazione e sviluppo. Il risultato finale non solo migliora l'efficienza e l'esperienza utente, ma offre anche nuove opportunità per supportare l'innovazione creativa. Grazie a questo approccio collaborativo, il team potrà continuare a realizzare soluzioni incentrate sul design, che potenziano gli utenti dell'azienda, offrendogli informazioni strategiche per coinvolgere al meglio i loro clienti.