In summer 2024, Chris O’Neill, Green Digital Design Intern, completed a digital sustainability audit of the UX Service website. He looked at carbon emissions and page weight but also examined usage of the site, with analytics data and user research. We acted on his findings to make the site greener and more user-centred.

The annual ISG summer internship programme presents the opportunity to employ student workers for several months to work on specific projects. The work they do provides valuable insights to help inform our ongoing and future activities. Over the past few years, interest in the environmental impact of digital estates has grown, recognising the benefits of designing websites sustainably with minimal carbon emissions and energy expenditure. It was therefore timely to run an internship with a digital sustainability focus.

Osh Doherty and Catalina Rincon joined Website and Communications as Green Web Estate Interns, focused on identifying indicators to gauge the environmental impact of the University’s web estate. Chris O’Neill joined our UX team as the Green Digital Design Intern, with a remit to help us explore ways to design user-centred websites sustainably, with minimal environmental impact.

Read more about the 2024 green web internships in these blog posts:

Digital sustainability blog posts on the Website and Communications blog

The value of examining digital sustainability with a case-study approach

Catalina, Osh and Chris identified a myriad of tools to measure carbon impact and energy emissions of websites. Data gathered by these means was insightful to benchmark the environmental cost of websites relative to other activities, however, as all three interns recognised, greater value of these data emerged when examined in specific contexts, considered along with other information sources for a more holistic appraisal. In other words, only when the carbon emissions and energy consumption costs of webpages were viewed together with website usage data and with a consideration of website goals, purposes, and end-user needs and requirements could those data be used to make mindful decisions about sustainable website design.

The UX Service website made a good case study

When I began to manage the UX Service in October 2022 I inherited the UX website, and apart from updating the team members page and pages about the services we offer, I had done very little work on it. When Chris was looking for a website to analyse through a digital sustainability lens I was keen to nominate the UX Service site. The site comprised 26 pages and I wanted to find out which were the least eco-friendly sections and to learn whether these were also the least-viewed, to help me identify any pages that could be removed from the site. I also wanted to identify other ways I could potentially reduce the environmental impact of the site without compromising on supporting the needs of the service and the tasks of people wanting to use it. Furthermore, I was curious to understand whether making design changes to reduce the digital emissions of the site would have an adverse affect on the user experience it provided.

To start, we established the audiences and goals of the UX Service website

Before considering digital sustainability data, it was important to have a clear view of what the UX Service website was for – in terms of the purposes it is intended to serve (sometimes referred to as ‘business needs’). As service owner, I am responsible for what the UX Service does, and through his questions, Chris helped me clarify the priority audience of the site and what it aims to achieve.

Priority audience:

• University staff responsible for digital products, systems and services who want help in making these more centred to the needs of the people who use them.

Site goals:

• Provide information about what the UX Service does
• Let site visitors know who is in the UX team
• Direct site visitors to read case studies on the Website and Communications blog
• Enable site visitors to contact the UX Service to discuss projects they want UX help with
• Advise site visitors of training they can sign up to
• Direct site visitors to self-serve resources to use themselves.

Chris prototyped webpages to meet the site service needs

Reviewing the established priority audience of the site and its goals, Chris used the design tool Figma to reimagine what the UX Service site could look like, optimised to support these goals. He focused on designing a new homepage omitting generic images and instead placing key information upfront which included a short description of the service, a link to details of team members and interaction elements to direct site visitors to the blog, enable them to book a consultation appointment, sign up to training and access our Sharepoint of self-serve resources (UX and Content Design toolkit).

Individual webpages were analysed with digital sustainability auditing tools

Considering the existing UX Service site, Chris used two online tools (Ecograder and Digital Beacon) to assess the digital sustainability of all 26 UX Service webpages. Each tool worked in a similar way, underpinned by the Sustainable Web Design Model, providing a sustainability score for each webpage based on estimates of different kinds of energy required to make that page available to end-users, including:

