CPR Training AR App

Problem

Zahllose Beispiele belegen, dass Kinder durch CPR Leben retten können. 2009 berichtete ABC News, dass Kinder ab 9 Jahren die Grundlagen der CPR erlernen können. Das bedeutet, dass junge Kinder CPR erlernen und durchführen können, aber aufgrund fehlender Lehrmethoden mussten wir eine digitale Lösung entwickeln.

Lösung

Wir haben uns entschieden, zwei verschiedene Apps zu designen: eine Oberfläche für den CPR-Lehrer, der ein Smartphone nutzt, und eine Oberfläche für die Kinder. In unserem Fall kamen wir auf die Idee, AR-Brillen für die Kinder zu verwenden. Die Oberfläche für die Kinder sollte also eine AR-Oberfläche sein.

Unser Prozess

• Vorbereitungsphase: Brainstorming, Personae, Paperprototyping, Moodboard
• Designphase: Wireframes, Digitale Prototypen
• Finalisierung: Storyboard, Film, Fazit

Brainstorming

Der allererste Schritt, als wir uns im Oktober 2020 trafen, war ein Brainstorming über das Thema und intensive Recherche zur CPR. Zu Beginn hatten wir viele Ideen, z.B. mehrere iPads für die Kinder, aber dann kam die Idee einer AR-Erfahrung auf. Mit solchen AR-Brillen wäre es möglich, das Training für die CPR-Technik durchzuführen, während die AR-Oberfläche dem Kind nützliche Informationen über sein Training geben könnte. Es war uns sehr wichtig, nur die wichtigsten Informationen auf dieser Oberfläche anzuzeigen. Für die Lehrer-Oberfläche mussten wir recherchieren, wie viele Drücke man in einem Zyklus machen sollte (30 Drücke), wie oft man eine Mund-zu-Mund-Beatmung durchführen sollte (2 Mal) und weitere Fakten zur CPR-Technik.

Personae

Der nächste Schritt war die Definition unserer Zielgruppe durch die Erstellung von Personae. Eine Persona symbolisiert einen Prototyp für eine Gruppe von Nutzern und hat persönliche Gewohnheiten, Eigenschaften und Nutzungsverhalten.

Auf der einen Seite gibt es Amy Average, ein typisches 13-jähriges Mädchen, extrovertiert, liebt die Schule wegen ihrer Freunde, aber nicht besonders motiviert. Sie repräsentiert eine unmotivierte Zielgruppe der Kinder. Dann gibt es Cooper Curious, einen supermotivierten Jungen, der lernen und besser werden möchte, aber introvertiert ist.

Auf der anderen Seite gibt es Holly Helpful, eine Ärztin mittleren Alters, sehr gut in CPR-Techniken, aber nicht besonders technikaffin. Und Arthur Ambitious, einen sehr jungen Lehrer, der ein Tech-Nerd ist, aber nicht so gut in CPR-Techniken.

Paperprototyping

Der nächste Schritt in unserem UX-Prozess war die Erstellung erster Interface-Ideen und ein Gefühl dafür zu bekommen, wie Konzept und Layout unserer App aussehen könnten. Das Zeichnen dieser rohen Skizzen auf Papier ist eine sehr effektive und schnelle Methode, um Ideen zu entwickeln, bevor man zu früh in einem Prototyping-Tool mit dem Design beginnt.

Wir begannen mit dem Skizzieren und der Entwicklung einiger Ideen. Im ersten Bild sehen Sie unsere ersten Ideen, also rohe Skizzen und einige Layout-Ideen. Das zweite Bild zeigt unsere finalen Paperprototypes für die AR-App und das dritte unsere finale Idee für die Lehrer-App.

Moodboard

Der letzte Schritt in der Vorbereitungsphase war die Erstellung eines Moodboards. Ein Moodboard ist ein sehr wichtiges Werkzeug in Designprozessen. Es hilft, einen Eindruck davon zu bekommen, wie das finale Projekt aussehen wird.

In unserem Fall mussten wir drei verschiedene Moodboards erstellen: eines nur mit Adjektiven, eines mit allgemeinen Bildern wie Natur, Architektur etc. und eines nur mit User Interfaces. Mit Tools wie Dribbble und designinspiration.com fanden wir einige großartige Beispielbilder.

Wireframes

Der erste Schritt in der Designphase war die Erstellung von Wireframes! Wireframes sind ebenfalls Skizzen, aber viel präziser als rohe Paperprototypes. Nach dem Erstellen unserer Paperprototypes erhielten wir Feedback und änderten einige Details.

Ein wichtiger Teil war das Nachdenken über Interaktionen zwischen den verschiedenen Skizzen: "Welcher Button muss gedrückt werden, um zu diesem Screen zu kommen?". Wir verbanden die Screens miteinander und verwendeten orangefarbene Sticker für Links zu anderen Screens und grüne Sticker für Animationen auf demselben Screen.

Digitale Prototypen

Nachdem Inhalt und Interaktionen zwischen den Screens fertig waren, konnten wir digital werden! Digitale Prototypen sind eine sehr wichtige Form des Prototypings und realistisch genug, um die meisten Interface-Elemente zu testen.

Unter all den verschiedenen Prototyping-Tools wie Figma, Framer oder InVision wählten wir Adobe XD, weil die Zusammenarbeit mit Adobe Illustrator und Adobe Photoshop viel besser ist als mit anderen Tools.

Storyboard

Nachdem unsere digitalen und klickbaren Prototypen fertig waren, konnten wir mit den letzten Schritten weitermachen. Um die verschiedenen Anwendungsfälle unserer App zu erklären, mussten wir einen Film erstellen. Es ist immer sinnvoll, die Geschichte zu planen, bevor man filmt, also begannen wir mit einem Storyboard.

Ein Storyboard bietet einen schematischen Überblick über die Grundstruktur des Projekts. Die wichtigsten Fragen: Wann und wo spielt die Geschichte? In welcher Reihenfolge passieren die Ereignisse? Welche Screens wollen wir zeigen?

Finaler Film

Der allerletzte Schritt war das Filmen und Schneiden des finalen Films über unser Projekt. Der Film dauert nur zwei Minuten, also mussten wir sicherstellen, dass die Informationen schnell präsentiert werden. Wir erstellten unseren Film in Adobe Premiere Pro und die Animationen in Adobe After Effects.

Besonderer Dank an Jonas Fischer fürs Schauspielern, an Anja Happernagl fürs Ausleihen der Puppe und an die Evangelische Gemeinschaft Königsbrunn für die Räumlichkeiten!

Fazit

Wir haben während dieses Projekts viel gelernt! Wir begannen mit Brainstorming und danach waren wir wirklich begeistert. Das Zeichnen von Skizzen war ein wichtiger Teil des UX-Prozesses, bei dem wir anfangs etwas kämpften.

Aufgrund der Covid-19-Pandemie war dieses Projekt besonders. Zunächst begannen wir mit Präsenzunterricht, aber sobald der Shutdown Realität war, wechselten wir zu Online-Vorlesungen. Trotzdem war das Ergebnis sehr gut und interessant!