Habit Tracking Dashboard
The interface offers a clean, minimalistic design with clear visual cues for habit completion and an encouraging motivational message. However, improvements could be made in icon clarity, color contrast for accessibility, and providing more detailed habit management options within the main view.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast2
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure2
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
0Critical
4Major
14Moderate
9Minor
Inconsistent Habit Completion Indicators
Major
Visual Consistency, Imagery & Media
The Problem
Habit items use different completion indicators: a black checkmark with a filled circle background for completed tasks and an empty orange outline circle for incomplete tasks. The styles differ in color, fill, and shape border thickness.
Why it Matters
Users may find it harder to quickly and consistently recognize completed vs incomplete habits due to inconsistent styling of completion indicators.
How to Fix
Use a consistent style for all completion indicators, ensuring the completed and incomplete states differ clearly but follow the same visual design language (color, shape, and border thickness).
Issue Highlights
Low contrast for secondary text under completed habits
Major
Color & Contrast
The Problem
The text labels 'Every day · 7:00 AM' and 'Track throughout the day' under the completed habits are light gray on a pale cream background, appearing low contrast and likely below WCAG AA standards.
Why it Matters
Users with moderate visual impairments or in bright environments may struggle to read this text, reducing the clarity of habit details.
How to Fix
Increase the contrast by using a darker shade of gray or black for the secondary text to meet at least a 4.5:1 contrast ratio against the background.
Issue Highlights
Checkbox targets too small for comfortable tapping
Major
Accessibility & Input Ergonomics
The Problem
The circular checkboxes for the habits 'Read 20 Pages' and others appear small, likely smaller than the recommended minimum touch target size of around 44x44 pixels.
Why it Matters
Small tap targets increase the chance of user frustration and input errors, especially for users with larger fingers or limited motor control.
How to Fix
Increase the size of the checkbox tap targets to at least 44x44 pixels while maintaining the visual design.
Issue Highlights
Unclear Checkbox Interaction for Completed Habits
Major
Strategic Design
The Problem
The checkboxes for completed habits (Morning Run, Drink 2L Water) use a dark circular checkmark icon with no distinct affordance, and the unchecked habit uses a thin orange circle. This inconsistent affordance and color scheme may confuse users about tap/click targets or current state.
Why it Matters
Users may hesitate or be uncertain about how to mark habits complete or incomplete, reducing task efficiency.
How to Fix
Use consistent, visually distinct checkboxes or toggle controls with clear states and affordances. Add a tap target highlight or label for accessibility and clarity.
Issue Highlights
Lack of distinct hierarchy between task titles and descriptions
Moderate
Content Readability & Clarity
The Problem
Task titles like 'Read 20 Pages' have similar font weight to their descriptions such as 'Every day · 8:00 AM', making it harder to quickly distinguish the main task from the supplementary info.
Why it Matters
Users may struggle to scan quickly and differentiate key actions from details, reducing usability efficiency.
How to Fix
Increase the font weight or size for task titles and use a lighter style or smaller font size for descriptions to create clear visual hierarchy.
Issue Highlights
Lack of Clear Page or Section Title
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The top section shows 'HOME' and a calendar but does not provide a clear, prominent page or section title to confirm the user's current location or the specific function of this screen.
Why it Matters
Users might be uncertain about their current context or the purpose of the screen, which can reduce confidence and increase cognitive load in navigation.
How to Fix
Add a clear, distinct header or page title above or near 'HOME' that explicitly states the screen's purpose or context.
Issue Highlights
Primary CTA 'Mark all as complete' lacks emphasis
Moderate
Conversion & Actions
The Problem
The 'Mark all as complete' button uses a soft background and small size, making it less prominent compared to other UI elements. This reduces its visibility as a primary action on the screen.
Why it Matters
Users may overlook this bulk action button, reducing efficiency in marking multiple habits complete and potentially causing frustration.
How to Fix
Make the 'Mark all as complete' button larger, use a stronger contrasting color, and increase visual weight to clearly identify it as a primary action.
Issue Highlights
Lack of confirmation or undo option for marking habits complete
Moderate
Tone, Friendliness & Delight
The Problem
Marking habits as complete immediately changes their state without any visible confirmation or option to undo, which could lead to accidental data changes.
Why it Matters
Users might make mistakes marking habits complete and feel frustrated or lose trust if they cannot easily recover their progress.
How to Fix
Add a confirmation step, toast notification with undo option, or easily accessible undo button after marking habits complete.
Issue Highlights
Multiple habit completion toggles increase task complexity
Moderate
Efficiency & Cognitive Load
The Problem
The screen requires users to tap individual check marks for each habit and also offers a 'Mark all as complete' button, repeating the completion step.
Why it Matters
This redundancy forces users to make multiple decisions and interactions for the same outcome, increasing cognitive load and time to complete tasks.
How to Fix
Simplify by either allowing single-tap completion for each habit or using the bulk 'Mark all as complete' button, but not both simultaneously on this screen.
Issue Highlights
No Clear Instruction After Completing Habits
Moderate
Flow & States Completeness
The Problem
After marking all habits complete (as indicated by check marks and 'Mark all as complete' button), there is no clear guidance or next action for the user.
Why it Matters
Users who complete their daily habits might be unsure what to do next, potentially reducing continued engagement.
How to Fix
Add a clear call-to-action or suggestion for the next step, such as viewing stats, setting new goals, or a motivational message encouraging continued progress.
Issue Highlights
Low contrast of calendar header letters
Moderate
Color & Contrast
The Problem
The day initials 'W T F S S M T' in the calendar header are a muted brown on a white background, resulting in low contrast that may be below WCAG AA compliance.
Why it Matters
Low contrast here can make it difficult for users to quickly identify days of the week, lowering overall usability especially for users with vision issues.
How to Fix
Use a darker, more saturated color for the day letters in the header to improve readability.
Issue Highlights
Low contrast of inactive navigation icons and text
Moderate
Color & Contrast
The Problem
The navigation bar icons and labels for Stats, Habi, and Me appear in a light brown/tan color on an off-white background, leading to insufficient contrast.
Why it Matters
Low contrast navigation items can hinder quick recognition and selection, particularly for users with low vision or color deficiencies.
How to Fix
Darken the icon and label colors to achieve a minimum contrast ratio of 3:1 against the background for inactive states.
Issue Highlights
Unclear 'Habi' Icon Label and Meaning
Moderate
Visual Consistency, Imagery & Media
The Problem
The bottom navigation bar includes an icon labeled 'Habi' that is visually unclear in function and meaning, and lacks standard icon clarity or commonly recognized symbol.
Why it Matters
Users may be confused about the purpose of the 'Habi' icon, increasing cognitive load and possibly reducing navigation efficiency.
How to Fix
Provide a clearer, more intuitive icon for 'Habi' or add a tooltip or short description to clarify its purpose.
Issue Highlights
Dense Arrangement of Habit Items with Multiple Tappable Areas
Moderate
Navigation & Structure
The Problem
The habit list shows 3 items each with multiple interactive targets (checkbox, text, and icons). Spacing between these targets is tight and visually similar, causing potential difficulty in quickly selecting intended elements.
Why it Matters
Users may accidentally tap the wrong area, causing frustration or unintended actions, decreasing overall efficiency navigating the habit list.
How to Fix
Increase padding around interactive elements and visually differentiate tap targets to ensure clear separation and ease of interaction.
Issue Highlights
Habit list items and checkboxes spaced too tightly
Moderate
Accessibility & Input Ergonomics
The Problem
The horizontal spacing between each habit's text and its corresponding checkbox is limited, which may lead to mis-taps when trying to select checkboxes or scroll.
Why it Matters
Insufficient spacing can increase accidental taps on the wrong target, causing user errors and frustration.
How to Fix
Add horizontal spacing between the checkbox and the habit description to create clearer separate tap zones.
Issue Highlights
Date selection buttons with similar styling create choice conflicts
Moderate
Efficiency & Cognitive Load
The Problem
The week days at the top are presented as seven separate buttons with similar visual weight, requiring users to explicitly select a day even though they're viewing the current day.
Why it Matters
Users must decide which day to select to view habits, which adds an unnecessary choice at this point and may slow down task completion.
How to Fix
Highlight the current day prominently and reduce the emphasis or number of selectable days shown, or simplify navigation to the current day by default.
Issue Highlights
Missing Guidance for New Habit Creation
Moderate
Flow & States Completeness
The Problem
The 'Create New Habit' button is prominent, but there is no indication or example of the habit creation process or what to expect next.
Why it Matters
Users unfamiliar with the app might hesitate or be unsure of how to create a new habit without onboarding or guidance.
How to Fix
Provide a tooltip, short instructions, or an example habit flow upon tapping the 'Create New Habit' button to clarify the next step.
Issue Highlights
Weak Visual Contrast in Calendar Date Navigation
Moderate
Strategic Design
The Problem
The calendar date navigation uses light beige text and thin lines on an off-white background, which results in low visual contrast and makes it hard to quickly identify the selected date and other days.
Why it Matters
Users may find it difficult to orient themselves within the week or spot the current date quickly, which hampers efficient navigation.
How to Fix
Increase contrast by using darker text colors or bolder lines for the selected date and day initials. Consider adding stronger visual cues such as background shading or larger indicators.
Issue Highlights
Date Numbers Not Aligned Vertically
Minor
Visual Consistency, Imagery & Media
The Problem
The date numbers below the day abbreviations are slightly misaligned horizontally, causing uneven spacing across the top date selector.
Why it Matters
Misalignment can visually distract and reduce the interface's professional appearance, making the UI feel less polished.
How to Fix
Adjust horizontal spacing and positions to ensure date numbers align precisely under their corresponding weekday letters.
Issue Highlights
No Visual Active State in Top Date Navigation Row
Minor
Orientation Missing (Environment/Role/Location)
The Problem
The top row of dates indicates the current date with a highlight but lacks a distinct active state or role labeling to visually communicate that these are navigation elements or a date selector.
Why it Matters
Users may not immediately understand that the dates are clickable navigation or may overlook them as important navigation for timeline filtering or context.
How to Fix
Add clearer visual affordances such as a button style or focus indicator along with a label or tooltip clarifying the role of the date navigation.
Issue Highlights
'TODAY' label lacks clear contextual purpose
Minor
Content Readability & Clarity
The Problem
The label 'TODAY' appears above the list of habits without a clear visual connection or explanation if these are today's habits or filtered tasks.
Why it Matters
Users may be unclear if the list below is filtered by date or what 'TODAY' refers to.
How to Fix
Clarify by adding context (e.g., 'Habits for Today') or visually associate the label better with the habits list.
Issue Highlights
Secondary CTA 'Create New Habit' has unclear CTA text
Minor
Conversion & Actions
The Problem
The button labeled 'Create New Habit
Takes less than 10 seconds' uses a longer description rather than a concise action phrase, which can dilute the call to action clarity.
Why it Matters
Users may be unsure exactly what the button does at a quick glance, causing hesitation or confusion.
How to Fix
Simplify the CTA text to a clearer verb phrase like 'Create New Habit' only, possibly with the time info less prominent or in supplementary text.
Issue Highlights
Unclear timezone or timezone indication for habit times
Minor
Ambiguous Date/Time/Timezone
The Problem
Times like '7:00 AM' and '8:00 AM' are shown without any timezone indication, which may be ambiguous for users in different time zones or viewing shared data.
Why it Matters
Users might get confused if habit alarms are set for their local time or another timezone, reducing reliability of reminders.
How to Fix
Include timezone indication or allow timezone settings within the app to ensure clarity for user context.
Issue Highlights
Use of fire emoji after encouragement text
Minor
Tone, Friendliness & Delight
The Problem
The fire emoji used after 'Almost there, you're doing amazing!' can be perceived as overly casual or intense in a habit tracking context.
Why it Matters
Some users might find the use of the fire emoji inconsistent with the calm and supportive tone implied by the rest of the UI, potentially lowering trust or comfort.
How to Fix
Consider replacing the emoji with a softer or more neutral positive icon, such as a smiley or a star, or avoid emojis in this supportive message.
Issue Highlights
Date selector buttons have weak affordance
Minor
Accessibility & Input Ergonomics
The Problem
The date tabs with days of the week and numbers do not clearly appear as interactive controls, which may confuse users about their clickability.
Why it Matters
Users may not realize these elements are buttons, leading to missed interaction opportunities or frustration.
How to Fix
Add visual affordances such as button styling, hover states, or slight shadows to indicate these are clickable controls.
Issue Highlights
Decorative panda image adds visual clutter without clear function
Minor
Efficiency & Cognitive Load
The Problem
A large panda image is prominently displayed between the date selector and the habit list, serving no apparent interactive or informational purpose.
Why it Matters
This visual element distracts user attention from the primary tasks and key data on the screen, increasing cognitive load unnecessarily.
How to Fix
Remove or reduce the size of the image or replace it with a more functional or motivational UI element.
Issue Highlights
Lack of Distinctive Motivational or Reward Element
Minor
Strategic Design
The Problem
The motivational text 'Almost there, you're doing amazing!' and accompanying emoji provide some encouragement but lack a visually distinctive or memorable reward or progress visualization above the fold, such as a progress bar or animation.
Why it Matters
This may reduce user motivation and emotional engagement by missing an opportunity to reinforce progress in a memorable way.
How to Fix
Add a progress bar, animated confetti, or a visually rich completion badge near the top section to create a stronger sense of accomplishment.
Issue Highlights