Habit Tracker

This consists of two widgets. The user uses the journal view widget to remember and check off the habitual tasks for that day. The widget's full-screen view gives an overview of all the Habits and includes their description and schedule.

Icon

This is used in the journal view to drag the journal view Habit Tracker widget onto the page.

Lo-Fi Design

images/LoFi_Habit_Icon.PNG

Hi-Fi Design

Note that design specifications are on Figma:

Regular Icon:

images/HiFi_Habit_Icon.PNG

Icon on Hover:

images/HiFi_Habit_Icon_Dragging.PNG

Icon on Click and Drag:

images/HiFi_Habit_Icon_Hovering.PNG

Journal View

The Habit Tracker widget, shown after the user drags the icon onto a page of the journal.

Lo-Fi Design

images/LoFi-Habit-Journal-View.png

Hi-Fi Design

Note that design specifications are on Figma:

images/HiFi-Habit-Journal-View.PNG

Fullscreen View

This is the Habit Tracker widget shown on the full-screen view.

Lo-Fi Design

images/LoFi-Habit-Fullscreen-View.png.jpg

Hi-Fi Design

Note that design specifications are on Figma:

images/HiFi-Habit-Fullscreen-View.PNG

User Input Menu Design

This is the menu that the user can use to, input information about the habit they are about to create or edit the information of an existing habit. It is opened by clicking on the plus sign on either the Journal or Fullscreen views of the widget.

Hi-Fi Design

Note that design specifications are on Figma:

images/Hifi_Habit_Editing_Creation_Menu.PNG