• Power needed by datacentres to store and serve up the page
• Data costs of transferring the page across networks (for first and repeat visits)
• Electricity of end-user devices to display the page
• Energy and resources used to manufacture the end-user devices.

Taking all of these factors into account, the overall score awarded to each webpage run through Ecograder or Digital Beacon was largely dependent on two measures: the estimated amount of carbon dioxide emitted by the page per pageview (measured in grams) and the page weight (measured in MB of energy).

The values of these two measures depended on aspects specific to the webpage being analysed, including:

• Media included – particularly video, audio and images
• Scripts running (e.g. JavaScript)
• Stylesheets used with associated HTML and CSS
• Fonts and colours used

The output reports and overall scores from Digital Beacon and Ecograder both provided indications of the environmental cost of each webpage relative to an average webpage, as well as in relation to energy expenditure for other activities (such as driving an electric car or watching TV). While this was interesting information to know about, the carbon emissions and page weight measures for each page were more useful to analyse the digital footprint of the site on a page-by-page basis, to identify which pages had the greatest environmental impact.

Read more about measuring digital sustainability data with these sources:

The Sustainable Web Design website

Ecograder.com

Digital Beacon

Audit data showed a handful of heavy pages

I wanted to use the sustainability audit data to rank the 26 pages of the site in order of environmental cost, so for consistency, I adopted the calculations of carbon dioxide emissions and page weights from the Ecograder tool. Using these data, eight pages emerged as the most environmentally costly:

1. Design Process Phase 1- Identify User Needs (7g carbon dioxide emissions, 22.56MB page weight)
2. Design Process Phase 2 – Generate potential solutions (4.01g carbon dioxide emissions, 12.91MB page weight)
3. Homepage (1.06g carbon dioxide emissions, 3.42MB page weight)
4. Design Process Phases – Double Diamond model (0.6g carbon dioxide emissions, 1.92MB page weight)
5. Design Process Phases (0.53g carbon dioxide emissions, 1.69MB page weight)
6. Team members (0.41g carbon dioxide emissions, 1.34MB page weight)
7. Benefits of user experience research and design (0.41g carbon dioxide emissions, 1.31MB page weight)
8. Design Process Measuring success (0.4g carbon dioxide emissions, 1.27MB page weight)

The remaining 18 pages all measured around 0.38g of carbon dioxide emissions and 1.26MB page weight. Examining the content on the heaviest pages, I found a pattern – all of these pages either contained video, images or documents.

Google Analytics 4 data indicated which pages were being interacted with

With the eco-ranking identified I was interested to know how frequently people interacted with the pages of the UX Service site, and specifically, to see if the heaviest pages were well-used or not looked at. Using Google Analytics data from August 2023 to August 2024 I was able to see that the largest number of engaged sessions occurred on the homepage, and that the page about the UX Service team was the next-most used page. The webpages about the design process phases had attracted considerably fewer interactions, suggesting that they could be candidate pages to remove.

Research with staff showed how they expected to interact with the site

The Google Analytics data was useful as an indicator of interaction patterns, but it was important to consider the real-life end-user experience. To better understand perceptions and expectations of the UX Service website, Chris carried out research with four staff members, representative of the site’s target audience. He began by asking about their understanding of what the UX Service was for and how they would use it, and their experience of using the existing website. He went on to share his Figma-prototyped homepage, asking them to use it to perform representative tasks to further understand their perceptions and needs. There was a positive response to Chris’s desgin, and overall, the research revealed that the staff expected the following in order to use the site effectively:

• A more concise list of the services available than on the existing site
• Clearer distinction between different services
• Details of team members to contact
• An easier way to get in touch for a consultation
• A clear way to select training sessions and book onto them.

In the course of the research, none of the staff members described having previously visited the UX Service website to find information on the design process, which reinforced what the Google Analytics data indicated: that these pages were not used.

Taking the data together we decided to change the UX Service website

