# Design
Document your design process, from paper prototypes to figma.


## Name und Konzept

Habitrack - hilft dir, Gewohnheiten aufzubauen, nicht zu vergessen und Fortschritt zu tracken. Verschiedene Widgets helfen dir bei Verschiedenen Gewohnheiten, so zum Beispiel das ausreichenede Wassertrinken, einnehmen von wichtigen Kommunikationen oder ausführen von einmaligen oder wiederkehrenden Aufgaben.



## Paper Prototyping
![PP1](assets/images/hci_paper_prototype1.jpg)  ![PP2](assets/images/hci_paper_prototype2.jpg)


Im Papierprototypen wurden verschiedene Arten getestet, die Widgets im Homescreen darzustellen. Zum einen wurde ein minimalistischer List Entry vorgeschlagen, der den Namen und eine kleine Statusanzeige des Widgets enthält. Zudem wurde eine "Card"-Variante getestet, bei der das Widget mit vollen Daten und reduzierten Bedienmöglichkeiten zusammenspielt. Es gibt einen Desginvorschlag für den Statistik-Teil, bei dem man sich die Statistiken der Letzen Tage ansehen kann.
Für das Wasser- und Timer-Widget wurden zudem Vollbild-Designs vorgeschlagen.

## Tasks

### Task 1: Timer-Widget
Nachdem du von der App erfahren hast, hältst du das für die perfekte Gelegenheit, um anzufangen, Klavier zu lernen. Deshalb möchtest du ein Widget anlegen, dass dich jeden Tag daran erinnert, mindestens eine Stunde Klavier zu spielen.

### Task 2: Hydrations-Widget
Deine Ärztin hat dir gesagt, dass du zu wenig Wasser trinkst. Deshalb willst du ein Widget anlegen, das dir hilft, zumindest 2,5 Liter Wasser am Tag zu trinken.

### Task 3: Medikations-Widget
Du möchtest täglich eine Erinnerung, deine morgendlichen und abendlichen Tabletten einzunehmen: Orylmyte um 9 Uhr, und Melatonin um 20 Uhr.


## Logo
![LOGO](assets/images/Habitrack_Logo.png)

Das Logo für unsere App ist ein Stilisierter Text von unserem App-Namen. Der Hintergrund stellt eine PostIt-Note mit Linen und Kaffee-Flecken dar. Die Farbkombination aus Rot und Schwarz soll Fokus ausstrahlen, mit dem man den Habits auf den Grund geht. Das a von Track ist als Fadenkreuz stilisiert.

## Farben
Wir haben für die Farben die SeedColor purple genommen. Das ist logischerweise nicht sonderlich kreativ. Wir hatten eine andere Farbpalette herausgearbeitet, die wir auch in den Issues besprochen hatten. Allerdings haben wir uns während des Entwickelns mit dem einfachen Lila angefreundet und jetzt gefällt es uns besser, da Lila schlichtweg eine sehr schöne und angenehme Farbe ist.


## User Flow Diagram

![UFD](assets/images/UserFlowDiagram.png)

Im User Flow Diagram kann man die Aufteilung der App in zwei Hauptbereiche erkennen - die Widget-Wand und das Statistik-Dashboard. Diese beiden Hauptbereiche sind über eine Bottom-Navigation-Bar zu erreichen. Die Hauptbereiche sind Fully Connected.

## Data Flow Diagram

![DFD](assets/images/DataFlowDiagram.png)

Das Data Flow Diagram beschreibt, wie aus den Funktionswidgets die Daten genommen werden, die dann in den Statistik-Widgets im Dashboard dargestellt werden. Die Funktionswidgets implementieren alle eine Methode, mittels derer man den täglichen Fortschritt zum Ziel auslesen kann. Dieser wird dann auf der Festplatte abgespeichert und über die Zeit hinweg akkumuliert. Mit diesen Daten werden die Statistik-Widgets dann gefüttert.


## Figma Prototype

![F1](assets/images/FIGMA1.png)

Im Prototypen für die Widgets war geplant, dass das Wasser-Widget noch eine echte Flasche sei. Zudem wurden Widgets über einen Swipe nach Links gelöscht.(inspiriert durch Tinder)

![F2](assets/images/FIGMA2.png)

Die Einstellungen waren kein Pop-Up, sondern eine eigene Seite. Die Buttons waren oben und nicht Unten. Zudem Gab es im Allgemeinen noch mehr Einstellungen für die Widgets.

![F3](assets/images/FIGMA3.png)

Das Timer-Widget ist, bis auf das genaue Design, größtenteils Identisch geblieben. Es sollte jedoch einstellbar sein, ob sich das Widget täglich oder Wöchentlich zurücksetzt.


![F4](assets/images/FIGMA4.png)

Das Task-Widget sollte ursprünglich in heutige, morgige Tasks usw. unterteilt sein. Tasks sollten sich zudem wiederholen können.



## Was gut und weniger gut lief

Gut liefen in der Entwicklung meißt die individuellen Arbeitsphasen. Dabei ist meistens ein Mehrwert für das Projekt entstanden.

Weniger gut lief die Kommunikation in der Gruppe, was im Endeffekt auch zur Aufspaltung der Vierergruppe führte.



