This article is a chapter taken from The Sustainable Ecommerce Handbook: The Rise of Ethical Shopping and How to Build a Green & Lean Online Brand. Download the full version here.
It requires a cross-functional team to design, develop, implement, and continuously improve an ecommerce website.
Skills ranging from product strategy, UX and UI design, and content production through to front- and back-end development, development operations (DevOps), search engine optimization, and quality assurance are all vital.
Some people might bring one or more of those capabilities to the team, and some might be covered by agencies or multiple freelancers. To be effective, a team needs a shared sense of direction, a vision, and a joint understanding of who their stakeholders are, what they need, and why they have those needs.
Making the planet part of that vision and treating it as another stakeholder has to be a fundamental part of every business decision if we’re serious about making a significant difference.
Raise awareness to establish sustainability best practices
Many unknowns remain about when the world will reopen its borders and whether remote work is here to stay, which makes it impossible to predict if this will change again.
Recentdocumentaries and research collaborations have slowly raised awareness, but sustainable web design and development are still very far away from being an accepted way of working in the same way that accessibility is.
Therefore, the team responsible for your ecommerce website needs leadership. They need to know why this is important. They need to understand how other people have approached this. They need to audit where they are now and they need time to build this into their tools and processes and to come up with ideas specific to your site.
Your team can’t just work on this part-time, as a side project during lunch or after hours. It has to be factored into estimates, daily tasks, and longer-term planning.
In my experience, challenging people to reduce data transfers and using that as a constraint (constraints can be positive!) in the design, development, and implementation of features tends to be really well received.
A lot of websites are very similar at their core, and so it’s inevitable that teams become a little aloof to yet another cycle of feature development. Giving them something different to consider, which challenges so much of the status quo that has built up around the industry, might just reignite flames that have started to die down.
Open the conversation up to the wider team and ensure that everyone works together on this issue because there’s never one answer. Additionally, a designer understanding why a developer struggles to build in a carbon-efficient way will be really beneficial for the long term.
To get them started, it helps to know what to say to different team members, and the most obvious areas are:
Some of the following information isn’t brand new, but it’s important to refocus on the fundamentals when trying to solve complex issues.
Challenge your content team to:
Make sure people find your site quickly
Understand what people are looking for, what search terms they’re using, and optimize your content accordingly.
Facilitate quick content consumption
Forget about content stickiness. Give people what they came for and let them leave. It’s vital to understand what needs/problems/tasks they’re arriving at and design the content around them.
Identify and remove ROTN content
This acronym stands for Redundant, Out of date, Trivial or No longer being used. It ensures your site visitors won’t get distracted, minimizes their cognitive load, and reduces your hosting costs as well as data storage and transfer, which in turn is good for the environment.
This needs to become part of the team’s ways of working. Doing it regularly is manageable; doing it once a year will soon make it a painful task the team dreads. Tools such as Sitebulb, SiteImprove, Monsido and Silktide can help here.
Regularly check the page weight
There is nothing more frustrating than implementing a lot of great techniques to reduce the emissions of a site and then watching someone load the site with stock imagery.
Make regular checks part of the editorial workflow. This will encourage editors to be creative. Can they optimise an image before it goes into the CMS? Can they blur the edges? Or can they commission an illustration instead?
Be transparent and produce content about your efforts
This is vital. Being transparent and regularly publishing short posts about the changes you’re making shows that you’re not claiming to be perfect and to have all the answers. You’re inspiring people and allowing others to stand on your shoulders. Treat these as blog posts written by the people who are making the changes, rather than branded, corporate statements.
When Allbirds announced their collaboration with Adidas, co-founder Tim Brown said, “When it comes to sustainability, we don’t see ourselves competing with one another, but competing for the future. If we don’t bring about change quickly, there won’t be a future to speak of.”
Again, this isn’t groundbreaking stuff, so just treat the following tips as conversation starters.
Challenge your design team to:
Reduce the amount of images
Question whether they’re really necessary (especially if there are a lot of images on a product listing page) and instead consider using animations, icons, and illustrations that are both functional and beautiful.
Reduce the amount of video and avoid autoplay
The dev team at Manifesto built a ‘fake’ video player (see below), which doesn’t load the YouTube embed until the user has explicitly indicated they want to watch it. This stops a surprising amount of calls and data transfer, which also means YouTube can’t track your customers around the internet.
Use system fonts and as fewer fonts/variations as possible
Ensure people can complete the tasks they came to do as quickly as possible before leaving. Delve into your analytics and find the people that look lost and are bouncing around. What can be done to help them?
Work hand-in-hand with the dev team
Understand how the design might be implemented and what tweaks could be made to allow it to be created as efficiently as possible.
Place a carbon footprint badge on your pages
A badge that automatically calculates and displays the carbon emissions of each page, added to the footer of your website, will show site visitors that you’re being transparent, which builds trust. It’ll also start a nice bit of healthy competition between you and your competitors!
Tweak the brand identity if at all possible
Can you push the brand so the site has a dark background? Or use less energy-intensive colors? These are marginal gains but they all add up.
When I talk to designers about this subject for the first time, I always make sure I say this isn’t about spoiling anyone’s design fun. Mainly it’s about challenging the status quo of how sites are designed (promotional block with an image – title – subtitle anyone?).
I haven’t met a designer yet who hasn’t found something inspirational from the following resources:
This conversation might be tricky because the tech team might have already started to implement some of the answers to the below questions.
They’re best practices for site speed and DevOps but might have been turned down because the budget was prioritized for more customer-facing development. Equally, you may well outsource your support and maintenance, so it might not be obvious who to speak to straight away.
Whatever your situation, a few conversations starters might be:
Is the data centre we use powered by renewable energy? There is a whole load of nuance to the point of how data centres are powered and utilized but this is a good start!
Can we reduce the data we transfer by using approaches like Jamstack?
Can we save space (and money) at the data centre by using event-driven architecture?
How far can we go with image and video optimization? Consider alternative file formats such as SVG, AVIF, and WebM.
If we’re serving customers all over the world, can we use CDNs to deliver data to them from closer to their device?
How can we use design systems and pattern libraries to quality control designs and deployments?
Half of the bot traffic is bad: scraping content, crashing websites, trying to find security loopholes, bulk buying products on ecommerce sites, simulating advert clicks, the list goes on…
As data centres charge by storage and bandwidth, the bots are simply increasing costs for no benefit to the organization!
Finally, challenge your engineers to be more like Danny van Kooten, a plugin developer, who recently rewrote a piece of code to connect two very well-used pieces of software. Danny shaved off a tiny amount of weight from his code but, because of how much it’s used by other websites, he has cut enough emissions per month to stop more than the equivalent of 23 flights from London to Sydney!
Explore where we can optimize code to make significant changes. Google Analytics alternatives are always a good place to start, as are any third-party plugins, CSS files, font files, and CMS themes.
Given the dev team knows the intricacies of the site best, the most fruitful conversation starter will be “how do you think we should do this?” They will be full of ideas.
Leading by example
After bringing the team together, listen to them, and do it properly. Don’t pay lip service to the idea. Make some difficult decisions. Don’t ask the team to come up with loads of great ways to reduce site emissions and then whack them at the bottom of the backlog because you want to release a new promotional block.
Using planet-based KPIs is a great way to show the team and other stakeholders that you’re serious. It helps embed the planet in your decision-making. For example, if you have a carbon budget to sit alongside your financial budget, it’ll ensure you can prioritize a suggestion from a developer who wants to refactor a five-year-old piece of code or help the designer who wants to get rid of an image carousel.
It might also help you break the dependence we all have on decreased bounce rates, higher page views, and increased time on site. Increased bounce rates might mean your UX and content on a particular page is actually perfect, while increased page views might mean someone is lost and confused. And increased time on site might mean someone has been distracted from what they came to do.
Looking at your site through a new, planet-shaped lens will also open up opportunities to address other site issues, like accessibility and data hoarding.
Given the mind-blowing amount of data that an internet user generates every day, it’s vital to think about data minimization. Before you harvest as much data as possible, first define why you want to know something and how that information will help the people using your site. Then define the bare minimum data you need.
Don’t treat digital differently
People should be able to expect companies to look after the planet and work on their behalf.
Don’t wait for wider public condemnation of the digital industry’s environmental impact. Don’t simply suggest decarbonising the electricity grid and wait for data centres to use renewable energy. Act now and start reducing the emissions from your sites.
Show people why this is important and lead the way for wider education and change. Stripe Climate is a great example of this.
A lot of the tips suggested in this article require a back to basics approach; question why you’re doing what you’re doing. That’s exactly what the planet needs. When questioning how you as an individual can have an impact on the climate and ecological emergencies, the first answer isn’t what tech you can invest in or what petition you can sign.
We have to educate ourselves to first understand the problem and the root causes, then question the fundamentals of how we live; challenging the status quo of throw-away consumption, animal exploitation, agriculture, travel, and land management. Then we have to discuss the issues with other people and collaboratively design impactful, contextual solutions, instead of blaming each other for not doing enough.
This is not a tick box exercise that can be written as a user story. It’s a mindset shift that becomes part of the success of every user story.