How to Reduce the Environmental Impact of Your Digital Products

6 steps that drive a more responsible design – and boost your business’ KPIs along the way

Why ‘heavier’ digital experiences matter

Our online habits have a surprising impact on the environment. 

Each time you take an action online, from visiting a web page to sending an email or interacting with content on social media, data is pulled from a physical server somewhere around the world. 

Making this data available 24/7 comes at a cost – both to the planet and a business’ bottom line. Large amounts of energy are needed to fulfil these data requests, which result in increased carbon emissions.

For example, Cristiano Ronaldo currently has around 470 million followers on Instagram. The power needed for a single post to reach each of his followers is equivalent to adding 20 UK households to the grid for an entire year.

It’s a bit like lifting a weight: The heavier it is, the more effort required to lift, and the more energy you burn during the process. This same principle applies online, because the more content your page or product contains (or the “heavier” it is in kB), the more energy and effort required to pull that “weight” from the server.

How to cut the weight

At Method, we consider ourselves accountable for the environmental impact of the digital products and services we design, build, and release into the world. As our clients also become increasingly invested in meeting their environmental targets, we need to be able to equip them with the necessary toolkits to do so.

But as we design for low-impact, a number of questions arise:

• Is it possible to create digital products that have minimal environmental impact and do not compromise functionality and aesthetics? 

• Can current brand guidelines and design systems remain intact so digital products fall in line with a set energy budget?
• Is it as simple as applying emerging low-impact principles and techniques?
• What do we prioritise (where are the quick wins?), and what are the associated costs? 

The core elements of Responsible Design

Using a selection of pages from our current website, we ran a series of experiments and explored what it takes to execute low-impact designs. 

Throughout this process, we uncovered a host of learnings that have been distilled into six actionable tips. Use these to design your next product more responsibly in a way that benefits people, the planet, and your wallet.

1. Streamline the user experience 
2. Trim the excess
3. Set your boundaries
4. Optimise, optimise, optimise!
5. Give power to the user
6. Go green with hosting

1.  Streamline the user experience

Assess your analytics and examine why people are coming to use your product or service. Identify your most viewed content, then think about how you could restructure your pages to bring this content to the centre stage.

Not only will this create a more enjoyable user experience, but it saves users from having to navigate through multiple pages to reach their desired goal. Remember: A streamlined journey and less time spent online equals less energy consumed (and less energy means less CO2e, the amount of carbon dioxide equivalent emitted per page visit).

2.  Trim the excess

We all think about being more conscious when disposing of our physical waste, but what about digital waste? If that blog post from 2009 isn’t being read – cut it!

It’s easy to think of the internet as having unlimited space and resources, but this is not actually the case. In removing content from your site, you’ll both increase loading speed and minimise your carbon footprint. Plus, you might also save money by needing less storage space on your servers!

3.  Set your boundaries

Responsible Design requires a mindset shift. Make it intentional from the get-go and set environmental parameters as you define your product requirements. We based our framework on Google’s updated pillars of good user experience, assessing our site against:

• Page weight 
• Loading speed
• CO2e

To make a product more sustainable, you must effectively streamline the process of loading its content. The more efficiently it loads, and the less energy required to pull this data from the server, the higher impact this will have on reducing carbon emissions.

Next time you’re scoping out the work to be done, assess where you currently are against this framework, and then set clear goals on how much you want to reduce by. Designing with these pillars in mind is not only less carbon-intensive, but upon Google’s most recent ranking algorithm, it also means you’ll rank higher in search engine results pages (SERPs) – good for the planet and your marketing strategy!

Design Challenge: Think of your site like a bookcase. If you only had X amount of space on your shelves, what would you display, and how might you arrange your content within the parameters of limited space?

4.  Optimise, optimise, optimise!

Although removing all of your images and videos would have a dramatic impact on page weight, it’s important to strike a balance. Visual storytelling is often more efficient than text and understandably cannot be completely sacrificed. 

However, when you do opt to use media, there are a few things you can do to make them lighter on your page and more sustainable:

• Optimise your content: What’s the minimum file size you can use to achieve the same goal, without compromising aesthetic?
• Remove that autoplay! We found that removing autoplay on a video can almost halve the amount of energy required to load the content.
• Avoid full-bleed imagery: The larger an image’s presence on a page, the more effort required to load. Is it really necessary to have it spanning the full width of your design?

Design challenge: How could you tell the same story using a lower-impact media format? Could you tell the same story with an illustration or SVG? These take up far less data to both load and be hosted on a page.

(all images used throughout this article have been compressed to reduce their environmental impact)

5.  Give power to the user

Carbon-aware design visually calls out the amount of carbon emitted from each page or element. This can be applied to specific page elements such as imagery, putting a placeholder with a button or toggle to allow the user to select only what they want to load and telling them the amount of CO2e that would be emitted from taking the action. It helps the user to understand their impact and can create a more conscious digital browsing experience. 

6.  Go green with hosting

As data centres represent a large proportion of the energy consumed on the internet, one of the easiest and most impactful things that you can do is to transition to a renewably sourced hosting provider. You can use tools like The Green Web Foundation’s checker to assess who your current provider is. And, you can review their green hosting directory for alternative, more sustainable options.

Summary

Companies and the economy are under an increasing amount of pressure to transition towards net-zero. It’s crucial now more than ever that we make conscious decisions around how we design today in order to create a more sustainable future for generations to come.

Next time you’re kicking off a project, working on a new feature, or improving your digital product, consider the planet as a stakeholder and think about where some of these tips could fit into your existing design activities. 

There’s no one-size-fits-all-when it comes to responsible design. But hopefully these tips will help you start designing more responsibly and reducing your digital footprint.

Experimenting in this space allowed us to push the boundaries of existing research and be confident that we can design responsible products that do not sacrifice usability or aesthetics. Our low-impact experiment is currently under development and will be released in the coming months – so keep your eyes peeled!

If you’re interested in finding out more, or just fancy a chat about responsible design, reach out to us at Method.

Disclaimer: Our research is based on the most recent information to-date. We are adopting an empirical approach and learning at every step of the way. Sustainability is about progress over perfection, and any effort to reduce the environmental impact of what we create is a step in the right direction! While this post focused on steps designers can take, we’ll be addressing engineering and development in the future.

References:

Tools used:
Ecograder.com
Websitecarbon.com
Pingdom – website speed test
Image compression tool

Facts:
CO2e emitted from loading Instagram picture [06:01]