Gemeinsam gegen HPV. Gemeinsam gegen Krebs.

Website besuchen

Enterprise Nat.

Zusammenfassung

Informations und Aufklärungsseite zu dem Thema Humane Papilloma Viren (HPV)

Projektbeschreibung

Seit Anfang Juli 2024 ist die HPV-Impfung in Österreich vom 21. bis zum 30. Geburtstag kostenlos. Für diesen Meilenstein in der Krebsvorsorge galt es, für den Kunden MSD eine Informations- und Kampagnenseite zu konzipieren, zu gestalten und zu entwickeln.

Die Impfung gegen HPV ist eine Erfolgsgeschichte und schützt wirkungsvoll vor bestimmten Krebsarten. Eine Studie von 2020 mit mehr als 1,5 Millionen Teilnehmerinnen konnte zum Beispiel zeigen, dass Frauen, die vor dem Alter von 17 Jahren gegen HPV geimpft wurden, ein um 88% geringeres Risiko für Gebärmutterhalskrebs hatten als ungeimpfte Frauen: https://www.nejm.org/doi/full/10.1056/NEJMoa1917338

Projektziele und -ergebnisse

Konzeption und Design
Nach einer initialen Konzeptphase wurden alle Inhalte in Figma als Master-Komponenten mit passenden Variationen angelegt. Unsere Figma-Designs sind detailverliebt und technisch ausgereift. Wir setzen konsequent auf Auto-Layout, Floating und responsive Gestaltung, was uns ermöglicht, Elemente in Figma per Tastatur oder Drag-and-Drop einfach umzustrukturieren oder neue Elemente hinzuzufügen, ohne das definierte Layout und die Abstände nachträglich anpassen zu müssen. Diese Flexibilität erlaubt es uns, während eines Hands-on-Meetings mit dem Kunden schnelle Anpassungen vorzunehmen, was in der Regel zusätzliche Refinement-Runden überflüssig macht.

In diesem Projekt haben wir vollständig auf Tailwind gesetzt und unser Figma-Setup vollständig mit „Figma-Variablen“ umgesetzt. Dies ermöglichte es uns, Abstände präzise zu definieren, sodass der ausführende Entwickler sofort die korrekten Werte vorliegen hatte. Anpassungen von Abständen waren durch die Verwendung von Variablen anstelle von festen Werten ein Kinderspiel.

Am Ende hatten wir einen interaktiven Figma-Prototypen, der es dem Kunden ermöglichte, die Website zu navigieren und eine fundierte Abnahme durchzuführen – ohne dass wir bereits mit der Entwicklung begonnen hatten.

Jede Figma-Komponente wurde direkt mit einer Storybook-Komponente verknüpft. In Figma verweisen wir auf das entsprechende Storybook-Modul, und im Storybook-Design-Tab wird die zugehörige Figma-Komponente angezeigt. Dies führte zu einer erheblichen Optimierung und engeren Verzahnung des Entwicklungsprozesses.

Flexible Inhaltstypen
Zusätzlich zu unseren Basis-Komponenten haben wir innovative Neuentwicklungen umgesetzt.

Interaktive, Decoupled Landkarte
Für dieses Projekt haben wir eine vollständig decoupled Web-Komponente mit Svelte entwickelt, die als interaktive Landkarte fungiert. Drupal dient dabei als Datenspeicher, während die Web-Komponente die Daten abruft und in der Karte darstellt. Das Kartensystem basiert auf einem angepassten Kartensatz von basemap.at, der ausschließlich Österreich zeigt.
Die Landkarte bietet eine Reihe interaktiver Funktionen: Die Bundesländer können ein- und ausgeblendet werden, und Inhalte sind durch die Eingabe von Suchbegriffen filterbar. Die Suchergebnisse werden in Echtzeit während des Tippens angezeigt, sodass Nutzer mit minimalem Aufwand schnell die passenden Anlaufstellen für Impfungen sowie detaillierte Informationen finden können.
Dank der decoupled Architektur ist diese Komponente flexibel und kann problemlos auf anderen Webseiten und Systemen integriert werden.

