Curb your Co2 emissions with streamlined UX

Digital is everywhere. Processes that were once run using physical materials are increasingly delivered digitally – take the banking sector for example; once in person, paper and email based, we now expect our banks to communicate with us digitally.

An assumption could be that digital services should have a positive environmental impact due to less material usage, but as digital requires electricity, it comes with its own consequences.

Given the scale of use, small changes to how we design experiences can make a big difference to energy consumption. With the average digital designer producing the equivalent of a one-way flight in emissions every year, it’s more important than ever to look at ways to make our daily digital practices sustainable. Climate change, if not already, will likely be on all of our agendas in this lifetime, so all of us – including designers – carry a responsibility to do what we can to help to reduce environmental load.  

Here are five best practices for designers to implement when it comes to incorporating sustainable digital practices into our working lives:  

Reduce page weight 

A big contributor to carbon footprint is the amount of data that needs to be processed to render a digital experience. In addition to benefitting user experience and SEO, reducing the weight of a page will also reduce carbon footprint.  

Some of this – such as using CDN, minimising code, compressing images – will be done in development. However, there are things we can do in our designs to reduce page weight. These include: 

• Using fewer images, instead using graphic design to add interest to the page. 
• Designing with system fonts, rather than loading bespoke font files. 
• Rendering graphics as SVG to reduce image size. 
• Reducing content requirements. 
• Using webp image format. 

Stylise your photography 

If you’re not using video, then visually rich images are likely to add the greatest weight to a page. Jpg image rendering works by calculating the pixel value relative to the surrounding pixels. Therefore, images that are particularly busy will be a much higher file size than those that are not. 

There are a few ways you can deal with this: 

• Recommend a simple photography style and create a visual style guide to enforce your recommendation. 
• Use an image style that adds depth of field around the focus of the image. Creating this blur will bring the pixel colours much closer together thus reducing file size. 
• Try using cut out imagery on simple coloured backgrounds.

Any of these techniques will reduce image size which reduces the carbon footprint of both storing and delivering the files. Of course, if you are using video, stream it from a single hosting platform such as YouTube or Vimeo, rather than hosting it locally. 

Streamline user journeys  

Additional pages mean additional loading, additional storage, additional version control, and the list goes on…

By designing streamlined user journeys that remove the number of pages users need to browse to complete their goals means you will be reducing the carbon footprint of your design. 

This might include single page checkouts with the use of overlays rather than additional pages, quick view options from search results or just simply stripping back unnecessary content.  

Organise your files 

We’re all guilty of retaining every version of our work. Any filename that ends with “FINAL_V2” is guilty of this. This is perfectly logical, as you may want to return to that work to pick up from previous decisions. 

But keeping all these files has an impact. Data centres now have a greater carbon footprint (2.5% of all human-induced carbon dioxide) than the aviation industry (2.1%). So, once you reach the end of a project, or these files start to become obsolete, take some time to go back and remove unnecessary files from storage. 

Go dark 

Apple introduced ‘dark mode’ to iOS in 2018 with the intention of decreasing battery usage on OLED devices. Studies found that, with brightness at 100%, dark mode could save up to 47% of power usage which is no doubt a significant figure. As power must be generated (and is often done so by using fossil fuels), if the amount of power required to view designs is reduced, the phone's battery will drain less quickly and therefore the user will be reaching for the charger less frequently.

Web design has historically had a ‘start with a white background’ and ‘add lots of white space’ mentality. Try reversing this, starting with a darker background to reduce carbon footprint. Make sure to brush up on accessibility guidelines for working with dark backgrounds. 

In conclusion

Combining all these techniques should go some way to reducing the carbon footprint of your work. If you’re a designer that likes to test (and who doesn’t?!), you can also test the efficiency of your experiences at Websitecarbon.com 

Solving climate change requires collective responsibility. If you can do your part to deliver more sustainable experiences, then you can feel that you’re playing your part in helping to address the crisis. 

As Dr Seuss’ Lorax once said: “Unless someone like you cares a whole awful lot. Nothing is going to get better, it’s not”.