Vendor Management Dashboard
The interface effectively uses a consistent purple color palette that creates visual unity and highlights key areas like the welcome message and action buttons. However, the crowded header navigation and closely packed status sections could benefit from improved spacing and clearer hierarchy for better readability and usability.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast3
Content Readability & Clarity3
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions3
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load2
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
1Critical
8Major
15Moderate
1Minor
Very low contrast on vendor management system header text
Critical
Color & Contrast
The Problem
The 'VENDOR MANAGEMENT SYSTEM' text near the top of the purple header has very low contrast against the dark purple background, likely below the WCAG AA level for normal text.
Why it Matters
Low contrast text is difficult to read, especially for users with visual impairments, making it hard to understand the purpose of the page.
How to Fix
Increase the contrast by using a lighter color for the text or a darker background color to meet at least WCAG AA contrast ratio of 4.5:1 for normal text.
Issue Highlights
Top navigation bar lacks active state indicator
Major
Navigation & Structure
The Problem
The top navigation menu items do not show any active or selected state to indicate the current page or section the user is in.
Why it Matters
Users cannot easily determine which section they are currently viewing, which can cause confusion and reduce usability.
How to Fix
Implement a clear visual indicator such as a highlight, underline, or color change to show the active navigation item.
Issue Highlights
Top navigation icons and text targets are too small
Major
Accessibility & Input Ergonomics
The Problem
The icons and accompanying text in the top navigation bar are very small, likely smaller than the recommended 44x44 pixels tap target size, which may make them hard to tap accurately on touch devices.
Why it Matters
Small tap targets increase the risk of user frustration and errors because users may accidentally tap the wrong item or have difficulty activating their intended target.
How to Fix
Increase the size of each icon and text combination to meet minimum touch target size guidelines (44x44 pixels minimum touch area). Add padding around the clickable items to improve touch accuracy.
Issue Highlights
Low contrast on sidebar text in purple panels
Major
Color & Contrast
The Problem
The list item labels and counts inside the right side light purple overlay panels have low contrast against their backgrounds, making them difficult to read.
Why it Matters
Users with visual impairments or in low-light conditions may struggle to distinguish these texts, reducing usability and accessibility.
How to Fix
Use a darker text color or a lighter background color to improve the contrast to at least meet WCAG AA text contrast requirements.
Issue Highlights
No clear page or section orientation provided
Major
Orientation Missing (Environment/Role/Location)
The Problem
The screen lacks a visible breadcrumb, page title, or role indication aside from the welcome message, making it unclear to users exactly where they are or what role context they are operating under.
Why it Matters
Without clear orientation, users may feel lost or uncertain of their current context within the system, increasing cognitive load and decreasing efficiency.
How to Fix
Add a clear page title or breadcrumb trail and/or role/environment indicator prominently near the top of the page to reinforce location and context.
Issue Highlights
Top navigation items positioned too closely
Major
Accessibility & Input Ergonomics
The Problem
The icons and text components in the top navigation are placed with minimal horizontal spacing, causing clickable elements to be tightly packed and potentially difficult to tap precisely without activating neighboring items.
Why it Matters
Closely spaced clickable elements increase the likelihood of accidental taps on the wrong item, leading to higher error rates and user frustration.
How to Fix
Increase horizontal spacing or padding between interactive elements in the navigation bar to ensure clear separation and easier touch targeting.
Issue Highlights
Excessive top navigation options increase choice burden
Major
Efficiency & Cognitive Load
The Problem
The top navigation bar includes 11 distinct clickable options, plus two prominent buttons on the right, presenting many competing decisions at once.
Why it Matters
Users may feel overwhelmed or uncertain where to focus first, increasing cognitive load and slowing task initiation.
How to Fix
Consolidate related navigation items into grouped menus or reduce the number of visible options by prioritizing the most important actions.
Issue Highlights
Missing Primary Action to Continue Workflow
Major
Flow & States Completeness
The Problem
The screen lacks a clear call-to-action or primary button guiding the user on what to do next after the welcome message. While there are navigation options, there is no obvious prompt or highlighted next step for the user’s immediate action.
Why it Matters
Without a clear next step, users may be uncertain how to proceed, causing confusion and potentially delaying task completion or increasing drop-off.
How to Fix
Add a prominent button or link that suggests the next logical action, such as 'Create New Request' or 'Start Vendor Assessment', clearly indicating where the user should go next.
Issue Highlights
Status panels blend into background with low contrast
Major
Strategic Design
The Problem
The panels listing statuses for 'My Request' and 'My Assessment' use a translucent background with low contrast text, making them difficult to read and visually blend into the purple gradient behind them.
Why it Matters
Low contrast reduces readability and may cause users to overlook important status information critical for tracking requests and assessments.
How to Fix
Increase contrast for text and panel backgrounds by using solid colors or stronger opacity to clearly separate these status panels from the background.
Issue Highlights
Body Text Below Main Header is Too Small
Moderate
Content Readability & Clarity
The Problem
The descriptive text 'Streamline vendor onboarding...' is very small and possibly difficult to read comfortably, especially over the purple gradient background.
Why it Matters
Small body text may cause reading strain and reduce content accessibility, discouraging users from reading important information on the screen.
How to Fix
Increase font size for the body text and improve contrast with the background to ensure it meets readability standards.
Issue Highlights
Status Lists Lack Clear Headings or Separation
Moderate
Content Readability & Clarity
The Problem
The two adjacent status lists for 'My Request' and 'My Assessment' appear as similar bullet lists without clear heading or grouping distinction, making scanning difficult.
Why it Matters
Users may have trouble quickly identifying that these are two separate categories or lists, hampering comprehension of the status information provided.
How to Fix
Add bold or larger headings above each list or visually separate the lists using borders or padding to clarify the distinction.
Issue Highlights
Merged Uppercase Header Reduces Readability
Moderate
Content Readability & Clarity
The Problem
The text 'VENDOR MANAGEMENT SYSTEM' is uppercase and small, placed closely above the main heading, making it hard to distinguish as a separate label or section header.
Why it Matters
Users might not understand that 'VENDOR MANAGEMENT SYSTEM' is a label or category, leading to possible confusion about the context of the screen.
How to Fix
Use a larger font size or different style such as bold or a color that visually separates 'VENDOR MANAGEMENT SYSTEM' from the main header, adding whitespace or a divider above or below.
Issue Highlights
Multiple Different Icon Styles in Navigation Menu
Moderate
Visual Consistency, Imagery & Media
The Problem
The navigation menu icons exhibit inconsistent visual styles; for example, some icons are solid while others are line-based or partial filled, leading to a lack of uniformity across the menu.
Why it Matters
Inconsistent icon styles can confuse users and reduce the perceived professionalism and coherence of the interface.
How to Fix
Use a consistent icon set where all icons share the same stroke weight, fill style, and visual treatment.
Issue Highlights
Primary CTAs lack urgency and clarity
Moderate
Conversion & Actions
The Problem
The two main action buttons, 'Contact 3P Team' and 'Status Definitions', are labeled with generic terms that do not convey immediate user benefits or next steps clearly.
Why it Matters
Users may feel uncertain what the most important action is or what will happen when they click these buttons, reducing engagement and conversion.
How to Fix
Re-label CTAs with more specific action-driven language that clearly communicates the benefit or outcome, such as 'Request Support from 3P Team' or 'View Status Definitions Details'.
Issue Highlights
Dark Purple Background Creates Overwhelming Tone
Moderate
Tone, Friendliness & Delight
The Problem
The deep purple background color behind the welcome message and system name overwhelms the lighter text and creates a heavy, less inviting visual tone for users returning to the vendor management system.
Why it Matters
A heavy, dark visual tone can reduce users' emotional comfort when engaging with the system, impacting their perception of ease and approachability.
How to Fix
Consider lightening the background color to a more muted tone or using a gradient that transitions from dark to lighter purple, improving readability and creating a friendlier atmosphere.
Issue Highlights
Welcome message lacks personalization impact
Moderate
Strategic Design
The Problem
The welcome message 'Welcome back, Hello World' is generic and does not offer personalized or memorable content to engage users immediately on entry.
Why it Matters
A generic greeting fails to create a connection or motivate the user to engage deeply with the system, reducing user satisfaction and emotional engagement.
How to Fix
Replace placeholder text 'Hello World' with the user's real name or a customized message that reflects user activity or status.
Issue Highlights
Text Blocks in Purple Banner Misaligned Horizontally
Moderate
Visual Consistency, Imagery & Media
The Problem
The two status lists on the right side of the purple banner are misaligned horizontally, causing visual imbalance within the container.
Why it Matters
Misaligned elements create a distracting and unprofessional appearance, which can reduce user trust and make information harder to process.
How to Fix
Align the two status boxes so their left edges align on a vertical grid line to create a balanced and tidy layout.
Issue Highlights
Button Styles Not Consistent in Top Right
Moderate
Visual Consistency, Imagery & Media
The Problem
The two buttons in the top right have different background and text color characteristics, with subtle differences in shade and border radius.
Why it Matters
Inconsistent button styling can confuse users about clickability or importance and makes the UI feel unrefined.
How to Fix
Standardize button styles by using the same background color, font style, and border radius for all buttons.
Issue Highlights
Small action buttons 'Contact 3P Team' and 'Status Definitions'
Moderate
Accessibility & Input Ergonomics
The Problem
The two buttons on the right labeled 'Contact 3P Team' and 'Status Definitions' have reasonable size but appear narrower in height than ideal touch targets for accessibility standards.
Why it Matters
Slightly smaller tap targets can cause difficulty for users with reduced dexterity or when using small screens, increasing error risk.
How to Fix
Increase the vertical size and padding of these buttons to meet touch target minimums of roughly 44x44 pixels.
Issue Highlights
Multiple status lists add unnecessary complexity
Moderate
Efficiency & Cognitive Load
The Problem
Two separate status lists (My Request and My Assessment) each show five or more status options with counts, adding micro-steps to processing information.
Why it Matters
Users must mentally parse and compare multiple categories of statuses, increasing effort to understand work state at a glance.
How to Fix
Merge status lists where possible or simplify by focusing on key statuses with actionable items only.
Issue Highlights
Top navigation icons lack consistent visual hierarchy
Moderate
Strategic Design
The Problem
The top navigation bar uses multiple icon styles and sizes with inconsistent emphasis, which can make it hard for users to quickly find the primary navigation items.
Why it Matters
Inconsistent iconography reduces scan efficiency and can confuse users about which options are most important or related.
How to Fix
Standardize icon style, size, and spacing to create a clear visual hierarchy that guides users efficiently through major navigation options.
Issue Highlights
Navigation items densely spaced with many clickable options
Moderate
Navigation & Structure
The Problem
The top navigation bar contains many items placed close to each other horizontally, which may make it difficult for users to quickly scan or select an option without errors.
Why it Matters
Dense navigation can cause users to misclick or feel overwhelmed, reducing navigation efficiency and causing frustration.
How to Fix
Increase spacing between navigation items or group related items into dropdown menus to reduce clutter and improve click accuracy.
Issue Highlights
No Reassurance or Context for Contacting 3P Team
Moderate
Tone, Friendliness & Delight
The Problem
The 'Contact 3P Team' button is prominent but lacks any nearby trust signals or explanation about what happens when clicked, which may cause hesitation.
Why it Matters
Users performing sensitive or external communications need context and reassurance to feel safe and confident that their action is appropriate and secure.
How to Fix
Add a short note or tooltip near the button explaining the purpose of contacting the 3P team, privacy considerations, or expected response times.
Issue Highlights
No Instruction or Guidance in Status Summary Section
Moderate
Flow & States Completeness
The Problem
The two status summary boxes 'My Request' and 'My Assessment' list counts by status but provide no guidance or actionable links for users to understand what to do with these statuses or how to navigate them.
Why it Matters
Users may not understand the significance of each status or how to proceed with items in those states, leading to potential confusion or missed actions.
How to Fix
Add brief instructional text or links within the status boxes that guide users to view, edit, or take action on items under each status category.
Issue Highlights
Button Colors Lack Emotional Warmth and Trust
Minor
Tone, Friendliness & Delight
The Problem
The 'Contact 3P Team' and 'Status Definitions' buttons use similar muted purple tones that do not visually differentiate their purposes nor convey urgency or reassurance.
Why it Matters
Sensitive actions like contacting a third-party team should use colors and tones that build trust and clarity, making the action feel safe and supported.
How to Fix
Use more distinct and emotionally appropriate button colors for sensitive actions, such as a calming or trustworthy blue, and add a reassuring label or tooltip.
Issue Highlights