Project Timeline Dashboard
The interface excels in presenting detailed project timelines with clear visual progress indicators and contextual tooltips, enhancing user understanding at a glance. However, the dense layout and small text may hinder quick scanning, and the filter controls could benefit from better grouping and labeling for improved usability.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity4
Visual Consistency, Imagery & Media1
Navigation & Structure2
Conversion & Actions3
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load1
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
4Major
21Moderate
2Minor
Timeline progress bars missing axis units and legend
Major
Visual Consistency, Imagery & Media
The Problem
The timeline bars use percentages, dates, and currency amounts without axis labels or legends explaining colors and striped areas.
Why it Matters
Without clear units and legend, users may misunderstand what the bars represent, leading to inaccurate interpretation of project progress and financials.
How to Fix
Add axis labels for dates and percentages, and include a legend clarifying the meaning of different colors and striped fill patterns.
Issue Highlights
Primary action for project tasks is missing or unclear
Major
Conversion & Actions
The Problem
The Projects board interface does not show any clear primary call-to-action buttons related to key user tasks such as adding, editing, or managing projects directly. The '+' icon top right is ambiguous with no label or tooltip visible, which may confuse users about how to add new projects or tasks.
Why it Matters
Without a clear and prominent primary action, users may be uncertain how to proceed with common tasks, reducing conversion and causing frustration.
How to Fix
Add a clearly labeled primary button for common actions such as 'Add Project' or 'Create Task' near project interactions, and ensure all icons have tooltips or accessible labels.
Issue Highlights
Alert Lacks Clear Recovery Instructions or Reassurance
Major
Tone, Friendliness & Delight
The Problem
The alert popup states '1 invoice rejected by partner' but does not provide guidance on the next steps to resolve this issue or reassurance that it can be fixed.
Why it Matters
Users encountering this alert may feel uncertain or anxious about the problem, reducing trust and increasing support requests.
How to Fix
Add clear instructions or links for users to follow up on the rejected invoice and provide reassuring language about resolution options.
Issue Highlights
Small interactive icon buttons in top-right corner
Major
Accessibility & Input Ergonomics
The Problem
The plus, bell, and user profile icon buttons in the top-right corner appear to be smaller than recommended touch target size (less than 44x44 dp), requiring precise tapping.
Why it Matters
Small touch targets increase user error rates for tapping and make the interface difficult to use, especially on touch devices or for users with limited dexterity.
How to Fix
Increase the size and spacing of these icon buttons to at least 44x44 dp or about 10mm, ensuring adequate padding around each interactive element.
Issue Highlights
Low contrast for 'Showing 19 results' text
Moderate
Color & Contrast
The Problem
The text 'Showing 19 results' appears in a light gray color on a light background, likely failing WCAG AA contrast ratio of 4.5:1 for normal text.
Why it Matters
Users with low vision or color deficiencies may struggle to read this information, reducing usability for results count visibility.
How to Fix
Use a darker text color or a darker background behind the text to increase the contrast to at least 4.5:1 for normal text.
Issue Highlights
Date range lacks timezone or context
Moderate
Ambiguous Date/Time/Timezone
The Problem
The date ranges shown (e.g., 'Jun 1 – Aug 31, 2026' and 'Jun 20 — Jul 20, 2026') do not indicate a timezone or clarifying context.
Why it Matters
Users in different timezones might misinterpret when projects actually start or end, which can lead to scheduling confusion.
How to Fix
Add timezone information or clarify that dates are in a specific timezone or local time standard.
Issue Highlights
Inconsistent priority badge colors
Moderate
Visual Consistency, Imagery & Media
The Problem
Priority badges in the project list show 'High' in a peach color and 'Medium' in a pale yellow color, causing inconsistency in badge styling within the same context.
Why it Matters
Inconsistent badge colors may confuse users and reduce clarity about priority levels at a glance.
How to Fix
Use a consistent color scheme for all priority badges or ensure each priority level has a clearly differentiated and intuitive color.
Issue Highlights
Misaligned filter chips relative to search bar
Moderate
Visual Consistency, Imagery & Media
The Problem
The filter chips ('Creation date', 'Amount') are visually offset to the left compared to the aligned search bar above them, breaking the visual grid alignment.
Why it Matters
Misalignment of UI elements increases cognitive load and reduces the interface's professional feel.
How to Fix
Realign the filter chips to match the left edge of the search bar to maintain a consistent grid layout.
Issue Highlights
Low contrast for date range 'Jun 1 — Aug 31, 2026'
Moderate
Color & Contrast
The Problem
The date range text in the filter pill uses a medium gray text on a medium-lighter gray background, likely below WCAG AA requirements for normal text contrast ratio.
Why it Matters
Users with vision impairments may find it difficult to clearly read filter date information, impacting filter usability.
How to Fix
Increase the text color contrast by using a darker text color or lighten the background pill color to ensure at least 4.5:1 contrast ratio.
Issue Highlights
Low contrast for Amount filter text 'CHF 4 000 — 100 000'
Moderate
Color & Contrast
The Problem
The 'Amount' filter pill text uses a medium gray tone on a light gray background, likely failing WCAG AA normal text contrast standards.
Why it Matters
Low contrast can impair readability for users with visual impairments, making filter values hard to read.
How to Fix
Use a darker text color or increase background brightness to improve contrast to meet WCAG AA levels.
Issue Highlights
Insufficient differentiation between key numbers and labels
Moderate
Weak Hierarchy in Text
The Problem
Text such as 'CHF 4 300.00 / 35 000.00 (1/5 invoices)' blends label and values with similar text weight and size, making it harder to parse important figures quickly.
Why it Matters
Users must spend extra time interpreting which numbers matter most and their relationship to each other, slowing comprehension and decision-making.
How to Fix
Increase contrast or font weight for critical numbers or separate labels visually from values through spacing, color, or typography.
Issue Highlights
Toolbar icons missing labels or tooltips
Moderate
Visual Consistency, Imagery & Media
The Problem
The icon buttons in the upper right toolbar and above the project list (filter, folder, refresh, download, and settings icons) lack visible textual labels or tooltips.
Why it Matters
Users may be uncertain about icon functions, increasing cognitive load and reducing usability.
How to Fix
Add visible labels or accessible tooltips to clarify each icon's purpose.
Issue Highlights
No clear visible navigation active state
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The left sidebar icons do not display a clear or prominent active state to indicate the current section, making it difficult to understand which part of the app is active or selected.
Why it Matters
Users may become confused about their current location within the interface, leading to disorientation and errors in navigation.
How to Fix
Add a clear active state style on the currently selected icon in the sidebar, such as a highlighted background, accent color, or indicator.
Issue Highlights
Icon buttons in upper right toolbar are too tightly spaced
Moderate
Accessibility & Input Ergonomics
The Problem
Filter, folder, refresh, download, and settings icons on the upper right toolbar are placed with minimal spacing between them, making it difficult to tap one button reliably without accidental taps on adjacent buttons.
Why it Matters
Closely spaced touch targets increase accidental input and reduce user confidence and efficiency when interacting with the toolbar controls.
How to Fix
Increase horizontal padding between the toolbar icon buttons while maintaining visual grouping.
Issue Highlights
Multiple Small Filtering Tags Add Cognitive Load
Moderate
Efficiency & Cognitive Load
The Problem
There are two separate filter tags visible under the 'Showing 19 results' text, representing the creation date range and amount range. Managing multiple small filter tags requires micro-decisions that add to cognitive load.
Why it Matters
Users must process multiple filter conditions at once, which can cause confusion or delay as they consider how each filter impacts the result set.
How to Fix
Consolidate filter criteria into a single compact summary or offer a toggle to expand/collapse filter detail, reducing visible micro-steps.
Issue Highlights
View Mode Dropdown Adds Extra Choice Each Time
Moderate
Efficiency & Cognitive Load
The Problem
The view mode toggle is in a dropdown with three options (Kanban, List, Timeline). Every time users want to switch the view, they must make a 3-choice decision.
Why it Matters
Constantly choosing among multiple view modes may slow users who simply want to complete workflows in their preferred default view.
How to Fix
Consider using a segmented control for main views or setting a clear default with a quick toggle to reduce the complexity of choice.
Issue Highlights
Unclear Primary Action After Viewing Project Details
Moderate
Flow & States Completeness
The Problem
The tooltip with project details including alerts and invoice status is visible, but there is no clear call to action or next step for the user to proceed after reviewing the details (e.g., edit, acknowledge, or close action).
Why it Matters
Users might be confused about how to respond to the alert or what to do next after reviewing detailed information, potentially causing delays or confusion in project management.
How to Fix
Add a distinct, actionable button or link inside or near the tooltip that clearly indicates the next step (e.g., 'Resolve Alert', 'View Invoice', or 'Close Details').
Issue Highlights
Unclear meaning of '17%' next to timeline indicator
Moderate
Content Readability & Clarity
The Problem
The '17%' text near the timeline bar is not labeled or explained, leaving its meaning ambiguous (e.g., percent completed, progress, or budget spent).
Why it Matters
Users may misinterpret the percentage, reducing trust and clarity about project status.
How to Fix
Add a label or tooltip that defines what the percentage represents.
Issue Highlights
View mode selection dropdown lacks explicit call-to-action
Moderate
Conversion & Actions
The Problem
The 'Kanban view', 'List view', and 'Timeline view' options are shown in a dropdown with selection indicator but no explicit 'Apply' or confirmation button. This makes it slightly unclear how to confirm or switch views.
Why it Matters
Users may be unsure if clicking an option immediately changes the view or requires a confirmation, potentially causing confusion or hesitation.
How to Fix
Make it clear that clicking a view option immediately switches views or add a confirmation button if a change needs user confirmation.
Issue Highlights
Missing Trust Signals for Invoice Payment Status
Moderate
Tone, Friendliness & Delight
The Problem
The financial amounts and invoice statuses are shown in the timeline, but there are no trust signals (e.g., confirmation icons, secure payment indicators) to reassure users about the accuracy or reliability of invoice data.
Why it Matters
Because this area involves financial data and payments, missing trust signals can reduce user confidence in the correctness and security of the information shown.
How to Fix
Add trust indicators such as secure badges, verified checkmarks, or explanations on data sourcing near invoice payment info.
Issue Highlights
Small tap targets in AI Assistant search bar
Moderate
Accessibility & Input Ergonomics
The Problem
Microphone and expand icons inside the AI Assistant input bar are relatively small with no visible padding, requiring precise taps.
Why it Matters
Small targets reduce usability on touch devices and can cause user frustration when controls are difficult to tap.
How to Fix
Increase the size and padding of these icons to meet recommended minimum tap target size.
Issue Highlights
Dense Left Sidebar Adds Visual Noise
Moderate
Efficiency & Cognitive Load
The Problem
The left sidebar shows many tightly spaced icons stacked vertically without labels visible. This cluster adds visual complexity but does not appear to be a direct action focus on this screen.
Why it Matters
This sidebar draws visual attention away from the main Projects board area, increasing cognitive load.
How to Fix
Combine icons with tooltips or minimize the sidebar by default, allowing expansion only on demand to reduce clutter.
Issue Highlights
Tooltip Overload Reduces Clarity in Timeline View
Moderate
Strategic Design
The Problem
The detailed tooltip containing multiple lines of text, icons, and project details appears on hover directly over timeline bars, potentially obstructing adjacent timeline content and making it harder to compare projects simultaneously.
Why it Matters
Users may find it difficult to scan and compare project timelines efficiently when tooltips hide parts of the view or require repeated hover actions.
How to Fix
Consider a dedicated side panel or inline expansion to display detailed project info without overlaying the timeline or provide a more compact tooltip design to reduce obstruction.
Issue Highlights
Alert Icons Use Warning Colors but Lack Empathetic Tone
Moderate
Tone, Friendliness & Delight
The Problem
The alert icons use bright red and orange warning colors that imply urgency and risk, but the accompanying language is overly brief and lacks warmth or empathy.
Why it Matters
Harsh warning colors combined with blunt text can create anxiety or frustration rather than constructive concern, reducing emotional comfort.
How to Fix
Soften the language around alerts to be more empathetic and include reassuring cues, while maintaining clear urgency in the visuals.
Issue Highlights
Lack of Memorable Visual Hierarchy for Project Priority Levels
Moderate
Strategic Design
The Problem
Priority labels (High, Medium) use similar pastel background colors and small rounded pill shapes that do not create strong visual differentiation, reducing the impact of priority statuses within the project list.
Why it Matters
Users might struggle to quickly identify and distinguish projects by priority, impacting task prioritization efficiency and overall project management effectiveness.
How to Fix
Use more distinct colors, stronger contrast, or additional visual indicators (such as icons or font weight) for priority levels to enhance their visibility and memorability.
Issue Highlights
Crowded top-right action icons lack grouping or spacing
Minor
Navigation & Structure
The Problem
The top-right corner contains multiple small icons for add, notifications, profile, filter, folder, refresh, download, and settings placed close together without clear grouping or spacing.
Why it Matters
Users may find it difficult to quickly identify and accurately click the intended action, increasing interaction errors and cognitive load.
How to Fix
Increase spacing between icons and visually group related icons, possibly using separators or grouping backgrounds to improve clarity.
Issue Highlights
Popup Tooltip Requires Remembering Partner and Dates
Minor
Efficiency & Cognitive Load
The Problem
The popup tooltip for the selected project bar contains partner info, services, project owner, and timeline dates, but once dismissed, this context is lost.
Why it Matters
Users must remember important contextual details when the tooltip disappears, increasing the cognitive effort required.
How to Fix
Provide a persistent summary or inline expanded information for the selected project to reduce reliance on transient tooltips.
Issue Highlights