Crumbs

Digitales Wohlbefinden durch Micro-Interventions

Crumbs Dashboard UI – Modulares Whoop-inspiriertes Design mit kreisförmigem Crumb-Ring und Tagesbudget

Projekt-Typ

Eigeninitiierter UX/UI Design-Sprint

Rolle

UX/UI Design, Konzeption & Prototyping

Zeitraum

1 Woche

Tools

Figma

Das Problem: Der automatische Griff zum Smartphone

Klassische Bildschirmzeit-Apps setzen fast immer an zwei ineffektiven Extremen an:

Passive Analyse: Rückblickende Dashboards zeigen am Abend, dass man drei Stunden auf Social Media verbracht hat – bieten aber im Moment des Impulses keine Hilfe.
Harte Blockaden: Vollständige App-Sperren führen oft zu Frust, werden in den Systemeinstellungen schnell deaktiviert oder erfordern das manuelle Starten einer separaten Timer-App.

Sobald der Impuls entsteht, öffnet der Daumen Social-Media-Apps automatisch. Der Übergang vom bewussten Öffnen ins passive Scrollen geschieht nahtlos und ohne spürbare Reibung.

UX-Fragestellung:
Wie können wir den automatischen Impuls zum Scrollen im exakten Moment des Entstehens abfangen, ohne den Nutzer durch starre Verbote zu frustrieren?

Der Lösungsansatz: Pre-Commitment & Micro-Intervention

Crumbs basiert auf zwei Prinzipien der Verhaltenspsychologie:

Micro-Intervention (Der kurze Stopp): Eine minimale Hürde direkt beim Antippen einer App (z. B. TikTok oder Instagram) unterbricht den Autopiloten des Gehirns.
Pre-Commitment (Crumbs als Währung): Nutzungszeit wird nicht in ungreifbaren Stunden gemessen, sondern in festen Einheiten („Crumbs“ à 5 Minuten). Vor der Nutzung trifft der Nutzer eine bewusste Entscheidung, genau eine Einheit einzulösen.

Der Interaktions-Loop

Die Interaktion wurde so konzipiert, dass der Nutzer die Crumbs-App im Alltag nicht manuell öffnen muss. Die Erfahrung dockt direkt am gewohnten Verhalten an:

Gewohnter App-Start: Der Nutzer tippt auf dem Home-Screen auf Instagram.
Die Micro-Intervention: Bevor die App startet, erscheint ein minimalistischer Dialog: „1 Crumb (5 Min.) einlösen?“
Bewusste Freigabe: Ein einzelner Tap gibt die App frei und löst ein haptisches Signal aus.
Ambient Awareness: Während der Nutzung läuft die verbleibende Zeit dezent am oberen Bildschirmrand (Dynamic Island / Ambient Indicator) mit, um das Zeitgefühl aufrechtzuerhalten.
Session-Abschluss: Nach Ablauf der Zeit signalisiert eine deutliche Vibration das Ende des Zeitfensters.

UI & Visual Design: Das modulare Obsidian-System

Für das Interface wurde ein reduziertes, funktionales Designsystem entwickelt, das visuelle Ruhe ausstrahlt und sich an modernen Performance- und Health-Interfaces (z. B. Whoop, Oura) orientiert.

