Cancel
Start searching
This search is based on elasticsearch and can look through several thousand pages in miliseconds.
Learn more
This search is based on elasticsearch and can look through several thousand pages in miliseconds.
Learn moreThe website of the Evangelical Church in Hesse and Nassau offers a wealth of content—as part of a relaunch, this content needed to be presented in a way that appeals to younger audiences and made accessible through various entry points.
To this end, we developed a new technical, content-based, and visual approach through a comprehensive consulting process—based on a TYPO3 headless project.
The new website went live just in time for Reformation Day on October 31, 2023. Details about the relaunch can be found in this case study.
The Evangelical Church in Hesse and Nassau (EKHN) is a member church of the Evangelical Church in Germany (EKD). It is made up of church members, interested individuals, and volunteers and full-time staff in the Protestant parishes and deaneries, where it shapes local spiritual, cultural, and social life.
The EKHN in Numbers (2022):
Source: EKHN
Website: https://www.ekhn.de/
The Evangelical Church in Hesse and Nassau (EKHN) by the Numbers
The website of the Evangelical Church in Hesse and Nassau offers a wealth of content—as part of a relaunch, this content needed to be presented in a way that appeals to younger audiences and made accessible through various entry points.
To this end, we developed a new technical, content-based, and visual approach through a comprehensive consulting process —based on a TYPO3 headless project.
The goal was to launch the new website in time for Reformation Day on October 31, 2023. The project began in January 2022, and we were able to go live with the new website right on time for Reformation Day. A complete success!
The challenge with this project was to create a fundamental concept for the vast amount of content and to make it not only easy to find but also visually appealing. At the same time, the content had to be easy to maintain in the Backend so that the EKHN editorial team could focus primarily on the content itself rather than on its presentation.
In addition to implementing these fundamental concepts, we also had to ensure, from a technical standpoint, that the numerous third-party systems could be integrated into the new website.
In addition to the technical challenge of implementing the “headless” TYPO3 architecture requested by the EKHN, the primary goal was to quickly establish a structured process for developing content concepts in collaboration with our partner agency “made in” and the EKHN.
We then had to underpin these with the appropriate taxonomy and information architecture, all while ensuring we didn’t lose sight of the EKHN’s stated goals.
Here at punkt.de GmbH, we’ve developed a strong working relationship with “made in,” particularly in the concept development phase, and we consistently manage to guide our clients quickly and efficiently, using modern methods to design a concept for the relaunch. Designers and developers work closely together from the very beginning, which leads to fewer rounds of revisions as the project progresses, and the client can review the first drafts with us early on—drafts that have already been coordinated with the developers.
A detailed description of this process for design, UI, and UX—and how we’ve organized the information—can be found in a comprehensive blog post by “made in” .
On the technical side, we’ve used, among other tools, “Storybook," which enables the rapid creation of static UI elements in HTML/CSS that can then be tested and dynamically implemented for the website. This ensures that, during the implementation process, we maintain an overview of the numerous content elements and page types and can quickly run tests whenever changes are made as the project progresses.
As mentioned at the beginning, it’s important in projects like this not to lose sight of the goals we’ve set. We rely on a project manifesto agreed upon with the client, which our Product Owner (PO) regularly reviews with the client to align it with the current state of development.
This project manifesto is created right at the start of the project and includes key points such as “We’re with you every step of the way” or “Technology and design are modern, durable, and sustainable.”
If a current status does not align with the goals outlined in the project manifesto, we must discuss this with the client and make adjustments as necessary.
With our concept, we have successfully achieved the goal of assigning the numerous content types to a vast range of topics so that the data can be captured in a structured manner and delivered automatically.
From a technical standpoint, the biggest challenge in this project was meeting the client’s request for a headless TYPO3 solution. In this setup, the separation between Backend on one side and the front end on the other is much more pronounced than in standard TYPO3 solutions.
For the Backend, we opted for the standard and used the recommended "headless” extension together with TYPO3. The key difference for back- Backenddevelopment was that JSON is fed into the front end, and TYPO3 rendering is eliminated. This increases the organizational effort involved in exchanging and documenting the transferred data and its naming conventions. In addition, the EKHN website runs an Apache Solr search, which—given the large volume of content and links to topics—is more comprehensive than the typical website standard.
The interaction between Backend and the front end now offers the advantage that, to achieve higher availability, only front-end resources need to be scaled, since multiple front-end servers can send requests to the Backend server.
For the frontend, we opted for a combination of Next.js to process the JSON content in conjunction with React for the layout. We also rely on Chakra UIfor the project.
This combination provided us with the necessary tools to successfully implement the concepts—which had been previously agreed upon with the EKHN in workshops—during development.
Throughout this project, we also repeatedly created interfaces and connections to external tools. In addition to the usual integrations with Matomo and the newsletter tool CleverReach, we also seamlessly integrated lesser-known tools such as the ISIDOR mobile address directory for address book functions and “Ev. Termine” for event data into the website.
The most exciting challenge, moreover, lay in a news interface, which was solved using a Pocketbase database. This makes it possible to exchange news between the regional church website ekhn.de and the hundreds of parish and deanery websites, thereby expanding the reach of existing articles.
As part of the project, there were also several considerations regarding accessibility, which plays a key role for the church throughout the entire project. Among other things, a contrast mode was developed to make the site more accessible to people with disabilities.
During the design process and layout development, close attention was paid to contrasts, the interaction between content elements, and the size of the elements. To further support this process, we used the open-source tool "Pa11y," which provided us with additional information on the current level of accessibility throughout the development process.
More on the topic of accessibility on our blog.
This project also involved engaging the various stakeholders and, above all, understanding the “church.” To that end, we worked closely with the EKHN’s media office, as well as directly with the EKHN as the client.
A key factor for this project and its successful implementation was understanding and being able to relate to the current challenges facing the Protestant Church. It was essential to put ourselves in the client’s shoes and, from an outside perspective, provide the right ideas for an appealing implementation tailored to the younger target audience. Since attitudes toward the church and faith have changed radically among the younger generation, the church’s offerings must also be adapted accordingly or presented differently in order to remain relevant.
With the launch on Reformation Day, we successfully took this step, and the new website has been well received. A complete success for the EKHN and for us!
