Branch Magazine: A Sustainable Internet for All
![]()
Branch is an online magazine written by and for people who dream of a sustainable and just internet for all. Built with support from EIT Climate KIC, Mozilla Foundation, Climate Action Tech, and the Green Web Foundation
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.
To make something that was ‘Demand Responsive, we utilised 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. LOW GRID INTENSITY: 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 INTENSITY: FEWER RENEWABLES
If the grid demand increases and is medium intensity with fewer renewables, we display lighter unicode renderings of images and videos.
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.
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.
Email me for high res images and video →
INTRO
Branch is an online magazine written by and for people who dream of a sustainable and just internet for all. Built with support from EIT Climate KIC, Mozilla Foundation, Climate Action Tech, and the Green Web Foundation
BACKGROUND
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.
To make something that was ‘Demand Responsive, we utilised 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. LOW GRID INTENSITY: 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 INTENSITY: FEWER RENEWABLES
If the grid demand increases and is medium intensity with fewer renewables, we display lighter unicode renderings of images and videos.
3. HIGH GRID INTENSITY: 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.
Email me for high res images and video →