Riprogettare il flusso di lavoro 3D: un case study sulla gestione avanzata dei modelli

Una piattaforma web per la gestione avanzata dei flussi di modellazione 3D.

In sintesi

Abbiamo riprogettato la piattaforma web per un'azienda leader nella modellazione 3D sviluppando un sistema avanzato di ruoli e permessi, ottimizzando l'infrastruttura Firebase esistente e migrando in sicurezza i dati pregressi. Attraverso una UX studiata (Atomic Design) e un backend efficiente, abbiamo creato un flusso di lavoro guidato, sicuro e scalabile per la gestione dei modelli 3D, dall'upload dei file alla revisione interattiva.

Anno2023

AmbitoMedico

TecnologieReact.js / TypeScript / Firebase / Tailwind CSS

TipologiaSviluppo

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.

 

3D Flow Platform_Immagine-CaseStudySito_01.png

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.

 

3D Flow Platform_Immagine-CaseStudySito_02.png

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.

 

3D Flow Platform_Immagine-CaseStudySito_03.png

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.

 

3D Flow Platform_Immagine-CaseStudySito_04.png

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.

Contattaci.

Hai in mente un progetto e vorresti realizzarlo?
Hai bisogno di un partner dall'elevata competenza che supporti il tuo team o ti aiuti per progetti in outsourcing?

Vuoi maggiori informazioni o vuoi realizzare insieme a noi un progetto?
Compila il form e ti ricontatteremo a brevissimo.

Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla privacy e i Termini di servizio di Google.