NZZ Connect

12 becomes 1
We designed and developed a Statamic Multisite CMS for NZZ Connect, which significantly simplifies the creation and maintenance of various websites.
Client
Neue Zürcher Zeitung AG, Zweigniederlassung NZZ Connect
Since
2023

About NZZ Connect

NZZ Connect, a branch of the NZZ, organises nationally relevant conferences and events such as the Swiss Economic Forum, the FutureHealth Conference and the Open-i. In doing so, they create an exchange between players from business, politics, science and public authorities to discuss key and current topics.

Baseline - 12 individual websites

NZZ Connect's events, programmes and formats are presented on their own websites.

Previously, these websites were independent of each other, which meant that over 12 different setups with individual content management systems and technologies were in use. These had to be managed and maintained individually and independently of each other, which of course meant a lot of work, especially for the content management team. All content had to be created and maintained individually for each page, even if the content was similar in structure (e.g. programme) or even identical (e.g. the portrait of a speaker appearing at two of the events). In addition, the operation of the systems was not standardised, which required a great deal of training and, of course, management and coordination with different agencies.

The aim was to find a solution that would minimise these costs in the future and make it easier to maintain all the sites. Several workshops were held to discuss possible approaches and solutions.

Dominic Lüthy and Michale Schranz at the workshop at Apps with love workshop
Post-its with collected ideas at the Discovery Workshop with NZZ and Apps with love
Collected ideas are discussed together
In joint workshops, hypotheses were formulated, various solutions were developed and, above all, many questions were discussed.

Solution: Centralised content management system

The individual events still need their own websites, as they each have their own theme, appearance, target group and corporate identity. However, the system or systems behind them will be replaced with a single system that can be used to manage the sites centrally. Statamic will be used as our "CMS of choice" - more details on the technology can be found below.

The implementation procedure

As a first step, we analysed the existing "website landscape" of NZZ Connect. We identified commonalities and made a comprehensive list of the existing components and modules. This enabled us to create an overview based on which we could prioritise the components and features required in the future.

Excerpt from storybook in which the UI components were created

The fact that most of the content was implemented as reusable components means that content that is used on different pages (such as speakers or sponsors) can be easily reused. The use of reusable content guarantees uniform design & consistency across the different pages, while at the same time the designs and branding of the different events can be maintained. Individual fonts, colours, favicons etc. can be defined for each page.

Because Statamic is used as the sole API for all content, the content management team can edit or add content centrally, which is then automatically updated on all desired pages. This makes the maintenance of different pages particularly efficient.
The content preview function of Statamic can then be used to ensure that all content looks as desired before it is published.

Dominic Lüthy

"Apps with love's approach with an intensive phase of workshops, requirements gathering and discussion effectively led to a common understanding of our challenges. This in turn enabled us to go live with the first site for the Swiss Economic Forum realised with the new system in time for the deadline. We were able to integrate the websites for all our events into the CMS step by step and thus utilise synergies. Goal achieved!"

Dominic Lüthy, Director Marketing & Communication

Technical realisation

The big challenge with a multisite CMS, or rather when considering whether one makes sense at all, is, among other things, the effort required for automation and the question of whether standardised components and content shared across pages will ultimately result in more work and tedious dependencies. Thanks to the flexibility of Statamic and a clever architecture, we have managed to overcome this challenge. At a glance, the architecture is (relatively) simple, the complexity lies in the details. Describing these would go beyond the scope of this article and may be the subject of a future blog post.

Architecture of the new solution for NZZ Connect
Architecture of the new solution for NZZ Connect

The centrepiece is the combination of Statamic as a central headless content hub and Vercel as infrastructure as a service (IaaS) and massive "deployment simplification" with GitLab: the deployment process is fully automated. As soon as a code change is uploaded to the repository (GitLab), the website is automatically deployed via Vercel. This means that no manual installation or updating is necessary, which saves time and reduces errors.

