Achtsamkeits-Onboarding-App-Design

Lull-Onboarding-Ablauf

Der Onboarding-Ablauf von Lull ist ein offizielles OpenDesign-Beispiel, verfasst von OpenDesign. Die Quelle beschreibt drei Screens mit einer einheitlichen Tonalität: warme Fläche, Serifen-Überschriften und ein einziger Akzent. Das Design wird als mobile App-Abfolge präsentiert, nicht als fertiger Konto- oder Meditationsdienst.

Der erste Screen beginnt mit „Quiet beats noise.“ Der begleitende Text beschreibt die Praxis als „Twelve minutes a day“ und „a practice that fits in a coffee break“ und lehnt dann ausdrücklich „streaks“ und „badges“ ab. Diese Kombination macht das Produktversprechen verständlich, bevor die Person ein Konto anlegen soll.

Die visuelle Gestaltung unterstreicht dieselbe Zurückhaltung. Eine warme kreisförmige Komposition führt den ersten Screen an; eine umrandete Praxiskarte mit orangefarbenem Häkchenkreis den zweiten. Beide nutzen dieselbe Illustrationszone über Serifen-Überschriften und kurzem Fließtext. Der großzügige Raum lässt der Botschaft Platz zu wirken, bietet aber weniger Spielraum für längere Texte oder zusätzliche Bedienelemente.

Ein ruhiger erster Eindruck

Der erste Screen kombiniert einen großen orangefarbenen Kreis, einen kleinen hellen Kreis und eine niedrige geschwungene Basis mit der dunklen Serifen-Überschrift. Die Illustration ist keine Datenanzeige; sie schafft eine Atmosphäre, bevor der Text die Routine erklärt. Wer dieses Muster adaptiert, muss das Verhältnis von Bild und Text beibehalten oder einen dichteren ersten Viewport akzeptieren.

Anwendungsfälle für den Ablauf

Diese Abfolge eignet sich für eine Achtsamkeits-App, die ihre tägliche Praxis erklären möchte, bevor sie Anmeldeoptionen zeigt. Die Reihenfolge ist bewusst gewählt: Zuerst sieht die Person eine ruhige Nutzenaussage, dann die Beschreibung der Anpassung und erst danach den Screen zur Kontoeinrichtung. So wird es unwahrscheinlicher, dass Authentifizierungselemente das Erste sind, was das Produkt kommuniziert.

Der Text greift auch eine echte Onboarding-Spannung auf: Eine Routine muss machbar wirken, ohne ein unbelegtes Leistungsversprechen abzugeben. „Shorter on busy days, deeper on quiet ones“ erklärt die beabsichtigte Anpassung in einfacher Sprache. Das vermittelt Flexibilität, doch das Design belegt weder, wie sich Sitzungen verändern würden, noch ob dieses Verhalten umgesetzt ist.

Der Ablauf eignet sich ebenso zum Studium der Inhaltshierarchie wie des Interface-Stylings. Die ersten beiden Screens nutzen „Skip“ oben rechts und „Continue“ unten, während der letzte Screen die Nebenaktion in „Help“ ändert. Diese Labels unterscheiden Fortschritt von Hilfe, auch wenn die Aufnahmen nicht belegen, was die Elemente zur Laufzeit tun.

Von der ruhigen Einführung zur Kontoeinrichtung

Die drei Smartphone-Screens bilden eine kompakte Erzählung mit wiederkehrender Struktur. Die ersten beiden behalten denselben oberen Statusbereich, das „Skip“-Element, die Illustrationszone, die Überschrift, den Fließtext, die Fortschrittsanzeigen und den unteren „Continue“-Button. Die Wiederholung macht den Übergang zwischen den einführenden Zuständen leicht erkennbar, lässt aber auch das abweichende Layout des dritten Screens als bedeutsamen Zustandswechsel wirken.

Auf dem ersten Screen ist die aktive Fortschrittsmarke die linke orangefarbene Pille. Auf dem zweiten wandert sie in die Mitte. Der dritte Screen nutzt die rechte orangefarbene Pille und ersetzt Illustration und untere Aktion durch drei Kontooptionen. Die sichtbaren Markierungen zeigen also die Position in der Abfolge, während der wechselnde Inhalt vermittelt, dass das Onboarding von der Erklärung zur Verbindlichkeit übergegangen ist.

Der letzte Screen beginnt mit „Make a place for it.“ und der Zeile „Save your sessions across devices. We don’t email, we don’t share.“ Danach folgen drei große umrandete Zeilen: „Continue with Apple“, „Continue with Google“ und „Continue with email“. Ihre einheitliche Zeilengestaltung erleichtert den Vergleich, während die unterschiedlichen runden Icons jeden Anbieter schnell erkennbar machen.

Unten setzt die Einwilligungsaussage „Terms“ und „Privacy Policy“ in der Akzentfarbe. Die Quelle kennzeichnet diese Links als Platzhalter, sodass der Screen die vorgesehene Platzierung des Rechtstexts zeigt, nicht eine fertige Navigation. Das Design zeigt auch den Kompromiss, Rechtstext unter die Optionen zu setzen: Er bleibt aus dem Hauptentscheidungsbereich heraus, ist aber optisch von den Elementen getrennt, die er einschränkt.

Wiederholte Struktur, veränderter Zustand

Der erste und der zweite Screen sind nahezu parallele Zustände, doch ihre Illustrationen unterscheiden sich. Der erste nutzt eine warme kreisförmige Komposition; der zweite ein umrandetes Feld mit kurzen Linien, einem orangefarbenen Bedienelement und einem Häkchen. So bleibt die visuelle Dichte gleich, und jedes Versprechen erhält ein eigenes Symbol. Der dritte Screen entfernt diese Illustrationsebene vollständig und schafft Platz für Authentifizierungsoptionen und Einwilligungstext.

Sichtbares Design und Funktionsgrenze

Die Aufnahmen belegen ein visuelles Onboarding-Konzept mit drei unterschiedlichen Smartphone-Zuständen, konkretem Text, Bedienelementen, Anbieter-Labels, Fortschrittsmarken und der Platzierung von Rechtstext. Sie belegen weder authentifizierte Konten, geräteübergreifende Sitzungsspeicherung, adaptive Sitzungslogik, fertige Navigation zu Terms oder Privacy noch einen funktionierenden Onboarding-Ablauf. Die Formulierungen zum Speichern von Sitzungen und zum Nichtteilen von Informationen sind im Design gezeigter Produkttext, kein verifiziertes Dienstverhalten.

Eine neue Umsetzung bräuchte eigenes Verhalten für Authentifizierung, Sitzungsspeicherung, adaptive Praxis und Einwilligung. In dieser Quelle sind Skip und Help Text-Spans, Continue und die Konto-Zeilen gestaltete Divs, und Terms und Privacy Policy sind Anker ohne Ziele. Die Abfolge stellt diese Entscheidungen dar, ohne sie bedienbar zu machen.

Was das Beispiel vermittelt

Die am besten übertragbare Lehre ist der Zusammenhang zwischen Reihenfolge der Botschaften und Verbindlichkeit: die Praxis erklären, ihre beabsichtigte Flexibilität erklären und dann um ein Konto bitten. Der konkrete Lull-Text, die Illustrationen und die Datenschutzformulierungen gehören zu diesem Beispiel. Ein neues Produkt bräuchte eigene Aussagen, Anpassungsregeln und Einwilligungsziele, statt sie als gesicherte Tatsachen zu übernehmen.