Projet réalisé au sein de l’agence Spintank en 2022
Contexte
Citeo, entreprise française de tri et de recyclage des déchets, a désiré créer un outil pédagogique à destination des citoyens expliquant le fonctionnement d’un centre de tri des emballages et papiers.
Réponse
→ Un site web immersif en scroll-telling : la narration des contenus se fait au déroulé (scroll), pour une expérience fluide et engageante
→ Une illustration vectorielle, détaillée et interactive (réalisée par une autre agence en collaboration) comme support visuel pour simplifier et vulgariser le fonctionnement général d’un centre de tri
→ Des capsules vidéo pour expliquer de manière documentaire les différentes étapes de la chaîne du tri
J’ai réalisé un prototype animé montrant un premier principe de scroll-telling où les contenus informatifs restaient discrets mais accessibles sur les côtés de la fenêtre de navigation. Finalement, il a été décidé que les contenus devaient être plus visibles et sur le devant de la scène.
Au scroll ou au clic sur “Démarrer la visite”, l’utilisateur.ice zoome sur l’image du centre de tri, et a accès aux explications sur les différentes machines grâce à des fenêtres pop-in.
Pour chaque grande étape du tri, des contenus textes et vidéo remontent. Une partie du texte de détail reste caché pour permettre à l’utilisateur.ice de rester immergé.e dans la visite, et de choisir les contenus qui l’intéressent.
Une navigation avec des liens vers des ancres permet de naviguer facilement dans le site, de “haut” en “bas” dans la narration.
A la fin du parcours des déchets, un résumé explique les différents matériaux triés (papier, carton, acier, différents types de plastique…). Des liens re-dirigent vers le site web de Citeo ou permettent de partager le site.
Sur mobile, l’expérience de scroll reste la même, même si de facto elle sera moins immersive car l’écran est plus petit, mais c’est la vie.
La navigation est condensée dans un menu ouvrable dans un volet, pour permettre de naviguer d’étape en étape de manière ergonomique.
