Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Barrierefreie Anwendung für die Aufklärung bei medizinischen Eingriffen

Barrierefreie Anwendung für die Aufklärung bei medizinischen Eingriffen

01 | Arbeitstitel

Barrierefreie Anwendung für die Aufklärung bei medizinischen Eingriffen: Konzeption und Gestaltung einer nutzerzentrierten Anwendung zur Begleitung während des Behandlungsprozesses

02 | Kurzbeschreibung Projekt

Das Projekt entwickelt eine barrierefreie, digitale Anwendung zur Aufklärung vor medizinischen Eingriffen anhand des Fachbereichs der Anästhesie und Orthopädie. Dabei liegt der Fokus auf geplanten und stationären Eingriffen. Sie soll Patient:innen eine verständliche, mehrsprachige und inklusive Vorbereitung auf das Aufklärungsgespräch und den Eingriff ermöglichen sowie auch nach dem Eingriff in der Nachsorge Unterstützung bieten. Dabei sollen komplexe medizinische Inhalte visuell, sprachlich und auditiv aufbereitet werden. Durch Funktionen wie Leichte Sprache Mehrsprachigkeit und personalisierte Informationsmodule unterstützt die Anwendung ein besseres Verständnis und mehr Sicherheit sowohl im Aufklärungsprozess als auch darüber hinaus in der Nachsorge. Die Ärzt:innen profitieren indirekt durch besser vorbereitete Patient:innen und effizientere Abläufe. Die Anwendung ist primär für die Nutzung auf Smartphones für die Nutzungsgruppe der Patient:innen optimiert und wird ergänzt durch Tablet- und Desktop-Zugänge, unter anderem für die Nutzung der Ärzt:innen.

03 | Projektmanagement

Der Zeitplan gliedert sich in vier Kategorien, die die Hauptbestandteile des Projekts darstellen: Termine und Organisatorisches, Thesis und Verteidigung, Theorie und Recherche sowie Konzeption und Design. Zeitlich teilt sich der Projektplan ebenfalls in vier Phasen: Analysieren, Definieren, Design und Prototyping. Ergänzend folgen Phasen der Finalisierung, Abgabe und Verteidigung.

03_projektplan.png03_projektplan.png

04 | Grundidee, Konzeptbeschreibung und Zielformulierung

Die ärztliche Aufklärung ist für viele Patient:innen schwer verständlich, häufig nicht inklusiv und findet oft unter Zeitdruck statt, wodurch Verständnisprobleme, Unsicherheiten und ein eingeschränktes Teilhabevermögen auftreten können. Die Grundidee des Projekt ist es, diesem Problem entgegenzuwirken und so eine barrierefreie Aufklärung vor medizinischen Eingriffen und Behandlungen möglich zu machen.

04_whyhowwhat.png04_whyhowwhat.png
04_forschungsfrage.png04_forschungsfrage.png

05 | Recherche, Inhalte, Daten, Quellen

Umfrage

Ziel der Umfrage ist es, die Hauptnutzungsgruppe der Anwendung zu definieren. Dabei sollen die Werte, Bedürfnisse und Anforderungen an die Anwendung identifiziert werden, um die Zielgruppe zu konkretisieren und einzugrenzen.

Die Umfrage mit dem Titel „Wie verständlich ist medizinische Aufklärung?” wurde mit Google Forms erstellt und umfasst 24 Fragen. Vier der Fragen sind offen formuliert, die Übrigen sind geschlossen gestellt. Bei Fragen mit der Möglichkeit zu Mehrfachantworten kann meistens eine eigene Ergänzung gemacht werden, sodass auch hier persönliche Einblicke und Erfahrungen genannt werden können. Im Zeitraum zwischen dem 7. Oktober und dem 19. Oktober nahmen insgesamt 56 Personen an der Umfrage teil. Dafür wurde die Umfrage über WhatsApp, Instagram und im privaten Umfeld verbreitet, wodurch eine breite Masse an Personen verschiedenen Alters erreicht wurde, die in der Vergangenheit an einem medizinischen Aufklärungsgespräch teilgenommen haben. Die Teilnahme fand anonym statt, die Ergebnisse wurden lediglich zur Festsetzung der Nutzungsgruppen verwendet.

