Work Orders Dashboard
The design effectively uses a clear card layout and consistent typography, making key metrics easy to scan at a glance. However, the interface could benefit from improved visual hierarchy on navigation elements and more contrasting interactive controls to enhance usability and accessibility.
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 & Media2
Navigation & Structure1
Conversion & Actions3
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load1
Flow & States Completeness0
Strategic DesignRecommended Fixes by Impact
0Critical
2Major
16Moderate
3Minor
Vague 'Show' button label on date input
Major
Conversion & Actions
The Problem
The button labeled 'Show' next to the date input '2-104' is vague and does not clearly communicate what action will occur when clicked.
Why it Matters
Users may hesitate or be uncertain about what will happen when they click the 'Show' button, potentially reducing conversion or engagement.
How to Fix
Replace the generic 'Show' label with a more descriptive action such as 'Filter' or 'View Work Orders' to clarify the button's purpose.
Issue Highlights
Unclear actionable next step after viewing work order stats
Major
Flow & States Completeness
The Problem
The dashboard presents various summarized statistics about work orders but does not provide clear buttons or links to view detailed lists or next steps for managing these work orders.
Why it Matters
Users viewing summarized stats might want to drill down or take action on open work orders, emergencies, or completion rates but have no clear visible pathway to proceed.
How to Fix
Add explicit call-to-action buttons or clickable links near the statistics blocks that lead to detailed views or actions such as reviewing open work orders, adding new work orders, or resolving emergencies.
Issue Highlights
Ambiguous date reference in 'Weekend of 23 August 2026.'
Moderate
Ambiguous Date/Time/Timezone
The Problem
The phrase 'Weekend of 23 August 2026' does not specify which days this weekend includes (e.g., Friday-Sunday, Saturday-Sunday) or the timezone context for any time-related data.
Why it Matters
Users might misinterpret which days are included in the 'weekend' period, leading to confusion about date-specific data.
How to Fix
Clarify the range of dates included in the weekend period and provide the timezone or locale information if applicable.
Issue Highlights
Inconsistent Font Weight and Color for Data Titles in Cards
Moderate
Visual Consistency, Imagery & Media
The Problem
The titles inside the data cards use different font weights and colors: some are dark red with bold weight while others are navy or green with a less bold style, disrupting visual harmony.
Why it Matters
Inconsistent typography can confuse users about the hierarchy and importance of information, increasing cognitive load.
How to Fix
Apply a consistent font weight and color scheme for all card titles, adhering to the design system's palette and hierarchy.
Issue Highlights
Low contrast for lighter gray body text
Moderate
Color & Contrast
The Problem
Body text in paragraphs under ‘Work orders’ heading uses a gray color that appears to have insufficient contrast against the off-white background, likely below WCAG AA standards for normal text.
Why it Matters
Low contrast text can cause readability issues, especially for users with visual impairments or in low light conditions.
How to Fix
Increase the contrast by darkening the text color or lightening the background color to meet or exceed WCAG AA ratios (at least 4.5:1) for body text.
Issue Highlights
Unclear label for '2-104' input field
Moderate
Content Readability & Clarity
The Problem
The input field labeled '2-104' does not have a clear or descriptive label explaining what this value represents or how it relates to the data being displayed.
Why it Matters
Users may be confused about what input is expected or what the '2-104' means, leading to misinterpretation or incorrect use of the filter.
How to Fix
Add a clear, descriptive label or tooltip for the input field to explain its purpose and expected input.
Issue Highlights
Misaligned Vertical Borders in Work Orders Cards
Moderate
Visual Consistency, Imagery & Media
The Problem
The colored vertical borders on the left side of the cards in the 'As of the Last Read' section are inconsistently aligned; some borders are thicker or positioned slightly differently.
Why it Matters
Inconsistent alignment creates a visually unpolished and distracting interface, which can reduce user trust and readability.
How to Fix
Standardize the width and vertical alignment of the colored borders across all cards to match consistently.
Issue Highlights
Missing clear orientation on current feature context
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The page shows navigation for multiple dashboards and tabs but lacks a prominent heading or breadcrumb explicitly marking the current place in the app hierarchy beyond the tab highlight 'Work orders'. The user may be confused about the overall context within the larger system.
Why it Matters
Users need clear orientation cues to know where they are and how the information fits within their goals. Missing these cues can cause confusion and disorientation reducing confidence and navigation efficiency.
How to Fix
Add a prominent page heading or breadcrumb that clearly indicates the current dashboard, section, and user role or environment to anchor context.
Issue Highlights
Confusing phrase 'Share gone quiet' without explanation
Moderate
Tone, Friendliness & Delight
The Problem
The term 'Share gone quiet' is used without clear explanation, which may confuse users unfamiliar with this jargon.
Why it Matters
Users may misunderstand report data or feel unsure about the meaning of key metrics, reducing trust and confidence in the dashboard.
How to Fix
Provide a clear, user-friendly explanation or tooltip describing what 'Share gone quiet' means and its relevance.
Issue Highlights
Date range buttons are too close horizontally
Moderate
Accessibility & Input Ergonomics
The Problem
The numeric weekday selection buttons '8', '13', '26', and '52' have very small horizontal spacing between them, which may cause accidental taps or clicks.
Why it Matters
Users may have difficulty accurately selecting a specific date because adjacent buttons are close together, increasing the risk of errors.
How to Fix
Increase horizontal spacing between these numeric date buttons to meet recommended minimum spacing guidelines (e.g., at least 8-10mm or 44 CSS pixels).
Issue Highlights
Multiple Weekend Range Selection Options
Moderate
Efficiency & Cognitive Load
The Problem
The UI offers two competing ways to select the weekend range: preset numeric buttons (8, 13, 26, 52) and a manual text entry field with a 'Show' button. This redundancy might confuse users about which method to use.
Why it Matters
Users may pause or hesitate when deciding how to select the weekend range, potentially causing frustration or errors in selecting the correct range.
How to Fix
Consolidate the weekend range selection into one clear control, either by improving the preset buttons or making the manual input more intuitive and optional.
Issue Highlights
Low contrast for sidebar navigation inactive links
Moderate
Color & Contrast
The Problem
Sidebar navigation links such as ‘Build a Report’, ‘Enter Data’ and others use a muted gray color that appears to have low contrast against the off-white sidebar background, likely below WCAG AA for standard text.
Why it Matters
Low contrast links can make it difficult for users to identify clickable items and navigate effectively.
How to Fix
Use a darker shade of gray or stronger color for inactive links to increase contrast ratio above 4.5:1 against the background.
Issue Highlights
Weak visual hierarchy in key explanation text
Moderate
Content Readability & Clarity
The Problem
Several explanatory text blocks ('Read straight from the ticketing system...', 'AS OF THE LAST READ', etc.) appear similarly styled without strong visual differentiation, which can make it harder to quickly scan and understand the structure.
Why it Matters
Users may struggle to parse and prioritize information quickly, reducing readability and efficiency.
How to Fix
Enhance typographic hierarchy using size, weight, or color differences to better distinguish headings, subheadings, and detail text.
Issue Highlights
Primary navigation tabs lack strong active state contrast
Moderate
Navigation & Structure
The Problem
The horizontal primary navigation tabs (e.g., ‘Mass attendance’, ‘Offertory’, ‘Work orders’, etc.) use an underline to indicate the active tab but the contrast between the active and inactive states is subtle and might not be obvious at a glance.
Why it Matters
Insufficient differentiation of active navigation can cause uncertainty about which section is currently viewed, increasing cognitive load and user error.
How to Fix
Use more distinct styling such as a background color or bolder font for the active tab to clearly communicate the selected state.
Issue Highlights
No reassurance or trust signals near ticketing system integration info
Moderate
Tone, Friendliness & Delight
The Problem
The dashboard states the data is 'read from the ticketing system' and 'nobody types these' without any trust indicators about data accuracy or privacy.
Why it Matters
Users reviewing sensitive operational or maintenance data may want assurance about data integrity and access security but none is offered here.
How to Fix
Add trust signals such as a short note about data privacy, system reliability, or audit logs near the ticketing system data statement.
Issue Highlights
Small 'Show' button with adjacent input field
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Show' button next to the small input field is a compact touch target, likely less than recommended minimum size (e.g., 44x44 CSS pixels). The input field and button are close together, requiring precise tapping.
Why it Matters
Users, especially on touch devices, may have difficulty activating the 'Show' button accurately due to its small size and close proximity to the input field.
How to Fix
Increase the size of the 'Show' button to meet minimum touch target dimensions (about 44x44 CSS pixels) and add sufficient spacing between the input field and button.
Issue Highlights
Low contrast for weekday date range label
Moderate
Color & Contrast
The Problem
The label text ‘Weekend of 23 August 2026.’ in the top right area uses a medium gray that blends with the light background, likely below WCAG AA contrast.
Why it Matters
This reduces clarity of important date context information for all users.
How to Fix
Darken the label text color to improve contrast above WCAG AA minimum standards.
Issue Highlights
Excessive Data Boxes Without Clear Prioritization
Moderate
Efficiency & Cognitive Load
The Problem
The dashboard displays many data panels with varying metrics and color codings close to each other, which can create visual clutter and make it harder to quickly focus on the most important info.
Why it Matters
Users may feel overwhelmed or confused while scanning the dashboard for key insights, leading to slower comprehension and increased cognitive effort.
How to Fix
Use layout or hierarchy techniques to group related data, reduce less critical information visibility, or allow users to customize the dashboard to their priorities.
Issue Highlights
Missing Units on Numeric Metrics in Cards
Minor
Visual Consistency, Imagery & Media
The Problem
Several numeric metrics such as 'Work Orders Still Open' (3) and 'Open Emergencies' (2) in the cards have no accompanying units or clarifying labels.
Why it Matters
Absence of units or context may make it unclear what the number represents, increasing chances of misinterpretation.
How to Fix
Add clear units or descriptive labels directly associated with each numeric metric for clarity.
Issue Highlights
Sidebar navigation links and sub-dashboard links densely placed
Minor
Navigation & Structure
The Problem
The left sidebar has many navigation links and a sub-section of 'Other Dashboards' with many small links close together, making it potentially hard to scan quickly or tap on touch devices.
Why it Matters
Crowded link placement increases risk of misclicks and slows down scanning and mental mapping of navigation structure.
How to Fix
Increase spacing between links, group related links more distinctly, or collapse less frequently used navigation under toggles.
Issue Highlights
Use of 'Gone Quiet' in dark red evokes negative emotions
Minor
Tone, Friendliness & Delight
The Problem
'Gone quiet' is shown in a dark red color that can evoke alarm or serious issues, but the tone of the dashboard is otherwise neutral and informational.
Why it Matters
This coloring may create unnecessary anxiety or negative emotional reaction for users reviewing normal operational metrics.
How to Fix
Consider using a less alarming color such as amber or muted orange for 'gone quiet' to better match the dashboard's helpful, neutral tone.
Issue Highlights