Webion
Case study
2025

Flow

logo-fick

Flow accompanies children on a digital journey about recycling, from waste collection through to the final party with Felix and Sammy.

Flow

Details

Client

Federazione Italiana Canoe e Kayak

Published

October 2025

Client context

The Italian Canoe and Kayak Federation (FICK) is the national governing body that promotes, regulates, and organizes the competitive and amateur world of canoeing and kayaking in Italy. Officially recognized by the Italian National Olympic Committee in 1987, the Federation oversees the entire paddle sports ecosystem — from Olympic and Paralympic competitions to promotional programs for schools and local communities — ensuring training, safety, and international representation.

Challenge

The educational materials were not very engaging, so it was difficult to really understand how recycling works. Children struggled to connect everyday actions with environmental consequences, also because they didn’t receive immediate feedback. Moreover, there was a lack of a simple-to-use digital activity, easily projectable on interactive whiteboards or tablets, without needing to install complicated programs.

flow

Developed solution

A four-stage journey — collection, sorting, transformation, and celebration — set in three ecosystems: river, lake, and sea. An interactive and easy-to-explore map, with blue markers and animated stickers, tells small stories and offers practical tips. A narrative sidebar, with avatars, guided texts, and forward/back buttons, accompanies teachers and students throughout the experience. A digital assistant, “Ask something,” based on an artificial intelligence assistant, immediately answers children’s questions and curiosities.

flow-chat

Development process

We conducted a preliminary analysis phase to define the language, characters, and level of complexity most suitable for children. The first prototypes created were tested to align the graphic elements and the narrative sequence. The work was organized into weekly work cycles: the first dedicated to creating the base map and managing the markers, the second to developing the sidebar and the chat, and the last to optimization.

flow-step1

Main features

The experience begins with an interactive start page that invites users to explore freely and choose the environment of their school. Full-screen illustrated maps guide the journey with animations and discovery points, where texts and images tell local stories. An adaptive sidebar accompanies the path and keeps the narration alive. The factory and transformation stages show the journey of materials in a simple and visual way. Everything concludes with a customized ending for river, lake, or sea, where the place becomes clean again and the characters thank the visitor.

Added value

The experience keeps attention high thanks to light games and animations that reward curiosity. Teachers have ready-to-use tools at their disposal, easily integrated into lessons. An interactive chat helps continue the discussion, promoting personalized learning and offering insights on the most common questions.

flow-step-4

Used technologies

  • Next.js 15 (App Router) and React 19 RC for a smooth client-side experience with dynamic import.
  • Backend: C#, .NET Core, ASP.NET, Entity Framework
  • Material UI 6 with a customized Mulish theme and breakpoints optimized for interactive whiteboards and tablets.
  • react-zoom-pan-pinch and KeepScale to maintain marker proportions during zoom and pan.
  • Framer Motion 12 and Motion One for transition animations and interactive stickers.
  • Zustand for marker navigation state and nuqs for URL query and transitions.
  • Vercel AI SDK (@ai-sdk/react) with OpenAI Assistants API for Flow’s educational chat.