Eco-design guide for digital services

Webinar Q&A

You were nearly 500 to attend our launch webinar for this guide on March 11, 2021, and many questions were asked and unfortunately left unanswered.

All were interesting however, and we now aim to answer them in this FAQ. We have split them over four themes to help with navigation.

Answers were provided by Richard Hanna (RH), Anne Faubry (AF), Frédéric Bordage (FB) and Aurélie Baton (AB). We thank them for taking the time to respond, and we hope you enjoy reading them!

Design

1. Does this guide not reduce eco-design to a matter of webdesign rather than design as a whole?

RH: This guide deals with design in a broad sense and in terms of thought process, in particular as an approach aiming to accurately define user needs, eliminating unnecessary features, simplifying the user journey, etc.

AB: Indeed, in this guide we treat the eco-designing of digital services, but the approach remains that of eco-design as defined under the ISO 14062 standard. In the future, we aim to add another section more focused on artistic direction.

2. From an environmental standpoint, does it make sense to go back to a more primitive design approach, such as web 1.0?

Or have newer web technologies brought about sufficient ways to reduce the resource use of a page or service?

FB: The point is very much to prolong the lifecycle of older terminals. The older the platform we build on (assuming it's standard) the better it will work on old terminals. And we know that the manufacturing of devices represents 80% of the impact of digital technologies in France. It is therefore a key solution in eco-design. That being said, we don't have to do without newer technologies if they happen to be energy-efficient. See https://www.greenit.fr/impacts-environnementaux-du-numerique-en-france/ (French)

3. Do you recommend particular tools (such as wireframing, UX design) for eco-designed websites?

Or even plugins (if they exist) for existing tools that support eco-design?

FB: We recommend some tools in this guide, such as the GreenIT-Analysis plugin to audit your website (see also tools from the Collectif Conception Numérique Responsable). For prototyping, we don't have specific recommendations and we employ the usual tools (Adobe XD, Sketch, etc.).

4. How do you design an eco-designed application or site that's attractive enough to be widely used?

Especially considering that many UI/UX elements that make a website visually pleasing, easy to use (chatbots, carousels, etc.) will have been removed?

The point is not to remove useful UI/UX elements, only those unnecessary for the users.

AB: An eco-designed service can absolutely have appeaing visals and be aesthetically pleasing. And because it's eco-designed, the user experience should actually be improved and not deteriorated. The best practices presented in this guide aim to orient your task, but should definitely be adjusted depending on the context of the project. If a chatbot is necessary in your situation and the user experience relies on it, then the point is to make it as "optimized" as possible so that the user find answers to their queries as easily as possible.

AF: Much like an accessible website will benefit its users who are not disabled because it is clearer and more streamlined, we believe that an eco-designed website will improve the experience and therefore be more widely used.

5. In addition to technical aspects revolving around UX, how do we integrate artistic direction into eco-design?

In order to design new approaches to artistic direction that bring together aesthetic focus and a lessened environmental impact?

FB: Clearly, artistic direction is part of the stakes. The goal is to end up with an artistic direction that is both "light" and "useful", that uses few digital resources both on network and user terminal levels. This is possible outside of a minimalist aesthetic.

AB: The artistic direction aspect is one that we wish to develop in a future version of the guide.

6. How can designers (broadly speaking, not just UX) expand their scope of intervention?

Towards a holistic, systemic approach that influences economic models and addresses negative externalities for the environment? What are the challenges? How can they be dealt with?

RH: This is a real challenge! Firstly, designers should be more involved in decision making. More generally, all employees, designers, accountants, HR, etc., should be involved in the strategy and economic model of a company. This is why alternative organization models such as non-profits or cooperatives can be interesting.

AF: In addition, just as designers often find themselves having to convert people within their organizations about what design is about, they can also share insight about eco-design to other professions in the company (product owner, developer, etc.). We believe that this can help decision makers identify designers as valuable figures to bring in ahead of the start of a project, thus expanding their area of intervention into questions of strategy.

7. You speak of UX design only as a part of digital product design. Are you also considering expanding the scope to include services in their entirety, where the digital dimension would only be one facet?

(design for broader services, logistics, etc.)

FB: As part of the framework for the Collectif Conception Numérique Responsable we consider the overall impact of a service, including by quantifying it using a methodology such as Life-cycle Analysis (LCA). LCA takes into account the avoided impact, and the materiality associated with the functional unit (finding a train schedule, buying something online, etc.).

RH: It is crucial to assess digital technologies in context. For instance, a video call is not necessarily an environmentally conscious alternative. But it does alleviate the impact caused by people actually attending a meeting in person. Conversely, a "smart-city" demands a lot of electronic equipments which are often overlooked when assessing the expected gains. People tend to focus on energy savings and ignore the impact of manufacturing the equipment in the first place.

Work, organization & communities

8. As web professionals, how do you handle your IT needs?

Those needs can grow over time as softwares improve and demand more resources to function adequately. Et having high-performance gear can become necessary for a smooth working experience.

RH: Indeed, it is quite dificult for developers and designers to work with equipment older than four years old. It is possible but complex, since recent OS and softwares tend to be resource-intensive. Possible solutions to reduce our personal footprint are to rent equipment via networks such as Commown.coop, to purchase repackaged electronics, or to buy ethical and repairable devices (Fairphone, frame.work).

9. How does France compare to its European neighbors and the rest of the world when it comes to the level of expertise and awareness of eco-design?

FB: France is actually some way ahead of the rest of the world on the matter. It might sounds chauvinistic but it's true. The MIT and the EPFL envy us on this subject, which says a lot. We are pushing for public authorities to build this into a national area of expertise since it is good for the country's image and for the competitivity of French startups. We are also working with the ADEME to establish a system to testify accurately and simply to the level of eco-design achieved.

AB: Other countries in Europe and the rest of the world have taken an interest in the topic of eco-design. The approaches are different but things are moving. Gauthier Roussilhe's article summarizes the situation quite well: Digital sustainability: a French update.

10. Is there not a risk with arguing about profits and savings to justify environmental action? Could it lead to the idea that being conscious of environmental issues is only about saving money?

FB: I don't believe so, because consumers are intelligent and will be able to discern between greenwashing and a sincere commitment from a company. It is our job to sort the wheat from the chaff.

RH: We used to talk about "People, Planet, Profit". The better argument would be "People, Planet, Prosperity". Considering the urgency of climate action, a business cannot be considered viable if it stands in the way of the preservation of life on Earth.

AF: The profit arguments are to be used sparingly, along with other motivations, or as a last resort for a decision-maker most receptive to economic justifications. And if they lead to more action to alleviate the environmental impacts, I believe it's wise to use such arguments.

11. How do we discern fact from fiction when it comes to eco-design?

FB: Ideally, an eco-designed product or service that claims to be would have to rely on a third party to prove it. This could be achieved with a Life-cycle Analysis report, a link to an EcoIndex analysis, a page describing the approach taken, etc. Non-serious people can also be spotted when they use such language as "carbon" and "CO2" instead of "greenhouse gases" or "CO2 equivalent" for instance. The best way to not get duped is for more people to get trained, ideally.

RH: If you read something like "eco-design = reduction in electricity consumption", go on your way.

12. How much does it cost to get a consultant to analyze our system and make recommendations?

FB: It depends on the type of analysis. If it is a deep analysis in the style of critical review with a LCA, etc., expect to pay between 15,000 and 30,000 euros. If it is simply about listing best practices to put into place, it might only take a few man-days. Though obviously, this also depends on the size and complexity of the service in question.

13. To persuade people in the corporate world, do you have a ready-to-use list with the different economic arguments?

FB: See https://www.greenit.fr/2019/10/08/6-arguments-pour-la-conception-responsable-des-services-numeriques/ (French)

14. Are there things we can easily do as designers with our clients/employers that won't shake them up too much?

RH: You can integrate eco-design as a normal part of your activity rather than an option. Just like digital accessibility.

AF: Internal awareness campaigns can be an interesting way to generate adhesion to the approach and create enthusiasm around the topic, which would then lead to eco-design being part of decision making down the line. You can also put into place the practices of eco-design into your projects without naming them, simply by arguing for the sake of user experience, a lighter website, etc.

FB: Yahoo! is dead. Google won. Do you want to be the next Yahoo! or the next Google?

15. Is eco-design compatible with the visual identity of a brand and its trademark design approach?

RH: Yes, Volkswagen did it (or tried to). More seriously, this falls into greenwashing considering the company's activities. It's clearly a failed attempt but it still shows that even a car manufacturer can get interested in eco-design for its digital services!

AB: Yes, eco-design is very much compatible with the visual and design identity of a brand as long as the approach remains sincere and does not turn into greenwashing.

16. How do we integrate these processes into a project with many contributors?

FB: Eco-design should be treated as a facet in addition to UX, accessibility, etc., and therefore be integrated at the same level in the project development. The goal being to add as few best practices to put into place as possible (only those with the highest leverage) so that the approach remains manageable. Then you can consider stepping it up in increments.

AF: At some point, it will be necessary for all contributors to be trained in eco-design, or at least made aware of it, so that it can be implement efficiently. It would therefore be beneficial to set up awareness campaigns with colleagues as early as possible, which should be a fairly straightforward initiative.

17. Do you have other avenues of reflection in regards to making eco-design digital services as attractive as ultra high-tech energy intensive websites?

Some elements of answer:

Sometimes the more visually-restrained sites are more attractive (i.e. Frédéric's example of Google vs Yahoo!).

Be wary when putting attractivity ahead of other things: it can bring about ethical problems to do with attention economy.

Newer aesthetics are being researched and developed (cf. what the Low Tech Lab does). A low-tech aesthetic is in its early stages of growth.

AB: It is very much possible to enhance the visuals with beautiful illustrations as can be seen on La Coopérative des Internets website (French) or on the magazine Branch: A Sustainable Internet for All.

Features

18. What is the issue with infinite scrolling?

If a user scrolls to the bottom of a page, does that not mean they want to see more content?

Scrolling could be seen a substitute for pagination: when the user reaches the bottom of the page, X amount of additional data gets loaded up.

AF: Scrolling drives up data consumption and pushes users to stay on the page: it's attention economy at play and our attention is becoming a commodity. Infinite scrolling incites people to look at more content than is necessary and to spend more time using the service. The amount of data loaded will also increase indefinitely and the use of device resources as well.

AB: It is preferable to replace scrolling with an explicit action for the user to execute (button or pagination). This way the click to "see more" is a conscious decision rather than a passive mechanical gesture to scroll indefinitely.

19. How is speaking about energy consumption greenwashing?

FB: The environmental impact of electricity depend on how it's produced. In standards environmental assessments, we consider only embodied energy (expressed in megajoules). Cf. https://www.greenit.fr/2020/01/21/lelectricite-nest-pas-un-indicateur-environnemental/ (French)

20. Seeing how each online service comes with its own objectives (and therefore uses different means to achieve them), would an eco-label be realistic for eco-designed websites?

FB: The important thing is to compare what can be compared. This is why we are more enthusiastic about tools such as EcoIndex (cf. https://www.ecoindex.fr/en/how-it-works/ and its GreenIT Analysis plugin), which make it possible to compare different user journeys with the same metrics, than about a certification that would be too complex and costly to implement for now (or at least not affordable enough to be widely implemented and therefore not reliable enough). This is why we need to pursue eco-design as a tool rather than as an end in and of itself.

21. Is WordPress an option worth considering for an eco-designed website?

FB: It is possible to build a static website using WordPress. So yes, it can be worth considering using WordPress to achieve a result with minimal environmental impacts. But crucially, it's preventing the obsolescence on the user terminal's end that is the key to eco-design. So it's mostly the theme employed that will be a determining factor. We recently created a dedicated work group at ecoconceptionweb@googlegroups.com.

22. Why not deactivate cameras during a webinar?

Having cameras on in this context is not necessary.

RH: To show you our smiles! I assume the question has to do with digital restraint? But good news, we've avoided the commute for over 400 people!

AF: In addition, since we don't have a tool allowing us to add live captions to what we're saying, showing our faces can potentially help people with hearing impairment to lip-read.

23. Most online tools store work files without displaying their size (Google, Miro, Figma, etc.). What can we do about it?

RH: Some eco-designed sites display the size of images. That's good, and it helps raise awareness. But the average user may not have a clear idea of what 50 kB or 3 MB mean. When he display this type of information, it would be good to pair it with a gauge or visual indicator: red when the file is very heavy, green when it's on the lighter side (but be mindful of accessibility when making such a tool).

24. Is the eco-design approach not too limiting (e.g. mobile-first), especially when dealing with SAAS apps?

RH: The mobile-first approach is one path towards how to limit features on screen, but it is not the only one.

AF: With eco-design, it's all about restraint. In other words, it's about deploying means proportial to the output value. This is very much compatible with SAAS apps if it is the only way to provide this service to the users. But of course, it will need to be optimized following eco-design principles.

25. Do you have advice for videos?

Videos tend to weigh a lot and someone posts an HD video every second: YouTuber eating a burger, etc.

AF: This guide includes a section on the topic, especially on the topic of content compression. See this tutorial: https://theshiftproject.org/en/guide-reduce-weight-video-5-minutes/

FB: Be mindful not to confuse the results of LCA with the real-life sources of environmental impacts. Once your computer or TV has been manufactured, most of the associated impacts from watching a video online have already happened. The stakes are therefore to produce video content that does not overuse our delivery methods (which would push us towards the deployment of 6G, 7G, etc.) and most of all to not speed up the obsolescence of user terminals, since they represent most of the impact. The latter is the most critical aspect.

26. What do you think of social media apps like Instagram that push users to keep publishing stories in order to gain visibility?

What is the impact of stories? Can it be measured in order to raise awareness on the topic?

AF: We know that videos represent between 60 and 90% of internet traffic! This is in no small part due to social media sites. It's quite clear that not all of those videos create enough value to justify the environmental impact, but it is difficult to objectively assess the relevance of videos. That being said, it would be wise to generalize deleting videos after a given amount of time: many are only relevant to deliver a message at a speficic moment in time and do not need to be stored for years never to be watched again.

27. Is dark mode a valid way to save energy?

Should we not pursue darker and darker themes for our websites?

FB: Only a theme that actually uses black (and not just dark colors) will be able to save energy, and only on OLED and AMOLED screens, which are not an industry standard. Those energy savings can be attractive to earn a few more minutes of battery time but will not significantly reduce environmental impacts. It's worth noting that other design aspects will have a much bigger effect on battery life: avoiding too many back-end queries, limiting notifications, reducing the amount of data loaded, relying more on low-level features of the browser and OS, etc.

Assessment, standards and legislation

28. What are the French government's arguments against adding eco-design in its 2021 climate law?

FB: On this topic, public authorities in France have been following a policy of influencing rather than imposing change.

29. Is there a repository for the evaluation of eco-design practices, similar to the RGAA for accessibility, in order to determine a digital product's score?

FB: Yes, it's the repository for compliance from the GreenIT collective which is currently available in v3.0 with v3.1 currently in development. (v4.0 is now out)

RH: A repository for environmentally conscious design developed by different institutions is in progress. It involves hundreds of contributors from many different backgrounds and professions (not only developers and designers) and will be available to the public by the Fall.

30. Are there carbon footprint calculators to measure the difference between an eco-designed website and a traditional one?

It's challenging to determine the value of these environmental impact reductions when we often feel like we're navigating without instruments and unable to accurately measure the changes.

FB: The easiest is to assess a standard user journey (matching the functional unit) with GreenIT-Analysis before and after eco-designing the page.

AB: For more information, see Assessing and measuring.

31. What are the four levels of digital eco-design?

FB: See https://www.eco-conception.fr/static/leco-conception-pour-tous.html (French)

32. Are frugality and restraint synonyms?

How can we show restraint without falling into austerity?

FB: Frugality and restraint aim to design digital services centred around the essential and free of the superfluous. The goal is not austerity but a proportional response. Eco-design goes beyond a mere graphic interface, it's about designing a product/service. This sometimes involves replacing a digital terminal with something else: a whiteboard in a classroom, an SMS instead of a messaging app, a simple email over an app like AngularJS/Bootstrap, etc. All these examples come from personal experience. Therefore, restraint is about more than the austere (or not) aspect of the human-machine interface. Personally, in this era where attention economy is at the center of everything, I aim to design appeasing interfaces. This also represents added value to offer our users.

33. Is it possible to compute the relationship between the size of a page and the impact on the device's lifespan?

FB: Rather than size, it's the complexity of the page and therefore the drain on the device's resources that should be taken into account, especially since it's often the feeling of sluggishness which brings people to renew their devices.

34. Has the government's design system been audited (on an environmental standpoint) by the association?

https://www.systeme-de-design.gouv.fr/

FB: [referring to atlassian.net, mid-March 2021] It's funny, I'm getting a “Browser not supported” message when I try to load it. A great example of obsolescence triggered by an overly demanding front-end.

RH: I had some exchanges with the Service d'Information du Gouvernement (SIG) about the state's design system on the topic of compliance with environmental indicators. It's difficult to assess the web components. Eco-design, as previously stated, is meant to be applied to the functional unit. However, there are some avenues to be explored when it comes to training designers using this design system: being more selective when choosing components and fonts, for instance.

35. What's the point of displaying a CO2 equivalent to savings made on size and computing power?

Such calculations seem difficult to do correctly considering how complex the chain can be. Worse still, it could be used by proponents of nuclear power to claim that energy savings are meaningless.

FB: We need to quantify environmental impacts in order to give them a material reality and to have points of reference, especially to be able to measure progress over time and how much leeway we have compared to other similar services. Besides, these calculations are not so difficult to accomplish, but it is a job in and of itself like UX, DEV, etc.

36. A website like Unsplash is bound to have more images, even lighter ones, than a site like Vendredi How can we assess with more similar services?

Likewise, commercial websites are bound to have chatbots.

FB: I designed EcoIndex specifically to allow this type of comparison. That's partly why it relies on technical indicators that can be retrieved from any public website. To accomplish an adequate comparison, we just need to execute the same functional unit on all sites being compared. With the GreenIT Analysis plugin, this is done by using the "save analysis" feature for each user journey.

AB: For more information, see Assessing and measuring.

37. Regarding the impact of downloading content for the device browsing the website, does storage itself have an environmental impact, for instance between storing a 20 MB and a 200 MB file?

FB: Storage is the part that has the smallest environmental impact. A low-range PC nowadays comes with 500 GB or 1 TB of disk space. The issue is more to do with the energy needed to build and display the DOM.

38. Won't the deployment of 5G threaten this vision of eco-design?

FB: I don't think so. Firstly, because most of France is still waiting to get access to a strong 4G or fiber, and 5G is not about to reach them. Secondly, 5G does not offset the hardware demands on the terminal (RAM, CPU).

39. What tool is used to compute the different criteria influencing the size of a page?

On your browser, use the Inspect button and check the Queries. You will find information on their size.

FB: To go further with this approach you can use GreenIT-Analysis and the Ecoindex simulator.