medac Group // metex-PEN
International product launch with Scrollytelling

medac is an internationally active pharmaceutical company distributing high-quality products in 91 countries worldwide. sitegeist has worked with medac for many years, realizing numerous websites. One of the most ambitious and technically complex projects was the launch of the new metoject-PEN, an advanced injection device designed to help patients self-administer medication safely and independently.

This innovative product aims to improve the quality of life for people with chronic illnesses while simplifying treatment for both patients and healthcare professionals.

The PEN is the second-generation device and has been significantly improved compared to its predecessor. These enhancements needed to be effectively communicated to healthcare professionals (HCPs) using compelling visual storytelling.

The main goal was to develop a comprehensive and user-friendly online presence for the new PEN that served multiple target audiences—doctors, patients, and HCPs. The focus was on showcasing how the PEN works and its benefits through interactive and intuitive visuals. In addition, the platform had to provide secure and differentiated access levels, tailored to user groups and regulatory requirements across different countries.

Complicating factors included the need for multiple language versions, country-specific legal guidelines, and different product names and dosages depending on the region.

Scroll-triggered animations proved to be the most effective way to visually and interactively explain the complex features of the PEN. As users scroll, they control the animation speed themselves, which leads to higher engagement compared to passive video watching.

Technically, the 3D animations were converted into highly compressed individual frames. The first sequence is preloaded to reduce waiting time, while subsequent frames are loaded on demand, only when needed.

The site was implemented using TYPO3. The scroll-based animations were seamlessly integrated, allowing editors to manage content as usual before and after the animations. The product name is handled via a placeholder system, which dynamically replaces “metoject” or “metex” depending on the country – enabling the same content to be delivered with localized branding.

Translation into many languages was a major initial challenge. The site includes a large amount of content, which had to be translated by local editorial teams.

To streamline this process, DeepL was integrated into TYPO3 via API. With a single click on "translate," editors can translate all content elements of a page into the target language—remarkably well, even with medical terminology. This reduces editors’ work to minor text adjustments.

The Website is Divided Into Three Core Areas

• Public Area
  Accessible to all visitors, this section provides general information on indications such as rheumatoid arthritis and patient lifestyle tips.
• Patient Area
  Designed specifically for patients, it offers detailed guides on using the PEN, FAQs, and helpful resources. Patients with a prescription can access exclusive content to ensure safe and effective use.
• Protected Area for Healthcare Professionals
  Accessible only to authorized medical professionals via DocCheck login, this section offers in-depth content, training materials, and studies tailored to HCP needs.