05_umfrage.pdf PDF 05_umfrage.pdf

Interview Klinikum Münchberg

Um die fachliche Tiefe und Detailgenauigkeit des Projekts sicherzustellen, führte ich ein Experteninterview am Klinikum in Münchberg durch. Nach Anfrage mehrerer Krankenhäuser und Kliniken erklärte sich die Anästhesieabteilung im Klinikum Münchberg, Teil der Kliniken Hochfranken, zu einem Interview bereit. Um die Abläufe eines Aufklärungsgesprächs nachvollziehen zu können, hatte ich die Möglichkeit, bei einem Facharzt für Anästhesiologie zu hospitieren und 15 Aufklärungsgespräche zur Anästhesie im Orthopädischen Bereich zu beobachten. Ziel dieses Interviews und der Beobachtungen war es, ein grundlegendes Verständnis zu den aktuellen Abläufen in der medizinischen Aufklärung zu schaffen. Unter anderem ging es darum, fachliche Abläufe nachzuvollziehen und zu identifizieren, wo aktuelle Probleme oder Herausforderungen liegen und wo digitale Anwendungen eine Unterstützung bieten können.

Um die Gespräche strukturiert dokumentieren zu können, erstellte ich im Voraus ein Raster, welches ich während der Gespräche ausfüllen konnte.

In den Zeiträumen zwischen den Patient:innen-Gesprächen hatte ich zudem die Möglichkeit, mit dem Facharzt über Fragen aus meinem Interviewleitfaden zu sprechen.

05_interview1-1.png05_interview1-1.png

05_interview1.pdf PDF 05_interview1.pdf

05_transkript-interview1.pdf PDF 05_transkript-interview1.pdf

Interview Pflegefachkraft

Um die Perspektiven auf die medizinische Aufklärung zu vervollständigen, führte ich ein weiteres Interview mit einer Pflegefachperson durch. Das Interview fand am 27. Oktober per Telefon statt. Die Person ist bereits in Rente, arbeitete aber viele Jahre lang im Krankenhaus in Vilsbiburg in der Abteilung der Inneren Medizin. Zudem hatte sie in der Vergangenheit selbst mehrere medizinische Eingriffe und somit auch Aufklärungsgespräche. Ziel dieses Interviews war es, Informationen aus Sicht einer Pflegefachperson zu erhalten, die vermutlich etwas näher an den Patient:innen ist, als Ärzt:innen, aber dennoch ein gewisses medizinisches Fachwissen mitbringt.

05_interview2.pdf PDF 05_interview2.pdf

05_transkript-interview2.pdf PDF 05_transkript-interview2.pdf

Forschungsfrage

Die Forschungsfrage basiert auf einer ausführlichen Recherche zur Barrierefreiheit, besonders im Web-Design, zur medizinischen Aufklärung sowie zur Nachsorge.

→ „Wie kann eine barrierefreie, nutzerzentrierte Anwendung Patient:innen bei der medizinischen Aufklärung und darüber hinaus verständlich und inklusiv informieren und ihre selbstbestimmte Entscheidung unter Berücksichtigung individueller Bedürfnisse fördern?”

05_forschungsfrage-1.png05_forschungsfrage-1.png
05_forschungsfrage-2.png05_forschungsfrage-2.png
05_forschungsfrage-3.png05_forschungsfrage-3.png
05_forschungsfrage-4.png05_forschungsfrage-4.png

Referenzprojekte

Teil der Recherche war die Analyse bereits bestehender Anwendungen aus ähnlichen Be­reichen. Dieser Schritt war besonders hilfreich, um herauszufinden, welche Aspekte gut funktionieren und welche Funktionen möglicherweise Verbesserungspotenzial aufweisen.

05_referenzprojekt.png05_referenzprojekt.png

Recherche Barrierefreiheit

Um die Anwendung für eine breite Zielgruppe zugänglich zu gestalten, erstellte ich auf Basis der Barrierefreiheits-Recherche eine Checkliste, die alle für mein Projekt entscheidende Aspekte beinhaltet. So kann während des Designprozesses Rücksicht auf die Barrierefreiheit genommen werden.

