Introducing ‘Webstripes’

The climate stripes created by Professor Ed Hawkins are one of the most effective pieces of communication design I’ve ever seen.

Climate stripes by Ed Hawkins, showing a series of coloured stripes. Each stripe represents the average temperature for a single year, relative to the average temperature over the period from 1961 to 2010
Climate stripes show clearly how global average temperatures have risen over time

They work so well because they make an invisible problem visible, helping people to immediately understand climate change in a simple and visually appealing way.

Decarbonising digital services

Digital services have a significant and growing environmental impact, driven primarily by the energy required to store, transfer and render data.

Unfortunately, most of this impact remains invisible to the people who are responsible for them.

I’ve been working on an approach called ‘decarbonising user journeys’ to make this impact easier to understand and manage.

The principle behind it is simple.

Reduce the weight and energy demand of the pages that make up key digital user journeys in order to reduce the overall environmental impact of the service.

Using tools such as the Website Carbon Calculator, you can calculate the energy efficiency of individual pages and identify where the biggest problems are.

I’ve been experimenting with ways to visualise this information using energy efficiency ratings that people are familiar with from everyday things like household appliances to rate web pages.

A diagram showing the energy efficiency ratings of a series of webpages that make up a user journey
My early attempts to visualise the carbon footprint of user journeys

It worked reasonably well but I kept thinking about the simplicity and effectiveness of the climate stripes.

It got me thinking, could a series of stripes be used to visualise the energy efficiency of a digital user journey?

Introducing Webstripes

I’ve been working with the awesome Jon Gibbins to automate the capture of website energy efficiency data and used some of this data to create the website equivalent of the climate stripes.

I’ve called it Webstripes.

A series of coloured stripes each depicting the energy efficiency of individual websites within a user journey
Webstripes shows the energy efficiency of a series of pages within a digital user journey

Each stripe represents the energy efficiency of an individual web page that makes up a digital user journey.

I liked the impact of my first attempt but it’s not great if you’re colourblind so I created a better version that more clearly communicates the relationship between page weight and energy efficiency and doesn’t rely on colour to convey information.

A series of vertical bars of different colours each depicting the energy efficiency of a single webpage within a larger digital journey.
Webstripes 2.0

Shorter stripes represent lighter, more energy efficient pages.

Longer stripes represent heavier, less energy efficient pages.

Environmental impact data is often too complicated and confusing.

People can’t (and won’t) act upon things they don’t understand.

I’ve seen first hand how powerful simple visuals such as experience maps can be within organisations to drive positive change.

Webstripes can help teams to quickly identify problem areas and help them focus their optimisation efforts to make the reds turn green.

Beyond human centred design

Human centred design helped make digital services useful, usable and desirable.

But if we only optimise for people, without considering the wider impacts of our work we risk designing services that are harming the environment.

Our work must now focus beyond human centred design.

Learning how to do this effectively has to be our priority given the climate emergency and proliferation of digitisation within our every day lives.

I’ll be sharing more about this in my talk on ‘Beyond Human Centred Design’ at UX Scotland in June.

And if you’d like me to create Webstripes for your own user journeys, do get in touch.

Useful sustainability related design resources

For the last year or so I’ve been on a mission to try and reduce the environmental impact of the internet.

Here are some of the resources that I’ve compiled along the way that I’ve found useful and inspiring along with some of my own work that they have all helped shape in some way.

I hope you find them useful.

Books:

Website Carbon Calculators:

Useful articles & presentations:

Web resources:

Useful videos:

Decarbonising the Premier League

Earlier this year, Richard Masters , Chief Executive at the Premier League, launched their Environmental Sustainability strategy.

It focusses on three key priorities :

  1. To become net zero by 2040
  2. To support decarbonisation across the league
  3. To raise awareness of climate change

As a football fan and someone on a mission to reduce the environmental impact of the internet this caught my eye.

Many people don’t realise that the internet is responsible for higher global greenhouse gas emissions than the aviation industry.

With over 60% of the global population now spending 40% of their waking hours online, this trend is set to continue leading to predictions that the internet will be responsible for 40% of global greenhouse emissions by 2040.

