Habit Tracker Mobile App
The interface uses a clean, friendly design with clear completion markers and engaging visuals like the panda mascot, which increase user motivation. However, improvements could be made in readability of text contrast and ensuring interactive elements have more distinguishable affordances for accessibility.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
1
Color & Contrast2
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions1
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load3
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
3Major
13Moderate
6Minor
Low contrast for faint green text in habit list
Major
Color & Contrast
The Problem
The habit items 'Read 20 Pages' and 'Drink 2L Water' appear in a light green color on a very light green background, likely resulting in poor contrast below WCAG AA standards, making the text hard to read for users with low vision or color blindness.
Why it Matters
Users with visual impairments may have difficulty reading these habit titles and related information, impacting usability and accessibility.
How to Fix
Increase the contrast by using a darker green or a different color that meets at least 4.5:1 contrast ratio against the background. Alternatively, darken the background or add a stronger text shadow to improve legibility.
Issue Highlights
No Undo or Confirmation for Habit Completion Toggling
Major
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
Toggling habit completion states (checkmarks) appears immediate with no visible undo option or confirmation, increasing risk of accidental changes.
Why it Matters
Users may accidentally mark or unmark habits as complete, causing frustration and incorrect tracking of their progress.
How to Fix
Implement an undo option or confirmation snackbar/toast after toggling completion state to allow users to correct accidental taps.
Issue Highlights
Small Add (+) Button in Top Right
Major
Accessibility & Input Ergonomics
The Problem
The circular add (+) button in the top right of the habit list appears small, likely below the recommended 44x44 points minimum size for touch targets.
Why it Matters
Small tap targets are hard to activate for users with limited dexterity or larger fingers, leading to missed taps and user frustration.
How to Fix
Increase the size of the circular add (+) button to meet or exceed the recommended minimum tap target size of 44x44 points.
Issue Highlights
Habit list checkboxes misaligned vertically
Moderate
Visual Consistency, Imagery & Media
The Problem
The circular completion check indicators on the right side of each habit item are not perfectly aligned vertically. The first item’s circle is slightly higher than the others.
Why it Matters
Misalignment can cause visual inconsistency and make the interface look unpolished, increasing cognitive load as users try to scan the list.
How to Fix
Align all habit completion circles consistently along the same vertical axis within the habit list row.
Issue Highlights
Unclear Primary CTA Label 'Add Habit'
Moderate
Conversion & Actions
The Problem
The main CTA at the bottom labeled 'Add Habit' uses the word 'Add' but does not clarify what type or details of habit will be added next. This could be perceived as vague or lacking specificity about the next step.
Why it Matters
Users may hesitate or be uncertain if they should tap the button, leading to lower engagement or conversion in habit creation.
How to Fix
Make the CTA label more descriptive or clear, e.g., 'Create New Habit' or 'Customize Habit To Add', to clearly communicate the next action.
Issue Highlights
Active habit check indicators inconsistent in style
Moderate
Visual Consistency, Imagery & Media
The Problem
Two habits have filled green circular checkmarks with a shadow around them, while the top habit only shows an empty circle, indicating inconsistent styling of completed state indicators.
Why it Matters
Inconsistent styles for the same type of UI element can confuse users about the state of items and reduce trust in the app's accuracy.
How to Fix
Use a consistent style for all completed habit check indicators, such as all filled circles with a shadow or all with the same border style.
Issue Highlights
Too Many Individual Habit Completion Steps
Moderate
Efficiency & Cognitive Load
The Problem
Users must individually check off each habit completion or use the small 'Mark all' button, adding multiple micro-steps to mark daily habits completed.
Why it Matters
Requiring users to interact multiple times to complete a simple daily routine increases task time and mental effort, risking abandonment.
How to Fix
Consider enabling bulk completion or smarter default completions to reduce the number of taps needed to mark multiple habits as done.
Issue Highlights
No indication of what happens after pressing 'Add Habit'
Moderate
Flow & States Completeness
The Problem
The 'Add Habit' button is prominently displayed but there is no visible indication or preview of the next screen or flow, which may leave users unsure what information they need to prepare or what to expect next.
Why it Matters
Uncertainty about the next step after pressing the button might cause users to hesitate or feel stuck, potentially reducing habit creation and app engagement.
How to Fix
Provide a preview modal, tooltip, or label about what happens after tapping 'Add Habit', such as what information will be required or how long the process takes.
Issue Highlights
Insufficient visual hierarchy between habit titles and schedules
Moderate
Content Readability & Clarity
The Problem
Habit titles and their schedule texts ('Every day · 7:00 AM', etc.) use similar font sizes and weights, making it harder to quickly differentiate the main task from its timing details.
Why it Matters
Users may have difficulty quickly scanning and comprehending their habits and associated schedules, which slows task management.
How to Fix
Increase contrast by using a larger or bolder font for habit titles and a smaller or lighter font for schedule text.
Issue Highlights
No Clear Location Indicator in Navigation
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The bottom navigation bar highlights the 'Home' icon, but there is no explicit text or marker indicating the current screen or section contextually in the main content area or header.
Why it Matters
Users may be uncertain about which app section they are currently viewing, which can increase cognitive load and reduce ease of navigation.
How to Fix
Add a clear, prominent textual or visual cue at the top of the screen to indicate the current section, e.g., a page title or header label corresponding to the active bottom navigation icon.
Issue Highlights
Close Vertical Spacing Between Habit Checkboxes and Text
Moderate
Accessibility & Input Ergonomics
The Problem
The circular checkboxes for habits (e.g., 'Morning Run') are placed very close to the habit text and other checkboxes, reducing space for precise tapping.
Why it Matters
Tight vertical spacing between interactive elements increases the risk of tapping the wrong checkbox, especially on small or mobile screens.
How to Fix
Increase vertical spacing between habit rows and between checkboxes and text to allow easier, more accurate touch interactions.
Issue Highlights
Tight Spacing in Bottom Navigation Bar
Moderate
Accessibility & Input Ergonomics
The Problem
The icons and labels in the bottom navigation bar ('Home', 'Stats', 'Habi', 'Me') are spaced tightly horizontally, which may cause accidental taps between icons.
Why it Matters
Closely spaced navigation items increase the chance of tapping the wrong item, leading to navigation errors and user frustration.
How to Fix
Increase horizontal spacing or padding around each navigation item to ensure comfortable and distinct tap targets.
Issue Highlights
No confirmation or feedback after marking habits as completed
Moderate
Flow & States Completeness
The Problem
After marking a habit as completed (indicated by check marks), there is no visible confirmation, feedback message, or indication that the user's action was registered beyond the checkmark color change.
Why it Matters
Users might be uncertain if their completion actions were fully saved or recognized, which can reduce confidence in the app’s responsiveness and reliability.
How to Fix
Add a subtle feedback message, animation, or toast notification confirming the habit completion has been saved successfully.
Issue Highlights
Checkboxes and completion indicators lack clear interactive affordance
Moderate
Strategic Design
The Problem
The checkmarks and empty circles used to indicate habit completion might not be immediately clear as interactive toggles due to subtle visual cues and muted styling.
Why it Matters
Users may hesitate or be confused about how to mark habits as complete or adjust their state, reducing ease of use for the core task.
How to Fix
Increase contrast, add clearer button-like affordances, or use toggles/switches with distinct pressed states to make interactions more discoverable.
Issue Highlights
Confusing Multiple Completion Buttons
Moderate
Efficiency & Cognitive Load
The Problem
The screen offers both a 'Mark all' button next to the date and individual checkboxes for completing habits, creating multiple similar actions that compete for user attention.
Why it Matters
Multiple similar choices increase user hesitation and the cognitive load of deciding how to mark habit status.
How to Fix
Simplify the UI by consolidating completion actions into a single prominent option to reduce competing decisions.
Issue Highlights
Unclear purpose of 'Mark all' button
Moderate
Flow & States Completeness
The Problem
The 'Mark all' button does not show any instructional tooltip or confirmation about what will happen on tap, leaving users uncertain if it marks habits as complete, resets them, or something else.
Why it Matters
Users may hesitate or avoid using the button for fear of unintentional bulk changes, hindering efficiency and flow completion.
How to Fix
Add a descriptive tooltip, confirmation prompt, or a subtle label clarifying that pressing 'Mark all' will mark all habits for the selected day as completed.
Issue Highlights
Unclear label for 'All day' schedule item
Minor
Content Readability & Clarity
The Problem
'All day' is the only time indicator for the 'Drink 2L Water' habit, but it is ambiguous whether this is a target, reminder, or duration.
Why it Matters
Users may be uncertain how to interpret the time/frame for this habit resulting in confusion or inconsistent completion tracking.
How to Fix
Add a clarifying label or tooltip explaining what 'All day' means in this context (e.g., target intake duration or reminder frequency).
Issue Highlights
Multiple Plus Buttons for Adding Habits Create Confusion
Minor
Navigation & Structure
The Problem
Both a large 'Add Habit' button near the bottom and a smaller plus icon near the top right of the habit list offer habit creation, potentially creating duplicate calls to action.
Why it Matters
Having multiple similarly purposed buttons could confuse users as to which is primary and may split their attention.
How to Fix
Consolidate the add habit functionality into one prominent button or clearly differentiate their intended usage if they differ.
Issue Highlights
Large Animated Panda Causes Distraction
Minor
Efficiency & Cognitive Load
The Problem
A large animated panda is shown above the habit list, which does not provide direct functional value and adds visual clutter.
Why it Matters
Unnecessary decorative elements increase cognitive load and distract from the core task of managing habits.
How to Fix
Reduce the size or remove the animation or relocate it to a less prominent area to minimize distraction.
Issue Highlights
Unlabeled plus icon in date section may confuse users
Minor
Visual Consistency, Imagery & Media
The Problem
The green plus icon next to the 'Mark all' button in the date section lacks a label or tooltip indicating its purpose, making its function unclear.
Why it Matters
Unlabeled icons can confuse users, leading to uncertainty about their function and potentially reducing engagement with available features.
How to Fix
Add a tooltip or label to the plus icon, clarifying its purpose (e.g., 'Add Habit for Today').
Issue Highlights
Playful imagery may reduce perceived seriousness for health habits
Minor
Tone, Friendliness & Delight
The Problem
The large, cartoon-style panda in the center adds a playful tone that might not align with the motivation and seriousness users expect from a health and habit tracking app.
Why it Matters
Users seeking accountability and motivation for important health habits might find the mascot's tone too casual or distracting, which could undermine trust or perceived commitment.
How to Fix
Consider using a more neutral or subtly encouraging visual style that balances fun with motivation, or allow users to customize the mascot's presence.
Issue Highlights
Panda illustration adds charm but lacks functional role or clear purpose
Minor
Strategic Design
The Problem
A central panda character is visually engaging but appears decorative without interactive or informative function.
Why it Matters
While the mascot can enhance emotional connection, its lack of clear purpose or dynamic feedback misses an opportunity to reinforce progress or motivate users.
How to Fix
Consider integrating the panda with progress animations or motivational feedback to increase meaningful interaction and memorability.
Issue Highlights