Pet Food Product Page
The interface effectively organizes product pricing and subscription options with clear hierarchy and visual distinction, enhancing user decision-making. However, the lack of a product image and cluttered text areas reduce user engagement and readability, while some interactive elements could benefit from better spacing and alignment.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast4
Content Readability & Clarity4
Visual Consistency, Imagery & Media3
Navigation & Structure1
Conversion & Actions1
Tone, Friendliness & Delight4
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load4
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
4Major
23Moderate
3Minor
Missing product image reduces visual engagement
Major
Strategic Design
The Problem
The main product image section currently shows a placeholder with 'Imagen no disponible' instead of an actual product image. This reduces immediate visual confirmation of the product for users.
Why it Matters
Users rely on product images to validate and feel confident about their purchase decision. Missing images can increase uncertainty and reduce trust in the product listing.
How to Fix
Upload and display a clear, high-quality product image in the main image area to visually confirm the product.
Issue Highlights
Unclear Frequency Selection Labels
Major
Content Readability & Clarity
The Problem
Frequency options like 'Cada 2 semanas', 'Cada 4 semanas' lack additional context that they refer to subscription delivery frequency.
Why it Matters
Users might be unsure what the frequency options control exactly, which may reduce confidence in subscription choices.
How to Fix
Add descriptive label or helper text clarifying that these frequencies determine delivery intervals for autoship subscription.
Issue Highlights
No Confirmation or Success State After Review Submission
Major
Flow & States Completeness
The Problem
The review form includes a submit button ('Enviar review'), but there is no visible UI element or text indicating what happens after submission (no success message or confirmation shown).
Why it Matters
Users may be confused if their review submission was successful or if some error occurred due to lack of confirmation or feedback.
How to Fix
Add a visible success message, confirmation dialog, or clear loading and error states after review submission to inform the user of the submission outcome.
Issue Highlights
Questions and Answers Section Has No Actionable Path
Major
Flow & States Completeness
The Problem
The Q&A section states 'Aún no hay preguntas. ¡Sé el primero en preguntar!' with a 'Hacer una pregunta →' button that is not clearly visible or emphasized enough to draw user action.
Why it Matters
Users may not realize they can ask questions or the button may be overlooked, resulting in a dead-end where engagement is expected but not facilitated.
How to Fix
Increase prominence and clarity of the 'Hacer una pregunta' button and provide feedback or success states after question submission to guide user through this flow.
Issue Highlights
Low contrast on description text
Moderate
Color & Contrast
The Problem
The product description text below the 'Descripción' heading is in a gray color on white background, resulting in low contrast that likely does not meet WCAG AA standards for normal text.
Why it Matters
Low contrast text can be difficult to read for users with low vision or those in poor lighting conditions, reducing content accessibility and usability.
How to Fix
Use a darker shade of gray or black for the description text to ensure a contrast ratio of at least 4.5:1 against the white background.
Issue Highlights
Dense layout in product purchase section with many clickable options close together
Moderate
Navigation & Structure
The Problem
The product purchase area includes multiple radio buttons for choosing autoship options, frequency buttons, purchase buttons, and links to offers, all placed tightly with little separation.
Why it Matters
Users may find it difficult to make selections confidently without accidentally clicking the wrong option, especially new users, leading to frustration.
How to Fix
Increase spacing between options and group related controls visually with border or background. Use consistent styles for buttons and highlights.
Issue Highlights
Low contrast on breadcrumb navigation text
Moderate
Color & Contrast
The Problem
The breadcrumb text 'Inicio > Catálogo > Categoría > Hill's Prescription Diet k/d Kidney — 1.8kg' is displayed in a very light gray color on a white background, resulting in low contrast likely below WCAG AA standards for normal text.
Why it Matters
Users with visual impairments or in bright environments may have difficulty reading the breadcrumb navigation, impacting orientation and navigation clarity.
How to Fix
Increase the text color contrast by using a darker shade of gray or black for the breadcrumb text to meet at least WCAG AA contrast ratio of 4.5:1 for normal text.
Issue Highlights
Insufficient Visual Hierarchy in Product Price and Plan Options
Moderate
Content Readability & Clarity
The Problem
The price text and autoship plan options use similar font sizes and weights, causing difficulty in quickly distinguishing key pricing information versus subscription details.
Why it Matters
Users may struggle to quickly grasp the most relevant price and savings information, leading to confusion in purchasing decisions.
How to Fix
Use larger font size or weight for the main product price and separate it more clearly from autoship plan options. Add more spacing and color contrast to highlight the annual savings.
Issue Highlights
Description Text Too Small and Light
Moderate
Content Readability & Clarity
The Problem
The description paragraph at the page bottom has small font size and light text weight, limiting readability.
Why it Matters
Users may overlook or have difficulty reading important product information, affecting their ability to understand the product benefits.
How to Fix
Increase font size and weight slightly for better readability and user comfort.
Issue Highlights
Pagination thumbnails misaligned with main image area
Moderate
Visual Consistency, Imagery & Media
The Problem
The small image thumbnails for product images are slightly misaligned horizontally with the main product image container, creating a visually uneven spacing on the left side.
Why it Matters
Misaligned elements can cause the interface to look unpolished and reduce perceived quality.
How to Fix
Adjust the horizontal margin or padding of the image thumbnails to align them evenly with the main image container above.
Issue Highlights
Review score bar chart lacks explicit axis labels or units
Moderate
Visual Consistency, Imagery & Media
The Problem
The horizontal bar chart under 'Reseñas de clientes' shows review star distribution with percentages on the right but lacks axis labels and a legend explaining the scale or bar meaning.
Why it Matters
Users may struggle to quickly understand the data without explicit axis labels or legend, which affects clarity and trust.
How to Fix
Add axis titles on the horizontal scale and a concise legend describing what each bar represents.
Issue Highlights
Primary navigation links are small and lack strong visual highlight
Moderate
Navigation & Structure
The Problem
The primary navigation menu at the top (Inicio, Tienda, Buscar, Suscríbete) uses small font size and minimal spacing, with low visual emphasis on the current active page, making it harder for users to identify where they are easily.
Why it Matters
Users may struggle to orient themselves within the site or quickly jump to other top-level sections, reducing engagement and increasing frustration.
How to Fix
Increase font size and spacing of primary nav links and add a clear visual active state indicator (color, underline, or background highlight) for the current page.
Issue Highlights
Breadcrumb trail is small and visually weak for orientation
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
A breadcrumb navigation is present but uses small font and minimal contrast, making it easy to overlook. It does not clearly stand out to quickly communicate the current location in the site hierarchy.
Why it Matters
Users may get lost or confused about where they are, increasing cognitive load and reducing confidence navigating the site.
How to Fix
Make breadcrumb text larger and use a stronger contrast color or background to enhance visibility and importance.
Issue Highlights
Primary CTA 'Añadir al Carrito' button label lacks clarity to encourage immediate action
Moderate
Conversion & Actions
The Problem
'Añadir al Carrito' is a valid CTA but could be more specific or action-oriented to increase urgency or clarity, such as 'Comprar Ahora' or 'Comprar 1.8kg Ahora'. The button size and placement are good, but the wording is generic.
Why it Matters
A clearer, more compelling CTA helps users feel confident about their next step and improves conversion rates by reducing hesitation.
How to Fix
Update the primary button label to a stronger, benefit-focused phrase that clearly indicates what will happen, e.g. 'Comprar ahora' or 'Agregar al carrito y comprar'.
Issue Highlights
Missing product image weakens trust
Moderate
Tone, Friendliness & Delight
The Problem
The product image is not available, leaving a placeholder with a generic icon and the text 'Imagen no disponible.' This visual tone does not match the professionalism and trustworthiness expected for a prescription diet product.
Why it Matters
Users may feel uncertain about the product quality and authenticity without a clear product image, reducing confidence to purchase, especially for sensitive items like prescription diets.
How to Fix
Provide a high-quality product image relevant to the prescription diet cat food or a reassuring placeholder stating when the image will be available.
Issue Highlights
Small radio buttons for selecting autoship options
Moderate
Accessibility & Input Ergonomics
The Problem
The radio buttons for 'Compra única' and 'Autoship' options appear to be approximately 16x16 pixels or slightly larger, which is smaller than the recommended 44x44 pixels touch target size.
Why it Matters
Small targets make it harder for users, especially those with motor impairments, to accurately select the option, leading to frustration and potential errors.
How to Fix
Increase the tap target size of the radio buttons to at least 44x44 pixels without decreasing visual size, by adding padding or margin around these interactive elements.
Issue Highlights
Small toggle buttons for autoship frequency selection
Moderate
Accessibility & Input Ergonomics
The Problem
The autoship frequency selection buttons ('Cada 2 semanas', 'Cada 4 semanas', 'Cada 6 semanas', 'Cada 8 semanas') appear smaller than the recommended 44x44 pixels for touch targets.
Why it Matters
Small buttons increase the risk of inaccurate taps and reduce usability for users with limited dexterity or on small screens.
How to Fix
Increase the height and width of these buttons to at least 44x44 pixels and ensure sufficient spacing between them.
Issue Highlights
Small pagination image selection buttons
Moderate
Accessibility & Input Ergonomics
The Problem
The small thumbnail buttons below the main product image, used for selecting images (highlighted by orange border), appear to be less than 40x40 pixels, which may be too small for comfortable touch interaction.
Why it Matters
Small image selection targets increase difficulty for users to tap accurately, especially on mobile devices or for users with motor limitations.
How to Fix
Increase the size of these thumbnail buttons and add sufficient padding around each to ensure a tap target of at least 44x44 pixels.
Issue Highlights
Multiple subscription frequency options add unnecessary micro-decisions
Moderate
Efficiency & Cognitive Load
The Problem
The autoship option requires selecting a frequency from four choices: every 2, 4, 6, or 8 weeks before activating the subscription, creating multiple small steps.
Why it Matters
This adds cognitive load and can slow down the purchase process as users need to evaluate several options before continuing.
How to Fix
Limit frequency options to fewer, more meaningful choices or offer a default frequency with an easy way to change later during the checkout flow.
Issue Highlights
Missing Image Available State or Alternative Visual
Moderate
Flow & States Completeness
The Problem
The main product image area shows a placeholder with 'Imagen no disponible' indicating no image is available, with no alternative details or additional visuals to help the user evaluate the product.
Why it Matters
Users rely heavily on product images to make purchasing decisions. Lack of an image or an alternate visual can reduce trust and increase uncertainty about the product.
How to Fix
Add a secondary product image, better placeholder with product illustration, or additional visual information to help users understand the product despite missing photos.
Issue Highlights
Low contrast on footer links
Moderate
Color & Contrast
The Problem
The footer links and some small text at the bottom of the page are displayed in a medium gray color on a black/dark background, resulting in insufficient contrast.
Why it Matters
Users may struggle to read footer navigation and information, which can impede access to site policies, contact information, and payment method details.
How to Fix
Increase the brightness of the footer text or lighten the background color to ensure at least WCAG AA contrast ratio of 4.5:1 for normal text.
Issue Highlights
Unlabeled Numeric Value '13.0x' in Autoship Summary
Moderate
Content Readability & Clarity
The Problem
The multiplier figure '13.0x' shown under annual deliveries is unlabeled and ambiguous in meaning.
Why it Matters
Users may be confused by this number, unsure if it represents shipment count, savings factor, or something else.
How to Fix
Add a clear label explaining '13.0x' means number of deliveries per year or similar context.
Issue Highlights
Multiple small clickable icons and options crowded in page header
Moderate
Navigation & Structure
The Problem
The header area includes several small clickable items such as 'Puntos', cart icon, user icon, notification bell, and WhatsApp contact info placed closely together with small spacing.
Why it Matters
This dense grouping can cause users to misclick or overlook important functions, harming usability especially on smaller screens or for users with accessibility needs.
How to Fix
Increase spacing between clickable icons and group similar actions visually. Consider using tooltips or labels on hover for clarity.
Issue Highlights
Radio button and price text too close
Moderate
Accessibility & Input Ergonomics
The Problem
The radio button for 'Autoship' and the associated price text (S/ 127.42) are spaced very closely horizontally, increasing the chance of accidental taps on the wrong element.
Why it Matters
Closely spaced clickable elements can cause input errors, reducing efficiency and increasing user frustration.
How to Fix
Add horizontal spacing of at least 8-10 pixels between the radio button and price text to prevent overlapping tap areas.
Issue Highlights
Manual toggle between 'Compra única' and 'Autoship' options
Moderate
Efficiency & Cognitive Load
The Problem
Users must explicitly select either a one-time purchase or autoship before proceeding, adding a decision point that may not be necessary initially.
Why it Matters
This choice interrupts the purchase flow and forces users to consider subscription without clear immediate benefit.
How to Fix
Present the default as one-time purchase with an optional upsell to autoship post-add to cart or in checkout to reduce front-end decisions.
Issue Highlights
Autoship savings information lacks visual differentiation
Moderate
Strategic Design
The Problem
The autoship pricing and discounts area uses a similar text style and background color for both one-time purchase and autoship options, making it visually less distinct.
Why it Matters
Users may overlook the autoship savings opportunity if the interface does not clearly differentiate pricing options and savings benefits.
How to Fix
Use stronger visual hierarchy such as accent colors, borders, or icons to highlight autoship savings and differentiate it clearly from the one-time purchase price.
Issue Highlights
Review Section Lacks Guidance on Writing the First Review
Moderate
Flow & States Completeness
The Problem
The reviews area states 'Aún no hay reviews' inviting users to be the first to share their experience but provides no next action or prominent call to action to write a review.
Why it Matters
Without clear next steps or encouragement, users may not know how or where to add a review, potentially reducing user engagement and review generation.
How to Fix
Add a clear, prominent button or link that navigates users directly to the review submission form or expands it visibly to encourage first reviews.
Issue Highlights
Icons in benefit features block missing descriptive labels
Minor
Visual Consistency, Imagery & Media
The Problem
The four icon blocks for features like 'Envío gratis' and 'Garantía satisfacción' rely only on icons above the text with no additional accessible labels or tooltips.
Why it Matters
Icons without labels can be ambiguous or unclear to some users, impacting usability and clarity.
How to Fix
Add accessible text labels, tooltips, or ARIA attributes to the icons to clearly describe their meaning.
Issue Highlights
Different background colors and font weights in autoship option badges
Minor
Visual Consistency, Imagery & Media
The Problem
The 'AUTOSHIP' badges above pricing use different background colors and font weights, which reduces visual consistency in the component set for options.
Why it Matters
Inconsistent styles reduce UI cohesion and can confuse users when distinguishing between options.
How to Fix
Unify the background and font styling for all autoship badges to follow a single consistent design pattern.
Issue Highlights
Excessive informational blocks around autoship details add clutter
Minor
Efficiency & Cognitive Load
The Problem
The autoship section contains multiple blocks of pricing comparisons, savings details, and delivery counts, which visually overwhelm the core purchase action.
Why it Matters
This layout can distract users from the main call to action and make the decision more complex than needed.
How to Fix
Condense autoship savings and delivery info into a compact summary or tooltip to reduce on-screen clutter.
Issue Highlights