The Future of Energy

EnergieSchweiz, Swiss Federal Office of Energy

Awards

Customer
EnergieSchweiz, Swiss Federal Office of Energy
Customer since
2020
Go-Live
March 2021
Website
www.energieschweiz.ch
Casestudy_EnergieSchweiz_screen_facts

5

months from kick-off to go-live

1

non-virtual meeting – the kick-off

95,6%

Core Web Vitals performance

47

Miro whiteboards generated

Content First!

The energy landscape is highly dynamic. The key is to pick up on new developments and create an awareness for sustainable behaviours. This is where the decoupled and flexible headless architecture comes in: The focus is on the content. It mobilises, informs, explains and motivates. Contentful as a central content hub enables EnergieSchweiz to capture and manage content intuitively. Changes to the content can be made independently from the backend. Content from surrounding systems can be integrated via interfaces. Automated CI/CD processes contribute to efficient deployment. Within a short development period, we created a future-proof platform that provides flexible, agile and cost-efficient support to EnergieSchweiz in their endeavours to bring all stakeholders on board for the sustainable future of energy.

EnergieSchweiz_teaser01

Content Model as a Centrepiece

The extendable, structured content model is at the heart of the content hub. It defines content elements, their structure and dependencies in detail. To make sure all requirements are reflected, it was developed with all content managers at EnergieSchweiz in several workshops while taking into account the design specifications. The content model balances the centralised structure and management and individual design freedoms. This ensures the high quality and consistency of content – regardless of format and channel. At the start of the content migration, the content model was validated and expanded.

With their driven and highly professional team, Unic helped this project soar. The collaboration was characterised by respect, mutual understanding and commitment.

Laura Curau
Expert Digital Media, EnergieSchweiz
EnergieSchweiz_teaser02

Headless and Fast as Lightning

The headless architecture decouples the CMS as a content system from the frontend as display medium. This puts the focus on the content, its relations and efficient management. The website, which is generated statically based on GatsbyJS, also impresses visitors: The pages are displayed at lightning speed. Even with a 3G connection, content is available within seconds. Only images take a little longer to load. If there is a spike in visitor numbers, the setup with modern web technologies and distributed infrastructure diverts load to additional systems and is relatively easy to scale vertically.

More about Headless

An Exciting Experience for Editors

Headless content management system Contentful serves as a central hub, operated as an SaaS solution by Contentful. Contentful offers editors a first-class experience. Editors can focus entirely on their key skill, the generation of valuable content. They are supported in the generation, development and publication of content. Automatic reference checks prevent dead content links (weblinks, images, attachments etc.). An integrated translation view for content also reduces context switching for translations and for edits made to the same fields in several languages.

More about Contentful

EnergieSchweiz_teaser03

Static Pages with Gatsby

GatsbyJS generates React-based and GraphQL-driven static websites. As soon as the build process has been completed, the website is functional. A central info section displays errors and causes, allowing for quick fixes. The major advantage of this setup is that frontend bugs do not affect the user experience. At the same time, this not only ensures high access speed, but also the security and availability of the system. Developers and editors can be sure that the system will behave identically in all environments.

Tobias FreiMarch 2022

EnergySchweiz: Frontend metrics as end performance

EnergySchweiz: Frontend metrics as end performance

Automatic Imports

Content in the CMS is mostly managed by editors. In addition to this content, publications managed by the Swiss Federal Office of Energy are imported into Contentful by an automatic importer. This makes the publications available to the editors without switching contexts, and the editors can then link to these in their content. Updates and changes to publications are applied automatically. Special attributes such as tags relevant only to EnergieSchweiz can be added and managed independently by EnergieSchweiz. Thanks to the CDN and the Contentful image API, images are directly scalable.

EnergieSchweiz_teaser04

The Right Information at Your Fingertips

EnergieSchweiz wants to direct users to the right information swiftly, without long and involved searching. An effective search function is key here. The search uses the SaaS solution Algolia. When the content or source code of the website changes, the search index is also updated as part of the frontend build pipeline. A Gatsby plugin configured for this purpose generates the necessary data and transfers the edited content to Algolia. Search results from the website are loaded, transformed and displayed directly from Algolia in the user’s browser.

