Un’azienda leader nel settore della modellazione 3D ci ha chiesto di riprogettare la loro piattaforma esistente per la gestione del flusso di preparazione e stampa di modelli 3D. Il progetto aveva obiettivi chiari: sviluppare nuove funzionalità cruciali, implementare un sistema di gestione dei ruoli utente più granulare e garantire la massima privacy dei dati.
Efficienza, sicurezza e nuovi ruoli
La sfida principale consisteva nel risolvere diverse criticità riscontrate nella precedente versione della piattaforma. Avevamo bisogno di sviluppare una nuova web app che garantisse una gestione più efficiente, specialmente per gli utenti amministratori. Il vincolo più stringente era tecnico: tutti i dati già presenti nel sistema precedente dovevano rimanere inalterabili. Il nostro compito era quindi costruire un sistema nuovo e performante, capace di integrarsi e migrare in sicurezza i dati esistenti.
User experience e design: semplificare la complessità
Grazie a una comunicazione continua con gli stakeholder, che ci hanno fornito insight dettagliati sugli utenti, abbiamo potuto riprogettare totalmente la sitemap e i flussi per tutte le tipologie di utente. Attraverso diverse metodologie di studio, come gli user flow e la role system grid, abbiamo introdotto nuove funzionalità che agevolano la navigazione e l’esecuzione dei task. Sebbene la dashboard della piattaforma offra un'utile pagina di sintesi (gestione casi, news, messaggi e notifiche), le funzionalità core sono state distribuite e approfondite nelle altre pagine, progettate in modo semplificato e personalizzato in base al tipo di utente.

Un design atomico e scalabile
Dopo lo studio dei flussi utente, abbiamo progettato il design system della piattaforma, adattandolo al brand e alle nuove funzionalità. Abbiamo utilizzato la consolidata metodologia Atomic Design di Brad Frost che ci ha permesso di ottenere un’alta efficienza, versatilità e scalabilità sia durante la progettazione che in vista dello sviluppo futuro. Per garantire la flessibilità richiesta dal cliente, abbiamo creato anche un sistema base di design tokens, fondamentale per gestire le palette colori, dato che la piattaforma richiederà un sistema di colori customizzabile.

Sviluppo e tecnologia: ottimizzare l'infrastruttura Firebase
L'intero progetto è distribuito sui servizi di Firebase, la piattaforma di sviluppo di Google. La maggiore complessità è stata mantenere inalterati i dati della precedente piattaforma, che utilizzava già Firebase. Abbiamo quindi proseguito nel suo utilizzo, migrando in sicurezza i dati verso la nuova web app. Per risolvere le criticità ereditate, abbiamo ottimizzato la struttura e l’architettura dei dati, eliminando ridondanze nel database Firebase Firestore e rafforzando le relazioni tra le diverse entità.
Un sistema di permessi flessibile
Per semplificare il lavoro degli utenti amministratori, abbiamo sviluppato un nuovo sistema di permessi e privilegi sfruttando i servizi di Firebase (come le "Remote config" e una collection dedicata). Questo sistema è stato configurato per permettere la gestione e l'assegnazione di funzionalità esistenti a nuovi ruoli (o ruoli che necessitano di ulteriori privilegi) senza la necessità di intervenire direttamente sul codice dell’applicazione.
Sicurezza e autenticazione
L'intera piattaforma è progettata per assicurare la massima riservatezza dei dati. Abbiamo utilizzato lo stesso sistema di crittografia della precedente piattaforma, assicurando che tutti i file caricati siano protetti e conformi alle normative sulla privacy. Come sistema di autenticazione e autorizzazione abbiamo utilizzato Firebase Auth, che gestisce l'autenticazione tramite email e password e la sicurezza delle sessioni utente, integrandosi nativamente con gli altri servizi Firebase utilizzati.

La soluzione: un flusso guidato e interattivo
All’interno della propria area riservata, l’utente finale ha la possibilità di creare dei “casi" e comunicare ai tecnici le specifiche richieste per la generazione di modelli 3D a partire dai file DICOM. Per ridurre il carico cognitivo, tali file vengono caricati sulla piattaforma seguendo un processo a step. Ogni passaggio richiede l’inserimento di informazioni specifiche attraverso form dedicati, soggetti a un rigoroso processo di validazione e controllo prima dell'invio al database, al fine di prevenire incongruenze o problemi di formato.
Interazione e notifiche in tempo reale
Una volta creato il modello 3D, l’utente può interagire direttamente con esso, inserendo note e richieste di revisioni. L’interazione avviene tramite un Viewer proprietario del committente, che abbiamo incorporato nella web app e collegato al database e al sistema di “status” dei casi. Questi "status" (es. "in attesa di risposta dal tecnico" o "in attesa di file dall'utente") gestiscono l'interazione indiretta tra le diverse tipologie di utente. Qualsiasi cambiamento di status, inserimento di informazioni o evento generale, viene notificato ai responsabili del caso e agli amministratori attraverso un pannello integrato.
Utilizzabile su tutti i dispositivi
Infine, tutto è stato progettato con la massima attenzione all’accessibilità e in ottica responsive, valutando diverse dimensioni di viewport (soprattutto per i dispositivi desktop, i più utilizzati per questo servizio). I componenti sono stati realizzati tramite metodologia atomica usando una combinazione tra CSS e classi unitarie con TailwindCSS; in questo modo, ogni componente è isolato e può essere facilmente incapsulato da un componente più generale.

Il risultato: efficienza e scalabilità per il futuro
Grazie a questa completa riprogettazione, l'azienda dispone ora di una piattaforma web non solo più efficiente e intuitiva per l'utente finale, ma anche significativamente più semplice da gestire per gli amministratori. Risolvendo le criticità tecniche della versione precedente e ottimizzando l'infrastruttura Firebase, abbiamo garantito la massima sicurezza dei dati sensibili e creato un sistema flessibile, pronto a scalare e ad accogliere nuove funzionalità senza interventi invasivi sul codice.