Vai al contenuto principale

Come ASOS ottimizza i flussi di lavoro di progettazione con Figma

Il rivenditore di moda e cosmetici ASOS è diventato la destinazione di riferimento per i ventenni di tutto il mondo. E non c'è da meravigliarsi. I consumatori possono scegliere da un'ampia selezione di 900 marchi, inclusi i brand proprietari di ASOS, come ASOS Design, Topshop, Topman e Collusion.

ASOS è nota inoltre per il suo approccio semplice e giocoso con il cliente, con resi facili e un'esperienza end-to-end fluida su dispositivi, siti web desktop e mobili e app Android e iOS.

Inoltre, operando in 10 lingue e in oltre 200 mercati, ASOS supporta metodi di pagamento globali e fornisce agli utenti un'esperienza localizzata.

È quindi ovvio che il design svolge un ruolo chiave in tutto ciò che fa ASOS, ed è per questo che l'azienda si è rivolta a Figma. Così facendo, ASOS ha semplificato il suo sistema di progettazione, ridotto i costi, ottenuto strumenti e processi più sofisticati e migliorato la collaborazione all'interno dell'azienda.

Il sistema di progettazione del marchio di ASOS costruito in FigmaIl sistema di progettazione del marchio di ASOS costruito in Figma
ASOS utilizza Figma per ospitare il suo sistema di progettazione e il toolkit del sistema di progettazione, incluse le linee guida sul branding.

Le opportunità uniche del mercato della moda online

Il settore dell'e-commerce della moda è cresciuto molto rapidamente durante la pandemia e continua a maturare, grazie ai progressi globali che hanno toccato la tecnologia e la logistica.

I consumatori adorano la comodità e la velocità offerte dal mondo dell'e-commerce, con i suoi prezzi competitivi, le offerte online esclusive ed esperienze di acquisto personalizzate e multicanale. Usano inoltre i social media per plasmare i brand e influenzarsi a vicenda, con il risultato che alcuni prodotti possono diventare virali.

Kate Brook-Hart, responsabile del design di prodotto di ASOS, afferma che, di conseguenza, è essenziale considerare il ciclo di vita del prodotto digitale prima, durante e dopo l'esperienza di acquisto. Ecco perché il suo team si assicura che questi punti di contatto siano rappresentati durante i loro processi di scoperta e di design, e per fare ciò avere un sistema di progettazione ben strutturato è imprescindibile.

Variazioni di componenti illustrate nel file FigmaVariazioni di componenti illustrate nel file Figma
Dato che tutto è collegato al sistema di progettazione, qualsiasi modifica ai componenti si propaga correttamente nei progetti.

Un team di design altamente connesso

Il team responsabile del design di prodotto di ASOS è composto da oltre una dozzina di designer con diversi gradi di esperienza: dai profili junior, ai livelli intermedio, senior e lead.

  • I designer di prodotto fanno parte del team del prodotto digitale, che collabora strettamente con oltre 25 responsabili di prodotto, supportati da due Product Operations Manager.
  • Ogni designer lavora in un ambito specifico del prodotto, come Acquisizione e coinvolgimento, Acquisti, Pagamenti, Checkout, Post-vendita, e per team dedicati a missioni specifiche, tra cui Viso e corpo, Abbigliamento sportivo e Studenti.
  • Lavorano a stretto contatto con Ingegneri, Architetti e Ingegneri QA attraverso varie piattaforme di collaborazione per ideare, creare, testare, sperimentare e lanciare nuove funzionalità.

Fanno parte del team anche Jack Marsden, Lead Product Designer nell'area Checkout del prodotto, e Sean Conlon, designer di prodotto sempre dell'ambito Checkout.

Da quando è entrato in ASOS ad aprile del 2022, Sean si è specializzato nel design end-to-end, spaziando dalla ricerca alla creazione di design ad alta fedeltà. "Ciò che mi motiva è l'impatto che puoi avere in ASOS come designer", rivela Sean. "I tuoi design verranno utilizzati da milioni di persone in tutto il mondo e possono incidere in modo significativo sui risultati aziendali. Tutto questo è davvero molto gratificante!".

