Lumina Praxis

Executive Summary

Lumina Praxis ist ein barrierefreies Webportal für eine biologische und ganzheitliche Zahnarztpraxis in Leverkusen. Die Anwendung kombiniert ein ansprechendes, barrierefreies Informationsangebot mit interaktiven Elementen. Ziel des Projekts war die Etablierung eines digitalen Aufklärungskonzepts, um das Patientenvertrauen in biologische Heilverfahren zu stärken und die Online-Terminbuchungen messbar zu steigern.

Context

Biologische Zahnarztpraxen behandeln Patienten unter Berücksichtigung systemischer Zusammenhänge. Solche medizinischen Konzepte bedürfen einer detaillierten und verständlichen Aufklärung auf der Website. Das Vorgängersystem war unübersichtlich, lud auf Mobilgeräten langsam und war für ältere oder sehbehinderte Patienten schwer zugänglich. Zudem fehlte eine optimierte Präsenz für die lokale Suche im Einzugsgebiet.

Problem

Medizinische Aufklärungsangebote sind oft schwer verständlich und unzugänglich für Menschen mit Einschränkungen. Zudem birgt die Implementierung interaktiver Tools (wie medizinischer Rechner) Risiken für den Datenschutz. Wenn Patientendaten zur Berechnung an einen Server übermittelt werden, unterliegen diese strengen regulatorischen Vorgaben (DSGVO). Es fehlte ein Lösungsansatz, der hohe Barrierefreiheit, schnelle Ladezeiten und absoluten Datenschutz miteinander verbindet.

Constraints

Bei der Entwicklung mussten strenge Vorgaben eingehalten werden:

• Barrierefreiheit (WCAG 2.1 AA): Kontraste, Tastaturbedienbarkeit und Screenreader-Unterstützung waren zwingend vorgeschrieben.
• Datenschutz (DSGVO): Die Verarbeitung persönlicher Gesundheitsdaten im Vitality-Score-Rechner durfte unter keinen Umständen serverseitig erfolgen.
• Mobile Performance: Schnelle Ladezeiten auch bei schlechter mobiler Netzabdeckung waren für Patienten von unterwegs essenziell.

Engineering Thinking

Die Lösung basiert auf einem statischen Frontend-Ansatz (Jamstack-Philosophie) kombiniert mit clientseitiger Logik. Durch den Verzicht auf ein dynamisches Backend minimieren wir Sicherheitsrisiken und Ladezeiten. Alle interaktiven Berechnungen laufen lokal im Browser des Nutzers ab. Dies spart Serverressourcen und garantiert absolute Vertraulichkeit, da keine Gesundheitsdaten über das Netzwerk übertragen werden.

Architecture

Die Anwendung läuft vollständig auf der Client-Seite. Die statischen Seiten werden vorgerendert bereitgestellt. Der Vitality-Score-Rechner greift über Vanilla JavaScript direkt auf die Benutzereingaben im DOM zu, berechnet das Ergebnis lokal und aktualisiert die Ansicht dynamisch. Eine Netzwerkverbindung zum Server wird nach dem Laden der Seite für die Berechnung nicht mehr benötigt.

Engineering Decisions

Wesentliche technische Entscheidungen prägten die Architektur von Lumina Praxis:

Implementation

Die Entwicklung erfolgte mit Fokus auf barrierefreies Markup. Formularelemente wurden semantisch korrekt deklariert und mit entsprechenden ARIA-Attributen versehen. Der Vitality-Score-Rechner wurde in sauberem ES6-JavaScript geschrieben. Um die lokale Auffindbarkeit der Praxis zu stärken, wurden strukturierte JSON-LD-Daten vom Typ Dentist und MedicalBusiness fest in die Vorlagen integriert.

Public Artifacts

+-----------------------------------+
|           Lumina Praxis           |
|                                   |
|   [ Biologische Zahnmedizin ]     |
|                                   |
|   * Amalgamsanierung              |
|   * Keramikimplantate             |
|                                   |
|   [ Vitality-Score Rechner ]      |
|   > Berechnen Sie Ihren Score     |
+-----------------------------------+
  

graph TD
    User([Patient]) -->|Formular-Eingabe| Rechner[Clientseitiger JS-Rechner]
    Rechner -->|Lokale Kalkulation| Ergebnis[Score & Empfehlung im DOM]
    Rechner -.->|Keine Übertragung| Server[(Webserver / Datenschutz-Sicherheit)]

Results

• Datenschutzkonforme Interaktion: Der Vitality-Score-Rechner läuft vollständig lokal – es findet keine Übertragung medizinischer Daten an Webserver statt.
• Barrierefreiheit: Erfolgreiches Audit der Barrierefreiheit nach WCAG-Standards (Lighthouse Score 100/100).
• Conversion-Steigerung: Stärkung des Patientenvertrauens und Erhöhung der Online-Terminbuchungen durch das interaktive Aufklärungskonzept.

Lessons Learned

Die Umsetzung dieses Fachportals unterstrich die Bedeutung einer engen Verzahnung von Informationsarchitektur, Datenschutz und Barrierefreiheit. Die Entscheidung, den Vitality-Score-Rechner rein clientseitig zu implementieren, war sowohl aus Performance-Gründen als auch zum Schutz vertraulicher Patientendaten die optimale Lösung. Zudem zeigte sich, dass barrierefreie Gestaltung nach WCAG-Standards und ästhetisches Design einander nicht ausschließen, sondern gemeinsam ein vertrauenswürdiges Nutzererlebnis schaffen.

Future Evolution

Für zukünftige Erweiterungen ist die Integration einer Progressive Web App (PWA) Struktur vorgesehen. Dadurch können Notfallkontaktdaten, wichtige Verhaltensregeln nach Operationen und Praxisöffnungszeiten auch bei vollständigem Netzausfall im Offline-Modus der Patienten abgerufen werden.