Dive - Entspannungsapp Design und Prototyping

Dive ist eine App, die gegen gegen den sogenannten Covid-Blues helfen soll. Wir haben als Studenten die Erfahrung gemacht, dass einige den Halt im Alltag verloren haben und nicht in der Lage waren, die kleinen Dinge wertzuschätzen. Daher haben wir Dive ins Leben gerufen. Mit Dive können Nutzer in einem Tagebuch kleine und schöne Momente festhalten.

Jeder Nutzer, kann täglich einen schönen Moment festhalten und kann auf eine Reise voller Erinnerungen gehen. Ziele können erreicht werden, Rückblicke angeschaut werden und vieles mehr. Gemeinsam wollten wir gegen den Covid-Blues ankämpfen, der sich in den Jahren 2020-2021 eingeschlichen hatte. Dafür haben wir in Figma sowohl einen Darkmode Prototyp, als auch in Lightmode Prototyp, ausgearbeitet.

Die Herausforderung

Die Coronapandemie hat viele negative Gefühle aufgebracht. Jede Person musste auf ihre eigene Art und Weise mit den unterschiedlichen Problemen kämpfen. Einige haben sich isoliert gefühlt, andere sogar depressiv und antriebslos.

Diese schwerwiegenden Probleme sind nicht einfach mit einer App zu lösen. Dabei braucht man tatkräftige Unterstützung. Dive sollte daher nicht als persönlicher Psychotherapeut in der Coronazeit dienen, sondern ein unterstützender Charakter haben. Eine gewisse Sicherheit und Spaß im Alltag geben.

Wir sind an diese Herausforderung durch folgende Schritte gegangen

• Zielgruppe identifizieren, Personas filtern und Zweck der App festlegen
• Papierprototyp ausarbeiten und Nutzertests durchführen
• Wireframe erstellen und weitere Nutzertests durchführen
• Farbpalette, Icons, Typografie und Illustrationen erstellen
• Ein Onboarding in der App einsetzen, damit Nutzer gleich von Beginn an einen leichten Umgang haben
• Light und Dark Mode einführen, damit die App in unterschiedlichen Umgebungen gut sichtbar ist

Diese Schritte haben wir in einem iterativen Prozess, ständig überarbeitet und Nutzerfeedback eingeholt.

Die Ausführung

Die Ausführung dieser Aufgaben erfolgte in unterschiedlichen Schritten. Jeder dieser Punkte wurde zeitlich nacheinander angegangen.

Personas identifizieren

Wir erstellten Entwürfe von Menschen, verschiedener Altersklassen und Personengruppen, mit Ihren Wünschen, Bedürfnissen und Kämpfen während des Lockdowns. Dadurch, dass wir alle durch diese schwere Zeit gehen mussten, konnten wir uns sehr gut in verschiedene Personas hineinversetzen.

Steve und Ella, die beide völlig unterschiedliche Leben führten. Während Ella eine junge Erwachsene ist, deren Leben festgefahren scheint, nachdem all ihre sozialen Aktivitäten und ihr Schulleben durch die Pandemie zum Erliegen gekommen sind, ist Steve Vater von zwei kleinen Kindern. Sein Leben ist von Stress und Überforderung gezeichnet und er scheint in einer Endlos-Schleife festzustecken. Jeder Tag ist eine Kopie des Vortages und durch diese Monotonie verliert er schleichend jegliches Interesse an seinem eigenen Leben.

Bei all den schlechten Dingen, die einem im Alltag passieren, insbesondere während einer Pandemie und wenig Ablenkung, ist es nicht einfach, sich auf die positiven Dinge zu konzentrieren. So entstand die Idee, eine App zu gestalten, in der man täglich kleine, schöne Momente festhalten kann. Wo der Benutzer seine Gedanken wie ein Tagebuch aufschreiben und alle an einem Ort speichern.

Paperprototyp

Da wir nun wussten, welches Problem wir beheben wollten, mussten wir noch einen Weg finden, wie wir es beheben könnten. Wir haben zusammengesetzt und angefangen zu scribbeln. Wir wollten unsere Ideen zunächst nicht austauschen, jeder sollte genug Raum haben, selbst kreativ zu werden und eigene Ideen für die visuelle Umsetzung unserer App zu finden.

Wir haben uns für einen horizontal gekritzelten Prototypen entschieden und mit der Crazy 8s-Taktik umgesetzt. Das ist eine schnelle Skizzierung, bei der jeder in acht Minuten acht verschiedene Ideen skizziert. Das funktionierte auch ganz gut, denn in relativ kurzer Zeit kamen viele verschiedene Ideen zustande. Aus diesen Ideen konnten wir dann unsere Kernfunktionen ableiten.

Wireframe

Wir begannen, zusammen statt alleine zu arbeiten und nutzten Figma, um unsere Gedanken auszudrücken. Figma ermöglicht es, gemeinsam an einem Prototyp zu arbeiten, sodass jeder live sieht, was die anderen machen.

Illustrationen und Farben

