Hamina's more sustainable and user-friendly city services
We redesigned Hamina’s city online service to create a modern, intuitive, and user-friendly information hub that also serves as an attractive digital showcase for the city. The renewal was built on sustainable digital development principles, ensuring an energy-efficient website.
The redesign focused on sustainable digital development and energy efficiency
The City of Hamina wanted to redesign its website into a modern, clear, and user-friendly information hub that would also serve as an attractive showcase for the city. The redesign focused on sustainable digital development principles and energy efficiency.
The result is a clear, user-friendly, and energy-efficient service
We designed and implemented a new website in accordance with the City of Hamina’s brand. The site was made clear and easy to use, and it was optimized for energy efficiency and fast loading.
The new online service has garnered positive feedback
The new website has achieved its goals. The site has received praise for its clarity and user-friendliness. The site is also energy-efficient and fast, and it supports the City of Hamina’s sustainable development goals.
Giving a voice to the citizens
Hamina, a small town of nearly 20,000 in Southeast Finland, is known for its historic fortress and rare circular town plan.
The web service is Hamina’s most important communication channel, which aims not only to create a city image but also to inform residents about important current affairs and involve them in decision-making.
The starting point for the website renewal project was traditional.
“the website needed a refresh. It had been 5 years since the last update, and the pages had not kept up with the times,” says Aija Kurko, Marketing Planner for the City of Hamina.
The Accessibility Directive also came into force after the last update, and the site did not meet all its requirements.
Citizens had generally given feedback that they wanted clearer and easier-to-use pages. In total, the city had six websites in use. There were a lot of navigation elements and information was difficult to search for and find.
“Citizens also commented that these are tourism pages. The city’s website should primarily be aimed at citizens,” says Riikka Koskimies, Communications Coordinator for Hamina, explaining the starting points of the project.
Sustainability as one of the city of Hamina’s core Values
Hamina is a member of the Hinku network, a network of climate change mitigation pioneers founded in 2008. Hinku municipalities are committed to achieving an 80% reduction in emissions by 2030 compared to 2007 levels.
“We think about sustainability a lot in everything we do, from new construction to website design,” says Riikka.
So it was time to roll up our sleeves and get to work.
The project included the design, implementation, and maintenance and support services for Hamina’s website. Additionally, the user interface and visual design of the web service were created based on the City of Hamina’s branding.
The new web service should be designed as a clear and user-friendly platform, following sustainable digital development principles. It is intended to serve as an information hub for the residents of Hamina and as an attractive calling card for the city.
A modern, minimalist design prioritizing user-friendliness
The expertise of Hion’s Green, Sustainable Web working group guided the ecological design of Hamina’s website from the very beginning. In project meetings, the basic structure and blocks of the site were defined and then meticulously refined into clear entities. The designers developed a consistent, easily replicable visual identity that could be applied to different sections.
The website’s design aimed for a minimalist and modern style, avoiding heavy images and auto-playing videos, which were abundant on the previous site. The front page was modernized by simply relying on a combination of text and brand color, and the entire website structure was streamlined to improve the findability of information for citizens.
The main focus of the design was on clarity, accessibility, and lightness, so that the site would serve all users as well as possible. The website’s code was also optimized to improve efficiency.
Technical implementation and green coding ractices
Architecture
The technology stack for Hamina’s web service is based on the WordPress-based DustPress framework, utilizing Gutenberg custom blocks and ACF fields. The technology choices were defined by Hamina’s request for proposal, but we were able to influence the service’s energy efficiency during development.
For example, the integration is run only once a night, rather than dynamically with every page load. This significantly reduces the number of HTTP requests and saves energy.
Server resources powered by renewable energy in the city
The City of Hamina has the advantage of proximity to Google’s server halls, which are located in Hamina. When the project was being offered, it was clear that it would be beneficial for Hamina to use Google Cloud server resources, as the closer the service hosting is to the users geographically, the better it is in terms of energy consumption.
Caching
Hamina’s website is optimized for performance by utilizing a variety of caching methods. Google’s CDN serves the HTML content directly to users, reducing server load and speeding up load times.
Redis caching is used to speed up database queries and internal searches. Additionally, CSS, JS files, and images are delivered through the Ewww Image Optimizer’s CDN, and CSS files are cached every hour in the user’s browser, further reducing server load. These measures together ensure a fast and seamless user experience on Hamina’s website.
Optimizing Website Resources: images, vectors, fonts, and code
Hamina’s website has focused on optimizing images and resources to improve energy efficiency. Images are optimized using the Ewwwio plugin, which compresses and loads them efficiently. Vector images are used with SVG sprites and icon fonts, reducing data transfer and speeding up loading times. HTML code is compressed, and unnecessary lines of code from WordPress and plugins have been removed. Fonts are carefully selected and load efficiently in .woff format. These measures together ensure the site is lightweight and fast to load, enhancing the user experience and reducing energy consumption.
Protection from Cyberattacks
A Cloud Armor firewall has been activated for the site on the Google Cloud side, which protects the website from various cyberattacks such as denial-of-service attacks. It does this by limiting requests based on IP addresses, preventing harmful traffic spikes that overload the service. This improves website performance and reduces energy consumption.
Accessibility
The website largely meets the requirements of the WEB Content Accessibility Guidelines (WCAG) 2.1 at both A and AA levels. The design in compliance with accessibility requirements favors a clear and minimalist user interface, reducing unnecessary graphic content and heavy elements. This lightens the overall structure of the site, resulting in smaller file sizes and less data transfer.
"The new website is clearer and more user-friendly, both for residents and communicators from various sectors. The site serves communication professionals from different industries well in their daily work and development. It’s also great that the new site is more secure."
–Aija Kurko, City of Hamina
The End Result: A user-friendly and lightweight service
“The website is now clearer than before, and the new elements allow for much more than the features of the old site. Citizens can find the information they are looking for more easily and are thus more aware of current affairs. The visitor paths are clearer, and we are constantly striving to reduce the use of PDF attachments on the pages, which improves accessibility. In connection with the renewal, we trimmed old content and focused on the essentials.” – Aija Kurko, City of Hamina
Result highlights
Carbon footprint of server resources
The emissions from the service’s server resources were 11 kg CO₂e in December 2024. For the entire year of 2024, we estimate the total emissions to be 132 kg CO₂e.
These are the scope 1, 2, and 3 emissions from the data center for this service.
Page size and load speed
The homepage of Hamina’s website is lightweight and energy-efficient. Its size is only 1.01MB, and according to EcoGrader, it is 74.56% smaller than the average website. Google PageSpeed Insights gives the homepage high scores for efficiency, and the site’s load speed is also excellent.
What’s next?
The City of Hamina team has identified several areas for development for the future of website.
“We understand that websites are never finished, and there will always be updates to make. What is important today may not be tomorrow. That’s why it’s important for us to listen to residents’ feedback and take advantage of the agile development opportunities of the new site,” says Aija Kurko.
“Well-performing websites significantly reduce the need for paper-based communication and thus contribute to our city’s Hinku goals,” summarizes Riikka Koskimies.
Our work continues with training for the client’s content production and other areas essential to energy efficiency. In further development, we will pay even closer attention to energy efficiency and create guidelines for users on content input.