05_barrierefreiheits-checkliste.png05_barrierefreiheits-checkliste.png

06 | Zielgruppenanalyse

Bei der Analyse der Nutzungsgruppen habe ich verschiedene Methoden verwendet, um die Anwendung an die Bedürfnisse und Anforderungen der Zielgruppe auszurichten und die Anwendung ­nutzungsorientiert zu konzipieren.

Jobs-to-be-Done

Um die Nutzungsgruppen und Anforderungen meines Projekts zu definieren, habe ich zunächst das Jobs-to-be-Done Framework von Anthony W. Ulwick genutzt. Dabei wird auf der ersten Ebene definiert, wer die Nutzer:innen des Produkts oder der Anwendung sind. Im zweiten Schritt werden deren Aufgaben festgelegt. Als letzte Ebene stellt das Modell die gewünschten und möglichen Ergebnisse der Aufgaben dar.

06_jobstobedone-1.png06_jobstobedone-1.png
06_jobstobedone-2.png06_jobstobedone-2.png
06_jobstobedone-3.png06_jobstobedone-3.png

Nutzungsgruppen

Im nächsten Schritt definiere ich die beiden Hauptnutzungsgruppen der Anwendung: So fokussiert sich meine App primär auf die Patient:innen, sekundär auf die Ärzt:innen und das medizinische Pflegepersonal. Auch die IT-Abteilung, das Qualitätsmanagement, die Klinikverwaltung und das Krankenhausmanagement zähle ich zu der sekundären Zielgruppe.

06_nutzungsgruppen-1.png06_nutzungsgruppen-1.png
06_nutzungsgruppen-2.png06_nutzungsgruppen-2.png

Personas

Um die Zielgruppe klarer einordnen zu können, erstellte ich im Anschluss vier Personas, wobei Persona 1–3 Patient:innen darstellen und Persona 4 die Ärzt:innenseite repräsentiert. Dabei stütze ich mich zunächst auf das Archetypen Modell nach C. G. Jung und definierte anschließend konkrete Personas.

06_archetypen.png06_archetypen.png
06_persona-1.png06_persona-1.png
06_persona-2.png06_persona-2.png
06_persona-3.png06_persona-3.png
06_persona-4.png06_persona-4.png

07 | User Journeys, User Flows und User Stories

User Journeys

Zunächst entwickelte ich jeweils eine allgemeine User Journey für die primäre und sekundäre Nutzungsgruppe.

Im Anschluss erstellte ich für jede Persona eine detaillierte User Journey.

07_user-journey-1.png07_user-journey-1.png
07_user-journey-2.png07_user-journey-2.png
07_user-journey-3.png07_user-journey-3.png
07_user-journey-4.png07_user-journey-4.png

User Flows

Um klare User Stories definieren zu können, erstellte ich je Persona beziehungsweise je User Journey einen User Flow, der nochmal detaillierter die einzelnen Handlungen und das Vorgehen der Persona zeigt.

07_user-flow-1.png07_user-flow-1.png
07_user-flow-2.png07_user-flow-2.png
07_user-flow-3.png07_user-flow-3.png
07_user-flow-4.png07_user-flow-4.png

User Stories

Die User Stories sind in die zwei Hauptnutzungsgruppen der Patient:innen und Ärzt:innen/Admins gegliedert. Die ersten User Stories folgen hauptsächlich Persona 1 und werden durch Aspekte und Funktionen der Persona 2 und 3 ergänzt.

07_user stories-1.png07_user stories-1.png
07_user stories-2.png07_user stories-2.png

08 | Funktionsbeschreibung

Auch bei der Funktionsbeschreibung behalte ich die Trennung zwischen Patient:innen- und Ärzt:innen-Seite bei. So erkennt man bereits hier den Ansatz, dass die App je nach Log-In unterschiedliche rollenbasierte Funktionen bereitstellt.

Um die Funktionen entsprechend eingrenzen und priorisieren zu können, habe ich die User Stories nach Priorität und Aufwand bewertet und so drei Kategorien definiert, welche Stories umgesetzt werden müssen, welche umgesetzt werden sollten und welche bei Zeitmangel weggelassen werden können.