Given these alarming figures I wonder if the Premier League are prioritising or even aware of the potential carbon footprint of the club websites in relation to their decarbonisation objectives?

Club websites serve huge global fanbases and are typically content heavy, particularly with images and videos which are energy-intensive to store and transfer to users’ devices.

Multiple this usage across the 20 Premier League club websites and the cumulative impact of millions of page loads results in a significant carbon footprint.

So this all got me thinking…

Who would win the Premier League if the winner was the club the smallest website carbon footprint?

I chatted to the folks at Cardamon about the idea and they kindly offered evaluate the websites using their carbon calculator.

To make the results comparable, we calculated the carbon footprint of 10,000 visits to the homepages of each site (clearly the footprint of the entire websites will be significantly higher).**

And the results are in!

A league table containing all of the premier league football teams ranked by the carbon footprint of their club website. The club with the lowest homepage carbon footprint is Manchester City and the club with the largest homepage carbon footprint is Ipswich Town. The table show the carbon emissions and energy usage from 10,000 visits to each of their homepages and whether they are using green hosting or not.

The full ranking (best to worst) is Manchester City, Everton, Arsenal, Chelsea, West Ham, Manchester United, Wolves, Southampton, Crystal Palace, Liverpool, Aston Villa, Fulham, Leicester City, Bournemouth, Brighton, Newcastle United, Spurs, Brentford and Ipswich Town.
The Premier League of website homepage carbon emissions

So hats off to Man City for having the lowest homepage carbon footprint, but let’s face it they’re the best of a bad bunch.

It’s no surprise that Ipswich are anchored to the bottom of the table given their hefty 29 MB homepage.

If the Premier League are serious about meeting their sustainability goals then decarbonising club websites must be a key part of their strategy.

Even a tactical focus on switching them all to green hosting would make a huge difference and feels like a simple tap in.

The benefits of low carbon websites

The benefits of low carbon websites extend far beyond the environment.

Low carbon websites are deliberately designed to be as simple as possible making them easier to use, download faster and available to more people.

Their simplicity means they are more efficient, effective and use less energy – making them better for people, performance, planet and profit.

So what about the carbon footprint of your own website?

How much do you know about the carbon footprint of your websites and what is being done within your organisation to minimise it?

What risk does ignoring your digital carbon footprint pose to your reputation, values or wider sustainability goals?

I’d argue a very significant one.

The climate crisis demands that every responsible organisation should make a plan to minimise the environmental impact of their digital product and services, but many simply don’t know where to start.

I’ve created some simple and practical free tools that will help get the ball rolling:

It would be wonderful to see a very different story in the table next year, seeing the reds, blues and lilywhites becoming greener.

I hope this helps to nudge the clubs in the right direction to minimise the environmental impact of their websites.

If anyone needs advice, help kicking off or hands-on support with any of this I’m here to help – just drop me a line.

cc Will Hutton Ellen Shaddock Pete Bradshaw Hannah Mansour James Beale Tom H. Chris Goodwin Rishi Jain Charlotte Miell Helen Hughes Eloise Thompson AIEMA Marcus Parry Max Wilkes-Barker Alex Evans Jesse Foyle Katie Cross


**Cardamon runs with ad blocking on so the impact of adverts on these websites are not included in the results

Thanks again to Adam Newman and the crew at Cardamon for running the numbers for me – here’s the full data set

Decarbonising User Journeys

I’m on a mission to help reduce the environmental impact of the internet.

I’ve created a new approach that I’m calling ‘Decarbonising User Journeys‘.

It has been designed to give you a pragmatic method to help you deliver faster, simpler and more effective user journeys that have less impact on the environment.

I’m over the moon to launch it here and would love to hear your feedback, questions and experiences of using it. 🚀

This presentation tells the story of why we need to urgently decarbonise the internet, the thinking behind the approach and explains how you can start to decarbonise your own user journeys.

It is deliberately simple, jargon free and designed to give digital professions the tools they need to take positive steps to accelerate change.

Please join me in my mission, help spread the word and start decarbonising your user journeys! 💪