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.
At each sorting step, text and video content are displayed. Part of the detail text remains hidden to allow for longer explanations when needed.
An anchor links navigation on the left allow users to easily navigate the website.
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.
On mobile, the scroll experience stays the same, even if it will be less immersive as the screen is smaller, but such is life.
Navigation is condensed in a burger menu that opens sideways, to easily navigate between the different sorting steps.
