Sales Pipeline Dashboard
The interface effectively uses color coding and layout to clearly represent different sales stages, enhancing quick comprehension of deal statuses. However, the dark theme impacts readability due to low contrast in some text and icons, and the overall density of information could be better spaced for improved clarity and ease of interaction.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load3
Flow & States Completeness1
Strategic DesignRecommended Fixes by Impact
0Critical
5Major
15Moderate
4Minor
Low contrast for sidebar menu icons and labels
Major
Color & Contrast
The Problem
Sidebar menu icons and text labels use dark gray on very dark background, likely below WCAG AA contrast ratio for normal text.
Why it Matters
Users with low vision or color vision deficiencies may have difficulty discerning navigation options.
How to Fix
Increase text and icon color brightness or darken background to ensure contrast ratio meets at least 4.5:1 for normal text per WCAG AA.
Issue Highlights
Ambiguous Deadline Text '1d over', '5d over', etc.
Major
Ambiguous Date/Time/Timezone
The Problem
The deadline warnings such as '1d over', '5d over' are brief and ambiguous, lacking context about whether the deadline is past due or how the days are being counted (business days, calendar days).
Why it Matters
Users might be confused about the urgency or status of these deadlines, impacting their ability to prioritize tasks correctly.
How to Fix
Use clearer deadline language such as '1 day overdue', '5 days past due', or include tooltip explanations. Consider adding exact dates or times for clarity.
Issue Highlights
Insufficient user role and current location orientation
Major
Orientation Missing (Environment/Role/Location)
The Problem
While the user role 'ADMIN' is shown on the sidebar and user info, the main content area does not clearly indicate the current section or task the user is in apart from the small highlighted sidebar item and top heading. There is no strong breadcrumb or page context to confirm the user's exact location in navigation.
Why it Matters
Users may get confused or lose track of where they are within the app, especially in multi-role systems or complex workflows, causing frustration and errors.
How to Fix
Add clearer page breadcrumbs or stronger visual emphasis on current location and task, including more visible active states and contextual labels in the main content area.
Issue Highlights
Empty stages lack guidance or prompts
Major
Flow & States Completeness
The Problem
The 'Lead', 'Qualified', 'Proposal', 'Negotiation', and 'Lost' columns show no deals and only a faint 'Drop here' placeholder, but no additional messages or guidance are provided for empty states.
Why it Matters
Empty columns with no guidance can confuse users about what actions to take—for instance, whether they need to add deals manually, drag and drop, or wait for data to populate.
How to Fix
Include informative messaging or actionable prompts in empty states, such as 'No deals here. Drag deals here to move,' or 'Create a new deal to get started.'
Issue Highlights
No loading or error state shown for deal data
Major
Flow & States Completeness
The Problem
The interface shows deal data in the 'Won' column but does not display any indication of loading or errors for other stages, which appear empty without context.
Why it Matters
If deal data is delayed or fails to load, users may mistakenly think there are simply no deals and may not understand if the system is working correctly.
How to Fix
Implement visible loading states or 'No data available' messages with error feedback where appropriate for empty columns or when data retrieval is in progress.
Issue Highlights
Low contrast for filter tag labels and counts
Moderate
Color & Contrast
The Problem
Filter labels such as 'Lead', 'Qualified', and counts '0' are shown in medium gray on dark backgrounds, making them hard to read.
Why it Matters
Users may struggle to quickly read filter and status labels, reducing usability and discoverability.
How to Fix
Increase color contrast of these labels to meet WCAG AA minimum of 4.5:1 for normal text.
Issue Highlights
Low contrast status labels under cards
Moderate
Color & Contrast
The Problem
The red text labels showing '1d over', '5d over', etc. under each deal card have insufficient contrast with the dark card background.
Why it Matters
Users may miss critical status information about deal delays or deadlines.
How to Fix
Use a lighter shade of red or add a semi-transparent light background behind the text to improve legibility to WCAG AA standards.
Issue Highlights
Inconsistent vertical alignment of deal cards in Won column
Moderate
Visual Consistency, Imagery & Media
The Problem
The deal cards within the 'Won' column are not consistently aligned vertically, creating a staggered and visually uneven appearance.
Why it Matters
Misalignment increases cognitive load as users struggle to scan deals efficiently, which can reduce trust and perceived professionalism.
How to Fix
Adjust padding/margin of deal cards so that all cards in the same column begin from a uniform vertical baseline.
Issue Highlights
Dense cluster of filters and board columns reduce scanning clarity
Moderate
Navigation & Structure
The Problem
The filter bar with multiple tags and stages combined with numerous small clickable deal cards in a vertical board layout creates a visually dense area. The deals' small size and proximity to each other may cause accidental clicks or difficulty scanning.
Why it Matters
Users may get frustrated or confused navigating multiple interactive elements, slowing task completion or causing errors.
How to Fix
Increase spacing between cards and filters, simplify or group filters better, or use collapsible sections to reduce density and improve scannability.
Issue Highlights
Use of Dark Red for Overdue Notices Can Create Anxiety
Moderate
Tone, Friendliness & Delight
The Problem
The UI uses a dark red color with 'Xd over' text to indicate overdue deals, which may evoke anxiety or stress without providing reassuring or supportive messaging nearby.
Why it Matters
Users seeing overdue indicators in red may feel negative emotions like guilt or pressure, which can reduce engagement and satisfaction with the tool.
How to Fix
Soften the emotional tone by pairing overdue indicators with empathetic copy that helps users understand next steps or by using slightly less alarming colors that still signal urgency.
Issue Highlights
Small status indicator dots lack sufficient tap target size
Moderate
Accessibility & Input Ergonomics
The Problem
The small circular status indicator dots next to deal cards appear to be much smaller than a recommended minimum touch target size (approx. 24x24px). These dots likely require high precision to tap.
Why it Matters
Users may have difficulty tapping these small targets, leading to missed taps and frustration, especially on mobile or for users with motor impairments.
How to Fix
Increase the size of the tappable area around the dots to at least 24x24 pixels or more, ensuring comfortable and accessible touch targets.
Issue Highlights
Multiple similar filter toggles create extra steps
Moderate
Efficiency & Cognitive Load
The Problem
The interface shows two rows of similar filter toggles for deal stages (Lead, Qualified, Proposal, Negotiation, Won, Lost) which appear redundant and increase the number of decisions and clicks required.
Why it Matters
Duplicate filter controls can confuse users and make it harder to efficiently filter deals, increasing task time and cognitive load.
How to Fix
Consolidate the filter toggles into a single row or a more compact dropdown multi-select to reduce repetitive controls.
Issue Highlights
No clear next step after viewing the Pre-Sales pipeline
Moderate
Flow & States Completeness
The Problem
The screen shows multiple deals under the 'Won' category, but no clear call-to-action or guidance is presented to indicate what the user should do next after reviewing these deals.
Why it Matters
Users unfamiliar with the interface or new users may be unsure about how to proceed, causing hesitation or frustration in task completion.
How to Fix
Provide visible next-step guidance such as action buttons (e.g., 'View Deal Details', 'Move Deal', or 'Generate Report') or contextual instructions to guide users through the next logical actions.
Issue Highlights
Lack of clear visual hierarchy in deal stages
Moderate
Strategic Design
The Problem
The columns representing different deal stages use very similar visual styles and sizes, making it difficult to quickly differentiate between stages or grasp the current deal status distribution at a glance.
Why it Matters
Users may struggle to quickly understand the state of the sales pipeline, slowing down decision-making and reducing efficiency in deal tracking.
How to Fix
Use stronger visual differentiation such as contrasting background colors, borders, or varied column widths based on stage importance or deal counts. Add clearer headers or icons to emphasize current focus stages.
Issue Highlights
Poor Hierarchy in Status Filter Labels
Moderate
Content Readability & Clarity
The Problem
Status filter tags (Lead, Qualified, Proposal, Negotiation, Won, Lost) are all similar in visual weight and size, making it hard to quickly distinguish status categories and their counts at a glance.
Why it Matters
Users might struggle to quickly scan or differentiate between pipeline stages, reducing efficiency in managing deals.
How to Fix
Use a stronger hierarchy with larger or bolder text for category names, distinct coloring, or different font weights to make the statuses easier to scan.
Issue Highlights
Small rounded labels with percentage require larger tap targets
Moderate
Accessibility & Input Ergonomics
The Problem
The small rounded percentage labels (e.g. '100%') on deal card items appear visually small and may be less than recommended touch target size.
Why it Matters
Users may find it difficult to interact with these elements accurately due to their small size, resulting in higher error rates or frustration.
How to Fix
Enlarge tap targets for these labels by increasing padding or using invisible hit areas of at least 24x24 pixels.
Issue Highlights
Too many partner filter options clustered together
Moderate
Efficiency & Cognitive Load
The Problem
The partner filters show many options side-by-side (SSI, A8, CSTX, Compucom, etc.) which can overwhelm users with too many choices at once.
Why it Matters
Having many similar choice buttons displayed simultaneously can slow decision making and may cause users to overlook options or experience fatigue.
How to Fix
Use a searchable dropdown or collapsible filter groups to reduce clutter and minimize competing decisions visible at once.
Issue Highlights
Inconsistent use of currency formatting across deal cards
Moderate
Visual Consistency, Imagery & Media
The Problem
Deal cards within the 'Won' column show amounts with different formats such as '₹450', '$10K', and '$50K' causing a stylistic inconsistency.
Why it Matters
Inconsistent currency representation can confuse users about amounts and reduce perceived professionalism.
How to Fix
Standardize currency formats across all deal amounts, including the use of symbols and abbreviations consistently.
Issue Highlights
Deal card small icon badges are closely spaced
Moderate
Accessibility & Input Ergonomics
The Problem
The small circular badge icons showing user initials or statuses are positioned tightly next to other elements within each deal card, with minimal spacing.
Why it Matters
Close placement increases risk of accidental taps on adjacent targets, which can frustrate users or cause input errors.
How to Fix
Add sufficient spacing (at least 8px) between these badges and adjacent tappable UI elements to prevent accidental touches.
Issue Highlights
Excessive information shown on deal cards creates clutter
Moderate
Efficiency & Cognitive Load
The Problem
Each deal card contains many data points such as deal ID, project name, company, price, progress %, overdue days, and user icons, making the columns visually heavy.
Why it Matters
Too much detail on cards without hierarchy or prioritization can reduce scannability and make it harder to quickly assess deal status or progress.
How to Fix
Simplify deal cards to only show key info by default with expandable details if needed.
Issue Highlights
Unlabeled circular status and user initials icons within deal cards
Minor
Visual Consistency, Imagery & Media
The Problem
The small colored circular icons representing status (dot) and user initials lack labels or tooltips, making their meaning unclear.
Why it Matters
Users may not understand what these icons signify, causing confusion and reducing usability especially for new users.
How to Fix
Add hover tooltips or text labels describing the meaning of the colored dots and user initials icons.
Issue Highlights
Primary CTA label '+ New Deal' is somewhat generic
Minor
Conversion & Actions
The Problem
The primary call to action button in the top right corner is labeled '+ New Deal', which is functional but a bit generic. It could be more action-oriented or descriptive to clarify what happens when clicked.
Why it Matters
Users might hesitate or be unclear about what creating a 'New Deal' entails, which can reduce conversion or engagement.
How to Fix
Make the CTA label more descriptive or action-focused, e.g., 'Create New Deal' or 'Start New Deal'.
Issue Highlights
No Trust or Confirmation Cues for 'New Deal' Button
Minor
Tone, Friendliness & Delight
The Problem
The '+ New Deal' button lacks any visible trust signals or reassurance that user actions here are secure, reversible, or guided.
Why it Matters
Users may hesitate to add new deals if they are unsure about how to undo or confirm changes, increasing anxiety around making mistakes.
How to Fix
Add tooltips, confirmation dialogs, or brief reassuring messages near the button or upon clicking it, emphasizing data safety and ease of reversal.
Issue Highlights
User must remember meaning of color-coded status and icons
Minor
Efficiency & Cognitive Load
The Problem
The deal status colors (green, red, yellow) and icons (colored dots, user initials) presumably represent specific meanings but no explanatory legend is visible.
Why it Matters
Users unfamiliar with the color codes or icons might need to guess or recall their meanings, increasing cognitive load and error risks.
How to Fix
Add an always-visible or hover-revealed legend explaining color codes and icons.
Issue Highlights