Il team di Kate conta anche un'esperta di accessibilità, Tzveta Dinova, orgogliosa del suo ruolo nel sostenere Diversità e inclusione sia all'interno che all'esterno dell'azienda. "Vogliamo assicurarci che tutte le nuove funzionalità siano inclusive per tutti i clienti, ecco perché dedichiamo tempo ad ascoltare gli utenti e creiamo una documentazione sul design dell'accessibilità molto dettagliata per ogni progetto", rivela Tzveta.

Una delle caratteristiche che contraddistinguono ASOS è la stretta collaborazione tra i designer di prodotto, i responsabili di prodotto e una vasta gamma di stakeholder dell'azienda in tre team principali: Tecnologia e dati, Commerciale e cliente o Personale e operazioni.

Consolidare 3 strumenti in Figma

Prima che ASOS iniziasse il suo percorso all'interno di Figma, l'azienda utilizzava tre principali strumenti: uno per la progettazione, uno per la gestione dei file e la collaborazione e un altro ancora per la prototipazione. Questa configurazione presentava una serie di punti deboli, sia per gli sviluppatori che per i loro collaboratori.

Significava che avevano bisogno di tre strumenti per progettare, prototipare e trasferire tutto al team di sviluppo. Inoltre, passare da una variante di componente all'altra era particolarmente difficile, perché richiedeva di salvare e chiudere, rallentando e rendendo inefficiente l'ideazione e la progettazione. "Inserire componenti del sistema di progettazione, dover apportare modifiche al volo o semplicemente aprire un file era un po' una corsa a ostacoli", osserva Jack.

Dispositivo mobile che visualizza il prototipo del messaggio di erroreDispositivo mobile che visualizza il prototipo del messaggio di errore
Uno sguardo a come ASOS utilizza la prototipazione per una funzione live; in questo caso, vediamo il suo sistema di validazione degli indirizzi postali.

Il team doveva inoltre configurare delle raccolte separate di collegamenti e file per ricevere il feedback degli stakeholder e affinché gli ingegneri potessero accedere ai progetti. Infine poi il processo per accedere e aggiornare i file risultava molto lento, con i designer che dovevano creare diramazioni e confermare ogni modifica. I progetti non venivano aggiornati in tempo reale e l'accesso da remoto non era un'opzione praticabile.

Onboarding e decollo con Figma

Adottare Figma è stato un passaggio essenziale, che i designer di prodotto a tutti i livelli hanno richiesto e sostenuto.

"La prima volta che ho usato Figma è stato durante il periodo del Covid", ricorda Kate. "Non avevamo mai provato lo strumento prima di allora, ma date le circostanze ci siamo detti: 'o adesso, o mai più', siccome lavoravamo tutti da casa e mancava l'interazione faccia a faccia. Ho pensato: 'È una collaborazione in tempo reale. Proviamo e basta'. In soli due giorni, sapevo già come muovermi in Figma".

Figma ha risolto un problema specifico per i designer di ASOS. C'erano così tanti team che collaboravano e partecipavano allo sviluppo del prodotto digitale, tra cui commerciale, studi creativi e merchandising, che la condivisione dei file era diventata una sfida enorme. Figma ha risposto a questa criticità permettendo di condividere link che rimanevano invariati, anche quando il file veniva spostato, una soluzione che si è rivelata un vero punto di svolta.

Attualmente, i designer di prodotto sono i principali editor in Figma, ma anche altre persone in azienda possono disporre con facilità di una vista dei file e collaborare, sfruttando l'accesso sicuro tramite single sign-on a Figma.

Questi utenti includono membri dei team di ingegneria, prodotto, marketing, brand, vendite e commerciale, ma anche di risorse umane, finanza, audit e logistica e consegna. In Figma, tutte queste figure possono collaborare simultaneamente con il team di prodotto, risparmiando tempo, denaro e fatica.

Oggi, Figma svolge un ruolo integrale in tutti i tipi di progetti digitali che caratterizzano l'intera esperienza cliente, così come nelle esperienze interne, come il software in-house che il team Studios usa per creare risorse in sede.

5 modi in cui Figma ha migliorato la vita per ASOS

