B Lab France

Working on a comprehensive and in-depth eco-friendly web design process is an experience in itself. It’s a collective and unifying effort that requires discussions, back-and-forths, and compromises. It touches every aspect of the project: strategy, design, development, and user experience. Engaging in eco-design allows us to place the project at the heart of our societal and environmental concerns, giving deeper meaning to our work.
Marion Bahy-Baril, Consultancy Director at 148 Agency

Rethinking the user journey with eco-design principles in mind

We conducted the “classic” workshops of a redesign—site structure, UX, and UI. However, when viewed through the lens of eco-design, every step became a challenge. UX and UI, in particular, required thoughtful compromise. How do we offer a smooth navigation experience while forgoing the usual elements that weigh heavily on eco-design criteria: sliders, images, videos, footer forms, and more ?
Nous avons donc mené ces étapes de conception avec un fil rouge : minimiser, voire éliminer, le superflu. Les développeurs ont été présents très tôt dans le projet, pour évaluer et trancher avec nous l’impact et la faisabilité de nos choix.
Through open dialogue, we navigated our way to a solution that combined a strong commitment to an energy-efficient site with a user-friendly, educational approach.

The result: an eco-designed site that doesn’t sacrifice user experience

In this project, web design played a crucial role: color, typography, graphic elements, and placeholders all work together to compensate for the deliberate absence of visuals. These elements create a seamless, intuitive user journey without any “frills”.
On the technical side, we avoided sliders, included only one form, used JavaScript sparingly, and integrated an Analytics solution that doesn’t require cookies. Additionally, the site includes a comprehensive accessibility solution (Facil’iti) to meet the needs of all users.

A strong stance with an educational approach

B Lab and 148 provided consistent and committed answers, even if they didn’t always align with typical navigation habits, which could sometimes feel disruptive. To address this, we took two complementary approaches :
- Education: We quantified the energy savings and explained the eco-design approach on a dedicated page, accessible via a pop-up that appears when you land on the site and through links in both the header and footer.
- Option to disable eco-mode: We created an on/off switch that allows users to disable or reactivate eco-design mode. What changes? The display of images in places where placeholders are shown by default.
This toggle option isn’t available on the mobile version, where only the eco-designed version is offered. The mobile navigation is designed to be as efficient and straightforward as possible, with enough justification to eliminate all superfluous elements.

The teams at B Lab France and 148 Agency collaborated openly throughout the redesign of our website. Eco-design was particularly important to us, and the 148 team listened carefully to this request, resulting in an outcome that we are truly satisfied with.
Louise Seguin, Communications Manager at B Lab France