Fortschritts-Dashboard
Rauchfreie Tage, errechnete Sparbeträge und grafische Überblickskarten mit Demo-Werten.
UI-Prototyp · Gewohnheiten & Gesundheit
RecoveryBuddy
Fortschritte sichtbar machen. Tag für Tag.
Ein deutschsprachiger Flutter-Prototyp zur Begleitung eines Rauchstopps. Ein Dashboard, Journal, Profil und Community-Bereich machen Fortschritt und eigene Beobachtungen sichtbar. Diagramme und Messwerte illustrieren die Idee mit Beispieldaten.
- Plattformen
- Android · iOS · Web
01 · Die Idee
Wofür die App
entstanden ist.
Die Aufgabe
Eine Gewohnheitsänderung lässt sich leichter reflektieren, wenn Fortschritt, persönliche Notizen und Alltagserfahrungen an einem Ort sichtbar sind. Für den Prototyp steht die verständliche Darstellung dieses Zusammenhangs im Vordergrund.
Die Umsetzung
Die Flutter-Screens greifen über Provider auf eigene ViewModels für Dashboard, Profil, Journal und Blog zu. Diagramme stellen simulierte Zeitreihen dar; lokale Einstellungen werden separat gespeichert. Eine zentrale Sammlung von Designwerten hält die Oberfläche konsistent.
02 · Funktionen
Was die App
möglich macht.
Messwerte visualisieren
Umschaltbare Ansichten für Herzfrequenz, Blutsauerstoff und HRV mit unterschiedlichen Zeiträumen.
Journal
Eigene Einträge ergänzen die visuelle Fortschrittsübersicht.
Profil
Persönliche Daten und Rauchstopp-Statistiken in einer scrollbaren Ansicht.
Community-Idee
Blog und Beispielbeiträge veranschaulichen den geplanten Austausch.
Einheitliche Gestaltung
Gemeinsame Farben, Abstände, Textstile und wiederverwendbare Formularbausteine.
03 · Einblicke
Direkt
aus der App.
Original-Flutter-Oberflächen mit den im Prototyp enthaltenen simulierten Daten. Die Zahlen sind keine tatsächlichen Messungen.
04 · Technik
Die Technik
dahinter.
- Programmiersprachen
- Dart
- Plattformen
- Android · iOS · Web
- Technologien
- Flutter · Provider · fl_chart · Shared Preferences
So ist die Anwendung aufgebaut
- 01Flutter Screens
- 02Provider · Dashboard / Journal / Profil / Blog ViewModels
- 03Modelle und simulierte Messreihen
- 04Lokale Einstellungen
Darstellung und Zustand trennen
ViewModels bündeln Berechnungen und Auswahlzustände; Screens konzentrieren sich auf die Darstellung.
Interaktive Diagramme
fl_chart visualisiert unterschiedliche Messarten und Zeitfenster.
Ein klar begrenzter Prototyp
Die Demo-Werte demonstrieren die Oberfläche und werden transparent von tatsächlichen Gesundheitsdaten unterschieden.
05 · Entwicklung
Von der Oberfläche
bis zum System.
Produktidee
Fortschritt, Reflexion und persönliche Beobachtungen in einem gemeinsamen Ablauf.
Visualisierung
Dashboard-Komponenten und Zeitreihendiagramme mit simulierten Daten.
Zustandsmodell
Provider-ViewModels und lokale Einstellungen für die einzelnen App-Bereiche.