→ siehe Abbildung User Stories (grün = muss, gelb = sollte, orange = kann)

08_funktionsbeschreibung.png08_funktionsbeschreibung.png

09 | Wireframes

Zunächst recherchierte ich Navigationsmöglichkeiten, um ein Bild davon zu bekommen, welche Art sich für mein Projekt am besten eignet. Ich entschied mich zunächst dazu, die Wireframes mit einer klassischen Side-Navigation und einer Kombination aus Side- und Top-Navigation umzusetzen.

09_nav-möglichkeiten-1.png09_nav-möglichkeiten-1.png

Im Anschluss der ersten Skizzen befasste ich mich ausführlich mit der Konzeption des Dashboards, welches sich flexibel an die Nutzer:innen anpassen sollte, eine gewisse Empathie erzeugen sollte und in jedem Behandlungsschritt die entsprechenden Informationen bieten sollte

09_dashboard-konzept-1.png09_dashboard-konzept-1.png

Als nächstes erfolgte die Konzeption der ersten Tabletbasierten Wireframes. Dabei stützte ich mich auf die User Journeys, User Flows und User Stories sowie die Funktionsbeschreibung, um die ersten Screens und Abläufe umzusetzen. Hier arbeitete ich noch mit einer Tablet-Auflösung von 1366 × 1024 px. Dennoch recherchierte ich erneut dazu, welche Geräte meine primäre Nutzungsgruppe hauptsächlich benutzt. Außerdem erstellte ich eine örtliche User Journey, um die Nutzung der verschiedenen Gerätetypen einschätzen zu können. Daraufhin entschied ich mich, auf ein mobiles Format von 402 × 874 px zu wechseln.

09_örtliche-user-journey.png09_örtliche-user-journey.png

09_wireframes-user-journey-1.1-1.png09_wireframes-user-journey-1.1-1.png
09_wireframes-user-journey-1.1.png09_wireframes-user-journey-1.1.png
09_wireframes-user-journey-4.2.png09_wireframes-user-journey-4.2.png
09_wireframes-user-journey-4.1.png09_wireframes-user-journey-4.1.png

10 | Prototyping und Click-Through

Nachdem ich alle Screens für die erste und vierte User Journey sowie einige Ergänzungen aus der zweiten und dritten User Journey erstellt habe, habe ich sie in Figma als klickbaren Prototypen umgesetzt. Mit diesem ersten Prototyp führte ich ein erstes User Testing durch, um fehlende Funktionen oder fachliche Unstimmigkeiten herauszufinden. Im nächsten Schritt habe ich alle fehlenden Elemente in den Prototypen der primären Nutzungsgruppe integriert. Da der Fokus der App auf den Patient:innen liegt, habe ich den Prototyp der Ärzt:innen nicht erneut verbessert. Das Feedback und Änderungsvorschläge dazu habe ich in Kommentare im Figma-File verfasst. Diese werden später in der Designphase im finalen Design beachtet und umgesetzt.

11 | Moodboards

Moodboard 1

Das erste Moodboard arbeitet mit hohen Kontrasten, flächigen Elementen und runden Ecken. Die Farbgebung besteht aus Schwarz-Weiß und jeweils einer kräftigen Akzentfarbe. Dabei wirkt das Design technisch und professionell, dafür aber weniger empathisch und eher kühl.

11_moodboard-1.png11_moodboard-1.png

Moodboard 2

Das zweite Moodboard ist eine Abwandlung vom ersten Moodboard, verwendet aber wärmere, leichtere Farben und wirkt demnach freundlicher und etwas verspielter.

11_moodboard-2.png11_moodboard-2.png

Moodboard 3

Das dritte Moodboard basiert auf einer kühlen, hellen Farbpalette und leuchtenden Akzentfarben. Die Elemente sind dabei teilweise durchsichtig und teilweise vollflächig, sodass ein Glass-Morphism Effekt entsteht. Dieses Moodboard vermittelt eine gewisse Professionalität, Ruhe und Seriosität, kann aber gleichzeitig auch kühl und wenig empathisch wirken.