1. Accelerazione di progettazione e design

  • Prima di Figma, l'uso di più strumenti diversi si traduceva in processi di progettazione poco fluidi. Tutto veniva memorizzato localmente, quindi trasferito su una piattaforma di condivisione file.
  • Figma aiuta a velocizzare la progettazione e il design, perché è una piattaforma con base cloud, che offre la possibilità di lavorare in modo rapido e di inserire e togliere elementi da un progetto sfruttando funzionalità come il layout automatico.

2. Prototipazione

  • Prima di Figma, la prototipazione richiedeva uno strumento separato per creare prototipi realistici e condividere link per i test utente.
  • Figma consente invece di creare prototipi fedeli ed eseguire aggiornamenti immediati, facendo risparmiare tempo e denaro nella fase dei test utente.

3. Collaborazione

  • In precedenza, i file di progettazione venivano condivisi via e-mail e il feedback richiedeva più passaggi.
  • Figma ha abilitato la condivisione del singolo link per facilitare la collaborazione e il feedback diretto, trasformando le critiche sul design, migliorando la coerenza e permettendo agli stakeholder aziendali di lasciare commenti diretti.

4. Sistema di progettazione

  • Prima di Figma, il sistema di progettazione di ASOS era frammentato.
  • Usando Figma, i designer che lavorano sul sistema di progettazione lo trovano facile da usare e da manutenere, oltre che semplice da integrare nei propri progetti attraverso i componenti delle librerie.

5. Presentazioni

  • Prima di Figma, presentare prototipi non era sempre semplice.
  • Le funzionalità di prototipazione di Figma, invece, permettono ai designer di presentare prototipi in linea con il contesto, trasformando le loro presentazioni in esperienze realistiche.
Esempio di sistema di progettazione con variazioni di componenti nel fileEsempio di sistema di progettazione con variazioni di componenti nel file
Partendo dal sistema di progettazione, ASOS utilizza anche un file separato dedicato alle pagine Modello, che sono schermate speculari a quelle live su iOS, Android, web mobile, web tablet e desktop.

Figma offre risultati tangibili ad ASOS

Figma ha permesso ad ASOS di consolidare tre strumenti in uno. Ciò ha permesso di snellire il flusso di lavoro di progettazione e design, consentendo al team di risparmiare molte ore di lavoro e all'azienda di abbattere i costi.

Figma ha inoltre elevato la collaborazione tra designer, responsabili di prodotto e ingegneri, offrendo ad ASOS l'opportunità di aggiornare e migliorare il suo sistema di progettazione e di mantenerlo più attuale e in linea con gli strumenti di design più moderni, un fattore chiave per attirare nuovi talenti.

Nel complesso, secondo Kate, Figma ha reso la collaborazione, la produttività e le presentazioni molto più semplici tra i designer e tra gli stakeholder di tutta l'azienda. "Questo approccio ha portato a progetti finali di qualità superiore, che rendono il passaggio agli sviluppatori molto più fluido, avvicinando designer e sviluppatori in tutta l'azienda".

Total Economic Impact di Figma

Questo report di Forrester mostra come i team utilizzano Figma e FigJam per velocizzare i flussi di lavoro, consolidare il loro stack di progettazione e realizzare prodotti migliori.

Leggi il report

Scopri come Figma può aiutarti a creare progetti scalabili

Un grande design ha il potenziale per differenziare il prodotto e il brand. Ma le grandi cose si costruiscono insieme. Figma riunisce i team di prodotto in un flusso di lavoro di design rapido e più inclusivo.

Contattaci per scoprire come Figma può aiutare le aziende a creare progetti scalabili.

Ti mostreremo come Figma può aiutare a:

  • Riunire ogni fase del processo di progettazione e design, dall'ideazione allo sviluppo, fino alla realizzazione del design finale, tutto in un unico posto
  • Accelerare i flussi di lavoro di design con sistemi di progettazione condivisi a livello aziendale
  • Promuovere l'inclusività nei processi del team di prodotto attraverso strumenti basati sul web, accessibili e facili da usare

Connettiti con il nostro team

Facendo clic su “Invia” accetti i nostri Termini di servizio e l'Informativa sulla privacy.