PWA gamificata per enti e luoghi della cultura
Una Progressive Web App progettata per trasformare la visita in un percorso fatto di missioni, mappe e contenuti interattivi, mantenendo l’esperienza disponibile anche negli spazi in cui la connessione è instabile.
Sintesi del progetto
- Settore
- Cultura ed enti pubblici
- Tipologia
- Progressive Web App
- Ambito
- Progetto destinato al Ministero della Cultura (MiC)
Progetto sviluppato in collaborazione con un’agenzia digitale e destinato al Ministero della Cultura (MiC).
Portare il pubblico dentro un percorso, non davanti a una brochure
Un’esperienza digitale dedicata alla cultura non può limitarsi a riproporre sul telefono una sequenza di testi. Il progetto richiedeva un percorso capace di collegare contenuti, luoghi e attività, mantenendo l’interazione semplice per un pubblico eterogeneo.
La piattaforma doveva inoltre adattarsi a enti e sedi differenti, conservando una struttura comune ma permettendo a ciascun contesto di utilizzare identità, contenuti, mappe e missioni proprie.
- Percorsi distribuiti tra più sedi e contesti
- Contenuti differenziati per ente
- Esperienza progettata principalmente per smartphone
- Progressi da conservare durante la visita
- Connessione non sempre affidabile
- Necessità di una struttura riutilizzabile
Sviluppo tecnico in collaborazione con un’agenzia digitale
Upstudioit ha partecipato allo sviluppo della piattaforma lavorando insieme a un’agenzia digitale nell’ambito di un progetto destinato al Ministero della Cultura (MiC).
La collaborazione ha permesso di inserire lo sviluppo frontend e PWA all’interno di un progetto più ampio, mantenendo il confronto con il team dell’agenzia e adattando l’implementazione alle esigenze dei diversi enti coinvolti.
Il contributo di Upstudioit ha riguardato lo sviluppo dell’interfaccia, i componenti PWA, la gestione dello stato, l’esperienza mobile, le mappe, i giochi e le animazioni, nonché il funzionamento offline previsto dall’applicazione.
Una piattaforma comune, esperienze distinte per ogni ente
La PWA utilizza un’architettura multi-tenant: la stessa base applicativa può servire enti o sedi differenti mantenendo separati configurazione, identità visiva, contenuti e missioni.
Questa impostazione permette di introdurre nuove esperienze senza duplicare l’intera applicazione e consente di evolvere le funzionalità comuni mantenendo le specificità di ciascun contesto.
- Base applicativa condivisa
- Configurazione per ente o sede
- Contenuti separati
- Branding configurabile
- Missioni specifiche
La visita costruita come una sequenza di attività
Le missioni accompagnano l’utente attraverso tappe e contenuti collegati al luogo. Ogni attività completata aggiorna il percorso e rende visibile ciò che resta da scoprire.
Reward e badge forniscono un riscontro sul progresso senza trasformare l’esperienza culturale in una semplice raccolta punti. La gamification sostiene l’esplorazione e la continuità del percorso.
Missioni
Attività associate a luoghi, contenuti o tappe della visita.
Progresso
Stato del percorso aggiornato in base alle attività completate.
Reward e badge
Riconoscimenti digitali collegati agli obiettivi previsti dall’esperienza.
Il telefono aiuta a osservare ciò che si trova davanti
I contenuti digitali vengono collegati alle tappe fisiche del percorso. Il visitatore può consultare una scheda, ascoltare un contributo o completare un’attività mantenendo il luogo e il reperto al centro dell’attenzione.
L’interfaccia non sostituisce l’esperienza nello spazio: aggiunge contesto e permette di costruire una relazione tra osservazione, racconto e avanzamento della missione.
Orientarsi tra sedi, spazi e tappe
Le mappe interattive, realizzate con Leaflet, aiutano l’utente a individuare luoghi e tappe del percorso. I punti possono essere associati a contenuti e missioni, creando un collegamento tra posizione e attività da svolgere.
Dall’accesso come ospite alla registrazione
Il flusso accompagna l’utente da una prima consultazione come ospite fino all’accesso tramite OTP e alla registrazione, quando necessaria per conservare progressi e attività.
Le diverse modalità permettono di ridurre gli ostacoli all’ingresso e richiedere l’identificazione soltanto nei passaggi in cui produce un beneficio reale per l’esperienza.
Contenuti disponibili anche quando la rete è instabile
Service Worker e Workbox gestiscono il caching delle risorse previste per la visita. Dopo che i contenuti necessari sono stati scaricati, la PWA può continuare a rendere disponibili missioni e informazioni anche in assenza temporanea di connessione.
Quando la rete torna disponibile, le attività che richiedono il collegamento possono riprendere secondo il comportamento previsto dall’applicazione.
Interazioni costruite per il contenuto
Le sezioni dedicate ai giochi utilizzano animazioni e transizioni per fornire un riscontro immediato alle azioni dell’utente. Motion.dev viene impiegato per coordinare il movimento dell’interfaccia senza separarlo dalla logica delle attività.
Le animazioni devono rimanere funzionali alla comprensione e rispettare le preferenze di riduzione del movimento.
Collaborazioni tecniche per agenzie e studi digitali
Upstudioit collabora con agenzie digitali e studi di comunicazione che hanno bisogno di integrare competenze tecniche nei propri progetti. Possiamo affiancare il team nello sviluppo frontend, nelle applicazioni web, nelle PWA e nelle integrazioni, mantenendo chiari ruoli, responsabilità e rapporto con il cliente finale.
La collaborazione può riguardare una singola fase, un componente specifico o lo sviluppo continuativo della parte applicativa.
- Sviluppo tecnico integrato nel team dell’agenzia
- Confronto diretto con designer e referenti di progetto
- Possibilità di lavorare in white label quando concordato
Una struttura riutilizzabile per esperienze culturali differenti
Il progetto ha prodotto una base applicativa capace di ospitare configurazioni e contenuti differenti, mantenendo comuni i principali meccanismi di navigazione, missione e progressione.
Esperienze configurabili
Enti e sedi possono utilizzare contenuti, identità e missioni specifiche sulla stessa base applicativa.
Percorso tracciabile
Missioni, reward e progressi compongono una sequenza comprensibile per l’utente.
Continuità con rete instabile
Le risorse memorizzate restano disponibili durante le interruzioni di connessione previste dal funzionamento della PWA.
Tecnologie utilizzate
| Funzione | Tecnologie |
|---|---|
| Interfaccia | Vue.js 3, Tailwind CSS 4 |
| Mappe | Leaflet |
| Animazioni | Motion.dev |
| PWA e offline | Workbox, Service Worker |
| Distribuzione | GitLab CI/CD |
Hai un progetto culturale o cerchi un partner tecnico per la tua agenzia?
Raccontaci il contesto, il pubblico e gli strumenti già previsti. Possiamo valutare il contributo tecnico più adatto e il modo corretto di inserirci nel progetto.
Dopo le risposte vedrai un primo orientamento. L’invio dei recapiti è facoltativo: puoi approfondire solo se lo desideri.
Preferisci scriverci direttamente? Vai a Contatti
Domanda 1 di 2