Sales Dashboard Mobile App
The interface effectively uses clear card layouts and concise metrics to provide an at-a-glance overview of sales data. However, the visual hierarchy could be improved by reducing text density and enhancing contrast for better readability, while the navigation icons might benefit from clearer labeling or tooltips.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast0
Content Readability & Clarity2
Visual Consistency, Imagery & Media1
Navigation & Structure1
Conversion & Actions1
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load2
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
2Major
13Moderate
3Minor
Navigation icons too close in bottom bar
Major
Accessibility & Input Ergonomics
The Problem
The navigation icons in the bottom navigation bar are spaced closely together, likely less than the recommended 48x48 dp touch target size with sufficient padding between them.
Why it Matters
Users may accidentally tap the wrong icon due to insufficient spacing, leading to navigation errors and frustration.
How to Fix
Increase horizontal spacing between each icon to ensure at least 48x48 dp touch targets with adequate separation.
Issue Highlights
No guidance or prompt after zero sales and orders
Major
Flow & States Completeness
The Problem
The dashboard shows zero sales, zero orders, and zero operations without offering any guidance or suggested actions for the user to take next.
Why it Matters
Users may feel uncertain about what to do next if their dashboard shows no activity and no clear next step is presented, potentially causing confusion or drop-off.
How to Fix
Add contextual guidance or a call-to-action for users with no sales or orders, such as tips on creating orders or a prompt to explore more features.
Issue Highlights
Date format is ambiguous and spaced with slashes
Moderate
Ambiguous Date/Time/Timezone
The Problem
The date '29 / 06 / 2026' is spaced with slashes which can reduce readability and may be unclear to international users who interpret dates differently.
Why it Matters
Users might misunderstand the date due to unfamiliar or inconsistent format, affecting comprehension of the displayed data's relevance.
How to Fix
Use a more standard, less ambiguous date format without extra spaces, such as '29/06/2026' or '29 Jun 2026'.
Issue Highlights
Low contrast of small light gray text on dark background
Moderate
Color & Contrast
The Problem
The small light gray text 'Bienvenido/a', '29 / 06 / 2026', and 'Ventas hoy' on the dark blue background appears low contrast and likely fails WCAG AA for normal text.
Why it Matters
Users with mild visual impairments or in bright environments may have difficulty reading this information.
How to Fix
Increase the contrast by using a lighter text color or a darker background color to meet WCAG AA contrast ratio of at least 4.5:1 for normal text.
Issue Highlights
Dashboard cards not aligned with header card
Moderate
Visual Consistency, Imagery & Media
The Problem
The four summary cards under 'Resumen de hoy' are not perfectly aligned vertically or horizontally with the dark blue header card above them, causing a visually jarring layout.
Why it Matters
Misaligned elements reduce perceived polish and can distract users, lowering trust in the interface.
How to Fix
Adjust padding and margin so the edges of the summary cards align with the edges of the header card above, establishing a clear grid.
Issue Highlights
Lack of Clear Section or Page Indicator
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The page title 'Inicio' is present but lacks prominence and clear visual distinction, making it difficult to immediately orient the user to the current section within the app navigation.
Why it Matters
Users may feel unsure about their current location within the app, leading to confusion and increased cognitive load when navigating.
How to Fix
Make the current section label more visually prominent and consider adding breadcrumbs or highlighting the active navigation item more distinctly.
Issue Highlights
Primary CTA 'Nuevo pedido' lacks additional context or supporting secondary CTAs
Moderate
Conversion & Actions
The Problem
The primary call-to-action button 'Nuevo pedido' uses clear text but is the only visible prominent action on the screen without secondary supportive CTAs or explanations about what steps follow.
Why it Matters
Users may be uncertain about what will happen after clicking 'Nuevo pedido' or where to go next if they don't want to create a new order, potentially impacting conversion rates.
How to Fix
Add brief descriptive text near the CTA about what initiating a new order involves or provide secondary actions to guide alternative user flows, such as 'View orders' or 'Help'.
Issue Highlights
Top card lacks strong visual hierarchy to highlight key user information
Moderate
Strategic Design
The Problem
The top card containing the user's name, date, and sales information uses predominantly similar font weights and sizes, with only slight differentiation between elements. This causes the key information (e.g., user's name and sales) to blend together rather than stand out distinctly.
Why it Matters
Users may have difficulty quickly identifying the most important data, leading to slower comprehension and possible frustration when glancing at the summary screen.
How to Fix
Increase contrast by using larger font sizes or bolder weights for the user's name and sales values. Consider separating elements visually with spacing or dividing lines to create clear focal points.
Issue Highlights
Medium gray text below numeric values low contrast on white card
Moderate
Color & Contrast
The Problem
The medium gray text such as 'Ventas hoy' and 'Pedidos' below the bold numbers on white cards is low contrast and likely below WCAG AA standards for normal text.
Why it Matters
This reduces readability for users with visual difficulties or in poor lighting conditions.
How to Fix
Increase text contrast by using a darker gray or black for these labels to achieve at least 4.5:1 contrast ratio against white background.
Issue Highlights
Bottom Navigation Items Are Densely Packed
Moderate
Navigation & Structure
The Problem
The bottom navigation bar displays 5 icons with labels spaced tightly; the spacing might make it harder for users to accurately tap their desired navigation item, especially on smaller screens or for users with reduced dexterity.
Why it Matters
Users may mistakenly tap the wrong navigation item causing frustration and navigation errors.
How to Fix
Increase spacing between bottom navigation icons or reduce the number of items to improve tap accuracy.
Issue Highlights
Small icons in summary cards require precise tapping
Moderate
Accessibility & Input Ergonomics
The Problem
Icons such as the wallet, shopping cart, location, and price tag in the summary cards above the bottom navigation appear small and may have target areas smaller than recommended touch sizes.
Why it Matters
Small tap targets increase the chance of missed taps and user frustration, especially for users with limited motor skills.
How to Fix
Increase the size of the icons or add padding around them to create at least 48x48 dp touch areas without changing visual layout.
Issue Highlights
Resumen de hoy cards lack clear interactive affordance
Moderate
Accessibility & Input Ergonomics
The Problem
The summary cards under 'Resumen de hoy' section appear as static info containers with no visible affordance (e.g. shadows or highlights) indicating they are interactive or tappable.
Why it Matters
Users may not recognize these cards as actionable items if they are interactive, reducing discoverability and usability.
How to Fix
Add visual cues like shadows, borders, or hover effects to indicate they can be tapped, if they are interactive.
Issue Highlights
Multiple summary cards with icons and data create clutter
Moderate
Efficiency & Cognitive Load
The Problem
The 'Resumen de hoy' section contains four small cards with icons and data, which may overwhelm the user with too many small data points at once without clear prioritization.
Why it Matters
Excessive small data cards without clear hierarchy can distract users from key information and make quick decision-making harder.
How to Fix
Prioritize and consolidate metrics into fewer cards or a clearer layout that guides user attention to the most important data.
Issue Highlights
Lack of reassurance for financial actions
Moderate
Tone, Friendliness & Delight
The Problem
The 'Nuevo pedido' button initiates a new order which is a financial action, but there are no visible reassuring messages or trust signals clarifying the security or safety of this process.
Why it Matters
Without trust indicators near financial actions, users might hesitate to engage or feel uncertain about their transactions, reducing confidence in the app.
How to Fix
Add reassuring text or trust signals near the 'Nuevo pedido' button, such as ‘Secure checkout’ or a small lock icon with a tooltip explaining security measures.
Issue Highlights
Empty sales and orders summary lacks explanation or encouragement
Moderate
Flow & States Completeness
The Problem
The "Resumen de hoy" section shows zeros for all key metrics but lacks any messaging to guide users on what these zeros mean or how to start using the feature.
Why it Matters
Without empty state guidance, new or inactive users may be confused by the lack of data and unsure how to generate activity.
How to Fix
Include brief explanations or motivational text on the empty summary cards to explain what each metric tracks and how to increase these values.
Issue Highlights
Icons in summary cards have differing colors and styles
Minor
Visual Consistency, Imagery & Media
The Problem
Icons in the summary cards use different colors (green, orange, maroon) and styles which appear inconsistent and reduce visual cohesion.
Why it Matters
Inconsistent icon styles can confuse users and make the interface feel disjointed.
How to Fix
Standardize icon color and style across all cards to create a unified visual language.
Issue Highlights
Redundant sales summary blocks duplicate main info
Minor
Efficiency & Cognitive Load
The Problem
The main blue card at the top shows sales info 'Bs. 0.00 Ventas hoy', and the same data is repeated in the 'Resumen de hoy' section below in small cards, causing repetition.
Why it Matters
Displaying identical information multiple times forces users to process the same data repeatedly, increasing cognitive load unnecessarily.
How to Fix
Remove the duplicate sales info from the 'Resumen de hoy' cards or consolidate the main card and summary to avoid redundancy.
Issue Highlights
Summary section cards lack clear differentiation and grouping
Minor
Strategic Design
The Problem
The summary cards showing sales, orders, and other metrics appear very uniform with minimal visual hierarchy or distinction among them. They are arranged in a tight grid that may appear cluttered, making it harder for users to quickly skim and differentiate information.
Why it Matters
Without clearer grouping or emphasis on the most critical metrics, users might overlook important data points or struggle to understand the dashboard at a glance.
How to Fix
Apply clearer visual grouping or use different background colors or subtle shadows to distinguish key cards. Adding more spacing or using iconography consistently could help users quickly parse relevant data.
Issue Highlights