Add New Product Form
The interface uses a clean, dark-themed layout with clear input labels and helpful placeholder text, enhancing focus and reducing visual clutter. However, the form could improve in providing clearer guidance on mandatory fields and better input validation feedback to prevent user errors.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
0
Color & Contrast2
Content Readability & Clarity3
Visual Consistency, Imagery & Media1
Navigation & Structure2
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load2
Flow & States Completeness0
Strategic DesignRecommended Fixes by Impact
0Critical
5Major
12Moderate
2Minor
Form Fields and Labels Misaligned
Major
Visual Consistency, Imagery & Media
The Problem
The text fields and their labels on the left side appear vertically misaligned and have inconsistent spacing between them, breaking the vertical rhythm.
Why it Matters
Misalignment can cause increased cognitive load, making it harder for users to scan and complete the form efficiently.
How to Fix
Adjust vertical spacing and align form field labels consistently in line with their input fields to maintain a clean visual hierarchy.
Issue Highlights
Missing label for 'Stock' section
Major
Content Readability & Clarity
The Problem
The text 'Stock' is present but there's no clear input field or explanation below it visible in the screenshot, causing ambiguity about what user action is expected.
Why it Matters
Users may be confused about what information to provide or how to interact with this section, increasing the chance of input errors or abandonment.
How to Fix
Add a clear input field or explanatory label below the 'Stock' text, or clarify the intended interaction so users understand what to do.
Issue Highlights
Missing clear location indicator within 'Add New Product' modal
Major
Orientation Missing (Environment/Role/Location)
The Problem
The 'Add New Product' modal lacks a clear navigation breadcrumb or contextual indicator specifying the user's exact position in the app beyond the modal title.
Why it Matters
Without a clear location indicator, users may become disoriented or unsure if they are in a new step, a sub-process, or a separate workflow, increasing cognitive load.
How to Fix
Add a breadcrumb or step indicator for the product addition process or contextual cues showing the user's current role/environment within the workflow.
Issue Highlights
Confusing next step message for image selection
Major
Flow & States Completeness
The Problem
The text '0 images selected — Click Review to continue' implies the user can proceed without adding images, but uploading images seems required from the UI context.
Why it Matters
Users may be confused whether they can proceed without uploading any product images, potentially causing errors or incomplete product entries.
How to Fix
Clarify whether images are mandatory before review or provide a more explicit step or validation message about required image upload.
Issue Highlights
No visible confirmation or success state after 'Review Product'
Major
Flow & States Completeness
The Problem
The dialog has a 'Review Product' button but no visible indication of what happens next or success/error feedback if the product is accepted or not.
Why it Matters
Without clear feedback or next steps, users may be unsure if their submission succeeded or failed, leading to confusion or repeated submissions.
How to Fix
Add intermediate loading, error, or success states after pressing 'Review Product' to inform users of progress or issues.
Issue Highlights
Image Upload Section Elements Not Aligned
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'Click or Drop images' upload area and the smaller 'Add' box below it are not aligned horizontally, giving a visually inconsistent edge.
Why it Matters
Misalignment here can make the interface look unpolished and confuse users about relatedness of the image upload controls.
How to Fix
Align the smaller 'Add' image box horizontally with the main image upload box to create a neat visual grouping.
Issue Highlights
Unclear Next Step Label on Primary Button
Moderate
Conversion & Actions
The Problem
The primary CTA button is labeled 'Review Product' which may be unclear to users whether it submits the form or just reviews input. This could cause hesitation.
Why it Matters
Users may be unsure if clicking the button completes the product addition or simply previews, leading to reduced conversions or frustration.
How to Fix
Use a clearer, more direct primary CTA label such as 'Submit Product' or 'Add Product' to signal the exact action.
Issue Highlights
Missing reassurance about price input accuracy
Moderate
Tone, Friendliness & Delight
The Problem
The form requires input of multiple prices (Base, Prepaid, COD) but lacks any trust signals or explanations about currency format, validations, or price differences.
Why it Matters
Users may hesitate or enter incorrect values if they are unsure about how prices are handled or validated, leading to errors or mistrust.
How to Fix
Add brief, friendly guidance about price fields such as supported currency format, minimum/maximum limits, or validation messages. Include trust signals like 'Your prices are saved securely' to build confidence.
Issue Highlights
No trust or confirmation message near product image uploads
Moderate
Tone, Friendliness & Delight
The Problem
The product image upload area lacks trust signals such as assurances about privacy, file security, or accepted file types.
Why it Matters
Users might hesitate to upload images if they are unsure about how their files will be handled or worry about privacy, security, or file requirements.
How to Fix
Add a short message next to the upload section reassuring users about file security, privacy, and supported formats to increase confidence.
Issue Highlights
Close button tap target too small
Moderate
Accessibility & Input Ergonomics
The Problem
The close button in the top-right corner appears to be smaller than recommended touch target size, making it harder to tap accurately on touch devices.
Why it Matters
Small touch targets can cause user frustration and input errors, especially for users with motor impairments or using small screens.
How to Fix
Increase the size of the close button tap target to at least 44x44 pixels with sufficient padding around it.
Issue Highlights
Multiple Price Fields Create Complexity
Moderate
Efficiency & Cognitive Load
The Problem
The form asks users to enter three different prices (Base Price, Prepaid Price, COD Price) separately, which adds extra micro-steps without clear explanation or consolidation.
Why it Matters
Requiring users to fill multiple price fields slows down product entry and increases cognitive load as users may question when to use each price field.
How to Fix
Consider simplifying price entry by consolidating related prices, using presets or tooltips for context, or allowing optional expansion for advanced pricing details only.
Issue Highlights
Form field labels and placeholder text lack clear hierarchy
Moderate
Content Readability & Clarity
The Problem
Form field labels are all uppercase and the placeholder text is similar in size and color, making it hard to quickly differentiate important labels from examples.
Why it Matters
Users may struggle to quickly understand what each field requires, reducing form completion speed and accuracy.
How to Fix
Use a stronger visual hierarchy by differentiating label font weight or size from placeholder text; for example, make labels more prominent and placeholders lighter or smaller.
Issue Highlights
Price Input Fields Lack Contextual Units
Moderate
Visual Consistency, Imagery & Media
The Problem
The price input fields ('BASE PRICE', 'PREPAID PRICE', 'COD PRICE') display numeric values without any clear indication of currency or units next to the entered values.
Why it Matters
Users may be uncertain about the required format or currency, which can lead to incorrect price entries.
How to Fix
Add static currency symbol prefix or suffix within or adjacent to the input boxes to clarify expected input format.
Issue Highlights
Dense form layout with multiple input fields and buttons
Moderate
Navigation & Structure
The Problem
The modal contains many input fields with minimal vertical spacing and several clickable elements close together, including the upload area and action buttons.
Why it Matters
Crowded click targets can lead to accidental taps or clicks, which may cause user errors or frustration, particularly on smaller displays or touch devices.
How to Fix
Increase spacing between input fields and interactive elements, and consider grouping related items more clearly to reduce visual clutter and improve usability.
Issue Highlights
Add button tap target too small
Moderate
Accessibility & Input Ergonomics
The Problem
The 'ADD' button below the image upload area is small, requiring precise tapping which may be difficult for many users.
Why it Matters
Smaller touch targets increase the chance of selection errors and reduce usability on touch devices.
How to Fix
Enlarge the 'ADD' button or increase its padding to meet recommended minimum touch size of 44x44 pixels.
Issue Highlights
Cancel and Review Product buttons too close
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Cancel' and 'Review Product' buttons at the bottom right are positioned closely with minimal horizontal spacing, increasing the risk of mis-taps.
Why it Matters
Buttons positioned too closely can confuse users, leading to mistakes such as accidentally submitting a form when attempting to cancel.
How to Fix
Add more horizontal spacing between the two buttons or increase their size to provide clearer separation.
Issue Highlights
Multiple Image Upload Options Without Clear Prioritization
Moderate
Efficiency & Cognitive Load
The Problem
The UI offers several ways to upload product images, including drag/drop, clicking upload, and additional sources (Drive, Social, URL). This adds multiple competing decisions for the user without guidance on best or simplest choice.
Why it Matters
Too many options for image upload can overwhelm users and slow down the product listing process as users must decide which method to use.
How to Fix
Highlight the most common upload method by default and hide extra options behind a simple link or expandable menu with explanations.
Issue Highlights
Cancel Button Not Clearly Secondary
Minor
Conversion & Actions
The Problem
The 'Cancel' button uses a muted style but may not be visually distinct enough against the dark background to ensure users see it as less recommended than the primary action.
Why it Matters
Users could accidentally click cancel instead of submitting, causing frustration or abandonment.
How to Fix
Make the cancel button visually distinct as a secondary action with lower emphasis styling.
Issue Highlights
Unclear Category and Offer Text Expectations
Minor
Efficiency & Cognitive Load
The Problem
The category and offer text fields have placeholder hints but no detailed guidance or examples for how to choose or phrase these values, forcing users to recall these from memory or elsewhere.
Why it Matters
Users unfamiliar with categories or offers might hesitate or enter inconsistent data, delaying form completion or risking errors.
How to Fix
Add example dropdowns, autocomplete suggestions, or microcopy to help users quickly pick correct categories and offers.
Issue Highlights