Quiz-Paragraph
Wir haben eine Funktion implementiert, die es ermöglicht, Quizfragen direkt in den Inhalten zu definieren. RedakteurInnen können Quizfragen einfach erstellen und festlegen, ob die Antworten richtig oder falsch sind. Auf der Website werden die Fragen dann benutzerfreundlich dargestellt. Ein User kann die richtigen Antworten auswählen und absenden. Die Darstellung ist dabei sehr detailliert gestaltet. Beispielsweise erscheint eine Fehlermeldung, wenn keine Antwort ausgewählt wurde, und der Absenden-Button wackelt, als würde er dem User “Nein” signalisieren. Wenn es nur eine Frage mit einer richtigen Antwort gibt, wechselt die Komponente automatisch sein Widget und ist anstelle einer Checkbox eine Option. Eine EditorIn muss daher auch nichts beachten und kann sich so auf das Wichtigste konzentrieren: Content erstellen.

Download von Detailunterlagen pro Bundesland
Wir haben eine Komponente entwickelt, die es ermöglicht, detaillierte Informationen pro Bundesland bereitzustellen, um sich über HPV im jeweiligen Einzugsgebiet zu informieren. Die Nutzung ist für den User denkbar einfach: Bundesland auswählen und der entsprechende PDF-Download startet automatisch. Um das Interesse der User zu messen, wird das Nutzungsverhalten via Analysesystem ausgewertet, sodass wir besser verstehen können, welche Regionen das größte Interesse an den Informationen haben.

Remote Videos ohne gleich externes JavaScript zu laden
Wie bei all unseren Projekten laden wir YouTube- und Vimeo-Videos erst nach einem Klick und der Zustimmung zu den Datenschutzinformationen. Dadurch vermeiden wir unnötige externe Javascripts immer sofort laden zu müssen.

Verschiedene Layouts pro Breakpoint
In diesem Projekt haben wir erstmals mit einer Layoutanpassung von Inhalten experimentiert, die technisch sehr gut gelöst wurde. Die Anforderung lautete, auf mobilen Ansichten Teaser-Elemente in einem wischbaren Slider darzustellen, während ab einem Tablet-Breakpoint ein Grid-Layout zum Einsatz kommen soll. Viele klassische HTML/JS/CSS-Webseiten lösen dies durch den Einsatz von zwei Komponenten im HTML, wobei je nach Breakpoint, Elemente ein- oder ausgeblendet werden. Dies führt jedoch zu unnötigem HTML/CSS, was für uns keine Option war. Unsere Lösung vermeidet doppeltes HTML und reduziert dadurch den Code und die Komplexität. Alles ist in einer einzigen Komponente integriert.

Darüber hinaus haben wir Fakten-, Call-to-Action-Elemente mit vordefinierten und auswählbaren Icons, Akkordeons, Tab-Elemente, großzügige Statements für Influencer, Bild-Text-Slider-Elemente und vieles mehr umgesetzt. Diese Elemente sind selbsterklärend, sobald sie auf der Seite betrachtet werden.

GDPR wurde mit ONETRUST und zentral gesteuertem Tracking genüge getan.

Das Ziel, über die Gratis-Impfung zu informieren, wurde jedenfalls erreicht. Denn die Impfung wurde sehr positiv angenommen. Alleine im Juli 2024 haben sich drei mal mehr Menschen impfen lassen als im selben Monat im Jahr davor: https://www.ots.at/presseaussendung/OTS_20240811_OTS0006/hpv-zahl-der-impfungen-verdreifacht

Es freut uns, dass wir mit der Umsetzung dieser Kampagnen-Seite einen Teil dazu beitragen konnten und so in Zukunft hoffentlich weniger Menschen an Gebärmutterhalskrebs erkranken werden.

Herausforderungen

Sehr kurze Umsetzungsdauer
Das gesamte Projekt stand unter einem engen Zeitrahmen, da die HPV-Impfungen in Österreich ab Anfang Juni kostenlos angeboten wurden und die Informationsseite rechtzeitig online sein sowie Erfolgsmessungen ermöglichen musste. Um eine schnelle Fertigstellung sicherzustellen, haben wir unsere eigens entwickelte Storyengine Distribution eingesetzt, die zahlreiche benötigte Funktionen und Content-Komponenten out-of-the-box bereitstellt. Durch den Einsatz von Storybook, das wir nahtlos in Drupal integriert haben, konnten Backend- und Frontend-EntwicklerInnen parallel am Projekt arbeiten.

