Auto Parts Catalog Search
The interface excels in clarity and organization, offering intuitive filters and clear product details that facilitate efficient comparison and selection. However, the dense text and multiple UI elements may overwhelm users, and some interactive elements like the car selector dropdown could benefit from stronger visual emphasis and responsiveness improvements.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity4
Visual Consistency, Imagery & Media2
Navigation & Structure2
Conversion & Actions2
Tone, Friendliness & Delight2
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load1
Flow & States Completeness1
Strategic DesignRecommended Fixes by Impact
0Critical
3Major
16Moderate
6Minor
Lacks clear page or section active state in top navigation
Major
Orientation Missing (Environment/Role/Location)
The Problem
The top navigation includes 'Catalog', 'Jobs', 'Schemas', 'GMS', 'Orders', 'Finance', and 'Returns', but only 'Catalog' is distinctly highlighted as active. Other areas do not visually indicate if they are selected or providing user context.
Why it Matters
Users may be unsure which section they are currently in, causing confusion and reducing navigation efficiency.
How to Fix
Add a clear active state highlight or indicator to the navigation item representing the current page or section, consistent across the top navigation bar.
Issue Highlights
Vague Add Buttons Without Clear Confirmation
Major
Conversion & Actions
The Problem
The 'Add' buttons next to each item are labeled simply as 'Add' without specifying what is added (e.g., to cart, wishlist). There is no visible confirmation or change in state indicating the addition was successful.
Why it Matters
Users may be uncertain about what action 'Add' performs and whether it was successful, potentially causing confusion and preventing conversion.
How to Fix
Clarify the CTA by using descriptive labels like 'Add to Cart' and provide visible feedback or confirmation after clicking.
Issue Highlights
Small remove ('x') buttons in filter tags
Major
Accessibility & Input Ergonomics
The Problem
The remove buttons ('x') in the filter tags ('Brake Pad Set', 'Front') appear small, likely less than the recommended 44x44 pixels touch target size.
Why it Matters
Small touch targets can increase difficulty for users to accurately tap, leading to frustration and errors, particularly on touch devices.
How to Fix
Increase the touch target size of the remove buttons by adding padding or increasing their clickable area without changing visual size.
Issue Highlights
Inconsistent Pill Tag Styles in Filters Section
Moderate
Visual Consistency, Imagery & Media
The Problem
The pills for 'Vehicle Audi A4 (8K2, B8) • 5 variants', 'Brake Pad Set', and 'Fitting Position: Front' have inconsistent background colors and text colors, with the first pill in light yellow and text in dark orange, the second pill in light grey with black text, and the third pill in light orange with orange text.
Why it Matters
Inconsistent pill styles can confuse users about the status or category of filters, reducing clarity and perceived polish.
How to Fix
Standardize the pill styles for similar filter tags to have consistent background colors, border, and text colors according to the design system.
Issue Highlights
Low contrast on placeholder text in form input
Moderate
Color & Contrast
The Problem
The placeholder text 'AB-123-CD or WWZZZ3CZ9P007654' in the Licence plate or VIN input field uses a light gray color on a white background, resulting in low contrast likely below WCAG AA standards.
Why it Matters
Users with visual impairments or in bright environments may have difficulty reading the placeholder text, reducing form usability.
How to Fix
Increase the contrast by using a darker gray or black for the placeholder text to meet at least 4.5:1 contrast ratio.
Issue Highlights
Low contrast on 'By document' text in form selector
Moderate
Color & Contrast
The Problem
The 'By document' text inside the form selector appears in medium gray on white, resulting in low contrast likely below WCAG AA standards.
Why it Matters
This can reduce readability for users with moderate vision impairment, making interaction with the form harder.
How to Fix
Increase text contrast by using darker color or add semi-transparent background behind the text.
Issue Highlights
Delivery times lack clear timezone context
Moderate
Ambiguous Date/Time/Timezone
The Problem
Delivery times such as 'Delivered: Jun 19 before 18:00' are shown without specifying timezone or locale context, making it unclear whether the times are local, UTC, or another timezone.
Why it Matters
Users may misunderstand expected delivery times, which could lead to missed deliveries or scheduling conflicts.
How to Fix
Include explicit timezone information or clarify in the UI that times are shown in a specific timezone.
Issue Highlights
Misalignment of Top Nav and Sub-Nav Elements
Moderate
Visual Consistency, Imagery & Media
The Problem
The primary navigation items (Catalog, Jobs, Schemas, GMS) are horizontally aligned, but the sub-navigation categories below ('All categories', 'Auto parts', 'Tires & Wheels', etc.) are not vertically aligned with the primary nav links, creating a visual offset.
Why it Matters
Misalignment degrades visual structure and can distract users during navigation, reducing usability and perceived quality.
How to Fix
Align sub-navigation items consistently with the primary navigation links using a grid or guide to maintain vertical rhythm.
Issue Highlights
No visible filter search in left sidebar filters
Moderate
Navigation & Structure
The Problem
The filters panel on the left side shows expandable filter categories (Price, Supplier, etc.) but no visible search or filter input to quickly find specific filter options within large lists.
Why it Matters
Users may be forced to scroll extensively in the sidebar to locate desired filters, leading to longer task times and frustration.
How to Fix
Add a search input at the top of the filters panel or inside each filter category to quickly narrow down options.
Issue Highlights
Unclear next step after adding item to cart
Moderate
Flow & States Completeness
The Problem
The interface provides 'Add' buttons to place items in the shopping cart but does not clearly indicate the next action a user should take after adding an item (e.g., view cart, proceed to checkout).
Why it Matters
Users may be unsure how to continue the purchase process after adding items, potentially causing confusion or abandonment of the flow.
How to Fix
Add clear guidance or a prominent button/link to view the cart or proceed to checkout immediately after an item is added.
Issue Highlights
Breadcrumb trail lacks current page clarity
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The breadcrumb shows 'Home > Catalog > Search' with 'Search' in bold but no additional highlight to clarify the exact location or page context among search results.
Why it Matters
While users see the navigation path, the lack of a more distinct current-page indication might reduce orientation clarity.
How to Fix
Use a stronger visual style or icon next to the current page in the breadcrumb to reinforce the user's spot within the site structure.
Issue Highlights
Top navigation crowded with many clickable links
Moderate
Navigation & Structure
The Problem
The top navigation contains many clickable items like Catalog, Jobs, Schemas, GMS, Orders, Finance, Returns plus icons for user, support, notifications, and cart, all tightly spaced and stretching horizontally.
Why it Matters
Users may find it difficult to easily distinguish or select the desired target, leading to higher misclick rates and increased cognitive load.
How to Fix
Group related items, use clear spacing, or a collapsible menu to reduce visual complexity and improve click target clarity, especially on smaller widths.
Issue Highlights
No Inline Validation in 'Find Vehicle' Form
Moderate
Conversion & Actions
The Problem
The 'Find vehicle' form fields such as 'Licence plate or VIN' and 'Car selector' inputs do not show any inline validation or error prevention indicators when incomplete or incorrectly filled.
Why it Matters
Without inline validation, users may submit invalid data or be unsure if their inputs are correct, leading to frustration and form abandonment.
How to Fix
Implement inline validation and error prevention directly within the form fields to guide users during input.
Issue Highlights
Lack of trust reassurance near Add to Cart buttons
Moderate
Tone, Friendliness & Delight
The Problem
The 'Add' buttons to add brake pad sets to the cart lack nearby trust signals such as secure transaction indicators, buyer protection info, or customer reviews.
Why it Matters
Users may hesitate to add items to their cart or complete purchases if they don't feel confident about the site's reliability or security, reducing conversion rates.
How to Fix
Add subtle trust signals near these buttons, like a secure checkout icon, buyer reviews, or a brief note on return policy and guarantees.
Issue Highlights
Close proximity of filter tags and their remove buttons
Moderate
Accessibility & Input Ergonomics
The Problem
Filter tags and their small remove ('x') buttons are placed closely together, with limited spacing especially visible on the 'Brake Pad Set' filter.
Why it Matters
Close proximity of clickable elements increases the risk of accidental taps on adjacent targets, reducing user accuracy and satisfaction.
How to Fix
Add sufficient spacing between filter tags and their remove buttons, or increase padding within the tags to create a clear separation between interactive elements.
Issue Highlights
Multiple overlapping filters add complexity to product selection
Moderate
Efficiency & Cognitive Load
The Problem
The screen shows multiple active filters such as vehicle details, category, and specification that require users to understand and manage several parameters simultaneously.
Why it Matters
Users may experience increased cognitive load trying to adjust or understand the combined effect of these filters, potentially slowing down their task flow.
How to Fix
Simplify filtering by consolidating related filters or providing clearer guidance on how active filters impact results.
Issue Highlights
Lack of Clear Visual Hierarchy to Highlight Primary Action
Moderate
Strategic Design
The Problem
The 'Add' buttons for each product blend too closely with other UI elements due to similar color usage and sizing, reducing their prominence as the primary action.
Why it Matters
Users may struggle to quickly identify how to add items to their cart, potentially slowing down their purchase flow or causing frustration.
How to Fix
Increase the prominence of primary action buttons by using a distinct, high-contrast color and slightly larger size to differentiate them from secondary elements and surrounding content.
Issue Highlights
Filter settings for delivery speed and optimization add extra decisions
Moderate
Efficiency & Cognitive Load
The Problem
The top filter bar shows options like 'Need by' and 'Optimise for' with multiple choices that users must select before viewing results.
Why it Matters
These additional sorting and optimization choices can distract from the primary task of selecting a product, causing decision fatigue.
How to Fix
Consider auto-setting sensible defaults or hiding advanced options behind a toggle to reduce upfront choices.
Issue Highlights
Left sidebar filters and input options add visual clutter
Moderate
Efficiency & Cognitive Load
The Problem
The left pane contains multiple dense fields for vehicle input, document uploads, and filters with many controls visible simultaneously.
Why it Matters
This grouping contributes to a visually heavy layout that can distract users and reduce focus on main search results.
How to Fix
Group filters into collapsible sections and prioritize essential inputs to reduce visual noise and guide users progressively.
Issue Highlights
Unlabeled Icons in Top Navigation Right Section
Minor
Visual Consistency, Imagery & Media
The Problem
The three icons on the top right (person, headset, bell, and cart) have no visible labels or tooltips, making their purpose unclear at a quick glance.
Why it Matters
Unlabeled icons increase cognitive load, especially for first-time or infrequent users who may not immediately recognize the icon meanings.
How to Fix
Add visible labels or tooltips on hover/focus for these icons to clarify their functionality.
Issue Highlights
Low contrast on category label text 'Category' in filter tags
Minor
Color & Contrast
The Problem
The label text 'Category' inside the filter tag uses a medium gray that appears to have insufficient contrast against the light background, likely below WCAG AA for normal text.
Why it Matters
Users may find it harder to distinguish label categories in the filter tags, reducing clarity of filtered options.
How to Fix
Use a darker shade with higher contrast for label text inside filter tags.
Issue Highlights
Filter tags and their labels lack clear visual hierarchy
Minor
Content Readability & Clarity
The Problem
Filter tags such as 'Vehicle Audi A4 (8K2, B8)', 'Category Brake Pad Set', and 'Spec Fitting Position: Front' have nearly equal text styling and visual weight, causing difficulty in quickly parsing the different label types and selected values.
Why it Matters
Users may have trouble distinguishing filter categories from the selected filter values at a glance, slowing down comprehension and filtering adjustments.
How to Fix
Use typographic contrasts like font weight, size, or color differences between filter category labels and their values for clearer separation.
Issue Highlights
Vertical Misalignment of Price and Add to Cart Controls
Minor
Visual Consistency, Imagery & Media
The Problem
The 'Add' buttons are not vertically aligned with the quantity controls or price texts in the product cards, causing a slight inconsistency in each product's horizontal grouping.
Why it Matters
Misaligned controls increase cognitive load by making it harder for users to scan product details and actions efficiently.
How to Fix
Align the quantity selector, price, and add button vertically within each product card using layout grids or flexbox.
Issue Highlights
No indication of user role or environment context
Minor
Orientation Missing (Environment/Role/Location)
The Problem
The UI does not visibly indicate the user's current role, permissions, or environment mode (e.g., production vs prototype) except for a small 'Prototype' label in the bottom left corner.
Why it Matters
Users may be unaware of their current environment or role context, which can cause mistakes or uncertainty about functionality availability.
How to Fix
Provide visible and prominent environment or role badges or indicators clearly placed in the header or sidebar.
Issue Highlights
Bright orange call to action may feel aggressive for sensitive purchase context
Minor
Tone, Friendliness & Delight
The Problem
The bright orange used for the 'Add' buttons and filters stands out sharply but might feel overly aggressive or urgency-inducing for mechanical parts, where users might prefer a more neutral or reassuring tone.
Why it Matters
An aggressive visual tone can cause unease or pressure, potentially reducing user comfort and trust in making a precise and important purchase.
How to Fix
Consider softer or more neutral colors that convey trust and professionalism, balancing visibility with comfort.
Issue Highlights