11_moodboard-3.png11_moodboard-3.png

Moodboard 4

Das vierte Moodboard ist im Dark-Mode gehalten und verwendet metallisch-erscheinende Akzentfarben, wodurch ein sehr technisches und funktionales Erscheinungsbild geschaffen wird.

11_moodboard-4.png11_moodboard-4.png

Moodboard Illustrationen

Der 3D-Stil arbeitet mit leicht plastischen Darstellungen von Organen und der Anatomie. Dieser Stil eignet sich gut für komplexe anatomische oder prozedurale Erklärungen, kann aber schnell zu technisch oder komplex erscheinen. Der zweite Stil verwendet einfache, zweidimensionale Darstellungen, welche durch ihren reduzierten Stil besonders gut für vereinfachte Darstellungen geeignet sind, jedoch weniger für komplexe Erklärungen. Der dritte Stil fokussiert sich auf eine eher symbolhafte Darstellung von Körperteilen, Organen oder Abläufen. Dabei liegt der Fokus auf der Informationsdarstellung und weniger auf der realitätsgetreuen Abbildung.

11_moodboard-illus.png11_moodboard-illus.png

12 | Designvarianten

Auf Basis der Moodboards erstellte ich verschiedene Designvarianten, die unterschiedliche Stile und Darstellungsweisen zeigen.

12_designvariante-v1.1.png12_designvariante-v1.1.png
12_designvariante-v1.2.png12_designvariante-v1.2.png
12_designvariante-v1.3.png12_designvariante-v1.3.png

Im Anschluss entschied ich mich, mit Variante eins und drei weiterzumachen, wobei ich beide Varianten im Light-Mode kombinieren, Farben reduzieren und die Illustrationen möglichst detailliert halten wollte. Im Prozess probierte ich viele Farbvarianten aus, führte Tests hinsichtlich der Barrierefreiheit durch und reduzierte mich zunächst auf zwei neue Designvarianten.

12_designvariante-v2.1.png12_designvariante-v2.1.png
12_designvariante-v2.2.png12_designvariante-v2.2.png

Im Anschluss habe ich mich für die erste (neue) Designvariante entschieden und diese etwas verfeinert. Um eine geeignete Schriftart zu wählen, habe ich diese Variante mit verschiedenen Schriftarten getestet, wobei ich zunächst die „Atkinson Hyperlegible Next” gewählt habe, um Rücksicht auf die Barrierefreiheit der Texte zu nehmen. In der späten Prototyping-Phase stellte sich jedoch heraus, dass die Schrift nicht nativ in Figma eingebettet ist und somit an anderen Geräten nicht vollständig funktioniert. Folglich führte ich erneute Typografie-Tests mit Schriften durch, die in Figma verfügbar sind, um eine reibungslose Funktionalität sicherzustellen. Hierbei entschied ich mich für die Schriftart „Nunito Sans”.

12_typotests.png12_typotests.png

Anschließend habe ich diese Variante angepasst, den Farbton kräftiger gewählt und Abstände optimiert. Auch den Illustrationsstil habe ich verfeinert und Schattierungen der beiden Farben Türkis und Orange hinzugefügt.

12_finales-design.png12_finales-design.png

13 | User Testings

Der Prototyp wurde anhand von User Testings weiter optimiert. Bereits in der frühen Wireframing-Phase hatte ich am 5. Dezember die Möglichkeit, den Prototypen mit einem Chefarzt der Anästhesiologie zu besprechen. Dieses Testing diente mir hauptsächlich dazu, fachliche Unstimmigkeiten, fehlerhafte Annahmen und konzeptionelle Lücken zu finden. Weniger Fokus war hier die reine Funktionalität und Nutzererfahrung der App.

Nachdem das Design der App größtenteils fertig war, führte ich weitere User Testings durch. Zunächst ließ ich am 2. Januar die App von zwei Kommilitoninnen testen, was mir besonders in Aspekten der Usability hilfreich war. Zusätzlich war dieses User Testing besonders hilfreich in Bezug auf die Funktionalität des Prototypen. So musste ich einige Verknüpfungen neu erstellen und die Schriftart wechseln, da sich im Testing herausstellte, dass die Schriftart Atkinson Hyperlegible Next auf anderen Geräten nicht vollständig geladen werden konnte.