Automated Deployment

Due to the high degree of automation of the processes, the overall architecture is perfectly suited to future agile enhancements to the info portal. From the frontend to content creation in Contentful and the integration of third-party systems, the platform is built automatically and only rolled out to the productive system after successful completion of all automated tests. The operation of the website is ensured by a Kubernetes cluster, which manages the application containers. Dependencies of the systems on additional systems were reduced to a minimum, so that even an outage of third-party systems will not render the EnergieSchweiz website unavailable. We use the GitLab environment operated by Begasoft to manage and control the automation for EnergieSchweiz. With GitLab, we define the entire CI/CD lifecycle across all environments and automate the build process for the site in one place.

EnergieSchweiz_teaser05

Reduced and Concentrated Content

As part of the content migration, existing content underwent a general revision. The motto for the relaunch – “reduced, concentrated and simplified” – served as a guideline for the revision. With added value for users in mind, we deleted redundant content, rephrased complicated texts and improved the reading flow with structural elements. In line with the new UX architecture, we created a more intuitive arrangement of content and added specific calls to action. We employed UX writing techniques to help users better understand technical information. To further improve the user experience, we worked on the consistency of texts. All content editors followed the new content guidelines in their writing.

Hand in Hand

energieschweiz.ch is the result of a collaboration between experts from EnergieSchweiz, Ginetta, Noord, Silberrücken and Begasoft. The level of commitment and energy in the project team was impressive. In the Scrum-based teamwork, especially towards the end of the project, it paid off that we had made time for interpersonal interaction and exchange during the kick-off and throughout the course of the project. On average, the check-ins for the meetings took 30 minutes. The result is a strong team, working side by side towards a joint goal.

The headless architecture was uncharted territory for the entire team, but, looking back, it was the best choice. Due to the iterative approach to the creation of the content architecture, all editors were included and helped shape the transformation.

Laura Curau
Expert Digital Media, EnergieSchweiz

Our services at EnergieSchweiz

Content Strategy

Your content is a way for your company to stand out from the crowd. It deserves your undivided attention. We support you in your efforts – from analysis and strategy to setting up an editorial schedule and copywriting texts for users and search engines (SEO).

Learn more:Content Strategy

Frontend Development

Our frontend engineers develop a accessible, performant and responsive frontend for your user interface.

Learn more:Frontend Development

Software Development and IT-Architecture

Software development has been one of Unic's core competencies for over 20 years. We develop a solution tailored to your needs for your company's digital presence. Please contact us!

Learn more:Software Development and IT-Architecture

Operations

We run your web application throughout its entire lifecycle. Our focus: availability, performance and security.

Learn more:Operations

More about EnergieSchweiz

EnergieSchweiz_teaser02

David DästerAugust 2021

Headless at EnergieSchweiz: Where Everything Interacts

A headless content management system alone is not yet a website. A Kubernetes cluster cannot deploy anything on its own. It is only when architecture, code, tools, processes and people are allowed to interact that the adjustments made to the content in the CMS trigger an update in the statically generated website.

Headless at EnergieSchweiz: Where Everything Interacts

David Däster

Carmen CandinasAugust 2021

Stay Ahead With Structured Content

For the relaunch of energieschweiz.ch, the editorial team invested a lot of energy into reworking the content. A content strategy, new formats and a content management system with headless architecture were a breath of fresh air for the web editing team.

Stay Ahead With Structured Content

Carmen Candinas

Contact for your Digital Solution

Book an appointment

Are you keen to talk about your next project? We will be happy exchange ideas with you: Melanie Klühe, Stefanie Berger, Stephan Handschin and Philippe Surber (clockwise).

Melanie Kluhe
Stefanie Berger
Philippe Surber
Stephan Handschin

Contact for your Digital Solution with Unic

Book an appointment

Are you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you: Jörg Nölke and Gerrit Taaks (from left to right).

Gerrit Taaks