Website sustainable UX improvements
A SUSTAINABLE UX PROJECT
Client: Future Scouting
Business Challenge: Apply sustainable UX and web design to a website to make it use less energy and reduce negative impacts on the environment without degrading the user experience
My Role: Sustainable UX Design
Discovery
Future Scouting is one of my personal design projects for which I research and experiment with life-centred design, sustainable UX, and futuring. I produce Medium articles, tools, and guide- books to share this knowledge. I create this site with WordPress.
Finding a starting point
Analytics
With many pages to consider, starting sustainable thinking in digital can be overwhelming. So, I started by assessing analytics to define the high-traffic pages at the time so I could start by focusing on these. After identifying several, I chose the home page as a starting point.
Benchmarking metrics
I used online carbon calculators to assess the carbon output and page load speed of my home page to set benchmark metrics to improve from.
CARBON OUTPUT
Per view
3.36 g
Per year
403 kg
PAGE LOAD SPEED
To full interaction
18.8 s
Assessing for sustainable UX opportunities
Using sustainable UX best practices as a guide, I assessed the UX and UI elements for opportunities to improve.
Energy eaters
Images
Not all images were optimised and sized efficiently
Fonts
I was using multiple non-system fonts, and not using them sparingly which use more energy to load and render the system fonts
Colour
The backgrounds were mostly white, which uses more energy to display than darker colours
Plugins
I was using multiple plugins for unnecessary dynamic effects
Sustainable UX iteration #1
Based on the initial assessment, I addressed the energy eaters using the following improvements on my home page, one of the highest traffic pages:
Image optimisation
Converted main PNG Logo (93KB/56KB) and reduced various image sizes
Reduced fonts
Reduced custom font use to only headers
Darkened colours
Darkened all light backgrounds
Reduced plugins
I was using multiple plugins for unnecessary dynamic effects
Carbon and energy reductions
The above sustainable design changes resulted in the following sustainability impacts:
CARBON OUTPUT
Per view
0.42 g
(⬇ from 3.36)
Per year
50.56 kg
PAGE LOAD SPEED
9.2 s
To full interaction
(⬇ from 18.8)
Sustainable UX iteration #2
I made the following improvements to my home page, one of the highest traffic pages:
Removed carousel
Implemented and tested an information carousel, then removed it due to lack of engagement and energy impact
Reduced repetitive content
Identified and merged repetitive links/content/pages
Reduced images
Replaced images displayed by external URLs with self-hosted optimised and cached images
I also made the following improvements to my entire site:
Green hosting
Green hosting providers use renewable energy and/or carbon offsets. I found not many Green Host providers used pure renewable energy, so I choose Green Geeks which suited my budget.
Caching images
Improved caching of images to reduce unnecessary reloads
Lazy Loading Images
Activating lazy loading of images to reduce unnecessary image loading
Automatic file optimisation
Using a plug in, my site now automatically optimises any new images I upload
Carbon and energy reductions
The above sustainable design changes resulted in the following sustainability impacts:
CARBON OUTPUT
Per view
0.21 g
(⬇ from 4.42)
Per year
24.25 kg
PAGE LOAD SPEED
To full interaction
8.6 s
(⬇ from 9.2)
Overall carbon and energy reductions
Continued improvements made the following overall reductions in carbon and energy use:
CARBON OUTPUT
Per View
93.75% decrease
0.21 g
⬇ from 3.36
Per year
52% decrease
24.25 kg
⬇ from 50.56
PAGE LOAD SPEED
To full interaction
90% decrease
1.8 s
⬇ from 18.6
