Panikel

Deine App bei Ängsten und Panik.

Im Rahmen meiner Bachelorarbeit entwickelter Prototyp zur Unterstützung bei Ängsten und Panik. Basierend auf Methoden der Verhaltenstherapie werden Kinder und Jugendliche auf den Weg zu ihrer mentalen Gesundheit begleitet.

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

Weißer Hase mit verschränkten Armen, schwarzem Hut mit blauen Flammenmuster, Sonnenbrille und goldener Kette mit Anhänger 'PANIKEL'.
Weißes Kaninchen mit großen Ohren, aufgerissenen Augen und offenem Mund, das überrascht wirkt.

Dein
Begleiter
in ein entspannteres Leben!

Drei weiße Dreiecke, die nach rechts zeigen, auf schwarzem Hintergrund

Personas

leider 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

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

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

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

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'.
Farbpalette mit sechs Farbfeldern in den Farben Pink (#DC0073), Hellgelb (#FFDA99), Helllila (#CFBFF7), Dunkelblau (#48639C), Hellgrün (#BCF5CD), Türkis (#00A6A6) und Hellblau (#9AC4F8).
Weißer Schriftzug 'ABeeZee' auf schwarzem Hintergrund in serifenloser Schrift.
Farbiges Symbol mit verschiedenen Icons wie Büroklammer, Bild, Pokal, Buch, Lupe, Muskel, Herz, Checkliste, Erste-Hilfe-Kasten, Hand, Telefon und Smiley in pastellfarbenen Umrissen.

Buttons & Icons

Notfall

Mit dem Notfall-Button auf der Startseite wird in einer akuten Panik-Situation schnell Hilfe geleistet. Der Notfall-Bereich lässt sich individuell anpassen. Im Bereich Anrufen können neben der Nummer Gegen Kummer auch drei eigene Kontaktdaten hinterlassen werden. 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. Genau so wie es entsprechend gebraucht wird.

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.
Positive Erlebnisse können mit anderen App-Usern geteilt werden. Das schafft eine Verbundenheit und zeigt, dass die User nicht alleine mit ihren Problemen sind.

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

Mit Ausüben der Funktionen der App können User entsprechend Punkte sammeln. Diese Carrot Coins können sie im internen Shop gegen Features für ihr Panikel eintauschen und so ihr Panikel individuell gestalten.
Gefällt der neue Look? Dann können User ihr Panikel als Sticker exportieren und in Messenger-Apps teilen.
Je mehr Features genutzt werden, desto mehr Badges können die User erhalten.

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 eines erfahrenen UX-Designers 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.
Doch entscheidender waren die Beobachtungen. Die Testperson hatte an manchen Stellen Schwierigkeiten oder klickte sich anders als erwartet durch die App. Da sie nicht ein mal auf das Fragezeichen klickte, sah sie keine Tutorials und wusste daher manchmal nicht, 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.