Panikel

Deine App bei Ängsten und Panik.

Immer mehr Kinder und Jugendliche leiden unter psychischen Erkrankungen. Allerdings mangelt es an Mental-Health-Apps speziell für diese Zielgruppe.
Im Rahmen meiner Bachelorarbeit habe ich genau dafür einen App-Prototypen entworfen.

Schwarze Zahl 1 in einem türkisfarbenen Kreis

Research

Zielgruppe + Bedürfnisse
Analyse ähnlicher Projekte
Methoden der Verhaltenstherapie

Schwarze Zahl 2 in einem türkisfarbenen Kreis

Concept

Konzeptentwicklung
Personas

Schwarze Zahl 3 in einem türkisfarbenen Kreis

Prototyping

User Flow
Informationsarchitektur
Wireframes
Testing

Schwarze Zahl 4 in einem türkisfarbenen Kreis

Design

UI
Branding

Personas

Leidet unter Angstattacken. Sie freut sich auf ihre Therapie, möchte aber schon vorher aktiv etwas gegen ihre Angst tun. Deshalb lädt sie Panikel herunter, um erste Methoden kennenzulernen, die sie im Alltag begleiten und unterstützen.

Tabea, 9 Jahre

Ein hellblauer Kreis auf schwarzem Hintergrund.

Kämpft mit starker Prüfungsangst. Eine Therapie möchte er vorerst nicht beginnen – er will es alleine schaffen. Als er im Schulbus von Panikel erfährt, wird er neugierig und lädt die App zuhause direkt herunter, um praktische Hilfen gegen seine Prüfungsangst zu entdecken.

Roberto, 13 Jahre

Hellblauer Kreis auf schwarzem Hintergrund

Möchte trotz der Trennung ein guter Vater sein und seine Tochter Tabea bei ihren Ängsten unterstützen. Panikel sieht er als wertvolle Hilfe vor Therapiebeginn – besonders die Infos zu Ängsten und die Tagebuchfunktion. So kann Tabea ihre Gedanken festhalten und mit Zustimmung der Therapeutin teilen. Für Dirk bedeutet die App Unterstützung für Tabea und Sicherheit in seiner Vaterrolle.

Dirk, 43 Jahre

Ein hellblauer Kreis auf schwarzem Hintergrund.

Ist als Therapeutin von Panikel bereits überzeugt. Besonders die Tagebuchfunktion sieht sie als wertvolle Ergänzung ihrer Arbeit: Auch weniger gesprächige Patientinnen können so ihre Gedanken und Gefühle dokumentieren, was ihr einen authentischen Einblick in deren Lebenswelten gibt.

Michelle, 39 Jahre

Ein hellblauer Kreis auf schwarzem Hintergrund

Wireframes

Smartphone mit App zur Auswahl von Gefühlen, neun quadratische Auswahlfelder, Text 'Welche Gefühle hattest du heute?', Navigation mit 'zurück' und 'weiter'.
Schwarz-weiße Darstellung einer Smartphone-App mit Auswahlfeld 'Kopfbedeckung' und Schaltfläche 'jetzt einlösen 30'.
Schwarz-weiße Darstellung eines Smartphone-Bildschirms mit fünf quadratischen Symbolen und den Beschriftungen 'Tagebuch', 'Wissenswertes', 'Stärken', 'Dankbar' und 'eigene Liste'.
Schwarz-weißer Smartphone Wireframe mit Notfall-Checkbox, zwei quadratischen Buttons mit den Beschriftungen 'Anrufen' und 'Erste Hilfe' und Platzhaltertext dazwischen.
Smartphone Wireframe mit schwarzem Bildschirm zeigt Textblock mit Text, darunter Auswahl von sechs Farbpunkten und Buttons 'zurück' und 'weiter'.

Die ABeeZee-Schrift ist sehr gut geeignet bei Dyslexie und ermöglicht betroffenen Usern eine barrierefreie User-Experience.

