Sustainability Toolkit: How to design and implement a digital product that will stand the test of time
While sustainability in business is a rising trend, we can also implement green practices online. That’s why at Tangity, we are exploring the theory and practice of designing sustainable digital solutions with the support of a toolkit and a list of very concrete actions.
What is sustainable design?
The term Sustainable Design refers to creating products and services by considering their environmental, social, and economic impacts from the initial phase until the end of the product-service lifecycle.
While we are pretty accustomed to considering this approach applied to product design, the view gets more blurred when it comes to services and digital products.
So we started by questioning ourselves: “Can the principles of efficiency, durability, and reduction be applied also to the design of digital assets?” And if the answer is yes: “How can we create sustainable digital products?”
First of all, we have to get rid of some assumptions and misconceptions. For instance, we need to stop thinking that digital products are intrinsically sustainable because they do not have a physical body that requires fossils during production.
Just like physical products, digital ones require significant energy throughout their entire lifecycle to be shaped and operated. This energy is still extracted most of the time from coal or other non-renewable sources of energy. Moreover, the Internet and all digital services operated online carry a substantial carbon footprint, whose emissions also contribute to global warming and climate change overall.
It’s no secret that the Internet is an enormous polluter, with data centers that are at times larger than multiple football fields. If it were a country, the Internet would be the 6th biggest polluter worldwide, with annual emissions similar to those of Germany.
New green initiatives are on the rise.
The initiatives that commit to transforming the web into a sustainable sector, or” sustainable country,” are flourishing, with different focus areas and perspectives. Nonetheless, global internet traffic continues to grow steadily.
The Green Web Foundation focuses on energy sources that power the Internet. It addresses and accelerates the transition to a fossil-free Internet by 2030 and stewards an open dataset to check if websites run on renewable energy hosting.
On the other hand, Google focuses on optimizing its supply processes within its data centers — the facilities responsible for powering products like Search, Gmail, and YouTube for billions of people 24/7 — by adopting circular economy practices in partnership with the Ellen MacArthur Foundation.
Aside from those practices, sustainable web design is still a developing yet very fertile field, fully committed to making a difference when it comes to designing services that put people and the planet first. Digital products and services delivered with this approach respect the principles of the Sustainable Web Manifesto: clean, efficient, open, honest, regenerative, and resilient.
The Sustainability Toolkit
Our Tangity Sustainability Toolkit provides sustainable design guidelines that are clear and actionable and helps develop more efficient products and services that are not only “good for the planet” but also “good business.”
So, yes, we’ve considered our main objective, but as an attentive reader, you may have noticed that we haven’t mentioned our audience yet. We’ve designed the toolkit for designers with a broad multidisciplinary target in mind that should join forces to build a more sustainable future.
As stated before, design is about questioning and thinking critically to get to the root of a problem. That’s why we’ve asked ourselves: “How might we start tangibly considering the environmental implications of our daily design practice?”
Fueled by personal curiosity, desk research paved the way for deeper considerations and a tight collaboration between designers and engineers.
The first outcome of this collaboration led to the awareness that properly considering sustainability generates a series of win-win scenarios that reach far beyond a mere reduced environmental footprint. It contributes to better product performance, accessibility, and user experience overall.
The second insight confirmed how crucial it is to take various design stakeholders along the journey: from UX Designers and accessibility experts to Developers, from Strategists to Visual and Content Designers; each role is essential throughout the process to build meaningful, sustainable solutions.
This multidisciplinary approach has led us to divide the toolkit’s guidelines into four areas: strategy, design, front-end and back-end architecture, as well as maintenance after use, primarily focusing on carbon emission reduction.
Let’s have a look at some concepts for each of the four areas.
POV: Strategy
First things first. From a strategic point of view, it’s vital to check who your users are and test whether the service you deliver meets their expectations. While this may seem quite an obvious design recommendation, it’s rarely related to sustainability. But think of a website’s bounce rate, often increased by the users’ unmet informational or service expectations. We see this as an unnecessary data transfer and inefficient use of electricity, hence a reducible CO2 footprint, according to the equation Data=electricity=CO2.
POV: UX Design
This leads UX Designers to address content structure when developing the product’s user experience in such a way that it attracts the “right users,” reducing wasted time and emissions and creating a better experience for its visitors.
From this point of view, it is also essential to detect the criticalities of accessibility by understanding the difficulty of content and navigation, and by following the accessibility guidelines, we ensure to properly organize and structure the content in a way that is also sustainable.
POV: UI Design
But creating a low-carbon website requires a careful evaluation on many levels, including an assessment of a user interface’s every component and detail, always keeping a minimalistic less-is-more approach in mind. Colors, images, fonts, and videos can influence the overall weight of a website or application, thus increasing its energetic footprint.
For instance, when considering the color palette, we aim to strike a balance between accessibility and energy efficiency: darker colors require less energy to illuminate, with black being the lowest energy color. Using darker colors is a viable technique for reducing energy consumption on people’s devices.
By extension, grayscale or monochrome images will tend to save energy over full-color photographs and generally produce smaller files.
POV: Development
On the back-end/front-end side of things, selecting a host that runs on renewable energy while being close to your geographic users is fundamental. Server proximity helps reduce latency and delivers a better user experience.
Regarding code, we are used to letting old unnecessary lines clutter our code. Here, we recommend generating a version of code that’s purely machine-readable, thus improving web performance and — yet again — saving energy.
Lastly, regular maintenance also plays a vital role in developing sustainable digital solutions. Iteratively check your analytics to further improve your customers’ experience by guaranteeing content findability and using A/B testing to validate and implement best-in-class solutions for your targets.
Validation and next steps
To move from theory to practice, we’ve applied and tested the sustainability toolkit on a project very near and dear to our heart, our own Tangity website, which counts thousands of visitors each month from all over the globe.
As a very first step, the team identified the six most visited pages for the test and defined the validation goal as “reduce pages’ weight by 20%”.
While Tangity’s website has already been compliant from a design and accessibility point of view, being recently redesigned, we’ve inspected a series of metrics on the six pages to improve both its performance and sustainability portrait.
Overall the website showed quite a good performance with low CO2 emissions per page, but at a closer look, both indicators, page weight and CO2/page view, revealed room for further carbon footprint reduction.
Interventions on fonts (e.g., font subsetting*), disabling autoplay videos and enabling the lazy loading** of Spotify cards and Google Tag Manager led to a considerable reduction in CO2 emissions per page, far beyond the established target of 20%. In addition, we also recorded substantial weight page savings on both slow and fast network connections.
After the validation, our Sustainability Team translated the guidelines into an actions checklist that every professional contributing to the design process can apply to their projects to design more sustainably.
We look forward to hearing from you and to sharing the enthusiasm that shaped this exploration with more like-minded people.
Feel free to share this article with your network and your thoughts in the comments!
🗞 Follow us on Instagram and Linkedin to stay up-to-date on all things Tangity.
* Subsetting is the practice of creating a “subset” of a font that contains a custom (and usually limited) collection of glyphs, intending to reduce font-weight.
** Lazy loading is a design pattern commonly used in web design to defer the visualisation of an object until the point at which it is needed.
Team
This toolkit has been created by:
Ana Maria Diaz Ramirez
Service and UX designer, she joined Tangity in 2021, bringing her experience, ability, and interest in incorporating systemic approach, sustainability, creativity, research, humanities, and behavioral change into design solutions.
Marcello Palmitessa
Design Engineer, he joined Tangity in 2021, bringing his experience as a full-stack developer, architect, and tech leader at the service of the studio, bridging the gap between designers and developers.