Schnelle Finalisierung vom ersten Briefing bis zur fertigen Seite
Dank agiler Methoden und der parallelen Entwicklung von Design, Frontend und Backend war es uns möglich, das Projekt effizient umzusetzen, obwohl es sich um ein klassisches Drupal-Projekt und nicht um eine decoupled Lösung handelt. Durch unsere Trennung der Zuständigkeiten—von Figma über Storybook-Komponenten bis hin zu Drupal-Templates—konnten wir parallel an Komponenten arbeiten, ohne dass einzelne MitarbeiterInnen aufeinander warten mussten.

Community-Beiträge

Das Wissen, das wir während der Umsetzung der Svelte Karten-Implementierung erlangt haben, hilft auch gerade bei der Überarbeitung unseres drupical.com Drupal Event Kalendars. 🙂

Wir glauben an Open-Source und tragen seit 2005 aktiv zur Drupal-Community bei. Wir steuern nicht nur Code bei, sondern wir versuchen auch, Drupal in der DACH Region zu fördern und die lokale Community durch die Organisation von Meetups oder Camps zu unterstützen. Über Drupal Austria konnten wir so zuletzt die Drupal Dev Days nach Wien holen. Wir beteiligen uns auch aktiv an der Weiterentwicklung und sind auch bei der Drupal Starshot Initiative involviert und kümmern uns um den GDPR/DSGVO Track.

Erstellung von Patches und Issues wie zum Beispiel:
Wir haben für das Projekt unser Modul “File_Rename” verbessert und ein paar kleinere Probleme beseitigen können. https://www.drupal.org/project/file_rename Durch die stetige Verbesserung und Weiterentwicklung wird das Modul schon auf über 500 Drupal Seiten eingesetzt.

Auch wurde für das Projekt wurde ein eigenes Modul erstellt, das es erlaubt, Blöcke ja nach Veröffentlichungsstatus einer Node ein- oder auszublenden: https://www.drupal.org/project/block_condition_published …wurde benötigt für eine Wettbewerbsseite
Darüber hinaus Erstellung von Patches und Issues wie zum Beispiel für das Paragraphs Edit Modul: https://www.drupal.org/project/paragraphs_edit/issues/3270785

Nach der Veröffentlichung auf der Splash Awards Webseite ist die Erstellung einer umfangreichen Casestudy auf drupal.org geplant.

Warum sollte dieses Projekt die Splash Awards gewinnen?

Als Informations- und Aufklärungsplattform zur HPV-Impfung, einem Thema von enormer öffentlicher Bedeutung: Die HPV-Impfungen in Österreich sind um ein Drittel gestiegen und die Webseite ist hier der perfekte Informationsknotenpunkt. Diese beeindruckende Steigerung unterstreicht die Wichtigkeit der Seite in ihrer Mission, Leben zu retten und das Bewusstsein für die Bedeutung der HPV-Impfung zu schärfen.

Die technische Umsetzung des Projekts ist ebenso bemerkenswert. Durch den Einsatz einer vollständig decoupled Web-Komponente in Verbindung mit Drupal als Datenspeicher haben wir eine flexible und zukunftssichere Lösung geschaffen, die nicht nur in diesem, sondern auch in zukünftigen Projekten und auf anderen Plattformen eingesetzt werden kann. Innovative Funktionen, wie die interaktive Landkarte und das Quiz-Modul, wurden mit höchster Sorgfalt und Benutzerfreundlichkeit entwickelt, um sowohl für EndnutzerInnen als auch für RedakteurInnen eine optimale Erfahrung zu bieten.

Darüber hinaus ist unser Engagement in der Drupal-Community tief verankert. Wir tragen seit 2005 aktiv zur Weiterentwicklung von Drupal bei und setzen uns kontinuierlich für die Förderung der Open-Source-Philosophie ein. Unsere Arbeit an diesem Projekt spiegelt unsere Leidenschaft wider, sowohl für unsere Kunden als auch für die Community hochwertige, nachhaltige und vor allem nützliche und informative Lösungen zu entwickeln.