Eigenes Projekt
Detox Quest
Weniger scrollen, mehr leben – Digital Detox als Spiel mit Quests, Leveln und einem Pixel-Hund.
Digital Detox, das Spaß macht
Detox Quest ist eine installierbare Web-App, die beim bewussten Umgang mit dem Smartphone hilft – nicht mit Verboten, sondern mit einem Spiel: Tages-, Wochen- und Monats-Quests wie „Frühstück ohne Handy“, „Buch statt Feed“ oder „48 Stunden ohne Social Media“ bringen XP, Level und eine Streak.
Dahinter steht ein Katalog von 180 handgeschriebenen Quests in sechs Themen – Achtsamkeit, Draußen, Lesen & Lernen, Verbindung, Kreativität und Schlaf. Beim Onboarding wählt man „Was möchtest du erreichen?“ und bekommt passende Quests bevorzugt. Erledigt wird per Wisch-Geste oder Tap auf die Checkbox, getauscht per Wisch nach links.
Die verdienten Punkte haben ein Ziel: einen Pixel-Hund (Golden Retriever, Schäferhund oder Shih Tzu), den man füttert, mit dem man Ball und Knochen wirft und dem man im Shop Hütte bis Schloss, Spielzeug und Leckerlis kauft. Alles läuft komplett lokal im Browser – ohne Server, ohne Konto, ohne Tracking, zweisprachig (Deutsch/Englisch).
Funktionen
Quests & Fortschritt
Kleine Schritte, echtes Spiel
- 180 Quests in drei Rhythmen (täglich/wöchentlich/monatlich) und sechs Themen-Kategorien – von „Fünf stille Minuten“ bis „Plan ein Mikroabenteuer“
- Jede Quest mit Begründung („Warum es zählt“) und 3–4 konkreten Schritten
- XP, Level mit Rängen, Tagesziel mit Fortschrittsring, Streak und Konfetti beim Erreichen des Tagesziels
- Wisch-Gesten: rechts erledigen, links gegen neue Quest tauschen; Pull-to-Refresh würfelt alle Quests neu
- Fokus-Themen aus dem Onboarding steuern, welche Quests nachrücken
Privatsphäre als Grundprinzip
Kein Server, kein Konto, kein Tracking
Alle Daten – Fortschritt, XP, Hund – liegen ausschließlich im Browser des Geräts (localStorage). Es gibt keinerlei Verbindung zu einem Server: Nach der Installation funktioniert die App vollständig offline.
Buddy
Ein Pixel-Hund als Begleiter
- Ab 50 Punkten zieht ein Hund ein – wählbar aus drei Rassen mit handgemachten 48-Pixel-Sprites
- Sechs Leckerli-Sorten mit je eigener Animation: Pirouetten, Rückwärtssalto, Zoomies quer durch die Szene, Schneeflocken beim Hunde-Eis
- Ball und Knochen werfen: das Spielzeug fliegt im Bogen, der Hund apportiert
- Shop mit vier Kategorien und Pixel-Produktfotos; sechs Behausungen von der Holzhütte bis zum Schloss
Lebendige Szene
Die Szene kennt Uhrzeit und Jahreszeit
- Morgen-, Tag-, Abend- und Nachthimmel – nachts mit Mond und Sternen
- Saisonale Böden: Blumen im Frühling, Laub im Herbst, Schnee im Winter
- Dark Mode und sechs Akzentfarben, alle Szenenfarben passen sich an
Offline & App-Gefühl
Installieren und loslegen
- PWA mit Service Worker: startet und funktioniert offline, installierbar auf iOS, Android und Desktop
- Edge-Swipe zum Zurücknavigieren, Toasts, Konfetti – App-Gefühl ohne App-Store
- Responsive: Vollbild-Layout vom Smartphone bis zum Desktop mit mehrspaltigen Quest-Grids
Für wen? Vier Beispiel-Personas
Als UX-Designer denke ich in Personas – auch beim eigenen Projekt. Vier Szenarien zeigen, wie unterschiedlich Detox Quest genutzt wird:
Die Doomscrollerin
Sarah, 27 – Social-Media-Managerin
„Beruflich muss ich online sein – privat will ich es nicht mehr.“
Beruflich den ganzen Tag in Feeds, abends scrollt die Hand von allein weiter. Mit Detox Quest hat der Feierabend jetzt ein Gegenprogramm: „Bildschirm aus um neun“, „Abendrunde ums Viertel“ – und die Streak will niemand reißen lassen.
Mehr erfahren
Situation
Acht Stunden am Tag betreut Sarah Feeds, Kommentare und Kampagnen. Das berufliche Scrollen färbt auf den Feierabend ab: Der Daumen macht einfach weiter, obwohl der Kopf längst abschalten will.
So nutzt sie Detox Quest
- Ihre Fokus-Themen aus dem Onboarding: Schlaf und Draußen – die App legt ihr passende Quests bevorzugt vor
- Das Tagesziel von 100 XP ist ihr Feierabend-Ritual: „Bildschirm aus um neun“, „Abendrunde ums Viertel“
- Die Streak hält sie bei der Stange – sechs Tage in Folge reißt man nicht freiwillig ab
- Abends füttert sie ihren Shih Tzu mit den verdienten Punkten
Der Familienvater
Markus, 38 – Projektleiter
„Ich will, dass meine Kinder mich ansehen – nicht mein Handy.“
Abendessen ohne Handy, Spieleabend, Spaziergang zu zweit – Markus nutzt die Verbindungs-Quests als Familienprogramm. Den Pixel-Hund füttern dürfen die Kinder, das Schloss ist das gemeinsame Sparziel.
Mehr erfahren
Situation
Das Handy liegt beim Abendessen neben dem Teller, „nur kurz Mails checken“ wird zur halben Stunde. Markus merkt selbst, was für ein Vorbild das abgibt – und will es ändern, ohne dass es sich nach Verzicht anfühlt.
So nutzt er Detox Quest
- Sein Fokus-Thema: Verbindung – Quests wie „Abendessen ohne Handy“ werden zum Familienprogramm
- Wochen-Quests wie „Plan einen Spieleabend“ strukturieren das Wochenende
- Die Punkte spart er mit den Kindern für neue Behausungen – das Schloss ist das gemeinsame Sparziel
- Die App läuft auf dem Familien-Tablet im Vollbild, füttern dürfen die Kinder
Die Studentin
Lisa, 21 – Lehramtsstudium
„Zwischen zwei TikToks ist noch nie eine Hausarbeit fertig geworden.“
Lisa ersetzt Prokrastinations-Scrollen durch Mikro-Quests: „Buch statt Feed“, „Lern fünf Vokabeln“, „Eine Stunde offline“. Die Belohnung wartet im Buddy-Tab – ihre Zoomies-Kekse sind Legende.
Mehr erfahren
Situation
Bibliothek, Hausarbeit, Kapitel drei – und das Handy zieht. Jede kleine Denkpause endet im Feed, aus fünf Minuten werden vierzig. Lisa braucht keinen Blocker, sondern etwas, das ihr die Pause schöner macht als den Feed.
So nutzt sie Detox Quest
- Ihr Fokus-Thema: Lesen & Lernen – „Buch statt Feed“, „Lern fünf Vokabeln“, „Eine Stunde offline“
- Passt eine Quest gerade nicht, wischt sie nach links und tauscht, bis die richtige dabei ist
- Die Leckerli-Animationen sind ihr Belohnungs-Ritual nach jeder Lerneinheit – die Zoomies-Kekse sind Legende
- Kostenlos und ohne Abo – fürs Studierenden-Budget genau richtig
Der Datensparsame
Jörg, 52 – Systemadministrator
„Eine App gegen Handysucht, die meine Daten absaugt? Ironie pur.“
Jörg installiert nichts mit Konto-Zwang. Detox Quest läuft bei ihm, weil es genau nichts will: kein Login, kein Server, kein Tracking – alle Daten bleiben im Browser, der Quelltext ist überschaubares Vanilla-JS.
Mehr erfahren
Situation
Jörg prüft bei jeder App zuerst, wohin sie funkt. Die meisten Digital-Wellbeing-Apps fallen durch: Konto-Zwang, Analytics, Cloud-Sync. Genau die Kategorie App, die weniger Bildschirmzeit verspricht und dafür maximale Daten will.
So nutzt er Detox Quest
- Installiert als PWA – danach läuft die App komplett offline
- Alle Daten liegen im localStorage statt in einer Cloud; es gibt schlicht keinen Server
- Den Quellcode hat er quergelesen: kein Framework, keine einzige Dependency
- Kein Login, kein Tracking – die App will genau nichts von ihm
Einblicke in die App
Design: Ruhe trifft Pixel-Art
Zwei Welten, ein System: Die Quest-Seiten sind bewusst ruhig gestaltet – Salbeigrün, weiche Radien, viel Weißraum. Der Buddy-Tab kontrastiert mit liebevoller Pixel-Art: Alle Sprites, von den drei Hunderassen à 48×32 Pixel über die Häuser bis zu den Produktfotos im Shop, sind eigens entworfen.
Die Szene lebt: Tageszeit und Jahreszeit steuern Himmel, Boden und Deko – vom Sonnenaufgang bis zum Sternenhimmel, von Frühlingsblumen bis Schnee.
Sechs Akzentfarben und Hell-/Dunkelmodus (auch automatisch) machen die App zur eigenen; das Onboarding startet mit einer visuellen Ziel-Auswahl. Durchgängig responsive vom iPhone bis zum Desktop.
Technik unter der Haube
- 100 % Vanilla-Web: HTML, CSS, JavaScript – kein Framework, kein Build-Schritt, keine einzige Laufzeit-Dependency
- PWA mit Service Worker: Network-First mit Offline-Fallback, installierbar auf iOS, Android und Desktop; Inhalts-Updates ganz ohne Versions-Gymnastik
- Quests als Daten: 180 zweisprachige Quests (DE/EN) liegen als editierbare Datendatei neben der App – neue Quests erscheinen ohne Rebuild, auch per Skript oder KI-Agent pflegbar
- Pixel-Art als Code: Alle Sprites sind Zeichen-Matrizen, gerendert als scharfe SVG-Rects; die Hunde entstehen aus einem eigenen Generator (Formen → Auto-Outline → Schattierung)
- Animationen nur mit CSS: Schwanzwedeln per steps()-Framewechsel, Wurf-Parabeln, sechs Fütter-Animationen, Herzchen – ohne Animations-Library
- Gesten selbst gebaut: Swipe zum Erledigen/Tauschen, Pull-to-Refresh und Edge-Swipe-Back über Pointer Events
- Lokal by Design: Zustand in localStorage mit sanften Migrationen – Updates erhalten XP, Streak und Hund