Retail Mobile Dashboard
The interface excels in clarity and simplicity, with well-organized actionable cards that use consistent iconography and color accents to differentiate transaction types. However, the UI could improve user engagement by addressing the inactive 'Coming soon' items more effectively and enhancing visual feedback for offline mode and settings access.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast2
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions1
Tone, Friendliness & Delight1
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
1Critical
2Major
12Moderate
3Minor
Low Contrast on Disabled 'Sales' and 'Goods Received' Text
Critical
Color & Contrast
The Problem
The text in the 'Sales' and 'Goods Received' tiles is rendered in light grey on a light grey background, resulting in very low contrast that fails WCAG AA contrast requirements for both normal and large text.
Why it Matters
Users will have difficulty reading these disabled or 'coming soon' labels, especially users with visual impairments, making the status unclear and reducing usability.
How to Fix
Use a darker grey or another color with sufficient contrast against the background for disabled text. Ensure contrast ratio of at least 3:1 for disabled text is met for clarity.
Issue Highlights
Missing clear screen or workspace context
Major
Orientation Missing (Environment/Role/Location)
The Problem
The screen does not provide a clear indication of the specific section or role within the app beyond the generic welcome message, lacking active navigation states or breadcrumbs.
Why it Matters
Users may feel lost or unsure about where they are in the app, which can increase confusion and reduce task efficiency.
How to Fix
Add a clear and persistent header or breadcrumb navigation that indicates the current workspace or functional area within the app.
Issue Highlights
No Clear Primary Action on Dashboard
Major
Conversion & Actions
The Problem
The dashboard screen shows multiple action options (Account Sales, Sales Order, Quotes, Lay-bys) but does not visually prioritize any single one as the primary call to action. All actionable buttons have similar size and styling, lacking emphasis on a main next step.
Why it Matters
Users may be unsure where to start or which action is most important, causing hesitation and reducing conversion through key workflows.
How to Fix
Visually highlight the primary action (such as 'Sales Order' or 'Account Sales') with distinct styling, size, or placement to guide users clearly on the most important next step.
Issue Highlights
Disabled 'Sales' and 'Goods Received' Tiles Lack Clarity
Moderate
Strategic Design
The Problem
The 'Sales' and 'Goods Received' tiles are disabled with 'Coming soon' text but their visual style is similar enough to active options, creating ambiguity about their accessibility.
Why it Matters
Users might be confused about whether these options are usable or if they mistakenly appear inactive due to poor status differentiation.
How to Fix
Use a distinct style such as reduced opacity or a clear 'disabled' indicator to differentiate unavailable options, and consider tooltips or messaging explaining unavailability.
Issue Highlights
Low Contrast on 'Offline Mode' Button Text
Moderate
Color & Contrast
The Problem
The text 'Offline Mode' is displayed in a medium-dark color on an olive-green background. The contrast appears insufficient, likely below WCAG AA standards for normal text (4.5:1), making it harder to read for users with visual impairments.
Why it Matters
Low contrast can make the button text difficult for users with low vision or color blindness to read quickly, reducing usability and accessibility.
How to Fix
Increase the contrast by using a lighter or darker text color or changing the button background to a color with higher contrast against the text. Test with contrast checker to meet at least 4.5:1 ratio for normal text.
Issue Highlights
Unclear meaning of 'Offline Mode' badge
Moderate
Content Readability & Clarity
The Problem
'Offline Mode' label appears in a small badge at the top left without further explanation or iconography, which might confuse users about the app's current state or limitations in this mode.
Why it Matters
Users might be unsure if features are restricted or if certain actions are unavailable while offline, potentially causing uncertainty or misuse of the app.
How to Fix
Add a tooltip or a brief explanation near the badge indicating what offline mode entails and how it affects app functionality.
Issue Highlights
Inconsistent icon styles in transaction grid
Moderate
Visual Consistency, Imagery & Media
The Problem
The icons next to transaction types vary in style, with some appearing outlined and others filled or less distinct, causing an inconsistent visual appearance.
Why it Matters
Inconsistent icon styles reduce visual harmony, potentially confusing users about functionality or status.
How to Fix
Standardize the icon style across all transaction types, using either all outlines or all filled icons consistently.
Issue Highlights
Unlabeled icons on transaction cards
Moderate
Visual Consistency, Imagery & Media
The Problem
Icons accompanying transaction titles do not have tooltip or text labels explaining their meaning explicitly.
Why it Matters
Users might not understand the purpose of the icons, increasing cognitive load and reducing usability.
How to Fix
Add descriptive tooltips or text labels on hover or tap to clarify each icon's meaning.
Issue Highlights
Offline Mode Indicator Lacks Reassuring Tone
Moderate
Tone, Friendliness & Delight
The Problem
The yellow 'Offline Mode' tag uses a cautionary color but lacks any reassuring or explanatory text about what offline mode means for the user.
Why it Matters
Users may feel uncertain or anxious about how offline mode affects their work, potentially reducing trust or causing confusion.
How to Fix
Add friendly, concise reassurance near the 'Offline Mode' indicator explaining what offline mode means and if any actions are needed.
Issue Highlights
Icons in top right corner are too close
Moderate
Accessibility & Input Ergonomics
The Problem
The two icons (a monitor and a gear) in the top right corner have very little spacing between them, likely less than recommended minimum spacing for comfortable touch interaction.
Why it Matters
Users may accidentally tap the wrong icon because the targets are too close, leading to user frustration and errors.
How to Fix
Increase horizontal spacing between the two icons to at least 8-10mm and ensure touch target sizes meet accessibility guidelines (minimum 44x44 pixels or equivalent).
Issue Highlights
Inactive 'Coming Soon' Tiles Clutter Interface
Moderate
Efficiency & Cognitive Load
The Problem
The interface includes 'Sales' and 'Goods Received' tiles labeled as 'Coming soon' but are inactive grayed-out elements that do not support any action.
Why it Matters
These inactive tiles add unnecessary visual clutter and distractions, increasing cognitive load without providing functionality.
How to Fix
Remove or hide these 'Coming soon' tiles until they are functional, or provide minimal non-distracting placeholders in a separate section.
Issue Highlights
No explicit call to action for next step
Moderate
Flow & States Completeness
The Problem
The screen shows a list of transaction options but does not indicate which action the user should take next or highlight a primary call to action to guide the user.
Why it Matters
Users may be uncertain how to proceed or what is the recommended next step, causing hesitation or confusion.
How to Fix
Add a clear primary call to action or prompt that guides the user on what to select or do next, such as a highlighted button or onboarding tip.
Issue Highlights
Weak Visual Hierarchy for Core Brand and User Greeting
Moderate
Strategic Design
The Problem
The welcome text and brand logo are placed centrally but lack strong contrast or distinctive styles to create a clear hierarchy that immediately draws user attention.
Why it Matters
Users may miss the brand identity and warm welcome message, reducing emotional connection and confidence in the app's responsiveness.
How to Fix
Enhance contrast and use size or color accents to make the brand logo and welcome message visually prominent and memorable at first glance.
Issue Highlights
Lack of clear hierarchy between transaction types
Moderate
Content Readability & Clarity
The Problem
All transaction cards have similar font size and weight for their titles and subtitles, with no strong differentiation to guide users on primary vs secondary actions. 'Coming soon' items are visually similar in text style to active items, potentially confusing users.
Why it Matters
Users may struggle to quickly identify the most important or actionable transaction categories, leading to slower navigation and possible frustration.
How to Fix
Use stronger typographic hierarchy, for example, by increasing the title font size or weight of active items compared to 'Coming soon' items and providing clearer visual separation between categories.
Issue Highlights
Dense grid of equal-weight transaction buttons
Moderate
Navigation & Structure
The Problem
The Transactions section displays six buttons of equal size and style arranged in close proximity, offering multiple primary actions without clear prioritization or grouping.
Why it Matters
Users might find it hard to quickly identify the most important or frequently used actions, leading to slower interactions and potential misclicks.
How to Fix
Introduce visual hierarchy by varying button size, color intensity, or grouping based on usage frequency and importance. Add spacing to reduce cognitive load.
Issue Highlights
Off-grid vertical alignment in transaction cards
Minor
Visual Consistency, Imagery & Media
The Problem
The colored accent bars on the left side of some transaction cards (Account Sales, Quotes, Lay-bys) are not perfectly aligned vertically relative to each other.
Why it Matters
Misalignment creates a visually uneven interface, distracting users and reducing perceived quality.
How to Fix
Adjust the colored vertical bars to align precisely along the same vertical baseline.
Issue Highlights
No guidance on 'Coming Soon' transaction options
Minor
Flow & States Completeness
The Problem
The 'Sales' and 'Goods Received' options are labeled as 'Coming soon' but provide no additional information or guidance on when or how these features will be available.
Why it Matters
Users may wonder about the availability or timeline of these features and could become frustrated or confused by these placeholders.
How to Fix
Include a short explanatory note or tooltip offering information about the timeline or how to get updates about these upcoming features.
Issue Highlights
Multiple Similar Transaction Tiles Increase Choices
Minor
Efficiency & Cognitive Load
The Problem
The interface shows multiple transaction options like Account Sales, Sales Order, Quotes, and Lay-bys side-by-side, each requiring a decision from the user.
Why it Matters
Presenting too many similar options at once requires the user to decide among many choices immediately, which can slow task initiation.
How to Fix
Group related transaction types under a single menu or streamline options based on user context to reduce immediate visible choices.
Issue Highlights