Awards
To ensure the future of energy is sustainable, everyone will need to play their part. EnergieSchweiz aims to mobilise individuals, companies and public authorities to do exactly this. www.energieschweiz.ch is a key instrument of the national energy programme under the aegis of the Swiss Federal Office of Energy. It is also one of the first websites in the federal administration to opt for headless architecture. The various components interact seamlessly: Contentful works as a central content hub, GatsbyJS generates static HTML pages based on React and GitLab and Kubernetes enables automated deployment processes.
This innovative overarching architecture is bursting with energy: It allows for lean processes, flexible use of content and impressively short load times. Our experts were in charge of the technical concept and architecture, frontend and backend implementation, SEO concept, content modelling, content generation and migration.
- Customer
- EnergieSchweiz, Swiss Federal Office of Energy
- Customer since
- 2020
- Go-Live
- March 2021
- Website
- www.energieschweiz.ch
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.
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
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.
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.
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.
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.
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.
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 StrategyFrontend Development
Our frontend engineers develop a accessible, performant and responsive frontend for your user interface.
Learn more:Frontend DevelopmentSoftware 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
Contact for your Digital Solution
Book an appointmentAre you keen to talk about your next project? We will be happy exchange ideas with you.
Contact for your Digital Solution with Unic
Book an appointmentAre you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you.