Farbwelt & Kontraste: Ein tiefes Obsidian-Schwarz (#0A0A0B) als Basis mit leicht transparenten Modul-Karten (white.opacity(0.05)) und feinen Konturlinien (white.opacity(0.08)).
Der Circular Crumb Ring: Das Tagesbudget wird als kreisförmiges Punkteraster visualisiert.
- Verfügbare Einheiten leuchten mit voller Deckkraft.
- Eingelöste Einheiten dimmen ab (25 % Opacity) und treten optisch in den Hintergrund.
Modulare Informationsarchitektur: Klare Trennung zwischen Status, Tagesbudget und fokussierter App-Auswahl.

Die Screens im Detail

1. Der Counter (Unmittelbare Verhaltensspiegelung)

Ein radikal reduzierter Screen, der das Nutzungsverhalten ohne visuelle Ablenkung greifbar macht. Statt komplexer Liniendiagramme übersetzt die Ansicht die Aktivität direkt in die zentrale Währung: „673 Swipes, das entspricht 27 Crumbs“. Der hohe Kontrast und die typografische Fokussierung schaffen einen klaren Moment der Selbstwahrnehmung.

2. Das Dashboard (Modulares Status- & Budget-System)

Das Zentrum der App visualisiert das verbleibende Kontingent und qualitative Verhaltensmuster im modularen Dark-Design:

Zentraler Ring: Zeigt das Verhältnis von verbrauchten zu verbleibenden Crumbs im Kreisraster.
Tagesbudget-Modul: Fortschrittsanzeige des Tagesbudgets (z. B. 31 % / 2,5 von 8 Crumbs).
Impuls-Rate: Nicht-wertendes, qualitatives Feedback im Whoop/Oura-Stil („Bedacht – Längere Lese-Pausen“), das Verhaltensänderungen über den Tag hinweg abbildet.

3. Dynamic Island States (Ambient Awareness im Betriebssystem)

Um das Zeitgefühl während der Nutzung von Social Media aufrechtzuerhalten, ohne den Screen mit Overlays zu blockieren, nutzt das Konzept drei dezente Zustände in der Dynamic Island:

Kompakter Zustand (Active Session): Dezent am oberen Rand – Crumb-Icon links, verbleibender 5-Minuten-Countdown rechts.
Erweiterter Zustand (Expanded View): Beim Gedrückthalten öffnet sich die Detailansicht mit Fortschrittsbalken und der Option, die Session vorzeitig zu beenden.
Ablauf-Status (Session Expiry): Visueller Impuls beim Erreichen der 0:00-Marke, kombiniert mit der dreifachen Haptik, um das Ende des Zeitfensters spürbar zu signalisieren.

Crumbs Dynamic Island States – Kompakte und erweiterte Timer-Zustände im iOS Interface

Machbarkeit & Systemgrenzen

Im Rahmen des Sprints wurde die Konzeption anhand eines schnellen Prototyps gegen die realen Schnittstellen von Apple iOS (Screen Time API & ActivityKit) geprüft:

Schnittstellen-Hürden: Mobile Betriebssysteme isolieren Hintergrundprozesse aus Sicherheits- und Datenschutzgründen streng. Live-Aktivitäten lassen sich nicht ohne Weiteres aus reinen Hintergrund-Erweiterungen anstoßen.
Design-Fazit: Echte Micro-Interventions erfordern eine enge Verzahnung mit System-APIs. Wo Plattform-Restriktionen greifen, müssen UX-Konzepte robuste Fallbacks (wie zeitnahe Benachrichtigungen und haptisches Feedback) vorsehen.

Learnings

Friction als Design-Werkzeug: Reibung im Interface ist nicht immer negativ. Gezielt eingesetzte Mikro-Hürden können schädliche Verhaltensmuster effektiv unterbrechen.
Plattform-Richtlinien früh mitdenken: Die besten Interaktionsideen müssen sich an den Restriktionen nativer System-Frameworks messen lassen.
Reduktion auf das Wesentliche: Ein klarer, funktionierender Interaktions-Loop schafft mehr Mehrwert als verschachtelte Einstellungsmenüs und komplexe Tracking-Statistiken.

Häufige Fragen zum Projekt (FAQ)

Crumbs nutzt das Prinzip des Behavioral Designs durch gezielte Micro-Interventions und Pre-Commitment. Statt unübersichtlicher Nutzungsstatistiken am Tagesende unterbricht Crumbs den automatischen Reflex zum Scrollen direkt beim Antippen einer App (z. B. TikTok oder Instagram) und verlangt das bewusste Einlösen einer festen 5-Minuten-Einheit („Crumb“).
Klassische Screen-Time-Lösungen setzen entweder auf passive Nachbereitung (reine Verlaufsdaten) oder starre Sperren, die hohe Frustration erzeugen. Crumbs führt Positive Friction (gezielte minimale Reibung) ein: Der Nutzer wird nicht bevormundet, sondern erhält vor der Nutzung einen bewussten Entscheidungsmoment und währenddessen dezentes Feedback über die Dynamic Island.
Reibung im UX-Design wird meist vermieden, um Abläufe zu beschleunigen. Bei Verhaltensänderungen und digitalem Wohlbefinden ist Reibung jedoch ein gezieltes Werkzeug: Eine minimale Hürde von wenigen Sekunden zwingt das Gehirn, vom unbewussten Autopiloten in eine bewusste Entscheidungsfindung zu wechseln.
Die Untersuchung der nativen iOS-Schnittstellen (Screen Time API, ManagedSettings, ActivityKit) zeigte, dass Hintergrund-Erweiterungen aus Datenschutzgründen stark sandbox-isoliert sind. Das direkte Starten von Live-Aktivitäten aus Hintergrund-Shields ist herstellerseitig reglementiert. Für das UX-Design bedeutet dies, dass Interaktionskonzepte plattformnative Restriktionen frühzeitig berücksichtigen und robuste Fallbacks (wie haptische Signale und lokale Benachrichtigungen) integrieren müssen.
Der Sprint umfasste Problemdefinition, User Journey Mapping, Informationsarchitektur, die Entwicklung eines modularen Designsystems (Dark Mode / Obsidian-Ästhetik) und interaktives Prototyping in Figma sowie die technische Machbarkeitsprüfung nativer iOS-Interaktionsmuster.