Responses by Céline Duisit, web project director; Corentin Magnetti, art director and web designer; and Jordan Schutz, front- and back-end developer, Extra l’agence.

Background: French photographer Camille Moirenc and CNR—the concessionary of the River Rhone for the production of hydroelectricity, river transport and agricultural use—contacted us to create an experiential, immersive website for the photographic exhibition Facets of the Rhône, king of rivers, which takes place from March 13th to July 14th, 2021 at the Gates of Luxembourg Garden in Paris. The exhibition offers an immersive, poetic journey along the 812-kilometer (about 504 miles) river, from its source at the Furka Glacier in Switzerland to the Mediterranean Sea in France. With the difficult context of the COVID-19 pandemic, culture is suffering, and this event provides an opportunity to bring it back to the foreground. This digital extension aims to reach as many people as possible.

Design core: Our design work was focused on the creation of a strong graphic concept, following the scenographic principle of the river’s “guiding thread”—from the source to the sea—same as the physical exhibition.

This website has been designed and built in a simple way to make the experience as accessible as possible for users. Colors evolve throughout the course, reflecting the numerous landscapes through which the river flows. Microinteractions and page transitions make the site’s navigation more pleasant and improve the experience. Water and waves are the central elements that give meaning and consistency throughout the user experience.

Favorite details: We tried to transcribe the photographer’s journey as faithfully as possible in this web experience while maintaining a scenographic coherence with the physical exhibition in Paris. At Extra l’agence, we focused especially on this co-construction. We were very pleased to work with Camille on this project. Furthermore, the project has been a real success for our clients, and we are very proud to have supported them.

Challenges: Building the river’s route was the hardest part to integrate both graphically and technically. There were multiple discussions with the clients to validate this shape and represent the Rhône surrounded by all these images. Compromises were made to find the best solution between the geographic reality, the exact location of the user photos and the user experience. That’s why the addition of the interactive real map solved lots of problems and gave us more flexibility for the rest of the experience.

Performance also proved to be difficult to achieve due to the amount of resources. The experience presents more than 80 images but also uses many JavaScript libraries. A large part of the development was focused on improving performance, since we wanted the site to reach a wide audience on all types and sizes of devices.

Time constraints: Deadlines were very short to match with the physical exhibition’s launch in Paris, so we had to rethink some animations that we had originally planned on implementing.

Navigation structure: The website offers three different navigation systems to discover the river.

The first navigation consists of sliding naturally along the river, represented by a central line. A virtual map has been added to the side to show the exact location of the pictures, which is updated as the user scrolls. This navigation corresponds to the physical exhibition.

The second navigation appears by clicking on this map. It enables the user to scroll through pictures more quickly to reach the delta. The larger size of the map and the addition of the position markers offer a better visualization of the location of each picture.

The third way to navigate is to open a photo preview by clicking it and switching from one to the other without having to return to the Rhône route. It offers the possibility of focusing on contemplating photographs and reading the artist’s captions.

Finally, additional sections are available via the burger menu, such as a guestbook and a youth space. These explain the artist’s approach, present the river and its multiple uses, and raise public and children’s awareness on major environmental issues.

Technology: For the front end, we used HTML, CSS (Sass), JavaScript, and Balel and Webpack for transpilation and compilation. We installed several JavaScript libraries: Mapbox GL, which enabled us to manage the map and his features; PixiJS for the wave effect; Highway for page transitions; and GSAP for the animation—including Draggable, DrawSVGPlugin, MorphSVGPlugin, ScrollTrigger and SplitText.

For the back end, WordPress is installed for content administration in order for the photographer and his team to moderate the messages in the guestbook with total autonomy. We used several plugins that we know well—like Advanced Custom Fields, WordPress Multilingual Plugin, WP Rocket and Yoast SEO—to improve the general performance of the site.