1 of 39

How to design a green website digital product

2 of 39

Getting started backpack

On digital sustainability

I

3 of 39

Climate change isn’t solely an environmental issue. It’s rooted in a web of ethical, political, and systemic issues. A lot of these issues overlap with tech, design, and how we do business.

🎧 Listen to Introduction to climate justice

▶️ Watch A chat about climate justice

The climate crisis doesn’t happen in a vacuum

4 of 39

5 of 39

It takes only 3.5% of the population actively participating in non-violent protest to ensure serious political change. Forming groups and pushing for change can have lasting impacts.

📖 Read Leverage points – Places to intervene in a system

🎧 Listen to How Amazon workers got serious about climate (and how you can too)

▶️ Watch The success of non-violent civil resistance

Big change starts small

6 of 39

📖 Read Blueprint for Revolution by Srdja Popovic

7 of 39

We’re all at different points of understanding the complexities of the climate crisis. We need to listen to one another and share what we know.

🎧 Listen to Climate change is a health issue

▶️ Watch How to talk about climate so people act

Talking about climate can be hard

8 of 39

9 of 39

Digital = physical

Digital services require physical infrastructure and electricity — a lot of which is still created by burning fossil fuels.

📖 Read The cloud is on the ground

▶️ Watch Digital sustainability pt.1 – an introduction

10 of 39

▶️ Watch Digital consumption & the environment �(part of Designing an Ecological Alexa IMPAKT Event)2

11 of 39

What to do

Think bigger, build better

II

12 of 39

Think bigger before you start

13 of 39

1 · Challenge the status quo�2 · Put care first

Think bigger before you start

14 of 39

Client & project selection

1 · Challenge the status quo

Actions

Project purpose

Measurements for success

Who do we choose to work with?
Is our client’s goal aligned with our vision of the future?

Why are we doing this?
Who is harmed? Who is helped?
Are we encouraging users to conserve or to consume?

What metrics are we basing success on and why?
What other measurements for success could we use? (E.g., incorporating resource use)

——————————————————————————————————————————

15 of 39

1 · Challenge the status quo�2 · Put care first

Think bigger before you start

16 of 39

📖 Read SocietyCentered.Design

17 of 39

Justice

2 · Put care first

Actions

Health

Analyse the power dynamics in your team, and between your team and your end users
Involve humans and ‘non-humans’ who will be impacted by the project in your design process

Evaluate potential harms [physical, emotional, societal]
Move away from the attention economy
Set resource budgets

—————————————————————————————————————————————————————

18 of 39

Tom Jarrett’s Experiment: Low-energy Instagram

19 of 39

1 · Challenge the status quo�2 · Put care first

Think bigger before you start

20 of 39

Build better by default

21 of 39

1 · Optimised�2 · Transparent�3 · Adaptable

Build better by default

22 of 39

UX

1 · Optimised

Actions

Visuals

Storage & longevity

Simplify the user journey - reduce page loads
Avoid auto-loading content

Remove what you don’t need
Choose the most low-impact medium for your message
Reduce file sizes
Optimise fonts & colours

Run on green infrastructure
Store only what you need
Regularly delete outdated content & data
Make it work on older devices

———————————————————————————————————————————————————————————

23 of 39

sustainablewebdesign.org

Sustainable Web Design by Tom Greenwood

24 of 39

lowimpact.organicbasics.com

25 of 39

UX

1 · Optimised

Actions

Visuals

Storage & longevity

Simplify the user journey - reduce page loads
Avoid auto-loading content

Remove what you don’t need
Choose the most low-impact medium for your message
Reduce file sizes
Optimise fonts & colours

Run on green infrastructure
Store only what you need
Regularly delete outdated content & data
Make it work on older devices

———————————————————————————————————————————————————————————

Storage & longevity

One small change with a big impact is going for a cloud provider that’s running on renewable energy. But this shouldn’t be an excuse to store more — quite the contrary. Storing only what we need and managing our digital waste better are crucial methods to keep digital carbon-footprints low. This also goes hand in hand with privacy if we think about user data, as well as cloud costs. Smaller things need less space. A great thinker in this space is Gerry McGovern.

We can make sure our designs work on older devices. We replace devices for many reasons, but in most cases, it is not because the hardware is broken. Instead, the problems lie in the software. All of the other tips on this slide help with this because if our websites are smaller and more optimised, they are more likely to function on older devices as well.

26 of 39

1 · Optimised�2 · Transparent�3 · Adaptable

Build better by default

27 of 39

Awareness

2 · Transparent

Actions

—————————————————————————————————————————————————————————

Customisation

Embed information about the impact of digital services
Visualise the waste digital creates

Provide options for different energy-consumption modes
Give users a clear way of giving feedback

28 of 39

Lu Ye’s Carbon Aware Operating System

29 of 39

1 · Optimised�2 · Transparent�3 · Adaptable

Build better by default

30 of 39

3 · Adaptable

Actions

———————————————————————————————————————————————————————————

Smart defaults

Reliability in times of crisis

What would a low-impact version of this product look like?
How could the experience adapt based on how much renewable energy is in the grid?

What crisis context could occur where this project is essential?
How does the design work if there is no/low power or no internet connection?

31 of 39

Branch Magazine

32 of 39

ClimateAction.tech Slack community

33 of 39

ClimateAction.tech #greener-design channel wiki page

34 of 39

Think bigger before you start

Build better by default

1 · Challenge the status quo

2 · Put care first

1 · Optimised

2 · Transparent

3 · Adaptable

In your backpack

The climate crisis doesn’t happen in a vacuum

Big change starts small

Talking about climate can be hard

Digital = physical

35 of 39

Thanks

36 of 39

Appendix

37 of 39

High impact places to intervene in systems:

Change mindsets & paradigms

How do we believe the world works? What big unstated assumptions exist? What if those would change?

Change goals of the system (very high level)

In corporations the high-level goal is often control and power. What if there was a different goal? What new goals could we try to achieve?

[Leverage Points by Donella Meadows]

Upon Maren Costa’s recommendation I recently read “Leverage Points” which is a paper by Donella Meadows who’s a systems analyst. In the paper Donella talks about high impact places to intervene in systems. Changing mindsets & paradigms and changing the goals of a system at a high level are some of the most impactful things you can do. Neither can be done alone of course, you need to find folks to collaborate with to push these new ideas forward.

As designers we pride ourselves in challenging assumptions but what if we’d take that to a higher level. How do we believe the world works? And what are the assumptions that could change and what ripple effects would this have?

Same goes for the goals of a system. In corporations the high-level goal is often power and control. What if there were different goals though? Goals that were more aligned with planetary and societal health?

How do these thought experiments translate into actions?

38 of 39

Change mindsets & paradigms

Speak up & keep pointing at failures of the old paradigm
Work with active change agents & the vast middle ground of people who are open minded
Envision a new future & speak with assurance of this new paradigm

How to

39 of 39

[A Message from the Future II: The Years of Repair]