Bearing in mind the site’s target audience and goals, and with a view to improving the digital sustainability of the site without compromising the user experience it provided, I was able to complete a holistic analysis of the data collected and use it to make evidence-led design decisions about the site. Working with Katie Spearman, Web Content Design Assistant, to understand what was possible in EdWeb2, I decided to alter the site in three different ways:

We deleted pages of generic UX process information

The UX Service site contained a total of 10 ‘design process’ pages, five of which had emerged as particularly environmentally costly. Both Google Analytics data and end-user research indicated that these pages were not interacted with, so it made sense to delete them. Related to these pages were seven pages containing information about general UX techniques, which were also not interacted with or used. Removing these 17 pages from the site reduced the overall carbon emissions of the site by an estimated 7g and the overall site weight by an estimated 48MB.

Guided by Chris’s prototype Katie simplified our homepage

User research revealed that the site’s target audience valued a homepage with a concise overview of what the UX Service was and its purpose, and with clear ‘call to action’ cards. Katie built Chris’s Figma design into the UX Service website in EdWeb2. The new homepage included cards that presented the opportunity for end-users to review the UX services offered, visit the blog to read case studies, link to a list of team members, contact us for a UX consultation, investigate training options and access the self-serve resources. All of these catered for service needs but also enabled end-user needs and therefore supported an improved user experience.

The new homepage weighs 80% less and emits 76% less carbon

In terms of reducing the environmental footprint, returning to Ecograder to measure the impact of the redesigned page, the calculations were as follows:

Old homepage:

• Page weight = 3.24MB
• Carbon emissions per pageview = 1.06g

New homepage:

• Page weight = 0.65MB
• Carbon emissions per pageview = 0.25g

Reduction in page weight = 2.59MB

Reduction in carbon emissions = 0.81g

Bringing down the pageweight by 2.59MB and the carbon emissions per pageview by 0.81g represented a 80% and 76% respective reduction in the values of these two key digital sustainability measures. Given the homepage was the most-viewed page of the site, it followed that these design changes would significantly reduce the overall environmental impact of the site.

We started to review and edit the services page

From the research with staff, Chris observed that staff found the ‘What we do’ page containing details of the services long, wordy and not easily scannable. Reviewing the page content I realised that I written the page in the same style as the Service Level Description (SLD) (which is an official document required for the ISG Service Catalogue). Since the SLD is due to be published on the Service Catalogue, it did not need to be duplicated on the UX Service website. Working with my team I scheduled a critique of the content, with a view to editing it down to make it more easily readable.

The new homepage gave the site a fresher feel

Comparing the new homepage to the old one illustrated the improvements made.

The old UX site homepage design (left) compared to the new design (right)

View the UX Service website

Conclusion: Sustainability data nudged me to review my site but I needed user data to make decisions

Reflecting on the process followed and the work done by Chris, I concluded that completing a digital sustainability audit of the UX Service website was a valuable and useful exercise. Despite being very aware of the need to regularly review web content to keep it up to date and relevant to audience’s needs, I was guilty of having let this slip for the UX Service website.

Being confronted with the carbon and energy cost of individual webpages encouraged me to think about how these individual pages were being used both from the service and end-user perspective, and to use that knowledge to make mindful decisions about whether to keep the pages or not. In the instance of the UX Service site, it was a happy coincidence that some of the heaviest pages were the least-used, and it was satisfying to reduce the size of the site by more than half by removing these pages, however, I was aware that this would not necessarily be the case for other websites. It was great to update the homepage to align with expectations of the staff using it, and I was very pleasantly surprised by the impact that redesigning the homepage had had on the environmental cost of this page.

My overall conclusion was that collecting and reviewing digital sustainability data was useful to prompt evidence-led decisions about website content, however, it was not appropriate to make decisions about site content based on the absolute values of carbon emissions and page weights alone. Instead, it was useful to consider the sustainability data as one source indicator making up a site-wide ‘health check’ (along with analytics data and user research data) that could (and should) be gathered, reviewed and acted upon at intervals to keep web content fresh and user centred.