E-commerce Shopping Cart
The design effectively uses a clean and minimalistic layout, making it easy to scan product details and update quantity. However, there are usability improvements needed such as better error message visibility, clearer form field grouping, and more distinct CTA button styling for a smoother checkout flow.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
2
Color & Contrast4
Content Readability & Clarity4
Visual Consistency, Imagery & Media2
Navigation & Structure3
Conversion & Actions2
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load3
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
0Critical
10Major
20Moderate
2Minor
Missing visible label for phone number input
Major
Accessibility & Input Ergonomics
The Problem
The phone number input field does not have a visible textual label adjacent to it, just a country flag dropdown and input box.
Why it Matters
Screen reader users and those unfamiliar with the UI may not understand the purpose of this field, reducing form accessibility and increasing confusion.
How to Fix
Add a visible textual label for the phone number input field clearly describing its purpose.
Issue Highlights
No visible primary navigation on cart details and form section
Major
Navigation & Structure
The Problem
The main site navigation is only visible at the very top in a single row. When users scroll down to interact with the cart details and billing form, the primary navigation is not sticky or duplicated, so it disappears from view.
Why it Matters
Users might want to navigate to other parts of the site while on this page. Losing access to main navigation leads to potential disorientation and difficulty returning to other sections.
How to Fix
Implement a sticky or fixed navigation bar that remains visible when scrolling, or provide a secondary navigation anchor to let users quickly access main sections.
Issue Highlights
Delete item icon lacks confirmation prompt
Major
Destructive Action Without Safeguard (Confirm/Undo)
The Problem
The cart item has a trash icon for deletion without any visible confirmation or undo safeguard.
Why it Matters
Users may accidentally delete items from their cart and lose their selections without an easy way to recover, causing frustration.
How to Fix
Add a confirmation prompt before deleting an item or implement an undo option after deletion.
Issue Highlights
State dropdown requires input but no inline guidance before submission
Major
Conversion & Actions
The Problem
The State field is required, showing an error message underneath only after submission attempt, indicating lack of inline validation.
Why it Matters
Users may submit the form without knowing the missing required state field, slowing down the process and causing frustration.
How to Fix
Implement inline validation and error prevention that informs the user in real time when required fields are missing or incorrectly filled.
Issue Highlights
Small increment and decrement buttons in quantity selector
Major
Accessibility & Input Ergonomics
The Problem
The '+' and '-' buttons for updating product quantity appear small and closely spaced, likely below recommended touch target sizes (~44x44px) and requiring precise tapping.
Why it Matters
Users, especially on touch devices or with motor impairments, may have difficulty accurately pressing these buttons, increasing errors and frustration.
How to Fix
Increase the size of the '+' and '-' buttons to meet or exceed accessibility guidelines for touch targets and add sufficient spacing between them.
Issue Highlights
Separate 'Update Cart' action required before proceeding
Major
Efficiency & Cognitive Load
The Problem
The presence of an 'UPDATE CART' button after quantity adjustment adds an extra step before proceeding, which could disrupt flow.
Why it Matters
Users must take an additional action to refresh their cart totals, increasing task time and effort.
How to Fix
Automatically update totals and cart state when quantity changes, removing the separate update button.
Issue Highlights
No visual confirmation after clicking UPDATE CART
Major
Flow & States Completeness
The Problem
The cart has an 'UPDATE CART' button but there is no visible indication or message that confirms the cart was successfully updated.
Why it Matters
Users may be confused whether their quantity changes or deletions were applied, potentially causing frustration or repeated actions.
How to Fix
Add a success confirmation message or visual feedback immediately after the cart updates to reassure the user their action was successful.
Issue Highlights
No visible progress or next step after Place Order or Request Quote
Major
Flow & States Completeness
The Problem
There are two buttons, 'PROCEED TO CHECKOUT' and 'REQUEST QUOTE', but there is no indication of what happens after pressing either, nor any success or loading state visible.
Why it Matters
Users may be uncertain if their order or quote request was submitted successfully, risking frustration and cart abandonment.
How to Fix
Implement and display clear success or loading states after pressing these buttons to confirm the action and indicate progress.
Issue Highlights
'State is required' error without immediate resolution option
Major
Strategic Design
The Problem
The billing address form shows a 'State is required' error below the state dropdown, but the user has not selected a state yet. The CTA to proceed is available but the error might block progress or confuse the user.
Why it Matters
Users may be frustrated if they cannot proceed with checkout until the error is fixed but the means to fix it is not obvious. This can cause drop-off or mistakes.
How to Fix
Make the required state selection clear before proceeding and prevent checkout until all required fields are correctly filled, with clear instructions.
Issue Highlights
No trust or security signals near 'Proceed to Checkout' button
Major
Tone, Friendliness & Delight
The Problem
The 'PROCEED TO CHECKOUT' button triggers a sensitive action involving payment and personal information, but no visible trust signals or reassurances about data security or privacy are present nearby.
Why it Matters
Users may hesitate or abandon checkout if they do not feel their sensitive data is protected, lowering conversions and damaging brand trust.
How to Fix
Add trust signals such as secure payment badges, privacy policy links, or reassuring copy near the checkout button to increase user confidence.
Issue Highlights
Low contrast for 'State is required.' error message
Moderate
Color & Contrast
The Problem
The error message 'State is required.' is shown in a small, red font on a white background. The red color does not provide strong enough contrast to ensure readability.
Why it Matters
Users with visual impairments or color blindness might miss crucial form validation feedback, leading to form submission errors and frustration.
How to Fix
Use a red color with a higher contrast ratio against white (at least 4.5:1) or add a background highlight to improve visibility.
Issue Highlights
Billing Address form fields misaligned horizontally
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'First Name' and 'Last Name' fields, as well as 'Email' and 'Company Name' fields, are not aligned on the same baseline horizontally, disrupting the visual flow.
Why it Matters
Misaligned input fields make the form look unprofessional and disrupt the user's form-filling flow, increasing cognitive effort.
How to Fix
Use a consistent grid or flexbox layout to align corresponding fields horizontally.
Issue Highlights
Inconsistent button styles for primary actions
Moderate
Visual Consistency, Imagery & Media
The Problem
The 'UPDATE CART' and 'REQUEST QUOTE' buttons share the same black style, while the 'PROCEED TO CHECKOUT' button uses a red style, causing inconsistency in primary action button styling.
Why it Matters
Inconsistent button styles confuse users about the hierarchy and importance of actions, weakening the interface's clarity and perceived professionalism.
How to Fix
Choose a consistent primary button style for all main actions or differentiate them clearly through color and style guidelines.
Issue Highlights
Missing clear active state or breadcrumb in main navigation
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The top navigation menu shows links such as HOME, CATALOG, BEST SELLERS, WHERE TO BUY, CONTACT, FAQ, but no visual indication highlights the current page or section. The user cannot easily identify their current location.
Why it Matters
Without a clear active state or breadcrumb, users might feel disoriented and uncertain about where they are within the site, leading to confusion and possible abandonment.
How to Fix
Add a clear visual highlight (e.g., different color, underline, or bold) to the current page in the top navigation bar, or introduce a breadcrumb trail to orient users.
Issue Highlights
No guidance on required fields before checkout
Moderate
Flow & States Completeness
The Problem
Although the 'State' field shows a validation error, other required fields in the billing address form do not have validation or error messaging visible.
Why it Matters
Users may attempt to proceed to checkout without completing all required fields, causing friction and abandoned checkouts.
How to Fix
Highlight all required fields clearly and display validation messages inline before allowing the user to proceed to checkout.
Issue Highlights
Insufficient contrast for part number text
Moderate
Color & Contrast
The Problem
The 'Part Number' text and value ('WES599-SCA-TF') appear in a light gray color against a white background, resulting in low contrast likely below WCAG AA for normal text.
Why it Matters
Users with low vision or color blindness may have difficulty reading the part number, hindering their ability to verify product details.
How to Fix
Increase the contrast by darkening the gray text color or using a darker shade that meets at least 4.5:1 contrast ratio with white.
Issue Highlights
Part Number label lacks differentiation from product name
Moderate
Content Readability & Clarity
The Problem
The 'Part Number:' label is placed directly below the product name but uses the same font size and similar styling, causing it to blend with the product name and making it harder to distinguish as a separate informational label.
Why it Matters
Users may overlook the part number or confuse it as part of the product title, reducing clarity and comprehension.
How to Fix
Increase label prominence by using a smaller font size, lighter color, or italic style for 'Part Number:' or add spacing to separate it from the product title.
Issue Highlights
Checkbox next to product lacks a visible label
Moderate
Content Readability & Clarity
The Problem
The checkbox to the left of the product item has no visible label or explanation of its function, leaving users unclear about what selecting or deselecting it affects.
Why it Matters
Ambiguous controls reduce user confidence in making selections and can cause errors or confusion in the checkout process.
How to Fix
Add a clear label or tooltip for the checkbox, such as 'Select item' or 'Remove product from cart,' to clarify its purpose.
Issue Highlights
Misaligned columns in cart item header
Moderate
Visual Consistency, Imagery & Media
The Problem
The column headers for 'Product', 'Unit Price', 'Quantity', and 'Total Price' are not vertically aligned with the related content underneath, causing visual imbalance.
Why it Matters
Misalignment reduces readability and visual clarity, making it harder for users to scan and understand the information quickly.
How to Fix
Adjust the grid or flex layout to ensure the column headers are perfectly aligned with the respective data below.
Issue Highlights
Billing address form fields ungrouped and long
Moderate
Conversion & Actions
The Problem
The billing address form contains many fields arranged in a single bundle without visual grouping by logical sections (e.g. personal info, address, contact).
Why it Matters
A long, unstructured form can overwhelm users and increase effort, causing drop-offs or errors.
How to Fix
Group related fields into sections with headings (e.g. Personal Info, Address, Contact Details) and consider progressive disclosure if possible.
Issue Highlights
Missing guidance on 'State is required' error
Moderate
Tone, Friendliness & Delight
The Problem
The error message 'State is required.' is shown in red below the 'State' dropdown without any reassurance or next steps on how the user can quickly fix this error.
Why it Matters
Users may feel frustrated or unsure how to proceed if the error message only states a requirement without offering any encouraging or helpful tone, potentially causing cart abandonment.
How to Fix
Add a brief, friendly message guiding the user on how to correct the error, or consider inline hints explaining why the state is required, to reduce frustration and build trust.
Issue Highlights
Toggle switch for 'Ship to same address as billing?' lacks clear affordance
Moderate
Accessibility & Input Ergonomics
The Problem
The toggle switch for shipping address looks small and may not clearly communicate its interactive or toggle affordance, especially with low contrast or no label pointer.
Why it Matters
Users may not recognize the switch is interactive or how to operate it, potentially missing important shipping options.
How to Fix
Enhance the toggle's visual affordance by increasing size, adding a visible label near it, or clearer states that visually indicate it is clickable.
Issue Highlights
Excessive form fields visible simultaneously
Moderate
Efficiency & Cognitive Load
The Problem
The billing address form fields plus order and quote references appear all on the same screen, creating a dense visual layout.
Why it Matters
This large block of input fields may overwhelm users, increasing chance of errors or abandonment.
How to Fix
Break the form into smaller steps or use progressive disclosure to limit fields shown at once.
Issue Highlights
Toggle switch label ambiguous and placed after control
Moderate
Content Readability & Clarity
The Problem
The label 'Ship to same address as billing ?' is placed after the toggle switch control and uses an informal question format, making it less clear and potentially confusing especially for screen reader users.
Why it Matters
Ambiguous labeling of toggle controls can cause users to hesitate or misunderstand the option's function, potentially leading to incorrect order information.
How to Fix
Place the label before the toggle switch, rephrase it as a statement like 'Ship to same address as billing' without a question mark, and ensure the toggle state is clearly indicated.
Issue Highlights
Multiple small click targets in cart quantity controls and remove icon
Moderate
Navigation & Structure
The Problem
The unit quantity controls (- and +) and the remove item trash icon are small and placed close to each other in the product row of the cart, which increases the risk of misclicks.
Why it Matters
Users may accidentally remove items or change quantities unintentionally, causing frustration and errors that could delay checkout.
How to Fix
Increase the size and spacing of the quantity buttons and trash icon. Consider grouping controls more distinctly to avoid accidental clicks.
Issue Highlights
Update Cart button unclear as primary action
Moderate
Conversion & Actions
The Problem
The 'UPDATE CART' button is styled in black and placed just above the order form, potentially competing with stronger CTAs below.
Why it Matters
Users may be confused about the primary next step—whether to update cart or proceed to checkout—leading to hesitation or abandonment.
How to Fix
Clarify the hierarchy of actions by visually distinguishing the primary CTA, e.g., make 'PROCEED TO CHECKOUT' more prominent and position it consistently.
Issue Highlights
Close spacing between quantity buttons and delete icon
Moderate
Accessibility & Input Ergonomics
The Problem
The quantity '+' and '-' buttons are placed very close to the trash/delete icon, which could lead to accidental taps on the delete button when adjusting quantity.
Why it Matters
Users may accidentally remove items from their cart when trying to update the quantity, causing frustration and errors.
How to Fix
Increase spacing between the quantity adjustment buttons and the delete icon, or add clear visual separation and padding.
Issue Highlights
Toggle for shipping same as billing adds unnecessary choice
Moderate
Efficiency & Cognitive Load
The Problem
The 'Ship to same address as billing?' toggle appears on checkout but is an additional decision point that could be defaulted or prefilled.
Why it Matters
Users must consciously decide on this toggle, which can increase cognitive load and slow down checkout.
How to Fix
Default this toggle to 'on' or streamline address entry by automatically copying billing to shipping unless user changes it.
Issue Highlights
Confusing placement and styling of action buttons
Moderate
Strategic Design
The Problem
The 'UPDATE CART', 'PROCEED TO CHECKOUT', and 'REQUEST QUOTE' buttons have inconsistent styling and placement that may confuse users which action to take next.
Why it Matters
Users might be uncertain about the necessary steps to finalize their order or request a quote, leading to potential abandonment or errors.
How to Fix
Standardize button styles and clearly differentiate primary and secondary actions. Position them consistently in the layout with clear visual emphasis on the primary action.
Issue Highlights
Lack of clear visual hierarchy in cart and billing sections
Moderate
Strategic Design
The Problem
The cart section and the billing address form lack strong visual distinctions, making it hard to quickly differentiate between product details, pricing, billing information, and order actions.
Why it Matters
Users may find it difficult to scan and complete their purchase efficiently, leading to potential drop-offs or errors when filling out information.
How to Fix
Introduce clearer section separations using spacing, background color differences, or borders. Strengthen typographic hierarchy with heading sizes and weights to better separate cart items, billing form, and order buttons.
Issue Highlights
Unlabeled trash/delete icon in cart item
Minor
Visual Consistency, Imagery & Media
The Problem
The trash icon for deleting the cart item does not have a text label or tooltip, which might confuse users unfamiliar with the icon.
Why it Matters
Unlabeled icons can increase cognitive load and cause hesitation or errors, especially for new or international users.
How to Fix
Add a tooltip or text label indicating the function of the trash icon.
Issue Highlights
Subtotal label and amount are visually similar
Minor
Content Readability & Clarity
The Problem
The 'Subtotal' label and corresponding amount use similar font weight and color, reducing the visual distinction between label and value.
Why it Matters
Users may have to spend extra effort to process key pricing information quickly.
How to Fix
Use a bolder weight or darker color for the subtotal label or adjust spacing to separate label from amount.
Issue Highlights