Für unsere Illustrationen haben wir uns für einen flachen Stil entschieden. Dieser passte am besten zu unseren individuellen, bisherigen Designstils und konnte gut in der App adaptiert werden.

Nach einiger Recherche und Brainstorming kamen wir auf das Thema Wasser, Meer, Ozean. Wasser gilt durch die gleichmäßige Bewegung in der Psychologie als beruhigend, ebenso wie die meditative Schwimmbewegung von Fischen. Da wir mit unserer App Ruhe, Achtsamkeit, Positivität und Ausgleich an den Nutzer vermitteln wollen, schien uns das Wasserthema als sehr passend.

Wir entschieden uns dazu für den Homescreen einen “See der Entspannung” zu kreieren, in dem Fische schwimmen. Sobald man auf einen Fisch tippt, erhält man täglich einen positiven Spruch bzw. Zitat. Wir haben Blubberblasen benutzt, in denen der User täglich drei Ziele hineinschreiben kann. Wenn ein Ziel erreicht ist, platzt die Blase und schafft Raum für eine neue Blase. Damit unsere User ihre Entwicklung sehen können, haben wir eine Art ,,Reisetagebuch’’ geschaffen. Auf dem Reiter ,,Reise’’ erkennt man das Meer und eine Reisekarte. Werden neue Beiträge hinzugefügt, erscheinen neue Inseln, die die Strecke der Reise visualisieren sollen.

Der aktuelle Tag wird in Form eines Bootes angezeigt und ein Mal im Monat taucht eine Flaschenpost auf dem Reise-Screen auf. Die Flaschenpost soll zeigen, dass ein neues Video aus den letzten hochgeladenen Beiträgen zusammengeschnitten wurde. Das Video soll ein Zusammenschnitt auf schönen Erinnerungen, mit Texten, Bilder, Quotes und Musik sein.

Onboarding

Um unser Onboarding persönlicher wirken zu lassen, entschieden wir uns dazu kleine selbsterstellte Grafiken einer Taucherin einzufügen. Diese soll dem Nutzer das Gefühl geben selbst in die App einzutauchen und persönlich herumgeführt zu werden. Statt die gleichen Screens wie in der App zu präsentieren designten wir kleine Graphiken welche die Funktion der finalen Screens wiederspigeln, jedoch verspielter und einladender auf den Nutzer wirken sollen.

Um unserer App den letzten Schliff zu verpassen und mehr Leben einzuhauchen, haben wir an allen passenden Stellen Animationen in Form von GIFs eingefügt. Beispielsweise kommt vor dem Onboarding eine Einführung in die Szenerie der App in Form einer Animation, in welcher ein Taucher in die Unterwasserwelt eintaucht und “Dive” sich in Form einer Perle in einer Muschel öffnet. Alle Elemente der Animation haben wir selbst designt und diese anschließend in Adobe After Effects zum Leben erweckt.

Dark und Light Mode

Um unsere App nutzergerecht zu gestalten entschiden wir uns dazu sowhl einen Darkmode als auch einen Lightmode zu entwickeln. Anfangs gab es einige Unstimmigkeiten in Bezug auf die Farbwahl innerhalb der Gruppe. (Bsp: Soll die Navigationsbar hellblau oder dunkelblau sein? Oder müssen alle Screens im Light Mode weiß als Hintergrundfarbe haben?) jedoch konnten wir uns hierbei auf ein Farbschema einigen, mit dem alle Gruppenmitglieder letztendlich zufrieden sind. Wir entschieden uns für eine hellere Version unsere Orange-Blau Verlaufes für die Light Version und tauschten dunkelblau Flächen des Dark Modes gegen hellblau bzw. weiße Flächen aus. Außerdem änderten wir Schriftfarbe von dunkelblau zu weiß und umgekehrt, um den Kontrasten gerecht zu werden.

Fazit

Auf unserer persönlichen Reise als angehende UX-Designer haben wir bei diesem komplexen und großen Projekt viel an neuen Skills und persönlichem Design Know-how hinzugelernt. Dadurch, dass wir intensiv mit Figma gearbeitet haben, haben wir Funktionen wie Plugins oder Komponenten entdeckt, die uns ganz neue Möglichkeiten aufgezeigt haben. Da es eine Anforderung war, Animationen mit einzufügen, haben wir auch hier viel Neues gelernt und uns in Programme wie Adobe After Effects oder dem Plugin Figmotion eingearbeitet, die wir zuvor noch nie geöffnet haben.

Storytelling war ein weiterer aufschlussreicher Punkt auf unserer Reise. Wir haben uns auf Meeresmetaphern geeinigt und gemerkt, dass das User-Erlebnis direkt besser wird, wenn man mit Metaphern und spielerischen Geschichten arbeitet. Als Designer haben wir einen großen Schritt gemacht, unseren persönlichen Stil gefestigt und Gespür für Farben, Formen und Abstände erhalten. Abschließend können wir sagen, wir sind stolz und zufrieden mit unserer App Dive, haben viel Zeit und Herzblut investiert, was sich am Ende ausgezahlt hat.