Im Anschluss, am 7. Januar, habe ich die verbesserte App mit einer Assistenzärztin der Unfallchirurgie und Orthopädie testen lassen, was mir auf der einen Seite aufschlussreich bezüglich Funktionalität der App war, auf der anderen Seite eine wertvolle Perspektive in den orthopädischen Bereich meiner Anwendung gegeben hat.

Da mir der Anästhesist des ersten User Testings angeboten hatte, mich im späteren Projektverlauf erneut zu melden, habe ich mit ihm am 16. Januar ebenfalls noch ein User Testing durchgeführt. Hier ergaben sich nur noch kleine Veränderungen, wobei große fachliche Unstimmigkeiten oder Fehler bereits durch die vorherigen User Testings erfolgreich behoben werden konnten.

Leitfaden User Testing 05.12.2025

User-Testing-BA-2.pdf PDF User-Testing-BA-2.pdf

Leitfaden User Testing 02.01.2026, 07.02.2026 und 16.02.2026

UserTesting - 07.01..pdf PDF UserTesting - 07.01..pdf

14 | Finales Design

Für das finale Design habe ich mich für die erste der beiden neuen Varianten entschieden.

Das finale Ergebnis des Projekts ist der Figma-Prototyp der App „MedExplain”. Die App bietet für die Patient:innen eine umfassende Begleitung und Unterstützung im gesamten Aufklärungs- und Behandlungsprozess, sowie in der Nachsorge. Dabei basiert der Prototyp auf dem Beispiel einer geplanten orthopädischen Knie-Totalendoprothese und dem zugehörigen Anästhesieverfahren. Die Patient:innen werden in einem persönlich angepassten Informationsstil über ihren Eingriff informiert, können Fragebögen und Unterlagen einfach digital hochladen und haben über ein persönliches Dashboard immer eine Übersicht über ihre Behandlung. Dabei sind die Informationen je nach gewählter Informationstiefe und -stil verfügbar. Die komplexen medizinischen Inhalte werden dabei visuell, sprachlich und teilweise auditiv aufbereitet. Außerdem sind Informationen in Leichter Sprache oder weiteren Sprachen verfügbar, um ein erhöhtes Verständnis und mehr Sicherheit im Aufklärungsprozess zu ermöglichen. Nach dem Aufklärungsgespräch haben die Patient:innen die Möglichkeit, Rückfragen zu stellen oder sich die Inhalte des Gesprächs erneut anzusehen. Nach dem stattgefundenen Eingriff bietet die App Unterstützung in der Nachsorge, indem Informationen zum korrekten Verhalten nach dem Eingriff verfügbar sind. Außerdem kann täglich eine Verlaufskontrolle über die App stattfinden, sodass Abweichungen zum idealen Genesungsverlauf schnell erkannt werden und die Patient:innen frühzeitig reagieren können.

Des Weiteren stellt die App einen separaten Zugang für die Ärzt:innen, das medizinische Pflegepersonal beziehungsweise weitere Admin-Personen bereit. Dabei liegt der Fokus auf der Planung von Aufklärungsgesprächen sowie der Verwaltung der Patient:innen und ihrer Konten. Die Ärzt:innen haben Zugriff auf ein übersichtliches Dashboard mit allen relevanten Informationen für den aktuellen Tag. Zudem können sie auf die einzelnen Patient:innendaten zugreifen und diese bereits vor dem Gespräch nachlesen. Je nach Nutzungsrechten können verschiedene Aufklärungsbögen geöffnet, teilweise geändert oder mit wichtigen, persönlichen Kommentaren ergänzt werden. Ein Aufklärungs-Modus unterstützt direkt im Aufklärungsgespräch und bietet hauptsächlich visuelle Materialien, um das Verständnis seitens der Patient:innen weiter zu fördern.

Auszug aus dem Design:

14_patientinnen.pdf PDF 14_patientinnen.pdf

14_ärztinnen.pdf PDF 14_ärztinnen.pdf

