Relaunch Love Life - Digital Information Platform & Safer-Sex-Check
Customer
Federal Office of Public Health FOPH
https://www.bag.admin.ch
Technologies
Headless CMS
React mit Next.js
Azure Cloud
Disciplines
Consulting
Software Development
A Website as the Center of the Campaign
eThe new LOVE LIFE campaign of the Federal Office of Public Health FOPH in cooperation with ROD Kommunikation and Blueglass is one of the measures to implement the national program “Stop HIV, hepatitis B, hepatitis C virus and sexually transmitted infections (NAPS)”. It aims to strengthen knowledge about sexually transmitted infections as well as sexuality-related risk competence and confidence in the population.
Digital Information Platform with Safer-Sex-Check as a Central Means of Communication
All communication measures, both online and offline, draw attention to the LOVE LIFE website and the safer sex check. The LOVE LIFE - Sex, but safer website provides important information on risks, protection and tests, as well as addresses of testing and advice centers. In order to strengthen the action and risk competence of sexually active people, the new LOVE LIFE campaign focuses on personal, risk-based protection and testing recommendations instead of general safer sex rules for everyone. To this end, a Safer-Sex-Check has been developed that shows individual options for action.
The Digital Experiences team of our partner agency Blueglass had the opportunity to redesign this comprehensive information platform, including the online Safer-Sex-Check, create the screen design, and implement it. We at Sitewerk were responsible for the technical implementation in this project.
These important aspects had to be given special attention during the technical implementation:
- High scalability requirements with up to six-figure requests per day
- Implementation of complex rule and business logic to ensure the reliable generation of personalized protection and testing recommendations
- Strong focus on SEO, caching, and server-side rendering to optimize performance and visibility
The Architecture of the Digital Platform Solution
For the implementation of this project, we opted for a combination of a headless CMS, API architecture, and Swiss hosting to create a robust and secure system. This architecture enables a secure, flexible, and scalable solution.
Implementation of the Information Platform with the Headless CMS Strapi
For the technical implementation, the open-source CMS Strapi was used to meet the security requirements of the federal government and various other demands.
The headless CMS separates the backend, where content is created and managed, from the frontend, which displays the content. This separation offers several advantages:
Better Scalability
Content can be centrally managed across various channels (websites, apps, IoT devices) and easily delivered to different endpoints.
Modularity
With Strapi, a component-based implementation of the website is possible. This also made it easy to integrate the Safer-Sex-Check into the same CMS. This architecture allows individual components to be developed and managed completely independently.
Faster Development
Developers can work independently on the backend and frontend, accelerating and shortening the development process.
Scalable and Flexible
Thanks to Strapi's high scalability and adaptability, the system can be easily expanded to meet the growing requirements of the website.
Swiss Hosting of the Entire Software Solution for the Swiss Government
It was a requirement of the Federal Office of Public Health FOPH that the website be hosted in Switzerland. Therefore, the self-hosted version of Strapi was chosen, running within the Microsoft Azure Cloud in a Swiss data center.
Hosting in Switzerland offers several key advantages:
Data Privacy and Security
Switzerland has strict data protection laws that ensure a high level of security for stored data.
High Availability and Performance
Swiss hosting providers offer modern infrastructures and technologies, ensuring high availability and fast loading times.
Excellent Performance with React and Next.js for the Frontend
The decision to build the frontend with React and Next.js brings numerous advantages, especially in terms of performance and search engine optimization (SEO). Next.js is a powerful framework for React that supports server-side rendering (SSR). With SSR, the HTML content of the webpage is generated on the server rather than in the user’s browser. This immediate content delivery significantly reduces loading times and greatly improves website performance. This speed advantage is particularly noticeable and crucial for an excellent user experience (UX) on mobile devices or slower internet connections.
Furthermore, SSR is highly beneficial from an SEO perspective. Search engines prefer websites that load quickly and have easily indexable content. Since the HTML content is pre-rendered on the server with SSR, search engine crawlers can analyze the page’s content more quickly and efficiently. This can lead to better search rankings, increasing the website's visibility and traffic.
In addition to these benefits, Next.js offers a wide range of features that simplify the development and maintenance of web applications. These include automatic code-splitting, dynamic routing, static exports, and seamless API integration. These features make Next.js an excellent choice for modern web development projects that require high performance and SEO relevance.
More Interesting Website Projects
References