Best Practices to Make Product Design More Sustainable

In recent years, sustainability has become a popular subject of discussion among designers, in no small part due to witnessing the unprecedented outcomes of climate change. As Designers we’re often tasked with solving problems much greater than us, and while climate change is a global problem requiring a massive global effort, being mindful of the impact digital products can have on the environment is an important first step.

“If the internet was a country, it would be the 7th largest polluter in the world.”
- Sustainable Web Manifesto^¹

80% of the ecological impacts of a product are determined during the design phase, so designers have a lot of power regarding the sustainability of the products that companies offer.^²

Sustainability needs to be considered while products are both designed and developed. That’s why we put together this handy list of best practices to get you started.

Best Practices for Design Teams

1. Set a page weight budget

If designing a website, it’s important to set a page weight budget so that your site will run efficiently and load quickly. A page weight budget determines how much a webpage can “weigh” in kilobytes or megabytes.^³ Unnecessarily large images, videos, animations, and files can cause a website to consume more energy than is needed each time it is accessed by someone’s computer. It’s important to consider the value of every element of your product and eliminate any elements that are simply “deadweight.”

Tools such as Pingdom Website Speed Test and Website Carbon Calculator can help you identify how large of a carbon footprint your website has. Performance Budget Calculator can help you create a realistic page weight budget. It can help you determine the appropriate size of your images, videos, and other types of files.

Wavelo.com on Website Carbon Calculator^⁴

2. Choose colours wisely

Even the colours chosen for designs can influence energy efficiency! This is because OLED screens allow for each pixel to be individually illuminated. Therefore, “dark colours use less electricity because less of the screen is illuminated.”^⁵ For example, “Google found that the Google Maps mobile app can use up to 63% less screen energy in night mode compared to standard mode on their phones with OLED screens.”^⁵ Perhaps it’s time to start considering dark mode for more designs.

Colours and how much current they draw^⁵

3. Condense user journeys

Shorter, more efficient user journeys can “save energy by reducing the amount of time spent online and the number of pages loaded for users to accomplish their goals.”^⁶ Reducing friction points and condensing user journeys not only leads to better conversion and a better user experience, but it also allows users to complete their tasks more efficiently and consume less energy while doing so. Basically, condensing user journeys is a win-win for everyone!

4. Optimize images

The file size of an image can change a lot depending on the file type and quality of the image. Choosing the right file types for your images and resizing them can improve the efficiency of a website. Using SVGs (Scalable Vector Graphics) when possible is a good way to keep the size of your files low while having a graphic that can easily scale to any size without sacrificing quality. Another tip is to “lazy load” images so they load as users scroll down the page instead of all at once up front. This will improve page performance.

5. Choose sustainable design tools

Whenever possible, it’s also important to choose design tools that are conscious of sustainability. Researching sustainability reports from companies can help you determine which design tools are the most environmentally conscious. Many companies also have set sustainability goals that you can easily find online:

Canva: has been carbon neutral since 2020 and has a goal of planting 3.5 million trees by the end of 2022 (Learn more about Canva’s goals here).
Adobe: has a goal of becoming carbon free by 2035 (Learn more about Adobe’s goals here).
Figma: has a goal of becoming carbon neutral by 2040 (Learn more about Figma’s goals here).

Best Practices for Development Teams

1. Reuse elements of previous work

Reusing elements of code from previous products can contribute to sustainability. Developing a product completely from scratch can take more energy than using previously developed elements where possible. Design systems built for modularity can help developers reuse elements of code to save time and energy (no pun intended).

2. Develop products that are maintainable and standardized

Products should be developed in a way that makes them easy to change and adapted to evolving user needs.^⁸ Typically, it requires less energy and time to modify an existing product to meet new user needs than to create an entirely new product. Additionally, when building a website, developers should follow standards to improve the cross-compatibility of the site. Developing a product that is compatible with many different devices, browsers, and screen sizes can take less energy than developing new products for each circumstance. The World Wide Web Consortium (W3C) provides helpful web standards that aim to make websites available and accessible for all people.

3. Reduce user tracking

Collecting data from users as they navigate a website can be very useful for understanding who your users are and how they are using your website. However, having a lot of user tracking built into your website can slow it down, use more energy, and negatively impact customers’ experiences. For example, popular news site USA Today tested multiple versions of their website. They found that the version of their website without user tracking and ad scripts was much faster and smaller than the original site. The “site was one-tenth of its original size and page load time dropped from 45 seconds to three seconds.”^⁹ Talk about a big difference!

Tweet from Marcel Freinbichler about USA Today and GDPR^¹⁰

4. Use Green Hosting

Green hosting is when companies use renewable energy to power their hosting services. By using green hosting, you can reduce the carbon emissions of a website by about 9%. The Green Hosting Directory is a great resource for finding hosting companies that use renewable energy to power their services. Three well-rated companies that have green hosting are DreamHost, HostPapa, and GreenGeeks. For all of the standard energy that GreenGeeks uses, they buy three times that amount of sustainable energy from the Bonneville Environmental Foundation. In other words, they offset their carbon footprint by a factor of three! HostPapa offsets their carbon emissions by 100%, and DreamHost also partners with renewable energy suppliers and focuses on keeping their work offices and data-centres energy efficient.

TL;DR

There are several best practices that designers and developers can take to reduce the carbon footprint of digital products. Designers can set a page weight budget, choose colours wisely, condense user journeys, optimize images, and choose eco-friendly design tools. Developers can reuse elements from previous work, develop products that are maintainable, reduce user tracking, and use green hosting. These practices can substantially reduce unnecessary carbon emissions and help meet sustainability efforts when designing for scale.

Further Learnings

The best practices listed above are just a few examples on how we can make the internet more sustainable. Here are a few additional resources:

Online resources: What is sustainable web design?
Podcasts: How to Save a Planet, The Sustainability Story
Books: Sustainable Web Design by Tom Greenwood

About Tucows

“Tucows is a global internet services leader committed to protecting the open internet, narrowing the digital divide, and supporting fairness and equality.”¹¹ To learn more about Tucows and its sustainability practices, you can read the Tucows ESG Preliminary Report, which outlines initial thinking and commitments moving forward.”

Footnotes:

‍