Farbpalette mit sechs Farbfeldern in den Farben Pink (#DC0073), Hellgelb (#FFDA99), Helllila (#CFBFF7), Dunkelblau (#48639C), Hellgrün (#BCF5CD), Türkis (#00A6A6) und Hellblau (#9AC4F8).
Mehrere farbige Piktogramme, darunter Lupe, Gehirn, Buch, Telefonhörer, Pluszeichen, Muskelarm, Medaille, Checkliste, Erste-Hilfe-Kasten, Trophäe, Haus, Hand mit Herz, lachendes Gesicht, Herz, Gruppe von Personen, Fragezeichen.

Icons

Notfall

Während einer Panik- oder Angstattacke ist schnelle Hilfe nötig. Mit dem Notfall-Button auf der Startseite wird können die User sich selbst helfen. Der Notfall-Bereich lässt sich individuell anpassen: Ob ein schneller Anruf einer von drei selbst hinterlegten Nummern von eigenen Vertrauenspersonwn oder die Nummer Gegen Kummer.
Im Erste-Hilfe-Koffer kann alles hinterlegt werden, was in einer akuten Angst hilfreich sein kann: Bilder, Videos oder einfach nur ein paar mutmachende Worte. Individuelle Lösungen für individuelle Bedürfnisse.

Smartphone mit geöffneter Notfall-App, zeigt Text 'Notfall', Fragen zur Hilfe, Symbole für Anrufen und Erste Hilfe auf blau-lila Verlaufshintergrund.

Tagebuch

Tagebuch zu führen ist eine bewährte Methode der Verhaltenstherapie und dient dazu Gedanken, Gefühle aber auch Gutes schriftlich festzuhalten.
Eine Auswahl an Gefühlen erleichtert es den Usern zu wissen, welche Gefühle sie gefühlt hatten. Mithilfe der Aufnahme-Funktion können die Einträge auch eingesprochen werden und erleichtert den Umgang für alle, die sich nicht sicher im Schreiben fühlen.
Um sich nicht hilflos ausgeliefert oder allein zu fühlen, können pssitive Erlebnisse mit anderen App-Usern geteilt werden.

Smartphone mit einer App auf dem Bildschirm, die fragt "Welche Gefühle hattest du heute?" und bietet sechs emoticon-ähnliche Bilder mit Gefühlsbegriffen wie Angst, Begeisterung, Depression, Ekel, Freude, Gleichmut, sowie Navigationsknöpfe "zurück" und "weiter".

Shop

Dran bleiben, zahlt sich aus. Um Usern in schweren Zeiten positive Erfahrungen zu bieten, können User entsprechend Erfolgspunkte sammeln. Diese Carrot Coins können sie im internen Shop gegen Features für ihr Panikel eintauschen und dieses so neu gestalten.
Gefällt der neue Look? Dann können User ihr Panikel als Sticker exportieren und in Messenger-Apps teilen.

Zwei Smartphones mit App-Oberfläche zur Gestaltung eines Hasenbilds, Auswahlmenü mit Farben, Brillen, Kopfbedeckungen und Specials

Usability Tests

Während der Entwicklung wurde der Prototyp immer wieder aufgrund von Feedback erfahrener UX-Designer oder aufgrund von Recherche, z. B. der Nielsen Norman Group, angepasst. Die eigentliche Testphase, bei der sich eine Schülerin durch den High-Fidelity-Prototypen klickte, bot direktes Feedback, z. B. dass es viel zu lesen gebe. Daraufhin wurden Texte gekürzt sowie in kleinere Abschnitte unterteilt.
Entscheidender waren die Beobachtungen: Die Testperson hatte an manchen Stellen Schwierigkeiten oder klickte sich anders als erwartet durch die App. Da sie nicht auf das Fragezeichen klickte, sah sie keine Tutorials und wusste daher nicht immer, was von ihr erwartet wurde. So wurde ein Pop-Up-Fenster eingebaut, welches nach dem Onboarding auf das Tutorial hinweist. Zudem nahm sie den entscheidenden Erste-Hilfe-Button erst nicht wahr. Dieser wurde nun durch Animationen auffälliger gestaltet. Die Möglichkeit mit Sound zu arbeiten, z. B. Texte vorlesen zu lassen, würde ebenfalls die Experience vereinfachen. Mit A/B-Tests konnte sie zudem aus verschiedenen Versionen die jeweils bessere Variante auswählen.

Weißer, flauschiger Hase mit langen Ohren, geschlossenen Augen, lächelndem Mund und rosa Wangenwirbeln.