Crafting an immersive scroll-telling website

Client
  • Citeo
Services
  • Art direction
  • UI design
  • Prototype

Project carried out while working at design agency Spintank in 2022

Context

Citeo, a French recycling and waste sorting company, wanted to create an educational tool for the general public explaining how a sorting waste facility works.

Solution

→ An immersive scroll-telling website: users interact with content while scrolling the page, resulting in a smooth and engaging experience
→ A detailed, interactive vector illustration (produced in collaboration with another agency) as visual aid to simplify and popularise how this type of facility works
→ Short documentary videos explaining in a more detailed way the different processes at work

I originally created an animated prototype showing discreet but accessible informative content sliding in from the side of the page while scrolling. In the end, it was decided that this informative content should be more prominent and therefore cover the background illustration, to encourage users’ engagement with it.

By scrolling or clicking on “Start tour”, users zoom in on the background illustration and have access to the names and description of the various machines, thanks to pop-in windows.

Vue du site montrant des informations sur une machine dans une fenêtre pop-in

At each sorting step, text and video content are displayed. Part of the detail text remains hidden to allow for longer explanations when needed.

Vue scrollée des contenus d'une étape de la chaîne de tri
Vue scrollée des contenus d'une étape de la chaîne du tri

An anchor links navigation on the left allow users to easily navigate the website.

Vue zoomée avec informations sur les différentes machines

At the last step of the process, a summary explains which materials were sorted (paper, packagings, plastics…). Links redirect users to the main Citeo website. The experience can also be shared.

Vue finale du parcours des déchets dans le centre de tri

On mobile, the scroll experience stays the same, even if it will be less immersive as the screen is smaller, but such is life.

Vues mobiles du centre de tri

Navigation is condensed in a burger menu that opens sideways, to easily navigate between the different sorting steps.

Vue globale des écrans mobiles du centre de tri

Next project:

Designing a local mobile application for Parisians

Discover this project