? Grid intensity view:

Welcome

Foreword: Envisioning a Sustainable Internet
Maddie Stone

Letter from the Editors
Michelle Thorne and Chris Adams

Designing Branch: Sustainable Interaction Design Principles
Tom Jarrett

Solarpunk and Other Speculative Futures

One Vision, One World. Whose World Then?
Vândria Borari and Camila Nobrega

The Museum of the Fossilized Internet
Gabi Ivens, Joana Moll and Michelle Thorne

Today Google Stops Funding Climate Change Deniers
Extinction Rebellion NYC

Repairing Our Relationship with Technology
Janet Gunter

Critical Art and Carbon Aware Design

The Hidden Life of an Amazon User
Joana Moll

Don’t Press Snooze: Design in a Crisis
Alexandra Deschamps-Sonsino

Design for Carbon-Aware Digital Experiences
Lu Ye

Signal: A Poem
Taylor Rowe

Sustainable Web Craft

10 Rules for Building a Low-Impact Website
Jesper Hyldahl Fogh

Sustainability in Software Engineering
Bill Johnson

Reflections on Running a Sustainable Digital Agency
Tom Greenwood

Hands-On Sustainable Web Design
Laurent Devernay

AI Promises and Perils

AI and Climate Change: The Promise, the Perils and Pillars for Action
Eirini Maliaraki

Alexa, Save the Planet
Brett Gaylor

Climate Action in Tech

Seeing Black and Green in Tech
Melissa Hsiung

If I am a Techie, How Can I Help Solve Climate Change?
Kamal Kapadia

Policy and Advocacy

The Story is a Forest: How to Talk About Climate Change
Christine LaRiviere

When Policy Responds to Reality: Transformative Policy Futures
Chenai Chair

Interconnected: Sustainability on the Agenda
Michael J. Oghia

About Branch

medium grid intensity

Designing Branch: Sustainable Interaction Design Principles

There’s a need to reconnect the digital to the physical, from minerals and energy to the physical infrastructure that powers the internet. We have to repurpose our digital design processes to consider and reflect these ecological needs, instead of optimising only for business and growth objectives, to achieve more transactions, interactions and attention. 

One of the ways we can do this is by lowering the energy demand of the digital products and services we’re designing, making it more accessible to people with slower internet connections or on older devices.  For Branch we wanted to design something that still looked designed, and worked at a low bandwidth environment, but didn’t end up looking too anodyne.

Branch was also designed to be ‘Demand Responsive’ to adapt to and reflect the physical infrastructure of the internet and the energy behind it. Utilising data from a grid intensity API and the user’s location, Branch has different interface designs that are shown dependent on the current energy demand and fossil fuels on the grid where the user is. There are 4 different design states:

1. Lower grid demand, more renewables

The first design state is when grid demand is lower and has a higher concentration of renewables, here the site shows the full experience with all images, videos and media content automatically loaded.  

2. Medium grid demand, fewer renewables

If the grid demand increases and is medium intensity with fewer renewables, we display lighter unicode renderings of images and videos. 

3. Higher grid demand, less renewables 

When grid demand is high and less renewables are being used we reverse the way media content is shown by emphasising the alt text instead. The user can click to reveal the content if they wish, but it is not automatically loaded for them, this also creates the need to craft alt texts to make them much more descriptive than they may usually be.

4. Grid data unavailable 

Sometimes the technology we rely on goes down or simply doesn’t work, and that’s another important reflection of the physical infrastructure behind it. So when the grid intensity API we use for Branch is down or unavailable, we designed a state to show this too.

Four mockups show the different designs for low, medium and high grid intensity as well as if no data is available

The logo was designed to indicate these different states, with the graphical branch element getting greener to show when more renewables are on the grid.