14_aufklärungsmodus.pdf PDF 14_aufklärungsmodus.pdf

15 | Prototyping und Links

Link zum finalen Prototyp (Patient:innen):

  • Flow „DE-med1” → deutsch, medizinische Fachsprache, Sie-Ansprache

  • Flow „EN-detail2” → englisch, mit der Option in die deutsche Leichte Sprache zu wechseln, detaillierte Information, Du-Ansprache

  • Flow „LS-detail2” → deutsche Leichte Sprache, mit der Option auf Englisch zu wechseln, detaillierte Information, Du-Ansprache

https://www.figma.com/proto/aHJAQ4ikmADAlOlnc6qzRt/Design-File?page-id=137%3A1895&node-id=137-1896&p=f&viewport=376%2C210%2C0.08&t=YGS6HRJ3VThswn4x-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=137%3A1896&show-proto-sidebar=1

Link zum finalen Prototyp (Ärzt:innen):

  • Flow „ärzt:innen” → Ärzt:innen-Perspektive

  • Flow „aufklärungsmodus” → Tabletbasierter Aufklärungsmodus der Ärzt:innen

https://www.figma.com/proto/aHJAQ4ikmADAlOlnc6qzRt/Design-File?page-id=905%3A18272&node-id=905-18273&p=f&viewport=327%2C276%2C0.05&t=KC6BMcEpRSOPeB48-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=905%3A18273&show-proto-sidebar=1

16 | Styleguide

Farben

Als Primärfarben wählte ich ein gedämpftes Weiß sowie ein sehr dunkles Grau. Ergänzt wird die Anwendung durch acht zusätzliche Graustufen.

Als Akzentfarbe nutze ich ein Türkis, das die Aufmerksamkeit der Nutzer:innen gezielt lenkt. Auch hier habe ich in meinem Design-System fünf Abstufungen definiert.

Bei den Illustrationen sowie den Animationen verwende ich eine ergänzende Farbpalette aus Abstufungen der Farbe Orange.

Für einen geplanten Dark-Mode sind die beiden Akzentfarben etwas angepasst und die Sättigung abgeschwächt.

16_farben-1.png16_farben-1.png
16_farben-2.png16_farben-2.png

Typografie

Für die Typografie entschied ich mich zunächst für die Atkinson Hyperlegible Next. Sie ist optimiert, um die Lesbarkeit für sehbehinderte Personen zu verbessern sowie das Leseverständnis zu fördern.

Im Prototyping bin ich jedoch auf das Problem gestoßen, dass die Schrift auf anderen Geräten nicht vollständig lädt und von Figma mit der Schriftart Inter ersetzt wird. Demnach änderte ich meine Schrift auf Nunito Sans.

16_typography.png16_typography.png

Raster

Das Layout der App richtet sich nach einem 12-spaltigen Raster. Für die mobile Patient:innen-App wählte ich für die Bildschirmbreite von 393px ein sechsspaltiges Raster. Dabei betragen sowohl Padding als auch Gutter 16px. Für die Desktop- und Tablet-Version der Ärzt:innen erweiterte ich die Anzahl der Spalten auf 12. Dabei passte ich die Margins jeweils an und erhöhte diesen bei Tablet auf 24px und bei Desktop auf 32px.

16_raster.png16_raster.png

Icons

Alle benötigten Icons sind in einem eigenen, reduzierten Stil erstellt. Diese sind einfarbig gehalten und stehen mir in einer 1px Linienstärke, einer 2px Linienstärke sowie in gefüllter Form zur Verfügung.

Die Icons werden im Design über das „Master-Icon” eingefügt. So habe ich die Möglichkeit, die Icons flexibel in verschiedenen Größen zu verwenden. Dabei habe ich vier Größen festgelegt: extra-small mit 12×12px, small mit 16×16px, medium mit 24×24px und large mit 32 ×32px.

16_icons.png16_icons.png
16_master-icon.png16_master-icon.png

Illustrationen

Medizinische Illustrationen und Animationen sollen das Verständnis der Nutzer:innen erleichtern. Die interaktiven Illustrationen zeigen Anatomie und Krankheiten sowie Prozesse und Behandlungen in vereinfachter Form darstellen.

