UNIPA al Cous Cous Fest - web app di gamification per eventi
Una web app di gamification per eventi realizzata per l'Università di Palermo al Cous Cous Fest 2026: quiz bilingue, lead generation con consenso GDPR e ritiro gadget senza hardware di stand.
Cous Cous Quiz è la web app di gamification per eventi che l'Università degli Studi di Palermo ha portato al Cous Cous Fest 2026, la ventinovesima edizione della manifestazione di San Vito Lo Capo (18-27 settembre). Dieci domande bilingui trasformano l'orientamento universitario in una partita di pochi minuti, restituiscono all'ateneo contatti profilati con consenso esplicito e si chiudono con il ritiro di un gadget allo stand, senza alcun dispositivo dedicato e senza applicazioni da installare.
Ho seguito il progetto per Feedback Srl dall'analisi dei requisiti al go-live: struttura editoriale del quiz, business logic, architettura software, sviluppo full-stack e interfaccia costruita a partire dai mockup ufficiali del festival.
| Aspetto | Dettaglio |
|---|---|
| Ruolo | Analisi, business logic, architettura, sviluppo full-stack, UI dai mockup ufficiali, QA |
| Committente | Università degli Studi di Palermo, con Feedback Srl come agenzia di riferimento |
| Contesto | Cous Cous Fest 2026, ventinovesima edizione, San Vito Lo Capo, 18-27 settembre |
| Stack | React 19, TypeScript in modalità strict, Vite 7, Tailwind CSS 4, Vercel Functions, Turso su libSQL |
| Infrastruttura | Piani gratuiti Vercel e Turso, dominio unipa.couscousfest.it con certificato automatico |
| Peso | Circa 200 KB compressi al primo caricamento, nessuna libreria di animazione |
| Contenuti | 10 domande in italiano e inglese su 6 aree tematiche, versionate nel repository |
Il contesto: un ateneo dentro un festival internazionale
Il Cous Cous Fest è una manifestazione internazionale che si distende su dieci giorni, con un pubblico di passaggio, una rete cellulare regolarmente satura e un'attenzione contesa da decine di stimoli simultanei. L'ateneo non voleva presidiare quello spazio con una brochure, ma con un'esperienza capace di raccontare i propri numeri, spesso controintuitivi, a studenti delle superiori, universitari e famiglie, e di restituire in cambio dati concreti sulla percezione dell'università.
Il progetto nasce da un documento di requisiti costruito su una serie di incontri con l'ufficio orientamento: sedici spunti tematici sono diventati una struttura editoriale di dieci domande, con un'apertura a effetto (quanti corsi di laurea si possono scegliere oggi a Palermo? centosessantasei, contro i sessanta o settanta che immagina la maggioranza delle persone) e una chiusura sui servizi gratuiti di orientamento, che è anche l'aggancio naturale alla chiamata all'azione finale.
La logica di prodotto: l'errore come momento didattico
Il quiz non si limita mai a dichiarare se la risposta è giusta o sbagliata. Ogni risposta apre una scheda di approfondimento che spiega il dato e ne aggiunge un altro, così chi sbaglia impara più di chi indovina, ed è esattamente l'obiettivo di un'attività di orientamento. Anche i distrattori sono costruiti con intenzione, per intercettare chi risponde a intuito, perché la sorpresa è ciò che genera il passaparola davanti allo stand.
Quattro meccaniche reggono l'impianto commerciale dell'operazione, e ognuna risponde a un obiettivo misurabile: acquisire il contatto, difendere il magazzino dei gadget, non perdere nessuno per colpa della rete, dare allo staff dati su cui agire durante l'evento.
Il modulo di registrazione precede il quiz, così il contatto è acquisito anche quando la partita si interrompe, e chiede il minimo indispensabile: nome, indirizzo email univoco a database, fascia d'età, tipologia di visitatore con un campo condizionale per chi è già universitario, provenienza geografica. Il consenso privacy è esplicito e registrato con marca temporale, mentre il codice QR esposto allo stand veicola un parametro di sorgente che consente di attribuire il canale di acquisizione.
L'architettura: un contratto, tre implementazioni
L'intero flusso di gioco dipende da un'unica interfaccia. In sviluppo un'implementazione locale replica nel browser lo stesso contratto della produzione (unicità dell'indirizzo email, ritiro singolo, finestra di annullamento), quindi il collaudo end-to-end è possibile senza accendere alcun servizio esterno. In produzione l'implementazione di rete dialoga con quattro funzioni serverless poste davanti al database.
La separazione non è un esercizio di stile: sposta sul server tutto ciò che protegge il valore della campagna per il committente, e lascia sul client solo ciò che protegge l'esperienza di chi gioca.
- Unicità dell'indirizzo email garantita da un vincolo sul database
- Ritiro del gadget consentito una sola volta per ogni codice
- Finestra di annullamento di tre minuti verificata dalla funzione serverless
- Validazione degli input con schema condiviso fra browser e server
- Credenziali del database mai esposte al codice che gira nel browser
- Coda degli invii e stato della partita confinati sul dispositivo dell'utente
Le decisioni tecniche
Ogni scelta rilevante è stata valutata rispetto al vincolo dominante del progetto, cioè uno smartphone qualunque su una rete satura, con pochi secondi di attenzione a disposizione.
Applicazione a pagina singola con Vite, non un framework con rendering server
L'applicazione non ha bisogno di indicizzazione né di rendering lato server: è uno strumento raggiunto da un codice QR. Una pagina singola statica con le funzioni serverless nella cartella dedicata copre tutto il perimetro e azzera la configurazione di rilascio. L'alternativa era stata valutata in fase di requisiti e scartata; i fatti l'hanno confermata.
Animazioni scritte in CSS, senza librerie di terze parti
Il sistema visivo prescrive transizioni precise: dissolvenza a 180 millisecondi, scorrimento a 220, esplosione celebrativa a 320, nessun rimbalzo. Esprimerle direttamente in fotogrammi chiave CSS ha risparmiato circa 40 KB di libreria e ha permesso di tenere il primo caricamento intorno ai 200 KB compressi, che su una rete di festival è la differenza fra giocare e rinunciare.
L'annullamento del ritiro è verificato dal server
La finestra di tre minuti successiva allo slider viene controllata dalla funzione serverless, non dal browser. Uno stato manipolato lato client non riporta in vita un gadget già consegnato, e questo tiene insieme la generosità dell'esperienza (l'errore è recuperabile) e la tutela del magazzino.
I contenuti vivono nel repository, non in un CMS
Le dieci domande sono un file tipizzato e versionato. Nessuna latenza in lettura, nessuna infrastruttura editoriale da presidiare e, soprattutto, revisione dei testi tramite richieste di modifica con anteprima automatica: l'ateneo ha validato i contenuti su un ambiente reale, non su un documento di testo.
Codici gadget pensati per essere dettati a voce
I codici usano un alfabeto privo di caratteri ambigui, quindi niente zero contro O, niente uno contro I o L. Allo stand si leggono ad alta voce e non si scansionano, perché ogni passaggio hardware in più è un punto di rottura in una fila. In caso di collisione il server rigenera il codice e il client si allinea senza che l'utente se ne accorga.
Su desktop l'esperienza resta dichiaratamente mobile
Da schermo grande l'applicazione mantiene la larghezza di un telefono su fondale scuro, con un avviso che si può chiudere. È una scelta di onestà progettuale: l'esperienza è disegnata per lo smartphone davanti allo stand e non finge di essere qualcosa di diverso.
Il criterio trasversale è stato uno solo: ciò che protegge il valore per il committente sta sul server, ciò che protegge l'esperienza di chi gioca sta sul dispositivo. Nessuna delle due garanzie dipende dall'altra, quindi una rete che cade degrada l'esperienza ma non compromette mai il dato.
Il design: due identità, un solo gioco
Qui il progetto ha chiesto qualcosa che esce dal mio perimetro abituale: non sono un designer, e la scelta onesta è stata non improvvisarmi tale. Sono partito dai mockup ufficiali di couscousfest.it e ho sviluppato personalmente l'interfaccia tenendo insieme due identità che non dovevano contendersi lo schermo: il gioco resta un gioco del Cous Cous Fest, con il blu notte come superficie, il giallo riservato alle azioni, la rotazione cromatica di premi e categorie e l'angolo vivo ovunque, mentre il blu istituzionale Unipa non fa decorazione ma lavora, perché è il colore funzionale di dati, avanzamenti, stati di focus e schede informative. La presenza dell'ateneo è strutturale, non sovrapposta, e la natura festosa dell'esperienza non ne esce snaturata.
I componenti che portano il peso dell'esperienza sono stati costruiti su misura: l'anello del tempo in grafica vettoriale, l'esplosione a retino della schermata celebrativa (l'unica animazione concessa), la barra di avanzamento a segmenti che racconta l'esito domanda per domanda, lo slider di conferma con gestione degli eventi puntatore e pieno supporto da tastiera.
Regole di co-branding
Il marchio della manifestazione compare sempre per primo nell'ordine di lettura, il sigillo dell'ateneo vive sempre su contenitore bianco e non viene mai riprodotto in negativo. Sono vincoli identitari che, tradotti in componenti riutilizzabili invece che in raccomandazioni, non possono essere violati per distrazione in una fase di fretta.
Gli ostacoli superati
Tre problemi concreti hanno definito la qualità del risultato, e nessuno dei tre si risolveva installando una libreria.
La rete satura trattata come condizione normale, non come errore
A festival pieno la connessione va e viene, e non può essere un caso d'errore. Gli invii del modulo e le operazioni di ritiro finiscono in una coda persistente sul dispositivo e ripartono da soli al ritorno del segnale, mentre l'utente vede subito il proprio codice e continua a giocare. La partita in corso vive nella sessione del browser, così un aggiornamento accidentale della pagina non azzera nulla.
La frode dello screenshot
Un premio ritirabile a schermo invita al trucco più semplice, cioè la fotografia della schermata di un amico. La schermata di consegna è quindi viva per costruzione, con un orologio che avanza in tempo reale e un gradiente in movimento continuo, e un'immagine statica si smaschera a colpo d'occhio. Sommata allo slider eseguito davanti all'operatore e al vincolo di ritiro singolo applicato dal database, la contromisura porta il costo della frode sopra il valore del gadget.
Collaudare tutto senza accendere un servizio
Il livello dati delle funzioni riceve il client del database per iniezione: lo stesso codice gira su Turso in produzione e su un file SQLite nelle verifiche automatiche, che coprono unicità dell'email, doppio ritiro e finestra di annullamento. Il flusso completo è stato poi ripercorso con automazione del browser a viewport telefono: risposta corretta con bonus di tempo e di serie, risposta errata, scadenza del timer, email duplicata, slider di conferma, annullamento e riconferma del ritiro.
Sul trattamento dei dati il titolare è l'Università degli Studi di Palermo, con Feedback Srl in qualità di responsabile esterno. Il progetto adotta minimizzazione dei dati raccolti, consenso esplicito registrato con marca temporale e informativa a cura del titolare, perché in un'attivazione di questo tipo la conformità va progettata insieme all'esperienza, non aggiunta alla fine.
Le fasi del progetto
Analisi e requisiti
Incontri con l'ufficio orientamento, definizione degli obiettivi di comunicazione e di raccolta dati, stesura del documento di requisiti con perimetro, adempimenti privacy e criteri di successo.
Struttura editoriale
Sedici spunti tematici tradotti in dieci domande su sei aree, con approfondimenti, distrattori progettati e versione inglese, il tutto verificato con l'ateneo su ambienti di anteprima.
Interfaccia e co-branding
Sviluppo della UI a partire dai mockup ufficiali del festival, costruzione dell'anello del tempo, dello slider di conferma e della schermata celebrativa, definizione delle regole di co-branding con l'ateneo.
Sviluppo e integrazione
Implementazione del contratto dati con le tre implementazioni, funzioni serverless con validazione e garanzie applicate dal server, coda offline, cruscotto operativo ed esportazione dei contatti.
Collaudo e go-live
Verifiche automatiche sul livello dati, ripasso end-to-end dei flussi su viewport telefono e messa online sul dominio dedicato in tempo per l'avvio della manifestazione.
I risultati
L'ateneo si presenta al festival con uno strumento che lavora su tre piani insieme: comunica contenuti di orientamento nel momento in cui l'attenzione è alta, raccoglie contatti profilati con base giuridica solida e presidia lo stand senza aggiungere personale né dispositivi. Il costo di infrastruttura è nullo, la manutenzione si riduce a un file di contenuti e la stessa impalcatura è riutilizzabile per un'altra edizione o per un altro evento cambiando testi e sistema visivo.
Nessun hardware di stand, nessuna applicazione da installare, circa 200 KB al primo caricamento e un'architettura in cui sostituire il backend è una variabile d'ambiente: una web app di gamification per eventi progettata per funzionare dove la rete non collabora.
Vuoi portare una web app di gamification al tuo evento?
Se stai progettando un'attivazione per una fiera, un festival o un punto vendita e ti serve qualcosa che intrattenga davvero, raccolga contatti in modo conforme e regga una rete affollata, posso aiutarti a definirla e a costruirla con lo stesso metodo raccontato in questo caso studio.