Taxi Performance Dashboard
The dashboard excels in presenting complex data with clear visual hierarchy and intuitive filtering options, enhancing data comprehension. However, improvements could be made in reducing visual clutter and ensuring tighter alignment to improve readability and focus.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast4
Content Readability & Clarity4
Visual Consistency, Imagery & Media2
Navigation & Structure2
Conversion & Actions0
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics4
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
3Major
20Moderate
5Minor
Dashboard crowded with numerous small numeric KPI cards
Major
Efficiency & Cognitive Load
The Problem
There are many small KPI cards (e.g., Total Revenue, Number of Trips, Passengers Carried, Average Fare, etc.) densely packed with similar numeric and percentage change metrics, which visually compete for attention.
Why it Matters
This dense presentation increases cognitive load, making it difficult for users to quickly identify the most important insights and causing visual overload.
How to Fix
Prioritize and reduce KPIs shown simultaneously or group related metrics with clearer hierarchy to improve scanability.
Issue Highlights
Unclear primary action for date or filter updates
Major
Conversion & Actions
The Problem
The dashboard has date range selectors and filter buttons but the main action button to apply these filters is ambiguous or missing. The 'Refresh' button at top right is present but its function is not clearly connected to the filter changes, and there is no explicit 'Apply Filters' button.
Why it Matters
Users may be uncertain about how to confirm or update the dashboard data after changing filters, potentially causing confusion or delay in updating information.
How to Fix
Add a clear and visually distinct primary CTA button such as 'Apply Filters' near the filter controls that clearly indicates how to update the dashboard with selected parameters.
Issue Highlights
Sidebar icons and text have insufficient contrast
Major
Color & Contrast
The Problem
The white icons and text on the dark blue sidebar have moderate contrast but some smaller icons/text might fall short of WCAG AA 4.5:1 contrast threshold due to the dark blue background not being pure black.
Why it Matters
Users with low vision or color deficiencies might find navigation elements harder to read and recognize, impacting usability.
How to Fix
Increase the brightness or whiteness of the icon and text colors or darken the background further to ensure clear distinction and meet WCAG contrast ratio standards.
Issue Highlights
Light gray text below large bold text has insufficient contrast
Moderate
Color & Contrast
The Problem
The smaller gray text (e.g., '$159,529,175' below the large bold total revenue) appears low contrast against the white background, likely below WCAG AA standards for normal text.
Why it Matters
Users with mild visual impairments or in bright environments may struggle to read the secondary data, reducing overall comprehension.
How to Fix
Increase the contrast of the gray text by using a darker shade of gray or black, ensuring at least 4.5:1 contrast ratio against white background.
Issue Highlights
Daily Revenue Bar Chart Missing Y-axis Units Label
Moderate
Visual Consistency, Imagery & Media
The Problem
The Y-axis shows numeric values (e.g., 0M to 4M) but does not explicitly label the axis with the unit 'USD' or 'Revenue ($)', which could be confusing to some users.
Why it Matters
Missing explicit units on chart axes can cause users to misinterpret the numbers, impacting data comprehension.
How to Fix
Add a clear label for the Y-axis describing the unit (e.g., 'Revenue (USD)') near the axis or chart title area.
Issue Highlights
Gray labels in data cards have low contrast
Moderate
Color & Contrast
The Problem
Labels such as 'vs previous period' in various cards use thin gray text on a white background, making them difficult to read for users with vision impairments due to low contrast.
Why it Matters
Important contextual cues become hard to discern, potentially confusing users about the meaning of data changes.
How to Fix
Use a darker shade of gray or black for these labels to meet WCAG AA contrast guidelines (at least 4.5:1).
Issue Highlights
Text in table showing Top Borough Pairs by Total Rides is too small
Moderate
Content Readability & Clarity
The Problem
The rows under 'Top Borough Pairs by Total Rides' use small font sizes that may be difficult to read at a glance, especially for users with impaired vision or on smaller displays.
Why it Matters
Small text in detailed tables can reduce readability and cause users to struggle when analyzing data, increasing cognitive load.
How to Fix
Increase font size to at least 14px or equivalent body text size and optimize line spacing for clarity.
Issue Highlights
Filter categories lack clear descriptions
Moderate
Content Readability & Clarity
The Problem
The filter groups such as 'Payment Method,' 'Vendor,' and 'Date Range' are labeled but some buttons like 'Unknown' or 'No Charge' may be ambiguous without additional explanation of their meaning.
Why it Matters
Users may misinterpret or hesitate selecting these filters without understanding what 'Unknown' or 'No Charge' entail in context.
How to Fix
Provide short descriptions or tooltips elaborating on filter options.
Issue Highlights
Top Borough Pairs Table Columns Misaligned
Moderate
Visual Consistency, Imagery & Media
The Problem
In the 'Top Borough Pairs by Total Rides' table, the columns for 'Pickup Borough', 'Dropoff Borough', 'Total Rides', and '% of Total' show slight horizontal misalignment in text and data rows, causing a visual imbalance.
Why it Matters
Misaligned text and numbers reduce readability and make it harder for users to scan and compare data quickly.
How to Fix
Adjust column widths and padding so all text and numeric values are aligned vertically across the table consistently.
Issue Highlights
No Clear Active State or Role Indication in Sidebar Navigation
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
Only the 'Overview' navigation item shows an active highlight. Other sections lack distinct active or hover states. There is no broader role or environment label indicating which part of the app is currently in use beyond the sidebar highlight.
Why it Matters
Without clear orientation cues, users may struggle to understand where they are within the dashboard or which role/environment the data pertains to, causing possible confusion.
How to Fix
Ensure consistent and visually distinct active and hover states for navigation items. Add a clear environment, role, or section label near the top or in breadcrumbs.
Issue Highlights
Small date picker icons in date range selector
Moderate
Accessibility & Input Ergonomics
The Problem
The calendar icons next to the start and end date input fields are small, likely smaller than the recommended 44x44 pixels touch target size.
Why it Matters
Small touch targets are difficult to tap accurately on touch devices, leading to user frustration and increased error rate.
How to Fix
Increase the size of the calendar icons or add padding around them to ensure minimum touch target size of 44x44 pixels.
Issue Highlights
Multiple small filter controls increase step count
Moderate
Efficiency & Cognitive Load
The Problem
There are three separate filter sections for Date Range, Payment Method, and Vendor with many discrete filter selections requiring users to individually interact with multiple elements to adjust their view.
Why it Matters
Requiring users to make multiple individual filter selections increases the number of clicks and cognitive effort, slowing down task completion and risking fatigue.
How to Fix
Consider consolidating filters into a single more compact multi-select control or preset filter groups to reduce the number of micro-interactions required.
Issue Highlights
No Clear Call to Action After Filter Selection
Moderate
Flow & States Completeness
The Problem
The filter controls for Date Range, Payment Method, and Vendor allow selection but do not show an explicit next step like an apply button or clear indication of automatic update, leaving user uncertain if changes are applied.
Why it Matters
Users may be confused whether their filter selections are applied immediately or if an additional action is needed, which can slow task completion or cause incorrect data interpretation.
How to Fix
Add a clear Apply or Update button near filter sections or provide prominent visual feedback that selections trigger immediate data refresh.
Issue Highlights
Dashboard Lacks a Clear Visual Hierarchy for Key Metrics
Moderate
Strategic Design
The Problem
The key metrics (Total Revenue, Number of Trips, Passengers Carried) are visually crowded and use similar font sizes and styles, which makes it hard to quickly identify the most important information or understand the relative priority at a glance.
Why it Matters
Users may have difficulty quickly grasping the primary KPIs they need to monitor, reducing the overall efficiency of the dashboard.
How to Fix
Create a stronger visual hierarchy by using more distinct font sizes, colors, or background emphasis for the most critical metrics. Group related metrics more clearly and consider a stronger headline or summary section.
Issue Highlights
Insufficient visual hierarchy between key metrics and supporting data
Moderate
Content Readability & Clarity
The Problem
The main metrics such as 'Total Revenue' ($159.5M) and 'Number of Trips' (5.97M) use larger, bolded fonts that are clearly readable, but the secondary details (e.g., exact values, vs previous period text) are only slightly smaller and less distinct, leading to some visual flattening of hierarchy.
Why it Matters
Users may find it harder to quickly scan and distinguish primary numbers from additional contextual information, slowing comprehension.
How to Fix
Increase the contrast between primary and supporting text sizes and weights; for example, make supporting text smaller or lighter in color to emphasize main values.
Issue Highlights
Unlabeled Icon Buttons in Filter and Data Cards
Moderate
Visual Consistency, Imagery & Media
The Problem
Icon buttons (e.g., refresh icon top right, filter funnel icons on cards, and graph type selector icon) have no visible labels or tooltips in the screenshot, which may confuse users about their functions.
Why it Matters
Ambiguous icons without labels increase cognitive load and can reduce usability, especially for new or infrequent users.
How to Fix
Add visible labels or ensure accessible tooltips/descriptions appear on hover or focus for all icon buttons.
Issue Highlights
Side Navigation Items Closely Spaced
Moderate
Navigation & Structure
The Problem
The vertical navigation menu on the left offers many clickable items stacked closely together with small vertical spacing, which may cause users to misclick or find it harder to scan quickly.
Why it Matters
Users may experience frustration or slower navigation due to difficulty selecting the correct menu item, harming usability and efficiency.
How to Fix
Increase vertical spacing or padding between menu items to create clearer, more distinct clickable areas while maintaining visual grouping.
Issue Highlights
'Refresh' button label is ambiguous for users
Moderate
Conversion & Actions
The Problem
The 'Refresh' button in the top right uses a label that is not specific about its action. It could mean refresh data, reload page, or apply filters, which may confuse users about the purpose of this control.
Why it Matters
Ambiguous CTA labels can reduce user confidence and delay task completion, especially when related controls (filters) are present nearby but not obviously linked.
How to Fix
Rename the 'Refresh' button to something more descriptive like 'Update Dashboard' or 'Apply Filters' to clarify its purpose.
Issue Highlights
Small toggle buttons for Payment Method filters
Moderate
Accessibility & Input Ergonomics
The Problem
The individual filter buttons such as 'Cash', 'Credit Card', 'Dispute' have a height and width smaller than comfortable finger tap targets.
Why it Matters
Small buttons require precise taps and can easily be missed or tapped incorrectly, especially on smaller mobile devices or for users with motor impairments.
How to Fix
Increase the size and spacing of filter buttons to at least 44x44 pixels or add sufficient padding.
Issue Highlights
Date range inputs and calendar icons closely grouped
Moderate
Accessibility & Input Ergonomics
The Problem
The start date input, end date input, and their respective calendar icons are positioned very closely with minimal padding, risking accidental taps on the wrong element.
Why it Matters
Closely spaced interactive elements can cause frustration and errors as users may tap the wrong control by mistake.
How to Fix
Add more horizontal spacing or padding between date inputs and their calendar icons to prevent accidental taps.
Issue Highlights
Payment method filter buttons too tightly spaced
Moderate
Accessibility & Input Ergonomics
The Problem
The filter buttons for payment methods have minimal horizontal spacing between them, which might cause accidental taps on adjacent buttons.
Why it Matters
Insufficient spacing between clickable elements increases the chance of errors and reduces usability on touch devices.
How to Fix
Increase horizontal spacing between filter buttons to prevent accidental taps between them.
Issue Highlights
Redundant Date Range inputs with slider and calendar pickers
Moderate
Efficiency & Cognitive Load
The Problem
The Date Range filter contains both calendar date pickers and a slider that control the same parameter, forcing the user to decide which input method to use for date selection.
Why it Matters
Having duplicate input methods for the same filter introduces unnecessary choices, leading to decision fatigue and inconsistent interaction patterns.
How to Fix
Choose a single, user-friendly date selection method; either calendar pickers or slider but not both simultaneously.
Issue Highlights
Multiple sorting and filtering toggle controls in small areas
Moderate
Efficiency & Cognitive Load
The Problem
Small controls for sorting and filtering data (e.g., daily/weekly toggle, filter funnel icons) are scattered next to charts and tables, requiring users to make extra decisions frequently.
Why it Matters
Frequent small decision points disrupt workflow and slow data exploration.
How to Fix
Consolidate sorting/filtering controls or implement default smart filtering to reduce user decisions.
Issue Highlights
Ambiguous label for 'Refresh' button
Minor
Content Readability & Clarity
The Problem
The 'Refresh' button is clearly labeled but lacks additional context about what will be refreshed or how often.
Why it Matters
Users unfamiliar with the dashboard might be uncertain whether this refreshes all data, only some widgets, or the date range.
How to Fix
Add a tooltip or subtext clarifying the scope of the refresh action.
Issue Highlights
Inconsistent Background Highlights on Selected Chips
Minor
Visual Consistency, Imagery & Media
The Problem
Selected filter chips like 'All' under Payment Method and Vendor use black backgrounds with yellow borders, but other UI elements use a different highlight style with lighter backgrounds.
Why it Matters
Inconsistent highlight styles make it unclear whether these chips have the same interaction behavior and importance as other selected states, causing slight user confusion.
How to Fix
Standardize the selected chip highlight style (color and border) across all filters for uniform interaction cues.
Issue Highlights
No Search or Filter in Main Navigation Sidebar
Minor
Navigation & Structure
The Problem
The sidebar navigation listing 10+ items lacks a search or filter option to quickly locate a specific menu item or section.
Why it Matters
As the application scales with more sections or features, users will find it harder to quickly navigate without search/filter in the sidebar.
How to Fix
Add a search input or filter dropdown at the top of the sidebar navigation to help users quickly find the desired section when the menu grows.
Issue Highlights
No Progression Action on Data Display Widgets
Minor
Flow & States Completeness
The Problem
Displayed metrics and charts like Total Revenue, Number of Trips, and Daily Revenue by Payment Method lack interactive affordances to explore details or next steps from this dashboard view.
Why it Matters
Users may want to drill down into data presented but find no clear actionable links, potentially limiting usability for deeper analysis.
How to Fix
Add actionable elements such as clickable cards or buttons linking to detailed reports or additional insights for each metric or chart.
Issue Highlights
Filter Selection UI Uses Same Style for Selected and Hover States
Minor
Strategic Design
The Problem
The 'All' option in the Payment Method and Vendor filters uses a dark background to show selection, but the other options do not use a clear hover or focus style to differentiate from unselected states, making it hard to see interactive affordances.
Why it Matters
Users may be unsure which options are interactive or currently selected, causing hesitation or confusion when adjusting filters.
How to Fix
Add a distinct hover and focus state styling for all filter options so users clearly see which elements are interactive and can confirm their current selections visually.
Issue Highlights