Um die App persönlicher und zugänglicher zu gestalten, ergänzte ich weitere Illustrationen, die standardmäßig im Onboarding-Prozess vorkommen. Wenn Patient:innen im Informations-Stil „freundlich und persönlich” informiert werden möchten, wird die App durch Illustrationen auf dem Dashboard sowie auf weiteren Unterseiten ergänzt.

16_med-illustrationen.png16_med-illustrationen.png
16_illustrationen.png16_illustrationen.png

Components

Die Components sind in einem separaten File angelegt. Dieser ist klar gegliedert, sodass ich im Designprozess schnell die benötigten Elemente finden kann.

Der „Design-System” File in 32 Pages aufgeteilt:

  • colors, type, icons, logo, utility components

  • button, dropdown, search & filter, switch, date & time picker, text input

  • navigation, app bars, tabs, menu

  • badges, snackbar

  • cards, chips, label & hints

  • dialog, sheets

  • slider, divider, loading & progress, radio & checkbox, lists & tables, hover-items (desktop)

  • animations, interactive illustrations, illustrations, complex components

Link zum „Design-System“ File:

https://www.figma.com/design/o0EgOoYco3au48KLQLjWnI/Design-System?node-id=530-2&t=BX3BfkyGHpdhzrtj-1

16_design-system.png16_design-system.png

Name und Logo

Der Name der App setzt sich aus dem Englischen „Medical” und „Explain” zusammen, wobei das „Med.” in einer Kurzform verwendet wird, sodass der Name „MedExplain” entsteht. Das Logo greift das „M” des Namen auf und wandelt es in eine Fläche um, die an ein Blatt Papier erinnert. So wird die ursprüngliche, papierbasierte Aufklärungspraxis aufgegriffen und in die digitale Ebene erweitert.

16_logo.png16_logo.png

17 | Screencasts

Screencast Flow 1 

→ Deutsch, medizinische Fachsprache, Sie-Ansprache

Screencast Flow 2

→ Englisch, mit der Option in die deutsche Leichte Sprache zu wechseln, detaillierte Informationen, Du-Ansprache

Screencast Flow 3

→ Deutsche Leichte Sprache, mit der Option auf Englisch zu wechseln, detaillierte Informationen, Du-Ansprache

Screencast Flow 4

→ Ärzt:innen-Perspektive

Screencast Flow 5

→ Tabletbasierter Aufklärungsmodus der Ärzt:innen

18 | Präsentationsvideo

19 | Ausstellungssituation

Um die Aufmerksamkeit der Besucher:innen auf mein Projekt zu lenken, soll die Wand mit den aktuellen Aufklärungsbögen beklebt werden, wobei in der Mitte der Schriftzug „Was unterschreibe ich eigentlich?” geplottet werden soll. Im Mittelpunkt der Ausstellungssituation befindet sich ein Handy mit der App, welches auf einer Stele ausgestellt wird. Daneben ist ein Bildschirm platziert, auf welchem das Präsentationsvideo des Projekts zu sehen ist. Zusätzlich ergänzt ein Plakat den Aufbau, welcher kurz die wichtigsten Elemente und Funktionen des Projekts abbildet.

19_ausstellungssituation.png19_ausstellungssituation.png
ausstellung_1.jpegausstellung_1.jpeg
ausstellung_2.jpegausstellung_2.jpeg
ausstellung_3.jpegausstellung_3.jpeg

20 | Thesis

bachelorarbeit_SophieDoma_compressed.pdf PDF bachelorarbeit_SophieDoma_compressed.pdf

21 | Kolloquium

Bachelorpräsentation_SophieDoma.pdf PDF Bachelorpräsentation_SophieDoma.pdf

_________________________________________

Exposé

exposé_fin.pdf PDF exposé_fin.pdf

Kick-Off-Präsentation

Kick-Off.pdf PDF Kick-Off.pdf

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Betreuer_in

foto: Prof. Norbert Diedrich

Zugehöriger Workspace

BA Seminar (Norbert)

Entstehungszeitraum

Wintersemester 2025 / 2026