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).

  • PWA
  • Offline-first
  • 100 % Vanilla-Web
  • Gamification
  • Pixel-Art
Startbildschirm mit Tagesziel-Ring (40 von 100 XP), 6-Tage-Streak und Tages-Quests wie „Abendrunde ums Viertel“

Detox Quest direkt ausprobieren – kostenlos im Browser, ohne Konto.

App öffnen

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.

  • Tagesziel
  • Streak
  • Schlaf-Quests

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.

  • Verbindungs-Quests
  • Buddy
  • Familien-Ritual

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.

  • Lesen & Lernen
  • Quest-Tausch
  • Leckerli-Animationen

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.

  • Kein Konto
  • Offline
  • Vanilla-JS

Die Doomscrollerin

Sarah, 27 – Social-Media-Managerin

„Beruflich muss ich online sein – privat will ich es nicht mehr.“

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
  • Tagesziel
  • Streak
  • Schlaf-Quests

Der Familienvater

Markus, 38 – Projektleiter

„Ich will, dass meine Kinder mich ansehen – nicht mein Handy.“

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
  • Verbindungs-Quests
  • Buddy
  • Familien-Ritual

Die Studentin

Lisa, 21 – Lehramtsstudium

„Zwischen zwei TikToks ist noch nie eine Hausarbeit fertig geworden.“

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
  • Lesen & Lernen
  • Quest-Tausch
  • Leckerli-Animationen

Der Datensparsame

Jörg, 52 – Systemadministrator

„Eine App gegen Handysucht, die meine Daten absaugt? Ironie pur.“

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
  • Kein Konto
  • Offline
  • Vanilla-JS

Einblicke in die App

Onboarding-Schritt „Was möchtest du erreichen?“ mit sechs wählbaren Themen-Kacheln, Draußen und Schlaf sind ausgewählt
Onboarding: Ziele wählen, Quests folgen
Startbildschirm mit Tagesziel-Ring (40 von 100 XP), 6-Tage-Streak und Tages-Quests wie „Abendrunde ums Viertel“
Start: Tagesziel, Streak und heutige Quests
Detailansicht der Quest „Abendrunde ums Viertel“ mit Themen-Badge, „Warum es zählt“ und nummerierten Schritten
Jede Quest erklärt, warum sie zählt
Fortschrittsansicht mit Level 3, Gesamt-XP, Wochen-XP und Fortschrittsbalken zum nächsten Level
Level, Ränge und Wochenfortschritt
Erledigt-Liste mit abgehakten Quests, Datumsangaben und Summe der verdienten XP
Erledigte Quests mit XP-Bilanz
Buddy-Tab: Pixel-Golden-Retriever vor Deluxe-Hütte mit Ball, Ente und Quietsche-Ente, darunter Leckerli-Leiste und Shop-Kategorien
Der Buddy-Tab: Hund, Leckerlis und Shop
Shop-Kategorie Wohnen mit sechs Behausungen als Pixel-Produktfotos, von Hundehütte (100 Punkte) bis Schloss (600 Punkte)
Shop: sechs Behausungen von Hütte bis Schloss
Fütterungs-Animation: Der Hund hüpft mit herausgestreckter Zunge, rote Pixel-Herzen steigen auf
Füttern mit Herzchen-Animation
Darstellungs-Einstellungen mit Hell/Dunkel/Auto und sechs Farbthemen
Sechs Farbthemen, hell und dunkel
Startbildschirm im Dunkelmodus
Dunkelmodus
Buddy-Szene bei Nacht: dunkelblauer Himmel mit Pixel-Mond und Sternen, abgedunkelte Szene
Nachts wacht der Mond über den Buddy
Buddy-Szene im Winter mit verschneitem, weißem Boden
Im Winter liegt Schnee in der Szene
Detox Quest auf dem Desktop: Vollbild-Layout mit mehrspaltigem Quest-Grid
Desktop: Vollbild mit mehrspaltigen Quest-Grids

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.

Buddy-Szene bei Nacht: dunkelblauer Himmel mit Pixel-Mond und Sternen, abgedunkelte Szene
Nachtszene im Dunkelmodus
Buddy-Szene im Winter mit verschneitem, weißem Boden
Winter in der Buddy-Szene
Buddy-Szene bei Nacht auf dem Desktop im Dunkelmodus
Die Nachtszene zieht sich bis aufs Desktop durch

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
  • Service Worker
  • Pointer Events
  • SVG
  • CSS-Animationen
  • localStorage
  • i18n (DE/EN)
  • Pixel-Art-Generator
  • Zero Dependencies

← Zurück zur Expertise