Case Study

Future Fashion: nasce MTO Suite per il made to order di articoli personalizzabili dagli acquirenti

mto suite

Future Fashion è l’azienda che ha creato il brand di calzature personalizzate Design Italian Shoes e che ora sta sviluppando soluzioni digitali per gestire la personalizzazione omnicanale dedicata al mondo della moda. 

Dall’esperienza ottenuta grazie a Design Italian Shoes, ha deciso di digitalizzare i processi di MTO (Made to Order) relativi alla progettazione, vendita e produzione di articoli personalizzabili dagli acquirenti. Nasce così MTO Suite, disegnato per:

  • portare know-how nelle aziende manifatturiere che non hanno ancora sviluppato completamente la personalizzazione dei propri articoli;
  • creare cultura e nuove opportunità attraverso un nuovo frame tecnologico.

Dopo la nostra collaborazione precedente per la realizzazione dell’e-commerce e del configuratore di Design Italian Shoes, anche in questo caso Future Fashion ci ha scelto come partner tecnologico del suo nuovo progetto.

Comprendere i bisogni del cliente attraverso la Discovery

All’inizio del nostro percorso di collaborazione, il progetto MTO suite era un prodotto in fase embrionale, totalmente da sviluppare. In questa fase, le idee di solito sono molte e su fronti diversi, questo è uno dei motivi per cui approcciamo i progetti con una discovery iniziale. 

In questa prima fase di progetto, abbiamo messo in campo molti esercizi e format tra cui EventStorming per aiutare il cliente a creare una roadmap di progetto e capire su quali attività mettere il focus. Lo abbiamo aiutato a definire un MVP con il quale iniziare a raccogliere feedback dal mercato.

Le scelte tecnologiche per abbracciare il feedback rapido

La ricerca continua del feedback ci ha accompagnato anche nelle scelte tecnologiche, oltre che nel processo e nella scelta delle funzionalità. Ad uno stack abbastanza classico per Flowing – PHP e Symfony per la parte back-end, React per la parte front-end – abbiamo affiancato due processi di continuous deployment basati su AWS Codepipeline, uno per il frontend ed uno per il backend.

Tenere separate le pipeline ci consente di ottimizzare i tempi di ciascuna di esse e mantenere più ordinato il flusso.

Inoltre, per ottenere un feedback immediato, durante l’esecuzione delle pipeline vengono inviate notifiche di aggiornamento su un channel Slack dedicato.

Oltre allo stack tecnologico, anche alcune scelte implementative sono state utili proprio nelle prime fasi del progetto, quelle di solito più “fluide” e dove una base di codice deve adattarsi ed essere il più facilmente evolvibile per poter stare al passo con i nuovi requisiti di business che emergono quasi giornalmente. 

Un esempio di questo approccio è l’utilizzo di un Google Spreadsheet come “interfaccia di back-office” al posto di un classico pannello di amministrazione. Questo ci ha permesso di modellare i dati velocemente insieme al team del cliente, facendogli utilizzare un tool a loro congeniale. Google spreadsheet permette di accedere ai dati di un foglio tramite API Rest, quindi a intervalli regolari questi dati vengono riversati su un database classico per ottenere delle performance di lettura accettabili.

Con questo semplice “trucco” abbiamo ottenuto un buon throughput – siamo arrivati a conclusione prima delle deadline concordate – mantenendo la flessibilità e l’evolvibilità che erano richieste in questa fase di progetto.

L’infrastruttura

Per abilitare l’MVP, abbiamo scelto di realizzare la parte infrastrutturale utilizzando IaC – Infrastructure as Code – che prevede la gestione e il provisioning dell’infrastruttura tramite codice anziché tramite processi manuali. Ci consente di creare velocemente l’infrastruttura, rendendola modulare e manutenibile nel tempo.

Con IaC vengono creati file di configurazione che contengono le specifiche dell’infrastruttura, il che semplifica la modifica e la distribuzione delle configurazioni. Assicura inoltre di eseguire il provisioning dello stesso ambiente ogni volta e dà la possibilità di utilizzare version control.

il diagramma dell’infrastruttura creata

