Can we actually design for sustainability?

4 strategies to improve a product’s eco-friendliness without losing usability.

I have been bummed by the decision to withdraw the United States from the Paris Agreement. Climate change is real (and scary), and this treaty committed countries to take action to reduce greenhouse gas emissions. And as an individual, it feels I can’t do anything to stop the harm being done to the planet.

When you think of greenhouse gas emissions, you probably think of harsh manufacturing plants and how reliant we are on plastics (especially in the United States).

But do you also think of “internet emissions?”

I’ve always thought the digitization era was good for the environment with less physical waste and better resource management. But a lot goes into powering the internet and our digital products. Internet emissions are all-encompassing data centers, servers, devices, and power sources needed to load web-pages, store documents, or even check emails.

I didn’t know how much the UX design industry contributes to internet emissions until I read Tom Greenwood’s Sustainable Web Design.

UX designers want to create usable, efficient, and visually-appealing experiences so users continue to use our product more and more. But in reality, we’re just exacerbating the contributions to internet emissions. Our goals are not only to help users complete a task, but to get them to click more, consume more content, and spend more time in the product.

This more, more, and more mindset is causing the average page weight to increase annually. According to the Web Almanac, the median page weight on desktop was 1080 KB in 2014, and increased to 2170 KB in 2022–over 100% increase in 8 years. A heavier page weight requires more data transfer, also requiring more energy to load.

Web Almanac’s median page weight over time between 2014 to 2022

We have a dilemma–do we continue to increase our engagement metrics for our products and intensify internet emissions? Or do we decrease engagement to lessen emissions, but lose our jobs?

There are strategies all UX designers can use (other than just stopping UX design altogether) to improve a product’s eco-friendliness without losing usability–maintaining user engagement and keeping stakeholders happy. Let’s review these 4 strategies below, then look at real-world examples of these strategies being practiced.

Table of contents

4 strategies for sustainable design

1. Reduce media’s energy consumption
2. Design for low data consumption
3. Optimize user journeys
4. Encourage sustainable user behavior

Real-world examples

1. Netflix
2. Apple
3. Website examples

4 strategies for sustainable design

1. Reduce media’s energy consumption

I. Apply efficient file formats

• Use WebP format for images
• Use MP4 (H.264) format for videos
• Use system fonts (like Arial) or WOFF2 format for web fonts

II. Load content only when needed

• Use lazy loading to load content when they become visible in the user’s viewport
• Don’t auto-play videos or animations unless triggered by the user (I.E., user selects “Play” or “Submit” buttons)

Use tools like Pixelied to adapt images into web-optimized file formats

2. Design for low data consumption

I. Prioritize content

• Limit videos and animations (they have the largest file sizes)
• Provide different resolutions for media to allow the user’s browser to select the most suitable size for the user’s device and connection
• Use dark mode by default (have the user swap to light mode, if offered)

II. Reduce custom UI

• Build and use design systems for reusable UI components and patterns
• Avoid UX fads that are short-lived and will require a redesign later on

Use design systems, such as Atlassian, to recycle UI components throughout a digital product

3. Optimize user journeys

I. Reduce user steps

• Use clear navigation and heading structure so users can easily find needed information–reducing unnecessary page loads
• Minimize user clicks and page loads by consolidating multi-step processes into fewer input fields or pages

II. Create mindful experiences

• Add intentional delays to the user’s journey (I.E., ask them if they want to continue after spending a certain amount of time in the product)
• Use caching to temporarily store copies of the web-page content to reduce HTTP requests–optimizing page load speeds

Patagonia’s navigation menu prioritizes intuitiveness and hierarchy–allowing easy find-ability

4. Encourage sustainable user behavior

I. Offer sustainable options

• Suggest a “Low-data mode” or “Eco mode” for users to toggle on or label media that requires more energy for transparency
• Display estimated energy savings to reinforce the user’s decision to choose low-data modes or simplified website experiences

II. Prompt users to take action

• Make it easy for users to identify and delete old files or messages taking up server or device storage
• Educate users with information to raise awareness about the product’s decision to prioritize web sustainability

Avril’s website includes a toggle for “Low energy mode” with an information tooltip adjacent

Real-world examples

1. Netflix

• Netflix includes their infamous “Are you still watching?” feature, which adds an intentional pause in the user continuing to consume their content (though it feels judgemental when you’re binge watching).
• Netflix only offers a dark mode color palette–enhancing its visual appeal and sustainability efforts.
• Netflix recognizes its carbon footprint due to being a video-streaming service, and has a target to reduce their emissions by “roughly half by 2030.”
• Netflix began caching content closer to their end-users and improving server hardware to reduce data transfer by 30% between 2018 and 2021–decreasing overall energy consumption.

Netflix’s “Are you still watching?” feature adds a pause to the user’s journey

2. Apple

• Apple includes a “Low data mode” in the settings for iOS 13 that reduces background activity and video streaming–decreasing data transfers. This benefits users who are in low-connectivity areas as well as users who need to save on cellular data usage.
• Apple has environmental initiatives with “Apple 30,” which will bring their net emissions to zero by 2030. Though Apple is evolving both their hardware and software, they implemented the Supplier Clean Energy Program to reduce overall emissions.

Apple provides a “Low data mode” option in the settings for “Cellular data options”

3. Website examples

1. C40 Cities: Their website redesign reduced their CO2 output from 6.7g to 0.34g per homepage view.
2. Impact Management Platform: Their website only uses 0.19g of CO2 per homepage view while maintaining quality and performance.
3. Good Energy: Their website is powered by 100% renewable energy and each homepage view uses 0.58g of CO2.

C40 City’s website; examples via Ryte Magazine

Climate change is happening, and the internet’s emissions heavily contribute to it. A lot goes into powering the internet, from data centers to our individual devices, but there is a large dependency on UX design that determines how sustainable (or not) a certain digital product is.

Are the file formats efficient? Do videos and unnecessary content load automatically? Are users prompted to act more sustainably while using the product?

All these questions can influence a product’s eco-friendliness without detracting its usability or visual appeal, but it’s up to UX designers to ensure it’s advocated for and implemented. By using strategies like designing for low data consumption and optimizing user journeys, products can reap the benefits of lowering their energy consumption and giving users faster and effective experiences.

Instead of the standard more, more, and more approach found in UX design, let’s implement an intentional mindset to design for sustainability while maintaining an ideal experience for our users.

If you haven’t read Tom Greenwood’s Sustainable Web Design, I highly recommend it!