Webion
Case study
2025

Flow

logo-fick

Flow accompagna i bambini in un viaggio digitale sul riciclo, dalla raccolta dei rifiuti fino alla festa finale con Felix e Sammy

Flow

Dettagli

Cliente

Federazione Italiana Canoe e Kayak

Pubblicato

Ottobre 2025

Contesto del cliente

La Federazione Italiana Canoa e Kayak (FICK) è l’ente di riferimento nazionale che promuove, disciplina e organizza l’universo agonistico e amatoriale della canoa e del kayak in Italia. Riconosciuta ufficialmente dal Comitato Olimpico Nazionale Italiano nel 1987, la Federazione gestisce tutto l’ecosistema degli sport della pagaia — dalle competizioni olimpiche e paralimpiche fino ai percorsi promozionali per scuola e territorio — garantendo formazione, sicurezza e rappresentanza internazionale.

Sfida

I materiali didattici non erano molto coinvolgenti, quindi era difficile capire davvero come funziona il riciclo. I bambini facevano fatica a collegare le azioni di tutti i giorni con le conseguenze sull’ambiente, anche perché non ricevevano un riscontro immediato. Inoltre, mancava un’attività digitale semplice da usare, proiettabile facilmente su LIM o tablet, senza dover installare programmi complicati.

flow

Soluzione sviluppata

Un percorso in quattro tappe — raccolta, smistamento, trasformazione e celebrazione — ambientato in tre ecosistemi: fiume, lago e mare. Una mappa interattiva e facile da esplorare, con marker blu e sticker animati, racconta piccole storie e offre consigli pratici. Una barra laterale narrativa, con avatar, testi guidati e pulsanti avanti/indietro, accompagna insegnanti e studenti durante tutta l’esperienza. Un assistente digitale, “Chiedi qualcosa”, basato su un assistente di intelligenza artificiale, risponde subito alle domande e alle curiosità dei bambini.

flow-chat

Processo di sviluppo

Abbiamo condotto una fase di analisi preliminare per definire il linguaggio, i personaggi e il livello di complessità più adatto ai bambini. I primi prototipi realizzati sono stati testati per allineare gli elementi grafici e la sequenza narrativa. Il lavoro è stato organizzato in cicli di lavoro settimanali: il primo dedicato alla creazione della mappa base e alla gestione dei marker, il secondo alla realizzazione della barra laterale e della chat, e l’ultimo all’ottimizzazione.

flow-step1

Funzionalità principali

L’esperienza comincia con una pagina iniziale interattiva che invita a esplorare liberamente e scegliere l’ambiente della propria scuola. Le mappe illustrate a tutto schermo guidano il viaggio con animazioni e punti da scoprire, dove testi e immagini raccontano storie locali. Una barra laterale adattiva accompagna il percorso e mantiene viva la narrazione. Le tappe sulla fabbrica e sulla trasformazione mostrano il viaggio dei materiali in modo semplice e visivo. Il tutto si conclude con un finale personalizzato per fiume, lago o mare, dove il luogo torna pulito e i personaggi ringraziano il visitatore.

Valore aggiunto

L’esperienza mantiene alta l’attenzione grazie a giochi leggeri e animazioni che premiano la curiosità. Gli insegnanti hanno a disposizione strumenti pronti all’uso, facilmente inseribili nelle lezioni. Una chat interattiva aiuta a proseguire la discussione, favorendo un apprendimento personalizzato e offrendo spunti sulle domande più ricorrenti.

flow-step-4

Tecnologie utilizzate

  • Next.js 15 (App Router) e React 19 RC per un’esperienza client-side fluida con dynamic import.
  • Backend: C#, .NET core, asp.net, entity framework
  • Material UI 6 con tema Mulish personalizzato e breakpoints ottimizzati per LIM e tablet.
  • react-zoom-pan-pinch e KeepScale per mantenere proporzioni dei marker durante zoom e pan.
  • Framer Motion 12 e Motion One per animazioni di transizione e sticker interattivi.
  • Zustand per lo stato di navigazione dei marker e nuqs per URL query e transizioni.
  • Vercel AI SDK (@ai-sdk/react) con OpenAI Assistants API per la chat educativa di Flow.