L’infrastruttura è composta da due macrogruppi di risorse: frontend e backend, ognuna – come detto sopra – con una propria pipeline dedicata per un flusso di lavoro ottimale.

Un bucket S3 per il codice statico React ed una CDN Cloudfront costituiscono le principali risorse frontend.

la parte frontend

Per la parte backend,  realizzata con Symfony, la scelta è caduta su ECS e Fargate, che rimuove la necessità di allocare e gestire server, permettendo di specificare e pagare solo per le risorse utilizzate per ciascuna applicazione.

È presente anche un task schedulato ECS a supporto della gestione del backoffice che si occupa di fare un sync del Google spreadsheet con il db dell’applicativo.

A proposito di database, in questo caso il prodotto utilizzato è RDS ed utilizza come engine MariaDB.

Le scelte lato UI design

Oltre alla parte tecnologica, è stato molto importante già dalle prime battute definire una direzione stilistica che ci permettesse la scalabilità: il software aveva come requisito quello di essere white-label, e doveva poter dunque ospitare diverse brand identity, mantenendo omogeneità nelle interfacce.

Abbiamo definito una palette cromatica basata su colori neutri per gli elementi strutturali delle UI, ma accentuata dal colore caratterizzante del brand ospitato nelle call-to-action ed elementi interattivi.

Analogamente alle cromie, anche la scelta tipografica è stata condizionata dalla necessità di adattabilità: abbiamo quindi definito, oltre a una font-family di default, una scala tipografica armonica che definisse tutti gli stili testuali necessari. 

Grazie a queste primitive, abbiamo poi declinato i componenti base per strutturare una pattern library essenziale: bottoni, sistema di notifiche, icone e layout.

Attraverso la progettazione rapida di prototipi interattivi e la realizzazione di See/Do map condivise, abbiamo facilitato le decisioni sul prodotto e validato l’interazione dell’utente con il software MTO suite, consegnando interfacce implementabili fin dai primi sprint del progetto.

Un ruolo molto importante l’ha avuto lo strumento Figma, che grazie alla sua natura, ci ha permesso in primis di condividere il materiale prodotto, e in seconda battuta, di facilitare momenti di workshop dove abbiamo definito assieme al cliente gli shared learning più importanti, come una prima versione di vocabolario condiviso.

3D Viewer

Altro prodotto importante della suite MTO è il 3D Viewer. Questo strumento permette di visualizzare un modello 3D di un prodotto e di poterlo inserire tramite un API JavaScript all’interno di qualsiasi applicazione web. La scarpa è inoltre visibile in realtà aumentata su dispositivi mobile compatibili. La scena 3D è configurabile a livello di luci e ombre direttamente da Future Fashion in base alle esigenze del modello da visualizzare.

Il progetto consiste in un applicazione Threejs per la parte di rendering e interazione con i modelli 3D. Questa applicazione interagisce con una lambda AWS che si occupa di autenticare le chiamate e gestire delle analitiche del sistema: questo layer applicativo è costruito tramite linguaggio TypeScript e viene gestito architetturalmente tramite serverless.

Se sei curios* di provare il 3D Viewer puoi farlo nella demo qui sotto oppure in questa versione a schermo intero.

Continuous Discovery 

La fase di discovery non si è fermata al momento iniziale: abbiamo fatto vari momenti di allineamento e di approfondimento su argomenti verticali, a volte concentrandoci sulla delivery, a volte con un focus sul learning e sugli utenti grazie a strumenti quali la See/Do map, la prototipazione rapida e un vocabolario condiviso.

Questo ha permesso a tutto il team (cliente compreso) di essere sempre allineato sui reali bisogni del business e degli utenti. In questo modo abbiamo evitato fraintendimenti e tutte le discussioni seguenti sono state sempre più fluide e brevi, facendo risparmiare tempo ed energie utili al progetto.

“Grazie a Flowing siamo riusciti a pianificare lo sviluppo della nostra MTO suite in maniera incrementale, mettendo in priorità le attività a maggior valore aggiunto per il cliente, scegliendo insieme che cosa sacrificare nella versione 1 della nostra piattaforma.”

Andrea Carpineti, CEO di Future Fashion