Mockup of the redesigned EWS homepage

Cutting website emissions by 92%

A showcase
for green accessible web design

Summary

In a personal side-project and a showcase for sustainable and accessible web design, I redesigned the homepage for EWS, a German green energy provider. I adapted the information architecture and content to better support the primary user’s journey and used accessible and sustainable design strategies to reduce the CO2 footprint of the page by 92% and make the page accessible.

I used Figma for this project.
I used Visual Studio Code for this project.
I used GitHub for this project.

#UXDesign #WebDevelopment

Dec 2023 & Feb 2024
(part time)

The Before & After

A mockup of the original homepage. It shows a full-width image of an illuminated city by night with the text "Welcome to EWS". A mockup of the redesign homepage showing a text describing the purpose and benefits of the company illustrated by a few smaller images. The bottom of the page hints at a price calculator.

A green energy provider should have a green homepage, right?

Motivation

My main motivation for this project was to showcase that a more sustainable and accessible website can be achieved by relatively simple means. So the first task was to come up with an existing page to redesign.

Based on my contribution to the EcoWeb project1, I for the home page of green energy provider EWS, which had the largest carbon footprint of all truly green German electricity companies and also showed some severe accessibility issues.

Ranking description

The ranking compares homepage CO2 emissions of 5 Germany green energy providers and the global webpage average. Results in descending order:

  • EWS 1.46 grams per page view
  • naturstrom 1.29 grams
  • polarstern 1.03 grams
  • web average 0.79 grams
  • Green Planet Energy 0.48 grams
  • LichtBlick 0.46 grams

Redesign Goals

With my redesign, I wanted to showcase light-weight and accessible design practices while preserving the company’s brand identity and using the UI framework, so that the new design had a chance of actually being implemented.

Metrics and Targets

The redesign should achieve the following targets in the same metrics I had tested the original page for:

Rating Class A

Carbon rating

Performance Rating 100

Performance

Accessibility Rating 100

Accessibility

Simplicity is key:
Identifying improvement opportunities

User and Business Goals

Looking at the original site, it became clear that the main business goal of the homepage was to convince potential customers to use EWS as their energy provider, with a focus on B2C customers.

Derived from that are user goals of quickly finding information about EWS energy contracts and concluding a contract without friction.

Secondary page goals include:

  • inform current and potential new cooperative members of current projects and events
  • provide online services to existing customers
  • provide entry points to different areas of the website for all other target groups

Improvement opportunities

Based on these assumed goals, I identified the following improvement opportunities for a user-friendly, accessible, and light-weight design:

Usability
Accessibility
Sustainability

Simplifying the user journey for new B2C customers and focusing the page content on this target group

Accessibility
Sustainability

Using imagery consciously

  • Removing the image carousel in the hero section
  • Replacing images with other visuals
  • Optimizing file format, size, compression for remaining images
Accessibility
Sustainability

Replacing custom fonts with system fonts and removing icon fonts

Usability
Sustainability

Streamlining component usage (e.g. buttons)

Usability
Accessibility
Sustainability

Creating a clean and well-structured page

  • Using semantic HTML and a clear content hierarchy (e.g. headings)
  • Implementing correct tab order
  • Using discernable link names
Accessibility

Using sufficient contrast for all text and UI elements

The Impact of the Redesign

Climate Impact

Before

Carbon Rating
Before, the page had class E on the carbon rating scale of A+ to E.

Emissions per View

1.46 g

After

Carbon Rating

The redesign achieves class A on the carbon rating scale of A+ to E.

Emissions per View

0.11 g

Source: Ecograder report for the original page from Oct 13th, 2023
vs. Ecograder report for the redesigned page from Mar 6th, 20242

Page Weight

Before

4.71 MB

After

359 kB

Reduction

-93%

Source: the same Ecograder reports as above

Performance

Before

Performance
Before, the performance rating was 75 out of 100.
Accessibility
Before, the accessibility rating was 84 out of 100.
Best PRactices
Before, the best practices rating was 78 out of 100.
SEO
Before, the SEO rating was 92 out of 100.

After

Performance
The redesign achieved a performance rating of 100 out of 100.
Accessibility
The redesign achieved an accessibility rating of 100 out of 100.
Best PRactices
The redesign achieved a best practices rating of 100 out of 100.
SEO
The redesign achieved a SEO rating of 100 out of 100.

Source: Google Lighthouse (Mar 6th, 2024)

Footnotes

  1. As a member of the ClimateAction.tech community, I joined the #EcoWeb campaign where we analyzed over 500 homepages of climate-focused companies for their carbon footprint. I looked specifically at all of the German green energy providers to measure their carbon footprint. The homepage of EWS Schönau had the biggest carbon footprint in this category.
    More about the EcoWeb project ↩︎
  2. Since I deployed the page on Github Pages, which is not green-hosted, I adjusted the emissions metric by the amount Ecograder communicates as the difference for green versus gray hosting: -14% from 0.13 g to 0.11 g. ↩︎

Can’t wait to see the whole redesign?

While I’m adding content to this case study, feel free to get in touch to see and hear more about this project. I’m happy to share my process, designs, and insights with you.

Get in touch via the contact form, find me on LinkedIn or email me directly.

Or just find a spot in my calendar:

Book a free call

You can find information on how your data is processed in my privacy policy.

Looking forward to hearing from you!

I use your data to answer your request. Further information can be found in my privacy policy(opens in a new tab).