Relaunch EKHN: Headless but not headless!

The website of the Protestant Church in Hesse and Nassau offers a lot of content - in the course of a relaunch, this should also be prepared in an appealing way for younger target groups and be accessible via various entry points.

To this end, we developed a new technical, content and visual approach in a comprehensive consulting process - based on a TYPO3 headless project.

The new website went online just in time for Reformation Day on October 31, 2023. You can find details about the relaunch in this case study.

Who is the EKHN?

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 people as well as volunteers and full-time staff in the Protestant parishes and deaneries, where it shapes the spiritual, cultural and social life on site.

The EKHN in figures (2022):

Over 1.3 million members
1.075 parishes
25 deaneries
Over 1400 pastorates
Approx. 19,000 employees
Over 57,000 volunteers
Planned budget: € 710 million

Source: EKHN

Website: https://www.ekhn.de/

The Protestant Church in Hesse and Nassau (EKHN) in figures

1.3 million

Members:inside

>1000

Parishes

>57.000

Volunteers

The challenge

The website of the Protestant Church in Hesse and Nassau offers a wealth of content - as part of a relaunch, this was also to be prepared in an appealing way for younger target groups and made accessible via various entry points.

To this end, we developed a new technical, content-related and visual approach in a comprehensive consulting process - based on a TYPO3 headless project.

The aim was to go live with the new website in time for Reformation Day on October 31, 2023. The project started in January 2022 and we were able to take the new website live just in time for Reformation Day. A complete success!

The challenge with this project was to create a basic concept for the large amount of content and to make it not only easy to find but also appealing. At the same time, the content must be easy to maintain in the backend so that the EKHN editorial team can concentrate primarily on the content and not on the display.

In addition to these basic concepts that had to be implemented, it was of course also necessary to ensure that the numerous third-party systems could be integrated into the new website.

Concept phase

In addition to the technical challenge of a "headless" TYPO3 architecture desired by the EKHN, the main task was to quickly arrive at a structured process for the content concepts together with our partner agency "made in" and the EKHN.

These then had to be underpinned with the appropriate taxonomy and information architecture and, in the end, not lose sight of the goals set by the EKHN.

We at punkt.de GmbH are very experienced with "made in", especially in concept creation, and regularly manage to take our customers by the hand quickly and efficiently and design a concept for the relaunch using modern methods. Designers and developers work closely together from the very beginning, which leads to fewer correction loops in the further course of the project and the customer can look at the first drafts with us at an early stage, which are then already coordinated with the developers.

A detailed description of this process for the design, UI & UX and how we organized the information can be found in a detailed Blog from "made in" .

On the technical side, we have used "Storybook" in the implementation, which enables the quick creation of static UI elements in HTML/CSS, which can then be tested and dynamically implemented for the website. During the implementation process, this ensures that we maintain an overview of the numerous content elements and page types and can quickly carry out tests if changes are made during the course of the project.

As mentioned at the beginning, it is important in such projects not to lose sight of the goals that have been set. Here, we rely on a project manifest agreed with the customer, which our product owner (PO) regularly compares with the current development status together with the customer.

This project manifest o is drawn up right at the start of the project and contains the most important key points, such as "We will accompany you every step of the way" or "Technology and design are modern, durable and sustainable".

If a current position does not correspond to the objectives from the project manifesto, the customer must be consulted and improvements made if necessary.

With our concept, we have successfully achieved the goal of assigning the numerous content types to an enormous variety of topics so that the data can be recorded in a structured manner and played out automatically.

Implementation

From a technical point of view, the biggest challenge in this project was to fulfill the customer's wish for a TYPO3 headless solution. The separation between the backend on the one hand and the frontend on the other is much more visible than with conventional TYPO3 solutions.

In the backend, we opted for the standard and the recommended "headless" extension together with TYPO3. The main difference for the backend development was that JSON is passed to the frontend and TYPO3 rendering is omitted. This increases the organizational effort in the exchange and documentation of the transferred data and its naming. In addition, an Apache Solr search runs for the EKHN website, which is more comprehensive than the usual website standard with its many contents and links to topics.

In the interaction between backend and frontend, the advantage is that only frontend resources are scaled for higher availability. This is because several frontend servers can make requests to the backend server.

For the frontend, we have opted for a mixture of Next.js for processing the JSON content in combination with React for the layout. In the project, we also relied on Chakra UI.

This combination gave us the tools we needed to profitably implement the concepts previously agreed with EKHN in workshops during development.

In this project, we also repeatedly created interfaces and connections to external tools. In addition to the usual connections to Matomo or the Cleverreach newsletter tool, we also seamlessly connected lesser-known tools such as the ISIDOR mobile address directory for address book functions and Ev. Termine for event data to the website.

The most exciting challenge also lay in a news interface, which was solved with 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 increasing the reach of existing articles.

As part of the project, a number of things had to be considered with regard to accessibility, which plays an important role for the church throughout the entire project. For example, a contrast mode was developed to make the site more accessible for people with disabilities.

In the design process and layout development, precise attention was also paid to contrasts, the interplay of content elements and the size of the elements. To support this process even better, we used the open source tool "Pa11y", which provided us with additional information on the current level of accessibility during the development process.

More about the Accessibility can also be found in our blog.

Together to success

This project was also about involving the various stakeholders in the project and, above all, understanding the "church". We worked closely with the EKHN media house, but also directly with the EKHN as the client.

It was important for this project and its successful implementation to understand and comprehend the current challenges facing the Protestant church. It was essential to put ourselves in the client's shoes and to provide the right impetus for an attractive implementation for the younger target group from an outside perspective. As attitudes towards the church and faith have changed radically in the younger generation, the church's offering must also be adapted accordingly or presented differently in order to remain relevant.

We succeeded in taking this step with the live event on Reformation Day, and the new appearance has been well received. A complete success for the EKHN and for us!