The use of Vercel resulted in the use of Next.js, a modern framework based on React, in the front end. Next.js handles the requests on the respective domain and forwards them. Thanks to efficient server requests and optimised display processes, Next.js ensures that the websites load quickly and improves overall performance.

The CMS Statamic used is based on Laravel. Laravel offers many useful tools for efficient data processing and API customisation. With functions such as validation and listeners, the backend can be flexibly customised and the code remains clear and easy to maintain. Thanks to the headless use of Statamic, the content can now be easily accessed via the API and thus also used in the NZZ Connect app developed by Semabit. This means that information, such as the list of speakers at a specific event, can be maintained in one place and then used regardless of whether the website or app is used.

Conclusion - simplification and more efficiency

The new solution represents a considerable simplification for the content management team and the event organisers at NZZ Connect. They no longer have to familiarise themselves with different systems and their peculiarities, but only with one. New pages can be created quickly and easily and the creation and maintenance of content becomes more efficient. Where it used to take several days to create a new page, we now only need 6-8 hours to get a new website up and running.

The events retain their own visual appearance, while still being recognisable as NZZ Connect events thanks to the reusable components. 
In addition, the API is also used for the mobile app, which means that all content is maintained centrally in one place and is displayed uniformly on both the website and the app.

The centralised solution has also significantly reduced the number of contact persons and service contracts for NZZ Connect, which has also resulted in a leaner setup from an administrative perspective.

Overview
Sara Weibel
Sara Weibel
Co-Head of Project Management
She manages to finish everything that looked at one time like it would never end. Her forebears once worked on the pyramids at Giza, the Chinese wall and the Eiffel tower.
Stefan Spieler
Stefan Spieler
Concept & Design
Design professional in all aspects. Has a beard now but is still up for every sort of goofing around when it comes to design, games, 3D, table tennis, swimming, horse riding or reading. One of the first with us and still one of the nicest.
Nick Gerber
Nick Gerber
Concept & Design
He knows every shortcut and every Easteregg, there's not a single software tool that he hasn't already tested and sworn at. The clear winner: Notion. He uses it to work in such a structured way that, in addition to conceptualizing, designing and developing websites, he has time to ask the really important questions in life. For example, who tops the own goal statistics in table soccer.
Alessandro Pittori
Alessandro Pittori
Web Development
We don't know exactly what Alessandro listens to day in, day out - but his headphones or what he plays on them seem to give him the energy to realise web front-ends of all kinds - as long as he doesn't have to deal too much with PHP, which he doesn't like. He grew up in Basel but now lives in his adopted home of Bern.
Eduard Zielke
Eduard Zielke
Project Management | Service Management
Our secret agent par excellence: disguised as a project manager during the day, he spies on customers as a bartender at night while shaking martinis, communicates in every language imaginable, and should things get really tricky, he can always fall back on martial arts. His name is Zielke - Eddy Zielke.
Rémy Böhler
Rémy Böhler
Co-Head of Web Development
If he wanted to, he could program a website with his little toe while blindfolded... but he doesn’t want to. Our secret weapon when it comes to web development.
Valentin Naegeli
Valentin Naegeli
Head of Marketing & Sales
If you want to develop an app with us, Valentin’s the one you’ll get the first info and tips from. He’s more than familiar with the whole app ecosystem and knows if an app is worth it or if investments are going to have to be made first in marketing or a website. We also know him as “The Wolf of Landoltstreet”.
Kim Jeker
Kim Jeker
Web Development
He dreams of the wildest backend, frontend, API and CMS concepts and when you ask him if they are feasible, his answer is a simple "yes". No wonder with such a treasure chest of experience!
the logo of the company Opinov8 on a white background
Opinov8
Web & App Development
We just noticed that you surf with Internet Explorer. Unfortunately, our website does not look so nice with it.

You want to know why that is?
We have written about it.

Blog

You need help with the changeover?
Get in touch. We are happy to help

Contact

Install a new browser?
There's lots of choice.

Browser